Clicking on the chevron should open/close the details

Change-Id: Ica8c5ae8c8f34374e946246878f3c8609d263a12
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/80

.jshintignore

@@ -1 +1,2 @@
 resources/momentjs
+resources/jquery.scrollTo

MultimediaViewer.php

@@ -36,6 +36,11 @@ $moduleInfoMoment = array(
 	'remoteExtPath' => 'MultimediaViewer/resources/momentjs',
 );
 
+$moduleInfoJQScrollTo = array(
+	'localBasePath' => __DIR__ . '/resources/jquery.scrollTo',
+	'remoteExtPath' => 'MultimediaViewer/resources/jquery.scrollTo',
+);
+
 $wgExtensionMessagesFiles['MultimediaViewer'] = __DIR__ . '/MultimediaViewer.i18n.php';
 
 $wgResourceModules['multilightbox.interface'] = array_merge( array(
@@ -115,6 +120,7 @@ $wgResourceModules['ext.multimediaViewer'] = array_merge( array(
 	'dependencies' => array(
 		'multilightbox',
 		'momentjs',
+		'jquery.scrollTo',
 		'ext.multimediaViewer.lightboximage',
 		'mediawiki.Title',
 		'jquery.ui.dialog',
@@ -211,6 +217,12 @@ $wgResourceModules['momentjs'] = array_merge( array(
 	),
 ), $moduleInfoMoment );
 
+$wgResourceModules['jquery.scrollTo'] = array_merge( array(
+	'scripts' => array(
+		'jquery.scrollTo.js',
+	),
+), $moduleInfoJQScrollTo );
+
 $wgExtensionFunctions[] = function () {
 	global $wgResourceModules;
 

resources/ext.multimediaViewer/ext.multimediaViewer.css

@@ -335,7 +335,7 @@ body.mw-mlb-lightbox-open #content {
 .mw-mlb-drag-affordance {
 	width: 100%;
 	height: 18px;
-	cursor: move;
+	cursor: pointer;
 }
 
 .mw-mlb-drag-icon {

resources/ext.multimediaViewer/ext.multimediaViewer.js

@@ -639,13 +639,7 @@
 	};
 
 	MMVP.animateMetadataDiv = function () {
-		$( document.body )
-			.animate( {
-				scrollTop: 40
-			}, 400 )
-			.animate( {
-				scrollTop: 0
-			}, 400 );
+		$.scrollTo( 40, 400, { onAfter: function() { $.scrollTo( 0, 400 ); } } );
 
 		this.hasAnimatedMetadata = true;
 	};

resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js

@@ -489,17 +489,10 @@
 	};
 
 	LIP.toggleMetadata = function () {
-		var off = this.$controlBar.offset(),
-			scroll = this.$main.scrollTop();
-		if ( scroll > 0 ) {
-			this.$main.animate( {
-				scrollTop: 0
-			}, 400 );
-		} else {
-			this.$main.animate( {
-				scrollTop: off.top - 82
-			}, 400 );
-		}
+		var scrollTopWhenOpen = $( '.mlb-post-image' ).height() - $( '.mlb-controls' ).height(),
+			scrollTopTarget = $.scrollTo().scrollTop() > 0 ? 0 : scrollTopWhenOpen;
+
+		$.scrollTo( scrollTopTarget, 400 );
 	};
 
 	/**

resources/jquery.scrollTo/LICENSE

@@ -0,0 +1,22 @@
+(The MIT License)
+
+Copyright (c) 2007-2014 Ariel Flesler <aflesler@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

resources/jquery.scrollTo/jquery.scrollTo.js

@@ -0,0 +1,186 @@
+/*!
+ * jQuery.ScrollTo
+ * Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
+ * Licensed under MIT
+ * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
+ * @projectDescription Easy element scrolling using jQuery.
+ * @author Ariel Flesler
+ * @version 1.4.9
+ */
+
+;(function (factory) {
+    // AMD Support
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], factory);
+    } else {
+        factory(jQuery);
+    }
+}(function ($) {
+
+	var $scrollTo = $.scrollTo = function( target, duration, settings ) {
+		return $(window).scrollTo( target, duration, settings );
+	};
+
+	$scrollTo.defaults = {
+		axis:'xy',
+		duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1,
+		limit:true
+	};
+
+	// Returns the element that needs to be animated to scroll the window.
+	// Kept for backwards compatibility (specially for localScroll & serialScroll)
+	$scrollTo.window = function( scope ) {
+		return $(window)._scrollable();
+	};
+
+	// Hack, hack, hack :)
+	// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
+	$.fn._scrollable = function() {
+		return this.map(function() {
+			var elem = this,
+				isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
+
+				if (!isWin)
+					return elem;
+
+			var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
+
+			return /webkit/i.test(navigator.userAgent) || doc.compatMode == 'BackCompat' ?
+				doc.body :
+				doc.documentElement;
+		});
+	};
+
+	$.fn.scrollTo = function( target, duration, settings ) {
+		if (typeof duration == 'object') {
+			settings = duration;
+			duration = 0;
+		}
+		if (typeof settings == 'function')
+			settings = { onAfter:settings };
+
+		if (target == 'max')
+			target = 9e9;
+
+		settings = $.extend( {}, $scrollTo.defaults, settings );
+		// Speed is still recognized for backwards compatibility
+		duration = duration || settings.duration;
+		// Make sure the settings are given right
+		settings.queue = settings.queue && settings.axis.length > 1;
+
+		if (settings.queue)
+			// Let's keep the overall duration
+			duration /= 2;
+		settings.offset = both( settings.offset );
+		settings.over = both( settings.over );
+
+		return this._scrollable().each(function() {
+			// Null target yields nothing, just like jQuery does
+			if (target == null) return;
+
+			var elem = this,
+				$elem = $(elem),
+				targ = target, toff, attr = {},
+				win = $elem.is('html,body');
+
+			switch (typeof targ) {
+				// A number will pass the regex
+				case 'number':
+				case 'string':
+					if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
+						targ = both( targ );
+						// We are done
+						break;
+					}
+					// Relative selector, no break!
+					targ = $(targ,this);
+					if (!targ.length) return;
+				case 'object':
+					// DOMElement / jQuery
+					if (targ.is || targ.style)
+						// Get the real position of the target
+						toff = (targ = $(targ)).offset();
+			}
+			
+			var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset;
+			
+			$.each( settings.axis.split(''), function( i, axis ) {
+				var Pos	= axis == 'x' ? 'Left' : 'Top',
+					pos = Pos.toLowerCase(),
+					key = 'scroll' + Pos,
+					old = elem[key],
+					max = $scrollTo.max(elem, axis);
+
+				if (toff) {// jQuery / DOMElement
+					attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
+
+					// If it's a dom element, reduce the margin
+					if (settings.margin) {
+						attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
+						attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
+					}
+
+					attr[key] += offset[pos] || 0;
+
+					if(settings.over[pos])
+						// Scroll to a fraction of its width/height
+						attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
+				} else {
+					var val = targ[pos];
+					// Handle percentage values
+					attr[key] = val.slice && val.slice(-1) == '%' ?
+						parseFloat(val) / 100 * max
+						: val;
+				}
+
+				// Number or 'number'
+				if (settings.limit && /^\d+$/.test(attr[key]))
+					// Check the limits
+					attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );
+
+				// Queueing axes
+				if (!i && settings.queue) {
+					// Don't waste time animating, if there's no need.
+					if (old != attr[key])
+						// Intermediate animation
+						animate( settings.onAfterFirst );
+					// Don't animate this axis again in the next iteration.
+					delete attr[key];
+				}
+			});
+
+			animate( settings.onAfter );
+
+			function animate( callback ) {
+				$elem.animate( attr, duration, settings.easing, callback && function() {
+					callback.call(this, targ, settings);
+				});
+			};
+
+		}).end();
+	};
+
+	// Max scrolling position, works on quirks mode
+	// It only fails (not too badly) on IE, quirks mode.
+	$scrollTo.max = function( elem, axis ) {
+		var Dim = axis == 'x' ? 'Width' : 'Height',
+			scroll = 'scroll'+Dim;
+
+		if (!$(elem).is('html,body'))
+			return elem[scroll] - $(elem)[Dim.toLowerCase()]();
+
+		var size = 'client' + Dim,
+			html = elem.ownerDocument.documentElement,
+			body = elem.ownerDocument.body;
+
+		return Math.max( html[scroll], body[scroll] )
+			 - Math.min( html[size]  , body[size]   );
+	};
+
+	function both( val ) {
+		return $.isFunction(val) || typeof val == 'object' ? val : { top:val, left:val };
+	};
+
+    // AMD requirement
+    return $scrollTo;
+}));