From b2039ad7eb8a994d78ab45761d8dae405e729ac9 Mon Sep 17 00:00:00 2001 From: Mark Holmquist Date: Tue, 10 Jun 2014 13:39:10 -0700 Subject: [PATCH] Add "zoom" but really just view-file The zoom icon should get replaced Real Soon Now - looking at you, pginer Change-Id: I88c1d4fb95e034e0f2fe618eb7309754ea1c283e --- MultimediaViewer.php | 4 ++ i18n/en.json | 1 + resources/mmv/mmv.js | 4 ++ resources/mmv/ui/img/mw-open-control-ltr.svg | 52 ++++++++++++++++++ resources/mmv/ui/img/mw-open-control-rtl.svg | 53 +++++++++++++++++++ resources/mmv/ui/mmv.ui.canvasButtons.js | 11 +++- resources/mmv/ui/mmv.ui.canvasButtons.less | 30 +++++++++-- tests/qunit/mmv/mmv.lightboxinterface.test.js | 2 +- 8 files changed, 152 insertions(+), 5 deletions(-) create mode 100644 resources/mmv/ui/img/mw-open-control-ltr.svg create mode 100644 resources/mmv/ui/img/mw-open-control-rtl.svg diff --git a/MultimediaViewer.php b/MultimediaViewer.php index b35881959..0b23e9a3d 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -705,6 +705,10 @@ $wgResourceModules += array( 'mmv.ui', 'oojs', ), + + 'messages' => array( + 'multimediaviewer-viewfile-link', + ), ), 'mmv.logger' => $wgMediaViewerResourceTemplate + array( diff --git a/i18n/en.json b/i18n/en.json index 0b4c09b04..889c2f3e8 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -54,6 +54,7 @@ "multimediaviewer-fileusage-local-section": "On this site", "multimediaviewer-fileusage-global-section": "On other sites", "multimediaviewer-reuse-link": "Use this file", + "multimediaviewer-viewfile-link": "View original file", "multimediaviewer-reuse-loading-placeholder": "Loading…", "multimediaviewer-share-tab": "Share", "multimediaviewer-embed-tab": "Embed", diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js index c79ba9be5..3de1c7756 100755 --- a/resources/mmv/mmv.js +++ b/resources/mmv/mmv.js @@ -877,6 +877,10 @@ } else { return $.Deferred().reject(); } + } ).on( 'mmv-viewfile.mmvp', function () { + viewer.imageInfoProvider.get( viewer.currentImageFileTitle ).done( function ( imageInfo ) { + document.location = imageInfo.url; + } ); } ); }; diff --git a/resources/mmv/ui/img/mw-open-control-ltr.svg b/resources/mmv/ui/img/mw-open-control-ltr.svg new file mode 100644 index 000000000..ffe441b97 --- /dev/null +++ b/resources/mmv/ui/img/mw-open-control-ltr.svg @@ -0,0 +1,52 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/resources/mmv/ui/img/mw-open-control-rtl.svg b/resources/mmv/ui/img/mw-open-control-rtl.svg new file mode 100644 index 000000000..1bb420742 --- /dev/null +++ b/resources/mmv/ui/img/mw-open-control-rtl.svg @@ -0,0 +1,53 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/resources/mmv/ui/mmv.ui.canvasButtons.js b/resources/mmv/ui/mmv.ui.canvasButtons.js index aa0f05bad..de4c48ac5 100644 --- a/resources/mmv/ui/mmv.ui.canvasButtons.js +++ b/resources/mmv/ui/mmv.ui.canvasButtons.js @@ -36,6 +36,14 @@ this.$close = $closeButton; this.$fullscreen = $fullscreenButton; + this.$viewFile = $( '
' ) + .text( ' ' ) + .prop( 'title', mw.message( 'multimediaviewer-viewfile-link' ).text() ) + .addClass( 'mw-mmv-viewfile' ) + .click( function () { + $( document ).trigger( 'mmv-viewfile' ); + } ); + this.$next = $( '
' ) .addClass( 'mw-mmv-next-image disabled' ) .html( ' ' ); @@ -50,7 +58,8 @@ this.$buttons = this.$close .add( this.$fullscreen ) .add( this.$next ) - .add( this.$prev ); + .add( this.$prev ) + .add( this.$viewFile ); this.$buttons.appendTo( this.$container ); diff --git a/resources/mmv/ui/mmv.ui.canvasButtons.less b/resources/mmv/ui/mmv.ui.canvasButtons.less index 6e387168f..e30effb2f 100644 --- a/resources/mmv/ui/mmv.ui.canvasButtons.less +++ b/resources/mmv/ui/mmv.ui.canvasButtons.less @@ -1,3 +1,4 @@ +@import "../mmv.globals"; @import "../mmv.mixins"; @navbutton-width: 18px; @@ -5,6 +6,7 @@ .mw-mmv-close, .mw-mmv-fullscreen, +.mw-mmv-viewfile, .mw-mmv-next-image, .mw-mmv-prev-image { cursor: pointer; @@ -23,17 +25,23 @@ .mw-mmv-close.hidden, .mw-mmv-fullscreen.hidden, +.mw-mmv-viewfile.hidden, .mw-mmv-next-image.hidden, .mw-mmv-prev-image.hidden { display: none; } .cursor-hidden { - .mw-mmv-close, .mw-mmv-fullscreen, .mw-mmv-next-image, .mw-mmv-prev-image { + .mw-mmv-close, + .mw-mmv-fullscreen, + .mw-mmv-viewfile, + .mw-mmv-next-image, + .mw-mmv-prev-image { cursor: none; } } +.mw-mmv-viewfile, .mw-mmv-close, .mw-mmv-fullscreen { right: @buttons-offset; @@ -73,9 +81,25 @@ height: 22px; } -.jq-fullscreened .mw-mmv-fullscreen { +.mw-mmv-viewfile { + bottom: (@buttons-offset + @metadatabar-drag-height + @metadatabar-top-content-height); /* @embed */ - background-image: url(img/mw-defullscreen-ltr.svg); + background-image: url(img/mw-open-control-ltr.svg); + width: 23px; + height: 23px; + margin-bottom: 14px; +} + + +.jq-fullscreened { + .mw-mmv-fullscreen { + /* @embed */ + background-image: url(img/mw-defullscreen-ltr.svg); + } + + .mw-mmv-viewfile { + display: none; + } } .mw-mmv-next-image { diff --git a/tests/qunit/mmv/mmv.lightboxinterface.test.js b/tests/qunit/mmv/mmv.lightboxinterface.test.js index 00e477ccf..63f70abef 100644 --- a/tests/qunit/mmv/mmv.lightboxinterface.test.js +++ b/tests/qunit/mmv/mmv.lightboxinterface.test.js @@ -202,7 +202,7 @@ restoreScrollTo(); } ); - QUnit.test( 'isAnyActiveButtonHovered', 20, function ( assert ) { + QUnit.test( 'isAnyActiveButtonHovered', 25, function ( assert ) { var lightbox = new mw.mmv.LightboxInterface(); stubScrollTo();