MarkTraceur has uploaded a new change for review. https://gerrit.wikimedia.org/r/111372
Change subject: Refactor button things into a separate class ...................................................................... Refactor button things into a separate class https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/124 Change-Id: Ib4b54164bccbe17e42b223880179531e8d9e6123 --- M MultimediaViewer.php M resources/mmv/mmv.css M resources/mmv/mmv.js M resources/mmv/mmv.lightboxinterface.js R resources/mmv/ui/img/mw-close.svg R resources/mmv/ui/img/mw-defullscreen-ltr.svg R resources/mmv/ui/img/mw-defullscreen-rtl.svg R resources/mmv/ui/img/mw-fullscreen-ltr.svg R resources/mmv/ui/img/mw-fullscreen-rtl.svg R resources/mmv/ui/img/next-ltr.svg R resources/mmv/ui/img/next-rtl.svg R resources/mmv/ui/img/prev-ltr.svg R resources/mmv/ui/img/prev-rtl.svg A resources/mmv/ui/mmv.ui.buttons.js A resources/mmv/ui/mmv.ui.buttons.less M tests/qunit/mmv.lightboxinterface.test.js 16 files changed, 158 insertions(+), 122 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer refs/changes/72/111372/1 diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 6942735..0455c63 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -84,6 +84,7 @@ 'dependencies' => array( 'oojs', 'multilightbox.interface', + 'mmv.ui.buttons', 'mmv.ui.categories', 'mmv.ui.description', 'mmv.ui.fileUsage', @@ -248,6 +249,21 @@ ), ), $moduleInfo( 'mmv/ui' ) ); + $wgResourceModules['mmv.ui.buttons'] = array_merge( array( + 'scripts' => array( + 'mmv.ui.buttons.js', + ), + + 'styles' => array( + 'mmv.ui.buttons.less', + ), + + 'dependencies' => array( + 'mmv.ui', + 'oojs', + ), + ), $moduleInfo( 'mmv/ui' ) ); + $wgResourceModules['mmv'] = array_merge( array( 'scripts' => array( 'mmv.js', diff --git a/resources/mmv/mmv.css b/resources/mmv/mmv.css index f88f176..ccbeeb6 100644 --- a/resources/mmv/mmv.css +++ b/resources/mmv/mmv.css @@ -93,52 +93,9 @@ background-color: rgb(0,0,0); } -.mlb-close, -.mlb-fullscreen { - right: 5px; - left: auto; - transition: opacity 0.25s; - background-position: center; -} - -.mlb-close { - top: 5px; - /* @embed */ - background-image: url(img/mw-close.svg); -} - -.mlb-fullscreen { - top: 42px; - /* @embed */ - background-image: url(img/mw-fullscreen-ltr.svg); -} - .jq-fullscreened .mlb-fullscreen { /* @embed */ background-image: url(img/mw-defullscreen-ltr.svg); -} - -.mlb-close, -.mlb-fullscreen, -.mw-mlb-next-image, -.mw-mlb-prev-image { - position: fixed; - background-repeat: no-repeat; - opacity: 0.8; -} - -.mlb-close:hover, -.mw-mlb-next-image:hover, -.mw-mlb-prev-image:hover { - opacity: 1; -} - -.mlb-close, -.mlb-fullscreen, -.mw-mlb-next-image, -.mw-mlb-prev-image { - border: none; - z-index: 1003; } .mw-mlb-license, @@ -316,43 +273,6 @@ body.mw-mlb-lightbox-open #content { /** Stop the article from scrolling in the background */ display: none; -} - -.mw-mlb-next-image, -.mw-mlb-prev-image { - top: -999px; - width: 80px; - height: 120px; - cursor: pointer; - transition: opacity 0.25s, margin 0.25s; -} - -.mw-mlb-next-image:hover { - margin-right: -4px; -} - -.mw-mlb-prev-image:hover { - margin-left: -4px; -} - -.mw-mlb-next-image { - /* @embed */ - background-image: url(img/next-ltr.svg); - background-position: right; - right: 18px; -} - -.mw-mlb-prev-image { - /* @embed */ - background-image: url(img/prev-ltr.svg); - background-position: left; - left: 18px; -} - -.mw-mlb-next-image.disabled, -.mw-mlb-prev-image.disabled { - display: none; - cursor: none; } .mw-mlb-drag-affordance { diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js index 0450662..76076e9 100755 --- a/resources/mmv/mmv.js +++ b/resources/mmv/mmv.js @@ -195,8 +195,8 @@ // Register various event hooks. TODO: Make this a function that's only called once. lightboxHooks.register( 'closeInterface', function () { - if ( this.$nextButton ) { - this.$nextButton.add( this.$prevButton ).css( 'top', '-999px' ); + if ( this.buttons.$next ) { + this.buttons.$next.add( this.buttons.$prev ).css( 'top', '-999px' ); } $( document.body ).removeClass( 'mw-mlb-lightbox-open' ); @@ -370,18 +370,18 @@ ui.$postDiv.css( 'top', ui.$imageWrapper.height() ); - ui.$nextButton.add( ui.$prevButton ).css( { + ui.buttons.$next.add( ui.buttons.$prev ).css( { top: prevNextTop } ); - ui.$nextButton.toggleClass( 'disabled', this.lightbox.currentIndex >= ( ( this.lightbox.images ? this.lightbox.images.length : 0 ) - 1 ) ); - ui.$prevButton.toggleClass( 'disabled', this.lightbox.currentIndex <= 0 ); + ui.buttons.$next.toggleClass( 'disabled', this.lightbox.currentIndex >= ( ( this.lightbox.images ? this.lightbox.images.length : 0 ) - 1 ) ); + ui.buttons.$prev.toggleClass( 'disabled', this.lightbox.currentIndex <= 0 ); }; MMVP.registerLogging = function () { var viewer = this; - this.ui.$closeButton.click( function () { + this.ui.buttons.$close.click( function () { if ( viewer.ui.$dialog ) { viewer.ui.$dialog.dialog( 'close' ); } @@ -389,7 +389,7 @@ viewer.log( 'close-link-click' ); } ); - this.ui.$fullscreenButton.click( function () { + this.ui.buttons.$fullscreen.click( function () { if ( viewer.ui.isFullscreen ) { viewer.log( 'fullscreen-link-click' ); } else { @@ -671,6 +671,14 @@ this.lightbox.iface.load( image ); } + this.lightbox.iface.buttons.$next.click( function () { + viewer.nextImage(); + } ); + + this.lightbox.iface.buttons.$prev.click( function () { + viewer.prevImage(); + } ); + $( document.body ).addClass( 'mw-mlb-lightbox-open' ); mdpid = this.profileStart( 'metadata-fetch' ); diff --git a/resources/mmv/mmv.lightboxinterface.js b/resources/mmv/mmv.lightboxinterface.js index 13a5261..3c9b751 100644 --- a/resources/mmv/mmv.lightboxinterface.js +++ b/resources/mmv/mmv.lightboxinterface.js @@ -137,8 +137,7 @@ ui.viewer.log( 'site-link-click' ); } ); - this.initializeNavigation(); - this.initializeButtons(); + this.buttons = new mw.mmv.ui.Buttons( this.$imageWrapper, this.$closeButton, this.$fullscreenButton ); this.initializeImage(); this.$imageDiv.click( function ( e ) { if ( e.target.nodeName !== 'IMG' ) { @@ -147,40 +146,9 @@ } ); }; - LIP.initializeButtons = function () { - // Note we aren't adding the fullscreen button here. - // Fullscreen causes some funky issues with UI redraws, - // and we aren't sure why, but it's not really necessary - // with the new interface anyway - it's basically fullscreen - // already! - this.$closeButton - .add( this.$fullscreenButton ) - .add( this.$nextButton ) - .add( this.$prevButton ) - .appendTo( this.$imageWrapper ); - }; - LIP.initializeImage = function () { this.$imageDiv .addClass( 'empty' ); - }; - - LIP.initializeNavigation = function () { - var viewer = this.viewer; - - this.$nextButton = $( '<div>' ) - .addClass( 'mw-mlb-next-image disabled' ) - .html( ' ' ) - .click( function () { - viewer.nextImage(); - } ); - - this.$prevButton = $( '<div>' ) - .addClass( 'mw-mlb-prev-image disabled' ) - .html( ' ' ) - .click( function () { - viewer.prevImage(); - } ); }; /** diff --git a/resources/mmv/img/mw-close.svg b/resources/mmv/ui/img/mw-close.svg similarity index 100% rename from resources/mmv/img/mw-close.svg rename to resources/mmv/ui/img/mw-close.svg diff --git a/resources/mmv/img/mw-defullscreen-ltr.svg b/resources/mmv/ui/img/mw-defullscreen-ltr.svg similarity index 100% rename from resources/mmv/img/mw-defullscreen-ltr.svg rename to resources/mmv/ui/img/mw-defullscreen-ltr.svg diff --git a/resources/mmv/img/mw-defullscreen-rtl.svg b/resources/mmv/ui/img/mw-defullscreen-rtl.svg similarity index 100% rename from resources/mmv/img/mw-defullscreen-rtl.svg rename to resources/mmv/ui/img/mw-defullscreen-rtl.svg diff --git a/resources/mmv/img/mw-fullscreen-ltr.svg b/resources/mmv/ui/img/mw-fullscreen-ltr.svg similarity index 100% rename from resources/mmv/img/mw-fullscreen-ltr.svg rename to resources/mmv/ui/img/mw-fullscreen-ltr.svg diff --git a/resources/mmv/img/mw-fullscreen-rtl.svg b/resources/mmv/ui/img/mw-fullscreen-rtl.svg similarity index 100% rename from resources/mmv/img/mw-fullscreen-rtl.svg rename to resources/mmv/ui/img/mw-fullscreen-rtl.svg diff --git a/resources/mmv/img/next-ltr.svg b/resources/mmv/ui/img/next-ltr.svg similarity index 100% rename from resources/mmv/img/next-ltr.svg rename to resources/mmv/ui/img/next-ltr.svg diff --git a/resources/mmv/img/next-rtl.svg b/resources/mmv/ui/img/next-rtl.svg similarity index 100% rename from resources/mmv/img/next-rtl.svg rename to resources/mmv/ui/img/next-rtl.svg diff --git a/resources/mmv/img/prev-ltr.svg b/resources/mmv/ui/img/prev-ltr.svg similarity index 100% rename from resources/mmv/img/prev-ltr.svg rename to resources/mmv/ui/img/prev-ltr.svg diff --git a/resources/mmv/img/prev-rtl.svg b/resources/mmv/ui/img/prev-rtl.svg similarity index 100% rename from resources/mmv/img/prev-rtl.svg rename to resources/mmv/ui/img/prev-rtl.svg diff --git a/resources/mmv/ui/mmv.ui.buttons.js b/resources/mmv/ui/mmv.ui.buttons.js new file mode 100644 index 0000000..b3db33f --- /dev/null +++ b/resources/mmv/ui/mmv.ui.buttons.js @@ -0,0 +1,52 @@ +/* + * This file is part of the MediaWiki extension MultimediaViewer. + * + * MultimediaViewer is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 2 of the License, or + * (at your option) any later version. + * + * MultimediaViewer is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>. + */ + +( function ( mw, $, oo ) { + // Prototype shortcut for later + var BP; + + /** + * @class mw.mmv.ui.Buttons + * @extends mw.mmv.ui.Element + * Represents the buttons in the interface - next, previous, close, and fullscreen. + * @constructor + */ + function Buttons( $container, $closeButton, $fullscreenButton ) { + mw.mmv.ui.Element.call( this, $container ); + + this.$close = $closeButton; + this.$fullscreen = $fullscreenButton; + + this.$next = $( '<div>' ) + .addClass( 'mw-mlb-next-image disabled' ) + .html( ' ' ); + + this.$prev = $( '<div>' ) + .addClass( 'mw-mlb-prev-image disabled' ) + .html( ' ' ); + + this.$close + .add( this.$fullscreen ) + .add( this.$next ) + .add( this.$prev ) + .appendTo( this.$container ); + } + + oo.inheritClass( Buttons, mw.mmv.ui.Element ); + + mw.mmv.ui.Buttons = Buttons; +}( mediaWiki, jQuery, OO ) ); diff --git a/resources/mmv/ui/mmv.ui.buttons.less b/resources/mmv/ui/mmv.ui.buttons.less new file mode 100644 index 0000000..42f7aa7 --- /dev/null +++ b/resources/mmv/ui/mmv.ui.buttons.less @@ -0,0 +1,72 @@ +@navbutton-width: 18px; + +.mlb-close, +.mlb-fullscreen, +.mw-mlb-next-image, +.mw-mlb-prev-image { + position: fixed; + background-repeat: no-repeat; + opacity: 0.8; + border: none; + z-index: 1003; + + &:hover { + opacity: 1; + } +} + +.mlb-close, +.mlb-fullscreen { + right: 5px; + left: auto; + transition: opacity 0.25s; + background-position: center; +} + +.mw-mlb-next-image, +.mw-mlb-prev-image { + top: -999px; + width: 80px; + height: 120px; + cursor: pointer; + transition: opacity 0.25s, margin 0.25s; + + &.disabled { + display: none; + cursor: none; + } +} + +.mlb-close { + top: 5px; + /* @embed */ + background-image: url(img/mw-close.svg); +} + +.mlb-fullscreen { + top: 42px; + /* @embed */ + background-image: url(img/mw-fullscreen-ltr.svg); +} + +.mw-mlb-next-image { + /* @embed */ + background-image: url(img/next-ltr.svg); + background-position: right; + right: @navbutton-width; + + &:hover { + margin-right: -4px; + } +} + +.mw-mlb-prev-image { + /* @embed */ + background-image: url(img/prev-ltr.svg); + background-position: left; + left: @navbutton-width; + + &:hover { + margin-left: -4px; + } +} diff --git a/tests/qunit/mmv.lightboxinterface.test.js b/tests/qunit/mmv.lightboxinterface.test.js index 898e223..55a76c5 100644 --- a/tests/qunit/mmv.lightboxinterface.test.js +++ b/tests/qunit/mmv.lightboxinterface.test.js @@ -67,12 +67,12 @@ assert.strictEqual( lightbox.panel.$imageMetadata.is( ':visible' ) , true, 'Image metadata is visible' ); // Entering fullscreen - lightbox.$fullscreenButton.click(); + lightbox.buttons.$fullscreen.click(); assert.strictEqual( lightbox.panel.$imageMetadata.is( ':visible' ) , false, 'Image metadata is hidden' ); // Exiting fullscreen - lightbox.$fullscreenButton.click(); + lightbox.buttons.$fullscreen.click(); assert.strictEqual( lightbox.panel.$imageMetadata.is( ':visible' ) , true, 'Image metadata is visible' ); -- To view, visit https://gerrit.wikimedia.org/r/111372 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ib4b54164bccbe17e42b223880179531e8d9e6123 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: MarkTraceur <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
