Make it obvious that the permission text is cut off; add expand link

Fades out the bottom of the text and adds a link to replace it
with the full HTML version. Due to the way it is positioned,
the fade + link will be invisible if the text is less then 3 lines.
The implementation is not very polished; since this will be
replaced by some JS-based ellipsis thing, I didn't want to spend
too much time on it.

Change-Id: Ib30e40fe845b85bfcf9557970efb886d28b3e5c7
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/118

MultimediaViewer.i18n.php

@@ -59,6 +59,7 @@ $messages['en'] = array(
 
 	'multimediaviewer-permission-title' => 'License details',
 	'multimediaviewer-permission-link' => 'view terms',
+	'multimediaviewer-permission-viewmore' => 'View more',
 
 	'multimediaviewer-use-file' => 'Use this file',
 	'multimediaviewer-use-file-owt' => 'Use this file on a wiki page, as a thumbnail',
@@ -156,7 +157,8 @@ They will usually be derived from the HTML output from wikitext on a file descri
 {{Identical|Public domain}}',
 	'multimediaviewer-license-default' => 'Short label for a link to generic license information.',
 	'multimediaviewer-permission-title' => 'Title of the box containing additional license terms',
-	'multimediaviewer-permission-link' => 'Text of the link which shows additional license terms',
+	'multimediaviewer-permission-link' => 'Text of the link (on top of the metadata box) which shows additional license terms',
+	'multimediaviewer-permission-viewmore' => 'Text of the link (at the cutoff of the license term preview) which shows additional license terms',
 	'multimediaviewer-use-file' => 'Link that opens a dialog with options for sharing the file, e.g. onwiki or on another site. Similar to the Commons gadget stockPhoto.',
 	'multimediaviewer-use-file-owt' => 'Label for input box which has wikitext used to show an image with the thumb option and a helpful caption.
 

MultimediaViewer.php

@@ -274,6 +274,7 @@ call_user_func( function() {
 
 		'messages' => array(
 			'multimediaviewer-permission-title',
+			'multimediaviewer-permission-viewmore',
 		),
 
 		'dependencies' => array(

resources/mmv/ui/mmv.mixins.less

@@ -7,7 +7,7 @@
 	background-clip: padding-box; // Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+
 }
 
-.unselectable {
+.unselectable() {
 	-moz-user-select: -moz-none;
 	-khtml-user-select: none;
 	-webkit-user-select: none;
@@ -15,3 +15,16 @@
 	user-select: none;
 }
 
+// from http://stackoverflow.com/a/12178019/323407
+.fade-out(@backgroundColor: white) {
+	@invisible: fadeout(@backgroundColor, 100%);
+	background-image: linear-gradient(to bottom, @invisible 0%, @backgroundColor 100%); // W3C
+	background-image: -moz-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // FF3.6+
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @invisible),
+		color-stop(100%, @backgroundColor)); // Chrome,Safari4+
+	background-image: -webkit-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // Chrome10+,Safari5.1+
+	background-image: -o-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // Opera 11.10+
+	background-image: -ms-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // IE10+
+	filter: e(%("progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 )",
+		rgbahex(@invisible), rgbahex(@backgroundColor))); // IE6-9
+}

resources/mmv/ui/mmv.ui.permission.js

@@ -57,7 +57,25 @@
 		 */
 		this.$text = $( '<div>' )
 			.addClass( 'mw-mlb-permission-text' )
-			.appendTo( this.$box );
+			.appendTo( this.$box )
+			.on( 'click', '.mw-mlb-permission-text-viewmore', function( e ) {
+				e.preventDefault();
+				permission.grow();
+			} )
+		;
+
+		/**
+		 * A helper element to fade off text
+		 * @property {jQuery}
+		 */
+		this.$fader = $( '<div>' )
+			.addClass( 'mw-mlb-permission-text-fader' )
+			.append(
+				$( '<a>' )
+					.addClass( 'mw-mlb-permission-text-viewmore' )
+					.prop( 'href', '#' )
+					.text( mw.message( 'multimediaviewer-permission-viewmore' ).text() )
+			);
 
 		/**
 		 * Original (HTML) version of the author's message
@@ -97,8 +115,11 @@
 	 */
 	P.set = function( permission ) {
 		this.$box.removeClass( 'empty' );
+
 		this.$text.html( permission );
 		this.whitelistHtml( this.$text );
+		this.$text.append( this.$fader );
+
 		this.$html.html( permission );
 	};
 

resources/mmv/ui/mmv.ui.permission.less

@@ -1,4 +1,5 @@
 @import "mediawiki.mixins";
+@import "mmv.mixins";
 
 .mw-mlb-permission-box {
 	position: relative;
@@ -35,14 +36,34 @@
 		@text-line-height: 1.2;
 		@lines-shown: 3;
 
+		position: relative;
+
 		max-height: @lines-shown * @text-line-height * @text-font-size;
 		overflow: hidden;
 		margin: 0 10px 10px;
 		font-size: @text-font-size;
 		line-height: @text-line-height;
+
+		.mw-mlb-permission-text-fader {
+			position: absolute;
+			top: (@lines-shown - 1) * @text-line-height * @text-font-size;
+			width: 100%;
+			height: @text-line-height * @text-font-size;
+
+			.fade-out();
+
+			text-align: right;
+
+			a {
+				padding: 3px 0 0 1em;
+				background-color: white;
+				font-size: small;
+			}
+		}
 	}
 
 	.mw-mlb-permission-html {
+		margin: 0 10px 10px;
 		display: none;
 	}
 

tests/qunit/mmv/ui/mmv.ui.permission.test.js

@@ -32,7 +32,9 @@
 
 		permission.set( text );
 
-		assert.strictEqual( permission.$text.text(), text, 'permission text is set' );
+		// FIXME get rid of "view more" - this is temporary
+		assert.strictEqual( permission.$text.children().remove().end().text(),
+			text, 'permission text is set' );
 		assert.strictEqual( permission.$html.text(), text, 'permission html is set' );
 		assert.ok( permission.$text.is( ':visible' ), 'permission text is visible' );
 		assert.ok( !permission.$html.is( ':visible' ), 'permission html is not visible' );