mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-27 17:40:06 +00:00
Add metadata button to go to file description page directly
Change-Id: I0f2c2b24aece3b806d572a0ed41dce8031e6ae6b Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/226
This commit is contained in:
Gergő Tisza
Gilles Dubuc
parent
042353c747
commit
052fd5d3f1
|
|
@ -317,6 +317,9 @@ call_user_func( function() {
|
|||
'messages' => array(
|
||||
'multimediaviewer-feedback-button-text',
|
||||
'multimediaviewer-feedback-popup-text',
|
||||
'multimediaviewer-description-page-button-text',
|
||||
'multimediaviewer-description-page-popup-text',
|
||||
'multimediaviewer-description-page-popup-text-local',
|
||||
),
|
||||
), $moduleInfo( 'mmv/ui' ) );
|
||||
|
||||
|
|
|
|||
|
|
@ -89,5 +89,8 @@
|
|||
"multimediaviewer-embed-dimensions-separated": "- $1",
|
||||
"multimediaviewer-embed-dimensions-with-file-format": "$1 $2",
|
||||
"multimediaviewer-feedback-button-text": "Your feedback about this tool",
|
||||
"multimediaviewer-feedback-popup-text": "Leave feedback about this new media viewing experience"
|
||||
"multimediaviewer-feedback-popup-text": "Leave feedback about this new media viewing experience",
|
||||
"multimediaviewer-description-page-button-text": "More details",
|
||||
"multimediaviewer-description-page-popup-text": "More details on $1",
|
||||
"multimediaviewer-description-page-popup-text-local": "More details"
|
||||
}
|
||||
|
|
@ -92,5 +92,8 @@
|
|||
"multimediaviewer-embed-dimensions-separated": "Wraps the dimensions with a separator styled the same way, for the embed tab.\n* $1 - image dimensions\n\nSee also:\n* {{msg-mw|Multimediaviewer-embed-dimensions}}",
|
||||
"multimediaviewer-embed-dimensions-with-file-format": "Collates image dimensions and a file format.\n* $1 - image dimensions\n* $2 - file format extension, lowercased\n\nSee also:\n* {{msg-mw|Multimediaviewer-embed-dimensions}}",
|
||||
"multimediaviewer-feedback-button-text": "Text of the button on top of the metadata panel which brings up a feedback survey. See also {{mw-msg|multimediaviewer-feedback-popup-text}}.",
|
||||
"multimediaviewer-feedback-popup-text": "Additional popup text of the button on top of the metadata panel which brings up a feedback survey. See also {{mw-msg|multimediaviewer-feedback-button-text}}."
|
||||
"multimediaviewer-feedback-popup-text": "Additional popup text of the button on top of the metadata panel which brings up a feedback survey. See also {{mw-msg|multimediaviewer-feedback-button-text}}.",
|
||||
"multimediaviewer-description-page-button-text": "Text of the button on top of the metadata panel which links to the file description page. See also {{mw-msg|multimediaviewer-description-page-popup-text}}.",
|
||||
"multimediaviewer-description-page-popup-text": "Additional popup text of the button on top of the metadata panel which links to the file description page. See also {{mw-msg|multimediaviewer-description-page-button-text}}. $1 is the name of the site where the file comes from (e.g. \"Wikimedia Commons\").",
|
||||
"multimediaviewer-description-page-popup-text-local": "Same as {{mw-msg|multimediaviewer-description-page-popup-text-local}}, but for local files."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,3 +39,13 @@
|
|||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=(@degrees / 90.0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=(@degrees / 90.0))";
|
||||
}
|
||||
|
||||
// from http://pixelhunter.me/post/25782670606/css3-grayscale
|
||||
.grayscale() {
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
-ms-filter: grayscale(100%);
|
||||
-o-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
filter: gray; // IE 6-9
|
||||
}
|
||||
32
resources/mmv/ui/img/commons_gray.svg
Normal file
32
resources/mmv/ui/img/commons_gray.svg
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
|
||||
<g id="g4939_2_" transform="matrix(1.052195,0,0,1.052195,-7.7556,-16.09329)">
|
||||
<path id="path4653_2_" fill="#777777" d="M44.6,85.1c-6.6-0.2-12.7-3.2-17-8.2c-3.6-4.2-5.5-9.5-5.5-15.1c0-5.6,1.9-10.9,5.6-15.2
|
||||
c0.5-0.6,1.7-1.8,1.8-1.8c0,0,1.4,1.4,3.1,3.1l3.1,3.1l0.9-0.8c0.5-0.5,0.9-0.8,0.9-0.8c0,0,0.6,1.9,1.8,6.4c0,0,0,0.1-0.1,0.1
|
||||
c0,0-5.9-1.6-6.3-1.7c0,0-0.1,0-0.1,0c0,0,0.4-0.4,0.8-0.9c0.5-0.5,0.8-0.9,0.8-0.9c0-0.1-1.5-1.6-1.5-1.6c0,0-0.4,0.5-0.8,0.9
|
||||
c-1.9,2.4-3.1,5.4-3.4,8.4c-0.1,0.8-0.1,0.9,0,1c0.1,0,2.1,0,2.2,0c0,0,0-0.3,0-1.2c0-1.2,0-1.2,0.1-1.2c0.1,0,5.7,3.3,5.7,3.3
|
||||
c0,0,0,0.1-0.1,0.1C36.5,62,31,65.1,31,65.1c0,0,0-0.5,0-1.2l0-1.2h-1.1h-1.1l0,0.3c0,0.6,0.2,1.7,0.4,2.5c0.5,2.4,1.6,4.6,3.1,6.5
|
||||
c0.3,0.3,0.8,1,0.8,1c0,0,1.6-1.5,1.6-1.6c0,0-0.4-0.4-0.8-0.9c-0.5-0.5-0.8-0.9-0.8-0.9c0-0.1,6.4-1.8,6.4-1.7
|
||||
c0,0-1.7,6.4-1.7,6.4c0,0-0.3-0.3-0.9-0.8c-0.5-0.5-0.9-0.9-0.9-0.9c-0.1,0-1.6,1.5-1.5,1.6c0,0.1,0.6,0.6,1.1,0.9
|
||||
c1.9,1.4,4.1,2.5,6.5,3c0.8,0.2,1.9,0.3,2.5,0.4l0.3,0v-1.1v-1.1l-1.2,0c-0.8,0-1.2,0-1.2,0c0-0.1,3.3-5.8,3.3-5.8
|
||||
c0,0,3.3,5.7,3.3,5.8c0,0-0.4,0-1.2,0l-1.2,0v1.1v1.1l0.3,0c0.6,0,1.7-0.2,2.5-0.4c2.4-0.5,4.6-1.6,6.5-3c0.4-0.3,1-0.8,1.1-0.9
|
||||
s-1.5-1.6-1.5-1.6c0,0-0.4,0.4-0.9,0.9c-0.5,0.5-0.9,0.8-0.9,0.8c0-0.1-1.7-6.4-1.7-6.4c0,0,6.4,1.7,6.4,1.7c0,0-0.3,0.3-0.8,0.9
|
||||
c-0.5,0.5-0.8,0.9-0.8,0.9c0,0.1,1.5,1.6,1.6,1.6c0.1,0,0.6-0.6,0.8-1c1.5-1.9,2.5-4.2,3.1-6.5c0.2-0.8,0.3-1.9,0.3-2.5l0-0.3H61
|
||||
h-1.1l0,1.2c0,0.7,0,1.2,0,1.2c0,0-5.5-3.1-5.7-3.3c0,0-0.1-0.1-0.1-0.1c0,0,5.6-3.3,5.7-3.3c0.1,0,0.1,0,0.1,1.2
|
||||
c0,0.9,0,1.2,0,1.2c0,0,2.1,0.1,2.2,0c0,0,0-0.1,0-1c-0.3-3-1.5-6-3.4-8.4c-0.4-0.5-0.8-0.9-0.8-0.9c0,0-1.5,1.5-1.5,1.5
|
||||
c0,0,0.4,0.4,0.8,0.9c0.5,0.5,0.8,0.9,0.8,0.9c0,0,0,0-0.1,0.1c-0.4,0.1-6.3,1.7-6.3,1.7c0,0-0.1,0,0-0.1c1.2-4.4,1.7-6.3,1.8-6.4
|
||||
c0,0,0.4,0.3,0.9,0.8l0.9,0.8l0.8-0.8c0.4-0.4,0.8-0.8,0.8-0.8c0,0-0.5-0.4-0.9-0.7c-0.9-0.6-1.5-0.8-4.4-2c-2-0.8-3-1.3-4.2-2.1
|
||||
c-2.6-1.8-4.3-4.1-5.4-7.4c-0.1-0.4-0.5-1.6-0.5-1.6c0-0.1-0.2,0-1.6,0.5C38,36.7,37.3,37,37.1,37c-0.3,0-0.4-0.1-0.2-0.3
|
||||
c0.1-0.2,0.2-0.3,0.5-0.7c0.7-0.9,1.3-1.7,2-3.1c1.2-2.2,2.4-5.2,3.4-8.6c0.3-1,0.7-2.3,0.8-2.6c0-0.1,0-0.2,0.1-0.2
|
||||
c0,0,2.9,4.9,4.3,7.2c2.7,4.8,3.9,7.3,3.6,7.5c-0.1,0.1-0.2,0-0.7-0.5c-0.7-0.7-1.1-0.9-1.8-1.2c-0.3-0.1-0.8-0.2-1.1-0.2
|
||||
c-0.3,0-0.3,0-0.2,0.4c0.4,1.6,1.1,2.8,2,3.6c0.9,0.9,2,1.5,4.8,2.6c2.2,0.9,3.6,1.6,4.8,2.4c1,0.7,1.8,1.3,2.6,2.2
|
||||
c5,5.1,7.3,12,6.5,19.1c-0.7,6.2-4,11.8-8.9,15.6c-2.8,2.1-5.9,3.6-9.3,4.3C48.5,84.9,46.4,85.1,44.6,85.1z"/>
|
||||
<path id="path4697_2_" fill="#777777" d="M44.9,69.6c-1.2-0.1-2-0.3-2.9-0.8c-0.9-0.4-1.5-0.9-2.2-1.6c-1.1-1.2-1.9-2.6-2.1-4.3
|
||||
c-0.1-0.6-0.1-1.7,0-2.2c0.1-0.8,0.3-1.5,0.6-2.1c1.1-2.4,3.3-4.1,6-4.5c0.3,0,0.5-0.1,1.1-0.1c0.6,0,0.9,0,1.1,0.1
|
||||
c2.7,0.4,4.9,2.1,6,4.5c0.3,0.7,0.5,1.3,0.6,2.1c0.1,0.5,0.1,1.7,0,2.2c-0.1,0.8-0.3,1.5-0.7,2.2C52,66,51.6,66.6,51,67.2
|
||||
c-0.7,0.7-1.3,1.2-2.2,1.6c-1.1,0.5-2.1,0.8-3.3,0.8C45.3,69.6,45,69.6,44.9,69.6z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
8
resources/mmv/ui/img/grayscale.svg
Normal file
8
resources/mmv/ui/img/grayscale.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<filter id="grayscale">
|
||||
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
|
||||
0.3333 0.3333 0.3333 0 0
|
||||
0.3333 0.3333 0.3333 0 0
|
||||
0 0 0 1 0"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 235 B |
|
|
@ -31,6 +31,12 @@
|
|||
|
||||
/** @property {Object.<string, string[]>} eventsRegistered Events that this element has registered with the DOM. */
|
||||
this.eventsRegistered = {};
|
||||
|
||||
/**
|
||||
* @property {Object.<string, jQuery>} $inlineStyles a list of `<style>` elements in the head
|
||||
* which we use to manipulate pseudo-classes and pseudo-elements.
|
||||
*/
|
||||
this.$inlineStyles = [];
|
||||
}
|
||||
EP = Element.prototype;
|
||||
|
||||
|
|
@ -93,6 +99,28 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Manipulate CSS directly. This is needed to set styles for pseudo-classes and pseudo-elements.
|
||||
* @param {string} key some name to identify the style
|
||||
* @param {string|null} style a CSS snippet (set to null to delete the given style)
|
||||
*/
|
||||
EP.setRepoInlineStyle = function ( key, style ) {
|
||||
|
||||
if ( !this.$inlineStyles ) {
|
||||
this.$inlineStyles = [];
|
||||
}
|
||||
|
||||
if ( !this.$inlineStyles[key] ) {
|
||||
if ( !style ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$inlineStyles[key] = $( '<style type="text/css" />' ).appendTo( 'head' );
|
||||
}
|
||||
|
||||
this.$inlineStyles[key].html( style || '' );
|
||||
};
|
||||
|
||||
mw.mmv.ui = {};
|
||||
mw.mmv.ui.reuse = {};
|
||||
mw.mmv.ui.Element = Element;
|
||||
|
|
|
|||
|
|
@ -420,17 +420,13 @@
|
|||
// This horror exists because the CSS uses a :before pseudo-class to
|
||||
// define the repo icon. This is the only way to override it.
|
||||
if ( favIcon ) {
|
||||
if ( !this.$repoLiInlineStyle ) {
|
||||
this.$repoLiInlineStyle = $( '<style type="text/css" />' ).appendTo( 'head' );
|
||||
}
|
||||
|
||||
this.$repoLiInlineStyle.html( '.mw-mmv-image-links li.mw-mmv-repo-li:before '
|
||||
+ '{ background-image: url("'
|
||||
+ favIcon
|
||||
+ '"); }'
|
||||
this.setRepoInlineStyle( 'repoDisplay',
|
||||
'.mw-mmv-image-links li.mw-mmv-repo-li:before {' +
|
||||
'background-image: url("' + favIcon + '");' +
|
||||
'}'
|
||||
);
|
||||
} else if ( this.$repoLiInlineStyle ) {
|
||||
this.$repoLiInlineStyle.html( '' );
|
||||
} else {
|
||||
this.setRepoInlineStyle( 'repoDisplay', null );
|
||||
}
|
||||
|
||||
this.$repoLi.removeClass( 'empty' );
|
||||
|
|
@ -667,7 +663,7 @@
|
|||
|
||||
this.consolidateCredit( !!imageData.source, !!imageData.author );
|
||||
|
||||
this.buttons.set();
|
||||
this.buttons.set( imageData, repoData );
|
||||
|
||||
this.description.set( imageData.description, image.caption );
|
||||
this.categories.set( repoData.getArticlePath(), imageData.categories );
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
|
||||
this.initFeedbackButton();
|
||||
this.initReuseButton();
|
||||
this.initDescriptionPageButton();
|
||||
}
|
||||
oo.inheritClass( StripeButtons, mw.mmv.ui.Element );
|
||||
SBP = StripeButtons.prototype;
|
||||
|
|
@ -72,6 +73,13 @@
|
|||
);
|
||||
};
|
||||
|
||||
SBP.initDescriptionPageButton = function() {
|
||||
this.buttons.$descriptionPage = this.createButton(
|
||||
'mw-mmv-stripe-button-commons',
|
||||
mw.message( 'multimediaviewer-description-page-button-text' ).plain()
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* Creates the feedback button.
|
||||
|
|
@ -151,11 +159,35 @@
|
|||
|
||||
/**
|
||||
* @inheritdoc
|
||||
* @param {mw.mmv.model.Image} imageInfo
|
||||
* @param {mw.mmv.model.Repo} repoInfo
|
||||
*/
|
||||
SBP.set = function () {
|
||||
SBP.set = function ( imageInfo, repoInfo ) {
|
||||
var descPagePopupMessage;
|
||||
|
||||
this.eachButton( function ( $button ) {
|
||||
$button.removeClass( 'empty' );
|
||||
} );
|
||||
|
||||
descPagePopupMessage = repoInfo.isLocal
|
||||
? 'multimediaviewer-description-page-popup-text-local'
|
||||
: 'multimediaviewer-description-page-popup-text';
|
||||
|
||||
this.buttons.$descriptionPage.prop( {
|
||||
href: imageInfo.descriptionUrl,
|
||||
title: mw.message( descPagePopupMessage, repoInfo.displayName ).plain()
|
||||
} );
|
||||
|
||||
if ( imageInfo.repo === 'wikimediacommons' ) {
|
||||
this.buttons.$descriptionPage.addClass( 'mw-mmv-stripe-button-commons' );
|
||||
} else {
|
||||
this.buttons.$descriptionPage.addClass( 'mw-mmv-stripe-button-dynamic' );
|
||||
this.setRepoInlineStyle( 'stripe-button-description-page',
|
||||
'.mw-mmv-stripe-button-dynamic:before {' +
|
||||
'background-image: url("' + repoInfo.favIcon + '");' +
|
||||
'}'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -163,8 +195,14 @@
|
|||
*/
|
||||
SBP.empty = function () {
|
||||
this.eachButton( function ( $button ) {
|
||||
$button.addClass( 'empty' ).removeClass( 'open' );
|
||||
$button.addClass( 'empty' );
|
||||
} );
|
||||
|
||||
this.buttons.$reuse.removeClass( 'open' );
|
||||
this.buttons.$descriptionPage.prop( 'href', undefined )
|
||||
.removeClass( 'mw-mmv-stripe-button-dynamic mw-mmv-stripe-button-commons' );
|
||||
$( '.mw-mmv-stripe-button-dynamic-before' ).remove();
|
||||
this.setRepoInlineStyle( 'stripe-button-description-page', null );
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -61,3 +61,16 @@
|
|||
background-image: url(img/horn_grey.svg);
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.mw-mmv-stripe-button-commons:before {
|
||||
/* @embed */
|
||||
background-image: url(img/commons_gray.svg);
|
||||
}
|
||||
|
||||
// for othe repos than Wikimedia Commons we manipulate :before dynamically from JS
|
||||
.mw-mmv-stripe-button-dynamic:before {
|
||||
.grayscale;
|
||||
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,18 +18,21 @@
|
|||
( function( mw, $ ) {
|
||||
QUnit.module( 'mmv.ui.StripeButtons', QUnit.newMwEnvironment() );
|
||||
|
||||
QUnit.test( 'Sanity test, object creation and UI construction', 3, function ( assert ) {
|
||||
QUnit.test( 'Sanity test, object creation and UI construction', 4, function ( assert ) {
|
||||
var buttons = new mw.mmv.ui.StripeButtons( $( '#qunit-fixture' ) );
|
||||
|
||||
assert.ok( buttons, 'UI element is created.' );
|
||||
assert.strictEqual( buttons.buttons.$reuse.length, 1, 'Reuse button created.' );
|
||||
assert.strictEqual( buttons.buttons.$feedback.length, 1, 'Feedback button created.' );
|
||||
assert.strictEqual( buttons.buttons.$descriptionPage.length, 1, 'Feedback button created.' );
|
||||
} );
|
||||
|
||||
QUnit.test( 'set()/empty() sanity test:', 1, function ( assert ) {
|
||||
var buttons = new mw.mmv.ui.StripeButtons( $( '#qunit-fixture' ) );
|
||||
var buttons = new mw.mmv.ui.StripeButtons( $( '#qunit-fixture' ) ),
|
||||
fakeImageInfo = { descriptionUrl: '//commons.wikimedia.org/wiki/File:Foo.jpg' },
|
||||
fakeRepoInfo = { displayName: 'Wikimedia Commons' };
|
||||
|
||||
buttons.set();
|
||||
buttons.set( fakeImageInfo, fakeRepoInfo );
|
||||
buttons.empty();
|
||||
|
||||
assert.ok( true, 'No error on set()/empty().' );
|
||||
|
|
|
|||
|
|
@ -14,4 +14,19 @@
|
|||
|
||||
$( document ).trigger( new $.Event( 'mmv-foo' ) );
|
||||
} );
|
||||
|
||||
QUnit.test( 'setRepoInlineStyle()', 3, function ( assert ) {
|
||||
var element = new mw.mmv.ui.Element( $( '<div>' ) ),
|
||||
$testDiv = $( '<div id="mmv-testdiv">!!!</div>' ).appendTo( '#qunit-fixture' );
|
||||
|
||||
assert.ok( $testDiv.is( ':visible' ), 'Test div is visible' );
|
||||
|
||||
element.setRepoInlineStyle( 'test', '#mmv-testdiv { display: none; }' );
|
||||
|
||||
assert.ok( !$testDiv.is( ':visible' ), 'Test div is hidden by inline style' );
|
||||
|
||||
element.setRepoInlineStyle( 'test', null );
|
||||
|
||||
assert.ok( $testDiv.is( ':visible' ), 'Test div is visible again' );
|
||||
} );
|
||||
}( mediaWiki, jQuery ) );
|
||||
|
|
|
|||
Loading…
Reference in a new issue