Gergő Tisza has uploaded a new change for review. https://gerrit.wikimedia.org/r/113312
Change subject: Show permission ...................................................................... Show permission Change-Id: I0b8b0626b36baba9732f7350213d8b53ec2cca95 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/118 --- M MultimediaViewer.i18n.php M MultimediaViewer.php M resources/mmv/mmv.less M resources/mmv/model/mmv.model.Image.js M resources/mmv/provider/mmv.provider.ImageInfo.js M resources/mmv/ui/mmv.ui.fileUsage.less A resources/mmv/ui/mmv.ui.less M resources/mmv/ui/mmv.ui.metadataPanel.js A resources/mmv/ui/mmv.ui.metadataPanel.less A resources/mmv/ui/mmv.ui.permission.js A resources/mmv/ui/mmv.ui.permission.less M tests/qunit/mmv.model.test.js M tests/qunit/mmv.ui.metadataPanel.test.js A tests/qunit/mmv.ui.permission.test.js M tests/qunit/provider/mmv.provider.ImageInfo.test.js 15 files changed, 346 insertions(+), 18 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer refs/changes/12/113312/1 diff --git a/MultimediaViewer.i18n.php b/MultimediaViewer.i18n.php index c041b02..4f650af 100644 --- a/MultimediaViewer.i18n.php +++ b/MultimediaViewer.i18n.php @@ -57,6 +57,9 @@ 'multimediaviewer-license-pd' => 'Public Domain', 'multimediaviewer-license-default' => 'View license', + 'multimediaviewer-permission-title' => 'License details', + 'multimediaviewer-permission-link' => 'see terms', + 'multimediaviewer-use-file' => 'Use this file', 'multimediaviewer-use-file-owt' => 'Use this file on a wiki page, as a thumbnail', 'multimediaviewer-use-file-own' => 'Use this file on a wiki page, inline', @@ -152,6 +155,8 @@ 'multimediaviewer-license-pd' => 'Very short label for Public Domain images, used in a link to the file information page that has more licensing information. {{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-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. diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 700aeb0..dd3e9b0 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -235,6 +235,10 @@ 'mmv.ui.js', ), + 'styles' => array( + 'mmv.ui.less', + ), + 'dependencies' => array( 'mmv.base', ), @@ -283,18 +287,43 @@ ), ), $moduleInfo( 'mmv/ui' ) ); + $wgResourceModules['mmv.ui.permission'] = array_merge( array( + 'scripts' => array( + 'mmv.ui.permission.js', + ), + + 'styles' => array( + 'mmv.ui.permission.less', + ), + + 'messages' => array( + 'multimediaviewer-permission-title', + ), + + 'dependencies' => array( + 'jquery.color', + 'mediawiki.jqueryMsg', + 'mmv.ui', + 'oojs', + ), + ), $moduleInfo( 'mmv/ui' ) ); + $wgResourceModules['mmv.ui.metadataPanel'] = array_merge( array( 'scripts' => array( 'mmv.ui.metadataPanel.js', ), - // Note: We should pull these styles out, but the LESS patch should get merged first. -// 'styles' => array( -// 'mmv.ui.metadataPanel.less', -// ), + + 'styles' => array( + 'mmv.ui.metadataPanel.less', + ), 'dependencies' => array( 'mmv.ui', 'mmv.ui.fileReuse', + 'mmv.ui.fileUsage', + 'mmv.ui.permission', + 'mmv.ui.description', + 'mmv.ui.categories', 'oojs', 'momentjs', ), @@ -310,6 +339,9 @@ 'multimediaviewer-datetime-created', 'multimediaviewer-datetime-uploaded', + // for license messages see end of file + 'multimediaviewer-permission-link', + 'multimediaviewer-geoloc-north', 'multimediaviewer-geoloc-east', 'multimediaviewer-geoloc-south', diff --git a/resources/mmv/mmv.less b/resources/mmv/mmv.less index d2e098e..4633e0d 100644 --- a/resources/mmv/mmv.less +++ b/resources/mmv/mmv.less @@ -179,7 +179,8 @@ } .mw-mlb-image-desc-div { - height: 150px; + max-height: 150px; + margin-bottom: 15px; } @littlefont: 0.8em; diff --git a/resources/mmv/model/mmv.model.Image.js b/resources/mmv/model/mmv.model.Image.js index bb3ac64..84a3be8 100644 --- a/resources/mmv/model/mmv.model.Image.js +++ b/resources/mmv/model/mmv.model.Image.js @@ -35,6 +35,7 @@ * @param {string} source * @param {string} author * @param {string} license + * @param {string} permission * @param {number} latitude * @param {number} longitude * @param {string[]} categories @@ -55,6 +56,7 @@ source, author, license, + permission, latitude, longitude, categories @@ -104,6 +106,9 @@ /** @property {string} license The license under which the image is distributed */ this.license = license; + /** @property {string} additional license conditions by the author (note that this is usually a big ugly HTML blob) */ + this.permission = permission; + /** @property {number} latitude The latitude of the place where the image was created */ this.latitude = latitude; @@ -135,7 +140,7 @@ */ Image.newFromImageInfo = function ( title, imageInfo ) { var uploadDateTime, creationDateTime, imageData, - description, source, author, license, + description, source, author, license, permission, latitude, longitude, categories, innerInfo = imageInfo.imageinfo[0], extmeta = innerInfo.extmetadata; @@ -156,6 +161,7 @@ source = extmeta.Credit && extmeta.Credit.value; author = extmeta.Artist && extmeta.Artist.value; license = extmeta.License && extmeta.License.value; + permission = extmeta.Permission && extmeta.Permission.value; latitude = extmeta.GPSLatitude && parseFloat( extmeta.GPSLatitude.value ); longitude = extmeta.GPSLongitude && parseFloat( extmeta.GPSLongitude.value ); @@ -179,6 +185,7 @@ source, author, license, + permission, latitude, longitude, categories diff --git a/resources/mmv/provider/mmv.provider.ImageInfo.js b/resources/mmv/provider/mmv.provider.ImageInfo.js index 26b5f0d..4fb9f48 100644 --- a/resources/mmv/provider/mmv.provider.ImageInfo.js +++ b/resources/mmv/provider/mmv.provider.ImageInfo.js @@ -63,7 +63,8 @@ 'Artist', 'GPSLatitude', 'GPSLongitude', - 'Categories' + 'Categories', + 'Permission' ].join('|'); /** diff --git a/resources/mmv/ui/mmv.ui.fileUsage.less b/resources/mmv/ui/mmv.ui.fileUsage.less index 899654b..9f168ec 100644 --- a/resources/mmv/ui/mmv.ui.fileUsage.less +++ b/resources/mmv/ui/mmv.ui.fileUsage.less @@ -10,8 +10,11 @@ display: inline-block; overflow: hidden; - width: 50%; - margin-left: 50%; /* placeholder for More panel that will go to the left side */ + width: 100%; + + &.empty { + display: none; + } h3 { color: @info-color; diff --git a/resources/mmv/ui/mmv.ui.less b/resources/mmv/ui/mmv.ui.less new file mode 100644 index 0000000..d68f9ef --- /dev/null +++ b/resources/mmv/ui/mmv.ui.less @@ -0,0 +1,17 @@ +@import "mmv.mixins"; + +.mw-mlb-info-box { + @box-color: #FFFFFF; + @border-color: #C9C9C9; + @border-shadow-color: #D0D0D0; + + display: inline-block; + overflow: hidden; + width: 100%; + + border: 1px solid @border-color; + border-bottom: 2px solid @border-shadow-color; + .box-round(3px); + + background-color: @box-color; +} \ No newline at end of file diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js index b9a41f2..304e82a 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.js +++ b/resources/mmv/ui/mmv.ui.metadataPanel.js @@ -20,7 +20,7 @@ var MPP; /** - * @class + * @class mw.mmv.ui.MetadataPanel * @extends mw.mmv.ui.Element * @inheritdoc * Represents the metadata panel in the viewer @@ -54,10 +54,12 @@ MPP.empty = function () { this.$license.empty().addClass( 'empty' ); + this.$permissionLink.hide(); this.description.empty(); this.categories.empty(); this.fileUsage.empty(); + this.permission.empty(); this.$title.empty(); this.$credit.empty().addClass( 'empty' ); @@ -166,10 +168,22 @@ * Initializes the license elements. */ MPP.initializeLicense = function () { + var panel = this; + this.$license = $( '<a>' ) .addClass( 'mw-mlb-license empty' ) .prop( 'href', '#' ) .appendTo( this.$titlePara ); + + this.$permissionLink = $( '<span>' ) + .addClass( 'mw-mlb-permission-link mw-mlb-label' ) + .text( mw.message( 'multimediaviewer-permission-link' ).text() ) + .hide() + .appendTo( this.$titlePara ) + .on( 'click', function() { + panel.permission.grow(); + panel.scrollIntoView( panel.permission.$box, 500 ); + } ); }; /** @@ -181,7 +195,16 @@ .addClass( 'mw-mlb-image-metadata' ) .appendTo( this.$container ); - this.description = new mw.mmv.ui.Description( this.$imageMetadata ); + this.$imageMetadataLeft = $( '<div>' ) + .addClass( 'mw-mlb-image-metadata-column' ) + .appendTo( this.$imageMetadata ); + + this.$imageMetadataRight = $( '<div>' ) + .addClass( 'mw-mlb-image-metadata-column' ) + .appendTo( this.$imageMetadata ); + + this.description = new mw.mmv.ui.Description( this.$imageMetadataLeft ); + this.permission = new mw.mmv.ui.Permission( this.$imageMetadataLeft ); this.initializeImageLinks(); }; @@ -192,7 +215,7 @@ MPP.initializeImageLinks = function () { this.$imageLinkDiv = $( '<div>' ) .addClass( 'mw-mlb-image-links-div' ) - .appendTo( this.$imageMetadata ); + .appendTo( this.$imageMetadataRight ); this.$imageLinks = $( '<ul>' ) .addClass( 'mw-mlb-image-links' ) @@ -207,7 +230,7 @@ this.categories = new mw.mmv.ui.Categories( this.$imageLinks ); this.fileUsage = new mw.mmv.ui.FileUsage( - $( '<div>' ).appendTo( this.$imageMetadata ) + $( '<div>' ).appendTo( this.$imageMetadataRight ) ); this.fileUsage.init(); }; @@ -500,6 +523,15 @@ }; /** + * Set an extra permission text which should be displayed. + * @param {string} permission + */ + MPP.setPermission = function ( permission ) { + this.$permissionLink.show(); + this.permission.set( permission ); + }; + + /** * @method * Sets location data in the interface. * @param {mw.mmv.model.Image} imageData @@ -624,6 +656,10 @@ this.setLicense( mw.message( msgname ).text(), imageData.isCcLicensed() ); } + if ( imageData.permission ) { + this.setPermission( imageData.permission ); + } + this.fileUsage.set( localUsage, globalUsage ); this.setLocationData( imageData ); @@ -685,5 +721,31 @@ } }; + /** + * @method + * 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 ); + } + } + }; + mw.mmv.ui.MetadataPanel = MetadataPanel; }( mediaWiki, jQuery, OO, moment ) ); diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.less b/resources/mmv/ui/mmv.ui.metadataPanel.less new file mode 100644 index 0000000..4651c62 --- /dev/null +++ b/resources/mmv/ui/mmv.ui.metadataPanel.less @@ -0,0 +1,21 @@ +@import "mmv.mixins"; + +.mw-mlb-label { + margin-left: 3px; + .box-round(3px); + padding: 2px 5px; + background-color: #c9c9c9; +} + +.mw-mlb-image-metadata-column { + float: left; + width: 50%; +} + +.mw-mlb-permission-link { + cursor: pointer; +} + +.mw-mlb-mmv-about-links { + clear: both; +} \ No newline at end of file diff --git a/resources/mmv/ui/mmv.ui.permission.js b/resources/mmv/ui/mmv.ui.permission.js new file mode 100644 index 0000000..e8f297b --- /dev/null +++ b/resources/mmv/ui/mmv.ui.permission.js @@ -0,0 +1,81 @@ +/* + * 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 P; + + function Permission( $container ) { + var permission = this; + + mw.mmv.ui.Element.call( this, $container ); + + this.$box = $( '<div>' ) + .addClass( 'mw-mlb-permission-box mw-mlb-info-box empty') + .appendTo( this.$container ); + + this.$title = $( '<h3>' ) + .text( mw.message( 'multimediaviewer-permission-title' ).text() ) + .appendTo( this.$box ); + + this.$text = $( '<div>' ) + .addClass( 'mw-mlb-permission-text' ) + .appendTo( this.$box ); + + this.$html = $( '<div>' ) + .addClass( 'mw-mlb-permission-html' ) + .appendTo( this.$box ); + + this.$close = $( '<div>' ) + .addClass( 'mw-mlb-permission-close' ) + .text( 'X' ) // FIXME placeholder + .on( 'click', function() { + permission.shrink(); + } ) + .appendTo( this.$box ); + } + oo.inheritClass( Permission, mw.mmv.ui.Element ); + P = Permission.prototype; + + P.empty = function() { + this.$box.addClass( 'empty' ); + this.$text.empty(); + }; + + /** + * Set permission text + * @param {string} permission + */ + P.set = function( permission ) { + this.$box.removeClass( 'empty' ); + this.$text.html( permission ); + this.whitelistHtml( this.$text ); + this.$html.html( permission ); + }; + + P.grow = function() { + this.$box.addClass( 'full-size' ) + .stop( true ) + .animate( { backgroundColor: '#FFFFA0' }, 500) + .animate( { backgroundColor: '#FFFFFF' }, 500); + }; + + P.shrink = function() { + this.$box.removeClass( 'full-size' ); + }; + + mw.mmv.ui.Permission = Permission; +}( mediaWiki, jQuery, OO ) ); diff --git a/resources/mmv/ui/mmv.ui.permission.less b/resources/mmv/ui/mmv.ui.permission.less new file mode 100644 index 0000000..7c50d3f --- /dev/null +++ b/resources/mmv/ui/mmv.ui.permission.less @@ -0,0 +1,58 @@ +.mw-mlb-permission-box { + position: relative; + + width: 90%; + margin: 10px 5% 0; + + max-height: 100px; + + &.empty { + display: none; + } + + h3 { + margin: 10px 10px; + padding: 0; + color: #565656; + } + + .mw-mlb-permission-close { + opacity: 0; + + width: 25px; + height: 25px; + + position: absolute; + top: 0; + right: 0; + + cursor: pointer; + + // FIXME placeholder until we have a proper icon + font-size: 25px; + } + + .mw-mlb-permission-text { + padding: 10px; + } + + .mw-mlb-permission-html { + display: none; + } + + &.full-size { + max-height: 999px; + + .mw-mlb-permission-close { + opacity: 1; + } + + .mw-mlb-permission-text { + display: none; + } + + .mw-mlb-permission-html { + display: block; + } + } +} diff --git a/tests/qunit/mmv.model.test.js b/tests/qunit/mmv.model.test.js index 931229b..548bc64 100644 --- a/tests/qunit/mmv.model.test.js +++ b/tests/qunit/mmv.model.test.js @@ -18,7 +18,7 @@ ( function ( mw ) { QUnit.module( 'mmv.model', QUnit.newMwEnvironment() ); - QUnit.test( 'Image model constructor sanity check', 20, function ( assert ) { + QUnit.test( 'Image model constructor sanity check', 21, function ( assert ) { var title = mw.Title.newFromText( 'File:Foobar.jpg' ), size = 100, @@ -34,6 +34,7 @@ description = 'This is a test file.', source = 'WMF', author = 'Ryan Kaldari', + permission = 'only use for good, not evil', license = 'cc0', latitude = 39.12381283, longitude = 100.983829, @@ -41,7 +42,7 @@ imageData = new mw.mmv.model.Image( title, size, width, height, mime, url, descurl, repo, user, datetime, origdatetime, - description, source, author, license, + description, source, author, license, permission, latitude, longitude, categories ); assert.strictEqual( imageData.title, title, 'Title is set correctly' ); @@ -59,6 +60,7 @@ assert.strictEqual( imageData.source, source, 'Source is set correctly' ); assert.strictEqual( imageData.author, author, 'Author is set correctly' ); assert.strictEqual( imageData.license, license, 'License is set correctly' ); + assert.strictEqual( imageData.permission, permission, 'Permission is set correctly' ); assert.strictEqual( imageData.latitude, latitude, 'Latitude is set correctly' ); assert.strictEqual( imageData.longitude, longitude, 'Longitude is set correctly' ); assert.strictEqual( imageData.categories[0], 'Foo', 'Categories are set to the right values' ); @@ -72,13 +74,14 @@ mw.Title.newFromText( 'File:Foobar.pdf.jpg' ), 10, 10, 10, 'image/jpeg', 'http://example.org', 'http://example.com', 'example', 'tester', '2013-11-10', '2013-11-09', 'Blah blah blah', - 'A person', 'Another person', 'CC-BY-SA-3.0' + 'A person', 'Another person', 'CC-BY-SA-3.0', 'Permitted' ), secondImageData = new mw.mmv.model.Image( mw.Title.newFromText( 'File:Foobar.pdf.jpg' ), 10, 10, 10, 'image/jpeg', 'http://example.org', 'http://example.com', 'example', 'tester', '2013-11-10', '2013-11-09', 'Blah blah blah', - 'A person', 'Another person', 'CC-BY-SA-3.0', '39.91820938', '78.09812938' + 'A person', 'Another person', 'CC-BY-SA-3.0', 'Permitted', + '39.91820938', '78.09812938' ); assert.strictEqual( firstImageData.hasCoords(), false, 'No coordinates present means hasCoords returns false.' ); diff --git a/tests/qunit/mmv.ui.metadataPanel.test.js b/tests/qunit/mmv.ui.metadataPanel.test.js index cbd5aec..4f79a81 100644 --- a/tests/qunit/mmv.ui.metadataPanel.test.js +++ b/tests/qunit/mmv.ui.metadataPanel.test.js @@ -177,6 +177,14 @@ window.moment = oldMoment; } ); + QUnit.test( 'Setting permission information works as expected', 1, function ( assert ) { + var $qf = $( '#qunit-fixture' ), + panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) ); + + panel.setPermission( 'Look at me, I am a permission!' ); + assert.ok( panel.$permissionLink.is( ':visible' ) ); + } ); + QUnit.test( 'Date formatting', 1, function ( assert ) { var $qf = $( '#qunit-fixture' ), panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ) ), diff --git a/tests/qunit/mmv.ui.permission.test.js b/tests/qunit/mmv.ui.permission.test.js new file mode 100644 index 0000000..fd43e62 --- /dev/null +++ b/tests/qunit/mmv.ui.permission.test.js @@ -0,0 +1,24 @@ +/* + * 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( '...', QUnit.newMwEnvironment() ); + + QUnit.test( '', 0, function( assert ) { + assert.ok( false ); + } ); +}( mediaWiki, jQuery ) ); diff --git a/tests/qunit/provider/mmv.provider.ImageInfo.test.js b/tests/qunit/provider/mmv.provider.ImageInfo.test.js index a998bd0..2ceda50 100644 --- a/tests/qunit/provider/mmv.provider.ImageInfo.test.js +++ b/tests/qunit/provider/mmv.provider.ImageInfo.test.js @@ -25,7 +25,7 @@ assert.ok( imageInfoProvider ); } ); - QUnit.asyncTest( 'ImageInfo get test', 19, function ( assert ) { + QUnit.asyncTest( 'ImageInfo get test', 20, function ( assert ) { var apiCallCount = 0, api = { get: function() { apiCallCount++; @@ -88,6 +88,10 @@ Categories: { value: 'a|b|cd', source: 'commons-categories' + }, + Permission: { + value: 'Do not use. Ever.', + source: 'commons-desc-page', } }, mime: 'image/jpeg', @@ -118,6 +122,7 @@ assert.strictEqual( image.source, 'Wikipedia', 'source is set correctly' ); assert.strictEqual( image.author, 'Wikimeda', 'author is set correctly' ); assert.strictEqual( image.license, 'cc0', 'license is set correctly' ); + assert.strictEqual( image.permission, 'Do not use. Ever.', 'permission is set correctly' ); assert.strictEqual( image.latitude, 90, 'latitude is set correctly' ); assert.strictEqual( image.longitude, 180, 'longitude is set correctly' ); assert.strictEqual( image.categories.length, 3, 'categories are set correctly' ); -- To view, visit https://gerrit.wikimedia.org/r/113312 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I0b8b0626b36baba9732f7350213d8b53ec2cca95 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gergő Tisza <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
