From 1ae138c9e762f4d617fd0b4555a53004caae592b Mon Sep 17 00:00:00 2001 From: Mark Holmquist Date: Tue, 8 Apr 2014 14:01:07 -0700 Subject: [PATCH] Open MMV on hash change on file pages, add link Change-Id: I4aa53d50bcd4880f341dfb59b7a451e2d5bda2ad --- MultimediaViewer.php | 4 ++++ MultimediaViewerHooks.php | 2 +- i18n/en.json | 3 ++- i18n/qqq.json | 4 ++-- resources/mmv/img/expand.svg | 31 +++++++++++++++++++++++++++ resources/mmv/mmv.bootstrap.js | 18 +++++++++++++++- resources/mmv/mmv.bootstrap.less | 13 +++++++++++ tests/qunit/mmv/mmv.bootstrap.test.js | 20 +++++++++++++++-- 8 files changed, 88 insertions(+), 7 deletions(-) create mode 100644 resources/mmv/img/expand.svg diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 31643a30c..3c588e846 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -686,6 +686,10 @@ $wgResourceModules += array( 'mmv.logger', 'mmv.HtmlUtils', ), + + 'messages' => array( + 'multimediaviewer-view-expanded', + ), ), 'mmv.bootstrap.autostart' => $wgMediaViewerResourceTemplate + array( diff --git a/MultimediaViewerHooks.php b/MultimediaViewerHooks.php index 82daf9dc7..7746cd6a3 100644 --- a/MultimediaViewerHooks.php +++ b/MultimediaViewerHooks.php @@ -76,7 +76,7 @@ class MultimediaViewerHooks { * @return bool */ public static function getModulesForArticle( &$out, &$skin ) { - if ( count( $out->getFileSearchOptions() ) > 0 ) { + if ( count( $out->getFileSearchOptions() ) > 0 || $out->getTitle()->inNamespace( NS_FILE ) ) { return self::getModules( $out ); } diff --git a/i18n/en.json b/i18n/en.json index 8b7ee2570..5dd10c72f 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -92,5 +92,6 @@ "multimediaviewer-feedback-popup-text": "Leave feedback about this new media viewing experience", "multimediaviewer-description-page-button-text": "More details", "multimediaviewer-description-page-popup-text": "More details on $1", - "multimediaviewer-commons-subtitle": "The free media repository" + "multimediaviewer-commons-subtitle": "The free media repository", + "multimediaviewer-view-expanded": "Expand view" } diff --git a/i18n/qqq.json b/i18n/qqq.json index 6b6fc3a09..0e72a0bc2 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -96,6 +96,6 @@ "multimediaviewer-feedback-popup-text": "Additional popup text of the button on top of the metadata panel which brings up a feedback survey.\n\nSee also:\n* {{msg-mw|Multimediaviewer-feedback-button-text}}", "multimediaviewer-description-page-button-text": "Text of the button on top of the metadata panel which links to the file description page.\n\nSee also:\n* {{msg-mw|Multimediaviewer-description-page-popup-text}}", "multimediaviewer-description-page-popup-text": "Additional popup text of the button on top of the metadata panel which links to the file description page.\n\nParameters:\n* $1 - the name of the site where the file comes from (e.g. \"Wikimedia Commons\")\nSee also:\n* {{msg-mw|Multimediaviewer-description-page-button-text}}.", - "multimediaviewer-commons-subtitle": "Additional text to display under {{mw-msg|multimediaviewer-repository}} when the image is from Commons." - + "multimediaviewer-commons-subtitle": "Additional text to display under {{mw-msg|multimediaviewer-repository}} when the image is from Commons.", + "multimediaviewer-view-expanded": "Label for a link on a file page to view the current image in the media viewer." } diff --git a/resources/mmv/img/expand.svg b/resources/mmv/img/expand.svg new file mode 100644 index 000000000..69f1d462d --- /dev/null +++ b/resources/mmv/img/expand.svg @@ -0,0 +1,31 @@ + + + +image/svg+xml + + + + + \ No newline at end of file diff --git a/resources/mmv/mmv.bootstrap.js b/resources/mmv/mmv.bootstrap.js index 8bbbecda8..162843eb4 100755 --- a/resources/mmv/mmv.bootstrap.js +++ b/resources/mmv/mmv.bootstrap.js @@ -43,7 +43,7 @@ this.thumbsReadyDeferred = $.Deferred(); this.thumbs = []; - this.$thumbs = $( '.gallery .image img, a.image img' ); + this.$thumbs = $( '.gallery .image img, a.image img, #file a img' ); this.processThumbs(); } @@ -159,6 +159,22 @@ caption = this.htmlUtils.htmlToTextWithLinks( $thumbCaption.html() || '' ); } + if ( $thumb.closest( '#file' ).length > 0 ) { + // This is a file page. Make adjustments. + link = $thumb.closest( 'a' ).prop( 'href' ); + + $( '

' ) + .append( + $link = $( '' ) + // It won't matter because we catch the click event anyway, but + // give the user some URL to see. + .prop( 'href', $thumb.closest( 'a' ).prop( 'href' ) ) + .addClass( 'mw-mmv-view-expanded' ) + .text( mw.message( 'multimediaviewer-view-expanded' ).text() ) + ) + .appendTo( $( '.fullMedia' ) ); + } + // This is the data that will be passed onto the mmv this.thumbs.push( { thumb : thumb, diff --git a/resources/mmv/mmv.bootstrap.less b/resources/mmv/mmv.bootstrap.less index 5eba0fd1c..b8c3abaa3 100644 --- a/resources/mmv/mmv.bootstrap.less +++ b/resources/mmv/mmv.bootstrap.less @@ -1,3 +1,5 @@ +@expand-link-border-color: #dddddd; + .mw-mmv-overlay { position: fixed; top: 0px; @@ -25,3 +27,14 @@ body.mw-mmv-lightbox-open > :not(.mw-mmv-overlay, .mw-mmv-wrapper) { /** Stop the article from scrolling in the background */ display: none; } + +.mw-mmv-view-expanded { + display: inline-block; + border: 1px solid @expand-link-border-color; + padding: 5px; + padding-left: 34px; + /* @embed */ + background-image: url('img/expand.svg'); + background-position: left; + background-repeat: no-repeat; +} diff --git a/tests/qunit/mmv/mmv.bootstrap.test.js b/tests/qunit/mmv/mmv.bootstrap.test.js index 6252b0422..f13930eec 100644 --- a/tests/qunit/mmv/mmv.bootstrap.test.js +++ b/tests/qunit/mmv/mmv.bootstrap.test.js @@ -57,9 +57,9 @@ } ); } ); - QUnit.test( 'Check viewer invoked when clicking on legit image links', 4, function ( assert ) { + QUnit.test( 'Check viewer invoked when clicking on legit image links', 7, function ( assert ) { // TODO: Is

valid ??? - var div, link, link2, link3, bootstrap, + var div, link, link2, link3, link4, bootstrap, viewer = { initWithThumbs : $.noop }; // Create gallery with legit link image @@ -74,9 +74,22 @@ link3 = $( '' ).addClass( 'noImage' ).appendTo( div ); $( '' ).attr( 'src', 'thumb3.jpg' ).appendTo( link3 ); + $( '
' ).addClass( 'fullMedia' ).appendTo( div ); + $( '' ).attr( 'src', 'thumb4.jpg' ).appendTo( + $( '' ) + .appendTo( + $( '
' ) + .attr( 'id', 'file' ) + .appendTo( '#qunit-fixture' ) + ) + ); + // Create a new bootstrap object to trigger the DOM scan, etc. bootstrap = createBootstrap( viewer ); + link4 = $( '.fullMedia .mw-mmv-view-expanded' ); + assert.ok( link4.length, 'Link for viewing expanded file was set up.' ); + bootstrap.setupOverlay = function () { assert.ok( true, 'Overlay was set up' ); }; @@ -91,6 +104,9 @@ // Click on legit link link2.trigger( { type : 'click', which : 1 } ); + // Click on legit link + link4.trigger( { type: 'click', which: 1 } ); + bootstrap.setupOverlay = function () { assert.ok( false, 'Overlay was not set up' ); };