jenkins-bot has submitted this change and it was merged.
Change subject: Extract metadata panel scroll/log/animate logic into separate
component
......................................................................
Extract metadata panel scroll/log/animate logic into separate component
Change-Id: I2441d64c094a9bfbae7a4712ff4c78efa13a62a7
---
M MultimediaViewer.php
M MultimediaViewerHooks.php
M resources/mmv/mmv.js
M resources/mmv/ui/mmv.ui.metadataPanel.js
M resources/mmv/ui/mmv.ui.metadataPanel.less
A resources/mmv/ui/mmv.ui.metadataPanelScroller.js
A resources/mmv/ui/mmv.ui.metadataPanelScroller.less
M tests/qunit/mmv/mmv.lightboxinterface.test.js
M tests/qunit/mmv/mmv.test.js
M tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
A tests/qunit/mmv/ui/mmv.ui.metadataPanelScroller.test.js
11 files changed, 406 insertions(+), 320 deletions(-)
Approvals:
Gilles: Looks good to me, approved
jenkins-bot: Verified
diff --git a/MultimediaViewer.php b/MultimediaViewer.php
index 5a3cc4a..6952143 100644
--- a/MultimediaViewer.php
+++ b/MultimediaViewer.php
@@ -452,10 +452,12 @@
'mmv.ui.metadataPanel' => $wgMediaViewerResourceTemplate + array(
'scripts' => array(
'mmv/ui/mmv.ui.metadataPanel.js',
+ 'mmv/ui/mmv.ui.metadataPanelScroller.js',
),
'styles' => array(
'mmv/ui/mmv.ui.metadataPanel.less',
+ 'mmv/ui/mmv.ui.metadataPanelScroller.less',
),
'dependencies' => array(
diff --git a/MultimediaViewerHooks.php b/MultimediaViewerHooks.php
index 754e9a6..466cf80 100644
--- a/MultimediaViewerHooks.php
+++ b/MultimediaViewerHooks.php
@@ -215,6 +215,7 @@
'tests/qunit/mmv/ui/mmv.ui.description.test.js',
'tests/qunit/mmv/ui/mmv.ui.fileUsage.test.js',
'tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js',
+
'tests/qunit/mmv/ui/mmv.ui.metadataPanelScroller.test.js',
'tests/qunit/mmv/ui/mmv.ui.progressBar.test.js',
'tests/qunit/mmv/ui/mmv.ui.permission.test.js',
'tests/qunit/mmv/ui/mmv.ui.stripeButtons.test.js',
diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js
index b561267..ef1acc8 100755
--- a/resources/mmv/mmv.js
+++ b/resources/mmv/mmv.js
@@ -327,7 +327,7 @@
return;
}
- viewer.ui.panel.animateMetadataOnce();
+ viewer.ui.panel.scroller.animateMetadataOnce();
viewer.preloadDependencies();
} );
diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js
b/resources/mmv/ui/mmv.ui.metadataPanel.js
index 7ee9710..b865987 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanel.js
+++ b/resources/mmv/ui/mmv.ui.metadataPanel.js
@@ -32,56 +32,33 @@
mw.mmv.ui.Element.call( this, $container );
this.$controlBar = $controlBar;
-
- /** @property {Object} localStorage the window.localStorage
object */
- this.localStorage = localStorage;
-
- /**
- * Whether we've already fired an animation for the metadata
div in this lightbox session.
- * @property {boolean}
- * @private
- */
- this.hasAnimatedMetadata = undefined;
-
/** @property {mw.mmv.HtmlUtils} htmlUtils - */
this.htmlUtils = new mw.mmv.HtmlUtils();
- this.initializeHeader();
+ this.initializeHeader( localStorage );
this.initializeImageMetadata();
this.initializeAboutLinks();
}
-
oo.inheritClass( MetadataPanel, mw.mmv.ui.Element );
-
MPP = MetadataPanel.prototype;
MPP.attach = function() {
- var panel = this;
- this.handleEvent( 'keydown', function ( e ) {
- panel.keydown( e );
- } );
-
- $.scrollTo().on( 'scroll.mmvp', $.throttle( 250, function() {
- panel.scroll();
- } ) );
-
+ this.scroller.attach();
this.buttons.attach();
this.fileReuse.attach();
-
- // reset animation flag when the viewer is reopened
- this.hasAnimatedMetadata = !this.localStorage ||
this.localStorage.getItem( 'mmv.hasOpenedMetadata' );
};
MPP.unattach = function() {
+ this.scroller.unattach();
this.buttons.unattach();
this.fileReuse.unattach();
this.fileReuse.closeDialog();
this.clearEvents();
-
- $.scrollTo().off( 'scroll.mmvp' );
};
MPP.empty = function () {
+ this.scroller.empty();
+
this.$license.empty().addClass( 'empty' );
this.$permissionLink.hide();
@@ -108,12 +85,7 @@
this.$location.empty();
this.$locationLi.addClass( 'empty' );
- this.$dragIcon.removeClass( 'pointing-down' );
-
this.progressBar.empty();
-
- // need to remove this to avoid animating again when reopening
lightbox on same page
- this.$container.removeClass( 'invite' );
this.fileReuse.empty();
};
@@ -124,22 +96,13 @@
/**
* Initializes the header, which contains the title, credit, and
license elements.
+ * @param {Object} localStorage the localStorage object, for dependency
injection
*/
- MPP.initializeHeader = function () {
- var panel = this;
-
+ MPP.initializeHeader = function ( localStorage ) {
this.progressBar = new mw.mmv.ui.ProgressBar( this.$controlBar
);
- this.$dragBar = $( '<div>' )
- .addClass( 'mw-mmv-drag-affordance' )
- .appendTo( this.$controlBar )
- .click( function () {
- panel.toggle();
- } );
-
- this.$dragIcon = $( '<div>' )
- .addClass( 'mw-mmv-drag-icon' )
- .appendTo( this.$dragBar );
+ this.scroller = new mw.mmv.ui.MetadataPanelScroller(
this.$container, this.$controlBar,
+ localStorage );
this.$titleDiv = $( '<div>' )
.addClass( 'mw-mmv-title-contain' )
@@ -220,7 +183,7 @@
.hide()
.on( 'click', function() {
panel.permission.grow();
- panel.scrollIntoView( panel.permission.$box,
500 );
+ panel.scroller.scrollIntoView(
panel.permission.$box, 500 );
} );
};
@@ -767,111 +730,6 @@
} );
return deferred.promise();
- };
-
- /**
- * Animates the metadata area when the viewer is first opened.
- */
- MPP.animateMetadataOnce = function () {
- if ( !this.hasAnimatedMetadata ) {
- this.hasAnimatedMetadata = true;
- this.$container.addClass( 'invite' );
- }
- };
-
- // ********************************
- // ******** Action methods ********
- // ********************************
-
- /**
- * Toggles the metadata div being totally visible.
- */
- MPP.toggle = function ( forceDirection ) {
- var scrollTopWhenOpen = this.$container.outerHeight() -
this.$controlBar.outerHeight(),
- scrollTopWhenClosed = 0,
- scrollTop = $.scrollTo().scrollTop(),
- panelIsOpen = scrollTop > scrollTopWhenClosed,
- scrollTopTarget = panelIsOpen ? scrollTopWhenClosed :
scrollTopWhenOpen;
-
- if ( forceDirection ) {
- scrollTopTarget = forceDirection === 'down' ?
scrollTopWhenClosed : scrollTopWhenOpen;
- if ( scrollTop === scrollTopTarget ) {
- // The user pressed down when the panel was
closed already (or up when fully open).
- // Not a real toggle; do not log.
- return;
- }
- }
-
- mw.mmv.logger.log( scrollTopTarget === scrollTopWhenOpen ?
'metadata-open' : 'metadata-close' );
-
- $.scrollTo( scrollTopTarget, 400 );
- };
-
- /**
- * Handles keydown events for this element.
- */
- MPP.keydown = function ( e ) {
- switch ( e.which ) {
- case 40:
- // Down arrow
- this.toggle( 'down' );
- e.preventDefault();
- break;
- case 38:
- // Up arrow
- this.toggle( 'up' );
- e.preventDefault();
- break;
- }
- };
-
- /**
- * Makes sure that the given element (which must be a descendant of the
metadata panel) is
- * in view. If it isn't, scrolls the panel smoothly to reveal it.
- * @param {HTMLElement|jQuery|string} target
- * @param {number} [duration] animation length
- * @param {Object} [settings] see jQuery.scrollTo
- */
- MPP.scrollIntoView = function( target, duration, settings ) {
- var $target = $( target ),
- targetHeight = $target.height(),
- targetTop = $target.offset().top,
- targetBottom = targetTop + targetHeight,
- viewportHeight = $(window).height(),
- viewportTop = $.scrollTo().scrollTop(),
- viewportBottom = viewportTop + viewportHeight;
-
- // we omit here a bunch of cases which are logically possible
but unlikely given the size
- // of the panel, and only care about the one which will
actually happen
- if ( targetHeight <= viewportHeight ) { // target fits into
screen
- if (targetBottom > viewportBottom ) {
- $.scrollTo( viewportTop + ( targetBottom -
viewportBottom ), duration, settings );
- }
- }
- };
-
- /**
- * Receives the window's scroll events and flips the chevron if
necessary.
- */
- MPP.scroll = function () {
- var scrolled = !!$.scrollTo().scrollTop();
-
- this.$dragIcon.toggleClass( 'pointing-down', scrolled );
-
- if (
- !this.savedHasOpenedMetadata &&
- scrolled &&
- this.localStorage
- ) {
- try {
- this.localStorage.setItem(
'mmv.hasOpenedMetadata', true );
- } catch ( e ) {
- // localStorage is full or disabled
- }
-
- // We mark it as saved even when localStorage failed,
because retrying will very likely fail as well
- this.savedHasOpenedMetadata = true;
- }
};
mw.mmv.ui.MetadataPanel = MetadataPanel;
diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.less
b/resources/mmv/ui/mmv.ui.metadataPanel.less
index e7f6a33..a6519c1 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanel.less
+++ b/resources/mmv/ui/mmv.ui.metadataPanel.less
@@ -1,6 +1,5 @@
@import "../mmv.globals";
@import "../mmv.mixins";
-@import "mediawiki.mixins.animation";
@info-box-color: #FFFFFF;
@info-box-border-color: #DDDDDD;
@@ -17,69 +16,6 @@
.box-round(3px);
background-color: @info-box-color;
-}
-
-.mw-mmv-post-image {
- .animation( mw-mmv-appear-animation 0.5s ease 0s 1 normal forwards );
- &.invite {
- .animation( mw-mmv-invite-animation 0.5s ease 0s 1 normal
forwards );
- }
-}
-
-.mw-mmv-appear-animation() {
- 0% {
- opacity: 0.6;
- }
- 50% {
- opacity: 0.9;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@-webkit-keyframes mw-mmv-appear-animation {
- .mw-mmv-appear-animation;
-}
-
-@-moz-keyframes mw-mmv-appear-animation {
- .mw-mmv-appear-animation;
-}
-
-@-o-keyframes mw-mmv-appear-animation {
- .mw-mmv-appear-animation;
-}
-
-@keyframes mw-mmv-appear-animation {
- .mw-mmv-appear-animation;
-}
-
-.mw-mmv-invite-animation() {
- 0% {
- margin-top: 0px;
- }
- 50% {
- margin-top: -15px;
- }
- 100% {
- margin-top: 0;
- }
-}
-
-@-webkit-keyframes mw-mmv-invite-animation {
- .mw-mmv-invite-animation;
-}
-
-@-moz-keyframes mw-mmv-invite-animation {
- .mw-mmv-invite-animation;
-}
-
-@-o-keyframes mw-mmv-invite-animation {
- .mw-mmv-invite-animation;
-}
-
-@keyframes mw-mmv-invite-animation {
- .mw-mmv-invite-animation;
}
.mw-mmv-title-contain {
@@ -289,33 +225,6 @@
font-size: @littlefont;
padding: 20px;
width: 50%;
-}
-
-.mw-mmv-drag-affordance {
- width: 100%;
- height: @metadatabar-drag-height;
- cursor: pointer;
-}
-
-.mw-mmv-drag-icon {
- width: 64px;
- height: @metadatabar-drag-height;
- /* @embed */
- background-image: url(img/drag.svg);
- background-repeat: no-repeat;
- background-position: center bottom;
- margin: 0 auto;
- opacity: 0.6;
- transition: opacity 0.25s;
-
- &.pointing-down {
- background-position: center top;
- .rotate(180deg);
- }
-}
-
-.mw-mmv-post-image:hover .mw-mmv-drag-icon {
- opacity: 1;
}
.mw-mmv-label {
diff --git a/resources/mmv/ui/mmv.ui.metadataPanelScroller.js
b/resources/mmv/ui/mmv.ui.metadataPanelScroller.js
new file mode 100644
index 0000000..ceaf853
--- /dev/null
+++ b/resources/mmv/ui/mmv.ui.metadataPanelScroller.js
@@ -0,0 +1,191 @@
+/*
+ * This file is part of the MediaWiki extension MediaViewer.
+ *
+ * MediaViewer 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.
+ *
+ * MediaViewer 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 MediaViewer. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+( function( mw, $, oo ) {
+ var MPSP;
+
+ /**
+ * @class mw.mmv.ui.MetadataPanelScroller
+ * @extends mw.mmv.ui.Element
+ * Handles scrolling behavior of the metadata panel.
+ * @constructor
+ */
+ function MetadataPanelScroller( $container, $controlBar, localStorage )
{
+ mw.mmv.ui.Element.call( this, $container );
+
+ this.$controlBar = $controlBar;
+
+ /** @property {Object} localStorage the window.localStorage
object */
+ this.localStorage = localStorage;
+
+ /**
+ * Whether we've already fired an animation for the metadata
div in this lightbox session.
+ * @property {boolean}
+ * @private
+ */
+ this.hasAnimatedMetadata = undefined;
+
+ this.initialize();
+ }
+ oo.inheritClass( MetadataPanelScroller, mw.mmv.ui.Element );
+ MPSP = MetadataPanelScroller.prototype;
+
+ MPSP.attach = function() {
+ var panel = this;
+
+ this.handleEvent( 'keydown', function ( e ) {
+ panel.keydown( e );
+ } );
+
+ $.scrollTo().on( 'scroll.mmvp', $.throttle( 250, function() {
+ panel.scroll();
+ } ) );
+
+ // reset animation flag when the viewer is reopened
+ this.hasAnimatedMetadata = !this.localStorage ||
this.localStorage.getItem( 'mmv.hasOpenedMetadata' );
+ };
+
+ MPSP.unattach = function() {
+ this.clearEvents();
+ $.scrollTo().off( 'scroll.mmvp' );
+ };
+
+ MPSP.empty = function () {
+ this.$dragIcon.removeClass( 'pointing-down' );
+
+ // need to remove this to avoid animating again when reopening
lightbox on same page
+ this.$container.removeClass( 'invite' );
+ };
+
+ MPSP.initialize = function () {
+ var panel = this;
+
+ this.$dragBar = $( '<div>' )
+ .addClass( 'mw-mmv-drag-affordance' )
+ .appendTo( this.$controlBar )
+ .click( function () {
+ panel.toggle();
+ } );
+
+ this.$dragIcon = $( '<div>' )
+ .addClass( 'mw-mmv-drag-icon' )
+ .appendTo( this.$dragBar );
+ };
+
+ /**
+ * Animates the metadata area when the viewer is first opened.
+ */
+ MPSP.animateMetadataOnce = function () {
+ if ( !this.hasAnimatedMetadata ) {
+ this.hasAnimatedMetadata = true;
+ this.$container.addClass( 'invite' );
+ }
+ };
+
+ /**
+ * Toggles the metadata div being totally visible.
+ */
+ MPSP.toggle = function ( forceDirection ) {
+ var scrollTopWhenOpen = this.$container.outerHeight() -
this.$controlBar.outerHeight(),
+ scrollTopWhenClosed = 0,
+ scrollTop = $.scrollTo().scrollTop(),
+ panelIsOpen = scrollTop > scrollTopWhenClosed,
+ scrollTopTarget = panelIsOpen ? scrollTopWhenClosed :
scrollTopWhenOpen;
+
+ if ( forceDirection ) {
+ scrollTopTarget = forceDirection === 'down' ?
scrollTopWhenClosed : scrollTopWhenOpen;
+ if ( scrollTop === scrollTopTarget ) {
+ // The user pressed down when the panel was
closed already (or up when fully open).
+ // Not a real toggle; do not log.
+ return;
+ }
+ }
+
+ mw.mmv.logger.log( scrollTopTarget === scrollTopWhenOpen ?
'metadata-open' : 'metadata-close' );
+
+ $.scrollTo( scrollTopTarget, 400 );
+ };
+
+ /**
+ * Makes sure that the given element (which must be a descendant of the
metadata panel) is
+ * in view. If it isn't, scrolls the panel smoothly to reveal it.
+ * @param {HTMLElement|jQuery|string} target
+ * @param {number} [duration] animation length
+ * @param {Object} [settings] see jQuery.scrollTo
+ */
+ MPSP.scrollIntoView = function( target, duration, settings ) {
+ var $target = $( target ),
+ targetHeight = $target.height(),
+ targetTop = $target.offset().top,
+ targetBottom = targetTop + targetHeight,
+ viewportHeight = $(window).height(),
+ viewportTop = $.scrollTo().scrollTop(),
+ viewportBottom = viewportTop + viewportHeight;
+
+ // we omit here a bunch of cases which are logically possible
but unlikely given the size
+ // of the panel, and only care about the one which will
actually happen
+ if ( targetHeight <= viewportHeight ) { // target fits into
screen
+ if (targetBottom > viewportBottom ) {
+ $.scrollTo( viewportTop + ( targetBottom -
viewportBottom ), duration, settings );
+ }
+ }
+ };
+
+ /**
+ * Handles keydown events for this element.
+ */
+ MPSP.keydown = function ( e ) {
+ switch ( e.which ) {
+ case 40:
+ // Down arrow
+ this.toggle( 'down' );
+ e.preventDefault();
+ break;
+ case 38:
+ // Up arrow
+ this.toggle( 'up' );
+ e.preventDefault();
+ break;
+ }
+ };
+
+ /**
+ * Receives the window's scroll events and flips the chevron if
necessary.
+ */
+ MPSP.scroll = function () {
+ var scrolled = !!$.scrollTo().scrollTop();
+
+ this.$dragIcon.toggleClass( 'pointing-down', scrolled );
+
+ if (
+ !this.savedHasOpenedMetadata &&
+ scrolled &&
+ this.localStorage
+ ) {
+ try {
+ this.localStorage.setItem(
'mmv.hasOpenedMetadata', true );
+ } catch ( e ) {
+ // localStorage is full or disabled
+ }
+
+ // We mark it as saved even when localStorage failed,
because retrying will very likely fail as well
+ this.savedHasOpenedMetadata = true;
+ }
+ };
+
+ mw.mmv.ui.MetadataPanelScroller = MetadataPanelScroller;
+}( mediaWiki, jQuery, OO ) );
diff --git a/resources/mmv/ui/mmv.ui.metadataPanelScroller.less
b/resources/mmv/ui/mmv.ui.metadataPanelScroller.less
new file mode 100644
index 0000000..bf42906
--- /dev/null
+++ b/resources/mmv/ui/mmv.ui.metadataPanelScroller.less
@@ -0,0 +1,93 @@
+@import "../mmv.globals";
+@import "../mmv.mixins";
+@import "mediawiki.mixins.animation";
+
+.mw-mmv-post-image {
+ .animation( mw-mmv-appear-animation 0.5s ease 0s 1 normal forwards );
+ &.invite {
+ .animation( mw-mmv-invite-animation 0.5s ease 0s 1 normal
forwards );
+ }
+}
+
+.mw-mmv-appear-animation() {
+ 0% {
+ opacity: 0.6;
+ }
+ 50% {
+ opacity: 0.9;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes mw-mmv-appear-animation {
+ .mw-mmv-appear-animation;
+}
+
+@-moz-keyframes mw-mmv-appear-animation {
+ .mw-mmv-appear-animation;
+}
+
+@-o-keyframes mw-mmv-appear-animation {
+ .mw-mmv-appear-animation;
+}
+
+@keyframes mw-mmv-appear-animation {
+ .mw-mmv-appear-animation;
+}
+
+.mw-mmv-invite-animation() {
+ 0% {
+ margin-top: 0px;
+ }
+ 50% {
+ margin-top: -15px;
+ }
+ 100% {
+ margin-top: 0;
+ }
+}
+
+@-webkit-keyframes mw-mmv-invite-animation {
+ .mw-mmv-invite-animation;
+}
+
+@-moz-keyframes mw-mmv-invite-animation {
+ .mw-mmv-invite-animation;
+}
+
+@-o-keyframes mw-mmv-invite-animation {
+ .mw-mmv-invite-animation;
+}
+
+@keyframes mw-mmv-invite-animation {
+ .mw-mmv-invite-animation;
+}
+
+.mw-mmv-drag-affordance {
+ width: 100%;
+ height: @metadatabar-drag-height;
+ cursor: pointer;
+}
+
+.mw-mmv-drag-icon {
+ width: 64px;
+ height: @metadatabar-drag-height;
+ /* @embed */
+ background-image: url(img/drag.svg);
+ background-repeat: no-repeat;
+ background-position: center bottom;
+ margin: 0 auto;
+ opacity: 0.6;
+ transition: opacity 0.25s;
+
+ &.pointing-down {
+ background-position: center top;
+ .rotate(180deg);
+ }
+}
+
+.mw-mmv-post-image:hover .mw-mmv-drag-icon {
+ opacity: 1;
+}
diff --git a/tests/qunit/mmv/mmv.lightboxinterface.test.js
b/tests/qunit/mmv/mmv.lightboxinterface.test.js
index fd87bf8..0987c39 100644
--- a/tests/qunit/mmv/mmv.lightboxinterface.test.js
+++ b/tests/qunit/mmv/mmv.lightboxinterface.test.js
@@ -277,7 +277,7 @@
if ( scrollTo !== undefined ) {
// Trigger event manually
- ui.panel.scroll();
+ ui.panel.scroller.scroll();
}
return $element;
@@ -293,14 +293,14 @@
// First phase of the test: up and down arrows
- ui.panel.hasAnimatedMetadata = false;
+ ui.panel.scroller.hasAnimatedMetadata = false;
localStorage.removeItem( 'mmv.hasOpenedMetadata' );
// Attach lightbox to testing fixture to avoid interference
with other tests.
ui.attach( '#qunit-fixture' );
assert.strictEqual( $.scrollTo().scrollTop(), 0, 'scrollTo
scrollTop should be set to 0' );
- assert.ok( !ui.panel.$dragIcon.hasClass( 'pointing-down' ),
+ assert.ok( !ui.panel.scroller.$dragIcon.hasClass(
'pointing-down' ),
'Chevron pointing up' );
assert.ok( !localStorage.getItem( 'mmv.hasOpenedMetadata' ),
@@ -315,7 +315,7 @@
assert.strictEqual( Math.round( $.scrollTo().scrollTop() ),
ui.panel.$imageMetadata.outerHeight(),
'scrollTo scrollTop should be set to the metadata
height after pressing up arrow' );
- assert.ok( ui.panel.$dragIcon.hasClass( 'pointing-down' ),
+ assert.ok( ui.panel.scroller.$dragIcon.hasClass(
'pointing-down' ),
'Chevron pointing down after pressing up arrow' );
assert.ok( localStorage.getItem( 'mmv.hasOpenedMetadata' ),
'localStorage knows that the metadata has been open' );
@@ -325,22 +325,22 @@
assert.strictEqual( $.scrollTo().scrollTop(), 0,
'scrollTo scrollTop should be set to 0 after pressing
down arrow' );
- assert.ok( !ui.panel.$dragIcon.hasClass( 'pointing-down' ),
+ assert.ok( !ui.panel.scroller.$dragIcon.hasClass(
'pointing-down' ),
'Chevron pointing up after pressing down arrow' );
- ui.panel.$dragIcon.click();
+ ui.panel.scroller.$dragIcon.click();
assert.strictEqual( Math.round( $.scrollTo().scrollTop() ),
ui.panel.$imageMetadata.outerHeight(),
'scrollTo scrollTop should be set to the metadata
height after clicking the chevron once' );
- assert.ok( ui.panel.$dragIcon.hasClass( 'pointing-down' ),
+ assert.ok( ui.panel.scroller.$dragIcon.hasClass(
'pointing-down' ),
'Chevron pointing down after clicking the chevron once'
);
- ui.panel.$dragIcon.click();
+ ui.panel.scroller.$dragIcon.click();
assert.strictEqual( $.scrollTo().scrollTop(), 0,
'scrollTo scrollTop should be set to 0 after clicking
the chevron twice' );
- assert.ok( !ui.panel.$dragIcon.hasClass( 'pointing-down' ),
+ assert.ok( !ui.panel.scroller.$dragIcon.hasClass(
'pointing-down' ),
'Chevron pointing up after clicking the chevron twice'
);
// Unattach lightbox from document
@@ -403,12 +403,12 @@
assert.ok( mw.mmv.logger.log.calledWithExactly(
'metadata-close' ), 'Closing keypress logged' );
mw.mmv.logger.log.reset();
- ui.panel.$dragIcon.click();
+ ui.panel.scroller.$dragIcon.click();
assert.ok( mw.mmv.logger.log.calledWithExactly( 'metadata-open'
), 'Opening click logged' );
mw.mmv.logger.log.reset();
- ui.panel.$dragIcon.click();
+ ui.panel.scroller.$dragIcon.click();
assert.ok( mw.mmv.logger.log.calledWithExactly(
'metadata-close' ), 'Closing click logged' );
mw.mmv.logger.log.reset();
diff --git a/tests/qunit/mmv/mmv.test.js b/tests/qunit/mmv/mmv.test.js
index ba62370..10ac2cb 100644
--- a/tests/qunit/mmv/mmv.test.js
+++ b/tests/qunit/mmv/mmv.test.js
@@ -118,7 +118,9 @@
getCurrentImageWidths : function () { return {
real : 0 }; } },
panel : {
setImageInfo : $.noop,
- animateMetadataOnce : $.noop,
+ scroller: {
+ animateMetadataOnce : $.noop
+ },
progressBar: {
animateTo: this.sandbox.stub(),
jumpTo: this.sandbox.stub()
@@ -171,7 +173,9 @@
getCurrentImageWidths : function () { return {
real : 0 }; } },
panel : {
setImageInfo : $.noop,
- animateMetadataOnce : $.noop,
+ scroller: {
+ animateMetadataOnce : $.noop
+ },
progressBar: {
hide: this.sandbox.stub(),
animateTo: this.sandbox.stub(),
@@ -361,12 +365,14 @@
getCurrentImageWidths : function () { return {
real : 0 }; } },
panel : {
setImageInfo : this.sandbox.stub(),
+ scroller: {
+ animateMetadataOnce : $.noop
+ },
progressBar: {
animateTo : this.sandbox.stub(),
jumpTo : this.sandbox.stub()
},
empty: $.noop,
- animateMetadataOnce: $.noop
},
open : $.noop,
empty: $.noop };
diff --git a/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
b/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
index bd4ba47..c975a7c 100644
--- a/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
+++ b/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
@@ -20,7 +20,7 @@
QUnit.module( 'mmv.ui.metadataPanel', QUnit.newMwEnvironment() );
- QUnit.test( 'The panel is emptied properly when necessary',
thingsShouldBeEmptied.length + thingsShouldHaveEmptyClass.length + 2, function
( assert ) {
+ QUnit.test( 'The panel is emptied properly when necessary',
thingsShouldBeEmptied.length + thingsShouldHaveEmptyClass.length, function (
assert ) {
var i,
$qf = $( '#qunit-fixture' ),
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>'
).appendTo( $qf ) );
@@ -34,9 +34,6 @@
for ( i = 0; i < thingsShouldHaveEmptyClass.length; i++ ) {
assert.strictEqual(
panel[thingsShouldHaveEmptyClass[i]].hasClass( 'empty' ), true, 'We
successfully applied the empty class to the ' + thingsShouldHaveEmptyClass[i] +
' element' );
}
-
- assert.ok( !panel.$dragIcon.hasClass( 'pointing-down' ), 'We
successfully reset the chevron' );
- assert.ok( !panel.$container.hasClass( 'invite' ), 'We
successfully reset the invite' );
} );
QUnit.test( 'Setting repository information in the UI works as
expected', 3, function ( assert ) {
@@ -209,42 +206,6 @@
} );
} );
-
- QUnit.test( 'Metadata div is only animated once', 5, function ( assert
) {
- var $qf = $( '#qunit-fixture' ),
- displayCount,
- panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>'
).appendTo( $qf ), {
- // We simulate localStorage to avoid test
side-effects
- getItem: function () { return displayCount; },
- setItem: function ( _, val ) { displayCount =
val; }
- } );
-
- panel.attach();
-
- panel.animateMetadataOnce();
-
- assert.ok( panel.hasAnimatedMetadata,
- 'The first call to animateMetadataOnce set
hasAnimatedMetadata to true' );
- assert.ok( $qf.hasClass( 'invite' ),
- 'The first call to animateMetadataOnce led to an
animation' );
-
- $qf.removeClass( 'invite' );
-
- panel.animateMetadataOnce();
-
- assert.strictEqual( panel.hasAnimatedMetadata, true, 'The
second call to animateMetadataOnce did not change the value of
hasAnimatedMetadata' );
- assert.ok( !$qf.hasClass( 'invite' ),
- 'The second call to animateMetadataOnce did not lead to
an animation' );
-
- panel.unattach();
-
- panel.attach();
-
- panel.animateMetadataOnce();
- assert.ok( $qf.hasClass( 'invite' ),
- 'After closing and opening the viewer, the panel is
animated again' );
- } );
-
QUnit.test( 'Repo icon', 4, function ( assert ) {
var $qf = $( '#qunit-fixture' ),
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>'
).appendTo( $qf ) ),
@@ -284,27 +245,5 @@
mw.user.isAnon.returns( true );
panel = new mw.mmv.ui.MetadataPanel( $qf.empty(), $( '<div>'
).appendTo( $qf ) );
assert.strictEqual( $qf.find( '.mw-mmv-preference-link'
).length, 0, 'Preferences link is not created for anon user.' );
- } );
-
- QUnit.test( 'No localStorage', 1, function( assert ) {
- var $qf = $( '#qunit-fixture' ),
- panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>'
).appendTo( $qf ) );
-
- this.sandbox.stub( $, 'scrollTo', function() { return {
scrollTop : function() { return 10; } }; } );
-
- panel.scroll();
-
- assert.ok( !panel.savedHasOpenedMetadata, 'No localStorage, we
don\'t try to save the opened flag' );
- } );
-
- QUnit.test( 'Full localStorage', 1, function( assert ) {
- var $qf = $( '#qunit-fixture' ),
- panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>'
).appendTo( $qf ), { getItem : $.noop, setItem : function() { throw 'I am
full'; } } );
-
- this.sandbox.stub( $, 'scrollTo', function() { return {
scrollTop : function() { return 10; } }; } );
-
- panel.scroll();
-
- assert.ok( panel.savedHasOpenedMetadata, 'Full localStorage, we
don\'t try to save the opened flag more than once' );
} );
}( mediaWiki, jQuery ) );
diff --git a/tests/qunit/mmv/ui/mmv.ui.metadataPanelScroller.test.js
b/tests/qunit/mmv/ui/mmv.ui.metadataPanelScroller.test.js
new file mode 100644
index 0000000..45a380f
--- /dev/null
+++ b/tests/qunit/mmv/ui/mmv.ui.metadataPanelScroller.test.js
@@ -0,0 +1,87 @@
+/*
+ * This file is part of the MediaWiki extension MediaViewer.
+ *
+ * MediaViewer 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.
+ *
+ * MediaViewer 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 MediaViewer. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+( function( mw, $ ) {
+ QUnit.module( 'mmv.ui.metadataPanelScroller', QUnit.newMwEnvironment()
);
+
+ QUnit.test( 'empty()', 2, function ( assert ) {
+ var $qf = $( '#qunit-fixture' ),
+ scroller = new mw.mmv.ui.MetadataPanelScroller( $qf, $(
'<div>' ).appendTo( $qf ) );
+
+ scroller.empty();
+ assert.ok( !scroller.$dragIcon.hasClass( 'pointing-down' ), 'We
successfully reset the chevron' );
+ assert.ok( !scroller.$container.hasClass( 'invite' ), 'We
successfully reset the invite' );
+ } );
+
+ QUnit.test( 'Metadata div is only animated once', 5, function ( assert
) {
+ var $qf = $( '#qunit-fixture' ),
+ displayCount,
+ scroller = new mw.mmv.ui.MetadataPanelScroller( $qf, $(
'<div>' ).appendTo( $qf ), {
+ // We simulate localStorage to avoid test
side-effects
+ getItem: function () { return displayCount; },
+ setItem: function ( _, val ) { displayCount =
val; }
+ } );
+
+ scroller.attach();
+
+ scroller.animateMetadataOnce();
+
+ assert.ok( scroller.hasAnimatedMetadata,
+ 'The first call to animateMetadataOnce set
hasAnimatedMetadata to true' );
+ assert.ok( $qf.hasClass( 'invite' ),
+ 'The first call to animateMetadataOnce led to an
animation' );
+
+ $qf.removeClass( 'invite' );
+
+ scroller.animateMetadataOnce();
+
+ assert.strictEqual( scroller.hasAnimatedMetadata, true, 'The
second call to animateMetadataOnce did not change the value of
hasAnimatedMetadata' );
+ assert.ok( !$qf.hasClass( 'invite' ),
+ 'The second call to animateMetadataOnce did not lead to
an animation' );
+
+ scroller.unattach();
+
+ scroller.attach();
+
+ scroller.animateMetadataOnce();
+ assert.ok( $qf.hasClass( 'invite' ),
+ 'After closing and opening the viewer, the panel is
animated again' );
+ } );
+
+ QUnit.test( 'No localStorage', 1, function( assert ) {
+ var $qf = $( '#qunit-fixture' ),
+ scroller = new mw.mmv.ui.MetadataPanelScroller( $qf, $(
'<div>' ).appendTo( $qf ) );
+
+ this.sandbox.stub( $, 'scrollTo', function() { return {
scrollTop : function() { return 10; } }; } );
+
+ scroller.scroll();
+
+ assert.ok( !scroller.savedHasOpenedMetadata, 'No localStorage,
we don\'t try to save the opened flag' );
+ } );
+
+ QUnit.test( 'localStorage is full', 1, function( assert ) {
+ var $qf = $( '#qunit-fixture' ),
+ scroller = new mw.mmv.ui.MetadataPanelScroller( $qf, $(
'<div>' ).appendTo( $qf ),
+ { getItem : $.noop, setItem : function() {
throw 'I am full'; } } );
+
+ this.sandbox.stub( $, 'scrollTo', function() { return {
scrollTop : function() { return 10; } }; } );
+
+ scroller.scroll();
+
+ assert.ok( scroller.savedHasOpenedMetadata, 'Full localStorage,
we don\'t try to save the opened flag more than once' );
+ } );
+}( mediaWiki, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/131618
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I2441d64c094a9bfbae7a4712ff4c78efa13a62a7
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/MultimediaViewer
Gerrit-Branch: master
Gerrit-Owner: Gergő Tisza <gti...@wikimedia.org>
Gerrit-Reviewer: Gergő Tisza <gti...@wikimedia.org>
Gerrit-Reviewer: Gilles <gdu...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
