jenkins-bot has submitted this change and it was merged.
Change subject: Add "use this file" link and dialog
......................................................................
Add "use this file" link and dialog
Little bit hacky, maybe, but it's working nicely and it's a very useful
tool for the lightbox.
Selection, it turns out, is really really difficult.
Bug: 56141
Change-Id: Ifd3e2f771010190c9f401fd4219342aff48f4be8
---
M MultimediaViewer.i18n.php
M MultimediaViewer.php
M css/ext.multimediaViewer.css
M js/ext.multimediaViewer.js
4 files changed, 190 insertions(+), 5 deletions(-)
Approvals:
Gergő Tisza: Looks good to me, approved
jenkins-bot: Verified
diff --git a/MultimediaViewer.i18n.php b/MultimediaViewer.i18n.php
index a0ded42..bc07ba2 100644
--- a/MultimediaViewer.i18n.php
+++ b/MultimediaViewer.i18n.php
@@ -51,6 +51,11 @@
'multimediaviewer-license-cc-pd' => 'Public Domain',
'multimediaviewer-license-cc-zero' => 'CC 0',
'multimediaviewer-license-default' => 'Licensing information',
+
+ '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',
+ 'multimediaviewer-use-file-offwiki' => 'Use this file on another
website',
);
/** Message documentation (Message documentation)
@@ -72,8 +77,7 @@
* $1 - time and date (formatted)
See also:
* {{msg-mw|Multimediaviewer-datetime-created}}',
- 'multimediaviewer-userpage-link' => 'Link to the user page for the
uploader of the image. $1 is the username of the uploader, $2 is their gender.',
- 'multimediaviewer-credit' => 'Credit line for images - $1 is HTML
describing the authour, $2 is HTML describing the source. Neither are
usernames, so GENDER is useless. Both come directly from the API, the extended
metadata imageinfo prop in particular. They will usually be derived from the
HTML output from wikitext on a file description page - however, no complicated
HTML, only links, will be allowed.',
+
'multimediaviewer-license-cc-by-1.0' => 'Very short label for the
Creative Commons Attribution license, version 1.0, used in a link to the file
information page that has more licensing information.',
'multimediaviewer-license-cc-sa-1.0' => 'Very short label for the
Creative Commons ShareAlike license, version 1.0, used in a link to the file
information page that has more licensing information.',
'multimediaviewer-license-cc-by-sa-1.0' => 'Very short label for the
Creative Commons Attribution ShareAlike license, version 1.0, used in a link to
the file information page that has more licensing information.',
@@ -88,6 +92,26 @@
'multimediaviewer-license-cc-pd' => 'Very short label for the Creative
Commons Public Domain license, used in a link to the file information page that
has more licensing information.',
'multimediaviewer-license-cc-zero' => 'Very short label for the
Creative Commons Zero license, used in a link to the file information page that
has more licensing information.',
'multimediaviewer-license-default' => 'Short label for a link to
generic license information.',
+
+ 'multimediaviewer-userpage-link' => 'Link to the user page for the
uploader of the image.
+
+Used in JavaScript code.
+
+Parameters:
+* $1 - the username of the uploader
+* $2 - their gender',
+ 'multimediaviewer-credit' => 'Credit line for images. Parameters:
+* $1 - HTML describing the author
+* $2 - HTML describing the source
+
+Neither parameters are usernames, so GENDER is useless. Both come directly
from the API, the extended metadata imageinfo prop in particular.
+
+They will usually be derived from the HTML output from wikitext on a file
description page - however, no complicated HTML, only links, will be allowed.',
+
+ '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 wikitext used to show an
image with the thumb option and a helpful caption. Similar to the Commons
gadget stockPhoto.',
+ 'multimediaviewer-use-file-own' => 'Label for wikitext used to show an
image inline with a helpful title attribute. Similar to the Commons gadget
stockPhoto.',
+ 'multimediaviewer-use-file-offwiki' => 'Label for HTML used to show an
image on an external site, with a link back to the wiki. Similar to the Commons
gadget stockPhoto.',
);
/** Arabic (العربية)
diff --git a/MultimediaViewer.php b/MultimediaViewer.php
index f797a9b..0e67159 100644
--- a/MultimediaViewer.php
+++ b/MultimediaViewer.php
@@ -67,6 +67,7 @@
'multilightbox',
'multilightbox.image',
'mediawiki.Title',
+ 'jquery.ui.dialog',
),
'messages' => array(
@@ -76,6 +77,10 @@
'multimediaviewer-datetime-uploaded',
'multimediaviewer-userpage-link',
'multimediaviewer-credit',
+ 'multimediaviewer-use-file',
+ 'multimediaviewer-use-file-owt',
+ 'multimediaviewer-use-file-own',
+ 'multimediaviewer-use-file-offwiki',
),
), $moduleInfo );
diff --git a/css/ext.multimediaViewer.css b/css/ext.multimediaViewer.css
index 84faa3a..a7bcbd3 100644
--- a/css/ext.multimediaViewer.css
+++ b/css/ext.multimediaViewer.css
@@ -201,3 +201,16 @@
.mw-mlb-license {
text-align: right;
}
+
+.mw-mlb-image-links li.empty {
+ display: none;
+}
+
+.mw-mlb-use-file-dialog label {
+ display: block;
+ font-weight: bold;
+}
+
+.mw-mlb-use-file-dialog input {
+ width: 100%;
+}
diff --git a/js/ext.multimediaViewer.js b/js/ext.multimediaViewer.js
index 02c9801..5881fd8 100755
--- a/js/ext.multimediaViewer.js
+++ b/js/ext.multimediaViewer.js
@@ -222,6 +222,110 @@
.addClass( 'mw-mlb-license-contain' )
.html( this.$license );
+ this.$useFile = $( '<a>' )
+ .addClass( 'mw-mlb-usefile' )
+ .prop( 'href', '#' )
+ .text( mw.message( 'multimediaviewer-use-file'
).text() )
+ .click( function () {
+ function selectAllOnEvent() {
+ var $this = $( this );
+
+ if ( $this.is( 'label' ) ) {
+ $this =
$this.parent().find( '#' + $this.prop( 'for' ) );
+ }
+
+ $this.selectAll();
+
+ return false;
+ }
+
+ var $this = $( this ),
+
+ fileTitle = $this.data( 'title'
),
+
+ filename =
fileTitle.getPrefixedText(),
+ desc = fileTitle.getNameText(),
+
+ src = $this.data( 'src' ),
+ link = $this.data( 'link' ) ||
src,
+
+ owtId =
'mw-mlb-use-file-onwiki-thumb',
+ ownId =
'mw-mlb-use-file-onwiki-normal',
+ owId =
'mw-mlb-use-file-offwiki',
+
+ $owtLabel = $( '<label>' )
+ .prop( 'for', owtId )
+ .text( mw.message(
'multimediaviewer-use-file-owt' ).text() ),
+
+ $owtField = $( '<input>' )
+ .prop( 'type', 'text' )
+ .prop( 'id', owtId )
+ .prop( 'readonly', true
)
+ .click(
selectAllOnEvent )
+ .val( '[[' + filename +
'|thumb|' + desc + ']]' ),
+
+ $onWikiThumb = $( '<div>' )
+ .append( $owtLabel,
+ $owtField
+ ),
+
+ $ownLabel = $( '<label>' )
+ .prop( 'for', ownId )
+ .text( mw.message(
'multimediaviewer-use-file-own' ).text() ),
+
+ $ownField = $( '<input>' )
+ .prop( 'type', 'text' )
+ .prop( 'id', ownId )
+ .prop( 'readonly', true
)
+ .click(
selectAllOnEvent )
+ .val( '[[' + filename +
'|' + desc + ']]' ),
+
+ $onWikiNormal = $( '<div>' )
+ .append(
+ $ownLabel,
+ $ownField
+ ),
+
+ $owLabel = $( '<label>' )
+ .prop( 'for', owId )
+ .text( mw.message(
'multimediaviewer-use-file-offwiki' ).text() ),
+
+ $owField = $( '<input>' )
+ .prop( 'type', 'text' )
+ .prop( 'id', owId )
+ .prop( 'readonly', true
)
+ .click(
selectAllOnEvent )
+ .val( '<a href="' +
link + '"><img src="' + src + '" /></a>' ),
+
+ $offWiki = $( '<div>' )
+ .append(
+ $owLabel,
+ $owField
+ );
+
+ ui.$dialog = $( '<div>' )
+ .addClass(
'mw-mlb-use-file-dialog' )
+ .append(
+ $onWikiThumb,
+ $onWikiNormal,
+ $offWiki
+ )
+ .dialog( {
+ width: 750
+ } );
+
+ $owtField.click();
+
+ return false;
+ } );
+
+ this.$useFileLi = $( '<li>' )
+ .addClass( 'mw-mlb-usefile-li' )
+ .addClass( 'empty' )
+ .append( this.$useFile );
+
+ this.$imageLinks.append( this.$useFileLi );
+
this.$title = $( '<p>' )
.addClass( 'mw-mlb-title' );
@@ -259,6 +363,10 @@
this.$controlBar.append( this.$titleDiv );
this.$closeButton.click( function () {
+ if ( ui.$dialog ) {
+ ui.$dialog.dialog( 'close' );
+ }
+
viewer.log( 'close-link-click' );
} );
@@ -288,6 +396,12 @@
this.$title.empty();
viewer.currentImageFilename = null;
+
+ this.$useFile.data( 'title', null );
+ this.$useFile.data( 'link', null );
+ this.$useFile.data( 'src', null );
+
+ this.$useFileLi.addClass( 'empty' );
} );
}
@@ -376,7 +490,7 @@
}
var extmeta,
- repoInfo, articlePath,
+ repoInfo, articlePath, linkToRepo,
desc,
datetime, dtmsg,
license, msgname,
@@ -386,6 +500,10 @@
innerInfo = imageInfo.imageinfo[0] || {};
ui.$title.text( fileTitle.getNameText() );
+
+ ui.$useFile.data( 'title', fileTitle );
+ ui.$useFile.data( 'src', innerInfo.url );
+ ui.$useFileLi.removeClass( 'empty' );
if ( this.repoInfo ) {
repoInfo = this.repoInfo[imageInfo.imagerepository];
@@ -408,8 +526,14 @@
articlePath = mw.config.get( 'wgArticlePath' );
}
- ui.$repo
- .prop( 'href', articlePath.replace( '$1',
fileTitle.getPrefixedText() ) );
+ linkToRepo = articlePath.replace( '$1',
fileTitle.getPrefixedText() );
+
+ if ( repoInfo.local ) {
+ linkToRepo = mw.config.get( 'wgServer' ) +
linkToRepo;
+ }
+
+ ui.$repo.prop( 'href', linkToRepo );
+ ui.$useFile.data( 'link', linkToRepo );
}
ui.$repoLi.toggleClass( 'empty', !Boolean( repoInfo ) );
@@ -632,4 +756,23 @@
} );
mw.MultimediaViewer = MultimediaViewer;
+
+ // Quick hack to select all text in a text box
+ $.fn.selectAll = function () {
+ return this.each( function () {
+ var range,
+ start = 0,
+ end = this.value.length;
+
+ if ( this.setSelectionRange ) {
+ this.setSelectionRange( start, end );
+ } else if ( this.createTextRange ) {
+ range = this.createTextRange();
+ range.collapse( true );
+ range.moveEnd( 'character', end );
+ range.moveStart( 'character', start );
+ range.select();
+ }
+ } );
+ };
}( mediaWiki, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/92476
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ifd3e2f771010190c9f401fd4219342aff48f4be8
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/MultimediaViewer
Gerrit-Branch: master
Gerrit-Owner: MarkTraceur <[email protected]>
Gerrit-Reviewer: Gergő Tisza <[email protected]>
Gerrit-Reviewer: MarkTraceur <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
