jenkins-bot has submitted this change and it was merged. 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.js M resources/mmv/mmv.less 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 resources/mmv/ui/mmv.ui.fileReuse.js M tests/qunit/mmv.lightboxinterface.test.js 17 files changed, 307 insertions(+), 238 deletions(-) Approvals: Gilles: Looks good to me, approved jenkins-bot: Verified diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 8612943..704a781 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -88,6 +88,7 @@ 'dependencies' => array( 'oojs', 'multilightbox.interface', + 'mmv.ui.buttons', 'mmv.ui.categories', 'mmv.ui.description', 'mmv.ui.fileUsage', @@ -316,6 +317,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.logger'] = array_merge( array( 'scripts' => array( 'mmv.logger.js', diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js index 8065ffa..b3ee363 100755 --- a/resources/mmv/mmv.js +++ b/resources/mmv/mmv.js @@ -173,10 +173,6 @@ // 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' ); - } - $( document.body ).removeClass( 'mw-mlb-lightbox-open' ); if ( comingFromPopstate === false ) { history.pushState( {}, '', '#' ); @@ -283,26 +279,6 @@ this.ui.updateControls( showNextButton, showPreviousButton ); }; - MMVP.registerLogging = function () { - var viewer = this; - - this.ui.$closeButton.click( function () { - if ( viewer.ui.$dialog ) { - viewer.ui.$dialog.dialog( 'close' ); - } - - mw.mmv.logger.log( 'close-link-click' ); - } ); - - this.ui.$fullscreenButton.click( function () { - if ( viewer.ui.isFullscreen ) { - mw.mmv.logger.log( 'fullscreen-link-click' ); - } else { - mw.mmv.logger.log( 'defullscreen-link-click' ); - } - } ); - }; - /** * @method * Loads and sets the image specified in the imageData. It also updates the controls @@ -371,6 +347,14 @@ this.lightbox.iface.load( image ); } + this.lightbox.iface.$imageWrapper.on( 'mmv-next', function () { + viewer.nextImage(); + } ); + + this.lightbox.iface.$imageWrapper.on( 'mmv-prev', function () { + viewer.prevImage(); + } ); + $( document.body ).addClass( 'mw-mlb-lightbox-open' ); imageWidths = this.ui.getImageSizeApiArgs(); diff --git a/resources/mmv/mmv.less b/resources/mmv/mmv.less index 4aacd87..0dbfd5f 100644 --- a/resources/mmv/mmv.less +++ b/resources/mmv/mmv.less @@ -135,48 +135,9 @@ background-color: rgb(0,0,0); } -@buttons-offset: 5px; - -.mlb-close, -.mlb-fullscreen { - right: @buttons-offset; - left: auto; - transition: opacity 0.25s; - background-position: center; -} - -.mlb-close { - top: @buttons-offset; - /* @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; - border: none; - z-index: 1003; -} - -.mlb-close:hover, -.mw-mlb-next-image:hover, -.mw-mlb-prev-image:hover { - opacity: 1; } .mw-mlb-license, @@ -357,44 +318,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; - - &.disabled { - display: none; - cursor: none; - } -} - -@nav-offset: 18px; - -.mw-mlb-next-image { - /* @embed */ - background-image: url(img/next-ltr.svg); - background-position: right; - right: @nav-offset; - - &:hover { - margin-right: -4px; - } -} - -.mw-mlb-prev-image { - /* @embed */ - background-image: url(img/prev-ltr.svg); - background-position: left; - left: @nav-offset; - - &:hover { - margin-left: -4px; - } } .mw-mlb-drag-affordance { diff --git a/resources/mmv/mmv.lightboxinterface.js b/resources/mmv/mmv.lightboxinterface.js index 116db9a..27ba9ad 100644 --- a/resources/mmv/mmv.lightboxinterface.js +++ b/resources/mmv/mmv.lightboxinterface.js @@ -109,7 +109,7 @@ // Buttons fading might not had been reset properly after a hard fullscreen exit // This needs to happen after the parent attach() because the buttons need to be attached // to the DOM for $.fn.stop() to work - this.stopButtonsFade(); + this.buttons.stopFade(); }; LIP.unattach = function () { @@ -120,6 +120,8 @@ $.scrollTo( this.scrollTopBeforeAttach, 0 ); this.scrollTopBeforeAttach = undefined; } + + this.panel.fileReuse.closeDialog(); }; LIP.load = function ( image ) { @@ -127,7 +129,6 @@ ui = this; this.viewer.ui = this; - this.viewer.registerLogging(); if ( !this.comingFromPopstate ) { history.pushState( {}, '', hashFragment ); @@ -145,46 +146,13 @@ LIP.initializeInterface = function () { this.panel = new mw.mmv.ui.MetadataPanel( this.$postDiv, this.$controlBar ); - - this.initializeNavigation(); - this.initializeButtons(); + this.buttons = new mw.mmv.ui.Buttons( this.$imageWrapper, this.$closeButton, this.$fullscreenButton ); this.initializeImage(); - }; - - 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.$buttons = 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(); - } ); }; LIP.replaceImageWith = function ( imageEle ) { @@ -220,7 +188,7 @@ // the fade out really takes place (otherwise it's cancelled // by updateControls which is called a few times when fullscreen opens) this.mousePosition = { x: 0, y: 0 }; - this.fadeOutButtons(); + this.buttons.fadeOut(); } }; @@ -261,86 +229,12 @@ // Saving the mouse position is useful whenever we need to // run LIP.mousemove manually, such as when going to the next/prev // element - this.mousePosition = { x: e.pageX, y: e.pageY}; + this.mousePosition = { x: e.pageX, y: e.pageY }; } - this.revealButtonsAndFadeIfNeeded(); - }; - - /** - * @method - * Reveals all active buttons and schedule a fade out if needed - */ - LIP.revealButtonsAndFadeIfNeeded = function () { - // Only fullscreen mode sees its buttons fade out when not used - if ( !this.isFullscreen ) { - return; + if ( this.isFullscreen ) { + this.buttons.revealAndFade( this.mousePosition ); } - - if ( this.buttonsFadeTimeout ) { - clearTimeout( this.buttonsFadeTimeout ); - } - - // Stop ongoing animations and make sure the buttons that need to be displayed are displayed - this.stopButtonsFade(); - - // this.mousePosition can be empty, for instance when we enter fullscreen and haven't - // recorded a real mousemove event yet - if ( !this.mousePosition - || !this.isAnyActiveButtonHovered( this.mousePosition.x, this.mousePosition.y ) ) { - this.fadeOutButtons(); - } - }; - - /** - * @method - * Fades out the active buttons - */ - LIP.fadeOutButtons = function () { - var ui = this; - - // We don't use animation chaining because delay() can't be stop()ed - this.buttonsFadeTimeout = setTimeout( function() { - ui.$buttons.not( '.disabled' ).animate( { opacity: 0 }, 1000 ); - }, 1500 ); - }; - - /** - * @method - * Stops the fading animation of the buttons and cancel any opacity value - */ - LIP.stopButtonsFade = function () { - this.$buttons - .stop( true ) - .css( 'opacity', '' ); - }; - - /** - * @method - * Checks if any active buttons are currently hovered, given a position - * @param {number} x The horizontal coordinate of the position - * @param {number} y The vertical coordinate of the position - * @return bool - */ - LIP.isAnyActiveButtonHovered = function ( x, y ) { - // We don't use mouseenter/mouseleave events because content is subject - // to change underneath the cursor, eg. when entering fullscreen or - // when going prev/next (the button can disappear when reaching ends) - var hovered = false; - - this.$buttons.not( '.disabled' ).each( function( idx, e ) { - var $e = $( e ), - offset = $e.offset(); - - if ( y >= offset.top - && y <= offset.top + $e.height() - && x >= offset.left - && x <= offset.left + $e.width() ) { - hovered = true; - } - } ); - - return hovered; }; /** @@ -358,14 +252,12 @@ this.$postDiv.css( 'top', this.$imageWrapper.height() ); } - this.$nextButton.add( this.$prevButton ).css( { - top: prevNextTop - } ); + this.buttons.setOffset( prevNextTop ); + this.buttons.toggle( showPrevButton, showNextButton ); - this.$nextButton.toggleClass( 'disabled', !showPrevButton ); - this.$prevButton.toggleClass( 'disabled', !showNextButton ); - - this.revealButtonsAndFadeIfNeeded(); + if ( this.isFullscreen ) { + this.buttons.revealAndFade( this.mousePosition ); + } }; /** 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..a8eb978 --- /dev/null +++ b/resources/mmv/ui/mmv.ui.buttons.js @@ -0,0 +1,172 @@ +/* + * 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 ) { + /** + * @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 ) { + var buttons = this; + + 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.$nav = this.$next + .add( this.$prev ); + + this.$buttons = this.$close + .add( this.$fullscreen ) + .add( this.$next ) + .add( this.$prev ); + + this.$buttons.appendTo( this.$container ); + + lightboxHooks.register( 'closeInterface', function () { + buttons.$nav.addClass( 'disabled' ); + } ); + + $( document ).on( 'jq-fullscreen-change.lip', function ( e ) { + if ( e.fullscreen ) { + mw.mmv.logger.log( 'fullscreen-link-click' ); + } else { + mw.mmv.logger.log( 'defullscreen-link-click' ); + } + } ); + + this.$close.click( function () { + mw.mmv.logger.log( 'close-link-click' ); + + $container.trigger( $.Event( 'mmv-close' ) ); + } ); + + this.$fullscreen.click( function () { + $container.trigger( $.Event( 'mmv-fullscreen' ) ); + } ); + + this.$next.click( function () { + $container.trigger( $.Event( 'mmv-next' ) ); + } ); + + this.$prev.click( function () { + $container.trigger( $.Event( 'mmv-prev' ) ); + } ); + } + + oo.inheritClass( Buttons, mw.mmv.ui.Element ); + + /** + * Sets the top offset for the navigation buttons. + * @param {number} offset + */ + Buttons.prototype.setOffset = function ( offset ) { + this.$nav.css( { + top: offset + } ); + }; + + /** + * Stops the fading animation of the buttons and cancel any opacity value + */ + Buttons.prototype.stopFade = function () { + this.$buttons + .stop( true ) + .css( 'opacity', '' ); + }; + + /** + * Toggles buttons being disabled or not + * @param {boolean} showPrevButton + * @param {boolean} showNextButton + */ + Buttons.prototype.toggle = function ( showPrevButton, showNextButton ) { + this.$next.toggleClass( 'disabled', !showPrevButton ); + this.$prev.toggleClass( 'disabled', !showNextButton ); + }; + + /** + * Fades out the active buttons + */ + Buttons.prototype.fadeOut = function () { + var buttons = this; + + // We don't use animation chaining because delay() can't be stop()ed + this.buttonsFadeTimeout = setTimeout( function() { + buttons.$buttons.not( '.disabled' ).animate( { opacity: 0 }, 1000 ); + }, 1500 ); + }; + + /** + * Checks if any active buttons are currently hovered, given a position + * @param {number} x The horizontal coordinate of the position + * @param {number} y The vertical coordinate of the position + * @return bool + */ + Buttons.prototype.isAnyActiveButtonHovered = function ( x, y ) { + // We don't use mouseenter/mouseleave events because content is subject + // to change underneath the cursor, eg. when entering fullscreen or + // when going prev/next (the button can disappear when reaching ends) + var hovered = false; + + this.$buttons.not( '.disabled' ).each( function( idx, e ) { + var $e = $( e ), + offset = $e.offset(); + + if ( y >= offset.top + && y <= offset.top + $e.height() + && x >= offset.left + && x <= offset.left + $e.width() ) { + hovered = true; + } + } ); + + return hovered; + }; + + /** + * Reveals all active buttons and schedule a fade out if needed + */ + Buttons.prototype.revealAndFade = function ( mousePosition ) { + if ( this.buttonsFadeTimeout ) { + clearTimeout( this.buttonsFadeTimeout ); + } + + // Stop ongoing animations and make sure the buttons that need to be displayed are displayed + this.stopFade(); + + // mousePosition can be empty, for instance when we enter fullscreen and haven't + // recorded a real mousemove event yet + if ( !mousePosition + || !this.isAnyActiveButtonHovered( mousePosition.x, mousePosition.y ) ) { + this.fadeOut(); + } + }; + + 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..2e7267e --- /dev/null +++ b/resources/mmv/ui/mmv.ui.buttons.less @@ -0,0 +1,73 @@ +@navbutton-width: 18px; +@buttons-offset: 5px; + +.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: @buttons-offset; + 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: @buttons-offset; + /* @embed */ + background-image: url(img/mw-close.svg); +} + +.mlb-fullscreen { + top: (@buttons-offset + 37px); + /* @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/resources/mmv/ui/mmv.ui.fileReuse.js b/resources/mmv/ui/mmv.ui.fileReuse.js index 46bf7f4..e2dd2cd 100644 --- a/resources/mmv/ui/mmv.ui.fileReuse.js +++ b/resources/mmv/ui/mmv.ui.fileReuse.js @@ -184,5 +184,14 @@ return false; }; + /** + * Closes the dialog forcefully + */ + FRP.closeDialog = function () { + if ( this.$dialog ) { + this.$dialog.dialog( 'close' ); + } + }; + mw.mmv.ui.FileReuse = FileReuse; }( mediaWiki, jQuery, OO ) ); diff --git a/tests/qunit/mmv.lightboxinterface.test.js b/tests/qunit/mmv.lightboxinterface.test.js index 4a8abf8..348506f 100644 --- a/tests/qunit/mmv.lightboxinterface.test.js +++ b/tests/qunit/mmv.lightboxinterface.test.js @@ -69,37 +69,37 @@ assert.ok( !lightbox.isFullscreen, 'Lightbox knows that it\'s not in fullscreen mode' ); assert.ok( lightbox.panel.$imageMetadata.is( ':visible' ), 'Image metadata is visible' ); - lightbox.fadeOutButtons = function() { + lightbox.buttons.fadeOut = function() { assert.ok( true, 'Opening fullscreen triggers a fadeout' ); }; // Pretend that the mouse cursor is on top of the button - buttonOffset = lightbox.$fullscreenButton.offset(); + buttonOffset = lightbox.buttons.$fullscreen.offset(); lightbox.mousePosition = { x: buttonOffset.left, y: buttonOffset.top }; // Enter fullscreen - lightbox.$fullscreenButton.click(); + lightbox.buttons.$fullscreen.click(); - lightbox.fadeOutButtons = $.noop; + lightbox.buttons.fadeOut = $.noop; assert.ok( lightbox.isFullscreen, 'Lightbox knows that it\'s in fullscreen mode' ); - oldRevealButtonsAndFadeIfNeeded = lightbox.revealButtonsAndFadeIfNeeded; + oldRevealButtonsAndFadeIfNeeded = lightbox.buttons.revealAndFade; - lightbox.revealButtonsAndFadeIfNeeded = function() { + lightbox.buttons.revealAndFade = function( position ) { assert.ok( true, 'Moving the cursor triggers a reveal + fade' ); - oldRevealButtonsAndFadeIfNeeded.call( this ); + oldRevealButtonsAndFadeIfNeeded.call( this, position ); }; // Pretend that the mouse cursor moved to the top-left corner lightbox.mousemove( { pageX: 0, pageY: 0 } ); - lightbox.revealButtonsAndFadeIfNeeded = $.noop; + lightbox.buttons.revealAndFadeIfNeeded = $.noop; assert.ok( !lightbox.panel.$imageMetadata.is( ':visible' ), 'Image metadata is hidden' ); - // Exit fullscreen - lightbox.$fullscreenButton.click(); + // Exiting fullscreen + lightbox.buttons.$fullscreen.click(); assert.ok( lightbox.panel.$imageMetadata.is( ':visible' ), 'Image metadata is visible' ); assert.ok( !lightbox.isFullscreen, 'Lightbox knows that it\'s not in fullscreen mode' ); @@ -117,26 +117,26 @@ // Attach lightbox to testing fixture to avoid interference with other tests. lightbox.attach( '#qunit-fixture' ); - $.each ( lightbox.$buttons, function ( idx, e ) { + $.each ( lightbox.buttons.$buttons, function ( idx, e ) { var $e = $( e ), offset = $e.show().offset(), width = $e.width(), height = $e.height(), disabled = $e.hasClass( 'disabled' ); - assert.strictEqual( lightbox.isAnyActiveButtonHovered( offset.left, offset.top ), + assert.strictEqual( lightbox.buttons.isAnyActiveButtonHovered( offset.left, offset.top ), !disabled, 'Hover detection works for top-left corner of element' ); - assert.strictEqual( lightbox.isAnyActiveButtonHovered( offset.left + width, offset.top ), + assert.strictEqual( lightbox.buttons.isAnyActiveButtonHovered( offset.left + width, offset.top ), !disabled, 'Hover detection works for top-right corner of element' ); - assert.strictEqual( lightbox.isAnyActiveButtonHovered( offset.left, offset.top + height ), + assert.strictEqual( lightbox.buttons.isAnyActiveButtonHovered( offset.left, offset.top + height ), !disabled, 'Hover detection works for bottom-left corner of element' ); - assert.strictEqual( lightbox.isAnyActiveButtonHovered( offset.left + width, offset.top + height ), + assert.strictEqual( lightbox.buttons.isAnyActiveButtonHovered( offset.left + width, offset.top + height ), !disabled, 'Hover detection works for bottom-right corner of element' ); - assert.strictEqual( lightbox.isAnyActiveButtonHovered( + assert.strictEqual( lightbox.buttons.isAnyActiveButtonHovered( offset.left + ( width / 2 ), offset.top + ( height / 2 ) ), !disabled, 'Hover detection works for center of element' ); -- To view, visit https://gerrit.wikimedia.org/r/111372 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ib4b54164bccbe17e42b223880179531e8d9e6123 Gerrit-PatchSet: 9 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: MarkTraceur <[email protected]> Gerrit-Reviewer: Gilles <[email protected]> Gerrit-Reviewer: MarkTraceur <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
