MarkTraceur has uploaded a new change for review.
https://gerrit.wikimedia.org/r/92476
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.
Change-Id: Ifd3e2f771010190c9f401fd4219342aff48f4be8
---
M MultimediaViewer.i18n.php
M MultimediaViewer.php
M css/ext.multimediaViewer.css
M js/ext.multimediaViewer.js
4 files changed, 161 insertions(+), 3 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer
refs/changes/76/92476/1
diff --git a/MultimediaViewer.i18n.php b/MultimediaViewer.i18n.php
index 23689b4..302510b 100644
--- a/MultimediaViewer.i18n.php
+++ b/MultimediaViewer.i18n.php
@@ -35,6 +35,10 @@
'multimediaviewer-datetime-uploaded' => 'Uploaded on $1',
'multimediaviewer-userpage-link' => '{{GENDER:$2|Uploaded}} by $1',
'multimediaviewer-credit' => '$1 - $2',
+ 'multimediaviewer-use-file' => 'Use this file',
+ 'multimediaviewer-use-file-owt' => 'Use this file on-wiki, as a
thumbnail',
+ 'multimediaviewer-use-file-own' => 'Use this file on-wiki, normally',
+ 'multimediaviewer-use-file-offwiki' => 'Use this file on another
website',
);
/** Message documentation (Message documentation)
@@ -70,6 +74,10 @@
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 eb5d849..8d23d6b 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 f1b3ac4..7ec0dec 100644
--- a/css/ext.multimediaViewer.css
+++ b/css/ext.multimediaViewer.css
@@ -152,3 +152,16 @@
.mw-mlb-image-links li.mw-mlb-datetime-li.empty:before {
background-image: none;
}
+
+.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 2c39791..1f2bba2 100755
--- a/js/ext.multimediaViewer.js
+++ b/js/ext.multimediaViewer.js
@@ -150,7 +150,7 @@
}
var extmeta,
- repoInfo, articlePath,
+ repoInfo, articlePath,
linkToRepo,
desc,
datetime, dtmsg,
username,
@@ -162,6 +162,10 @@
viewer.lightbox.open();
ui.$title.text( fileTitle.getNameText()
);
+
+ ui.$useFile.data( 'title', fileTitle );
+ ui.$useFile.data( 'src', innerInfo.url
);
+ ui.$useFileLi.removeClass( 'empty' );
if ( viewer.repoInfo ) {
repoInfo =
viewer.repoInfo[imageInfo.imagerepository];
@@ -184,8 +188,10 @@
articlePath =
mw.config.get( 'wgArticlePath' );
}
- ui.$repo
- .prop( 'href',
articlePath.replace( '$1', fileTitle.getPrefixedText() ) );
+ linkToRepo =
articlePath.replace( '$1', fileTitle.getPrefixedText() );
+
+ ui.$repo.prop( 'href',
linkToRepo );
+ ui.$useFile.data( 'link',
linkToRepo );
}
ui.$repoLi.toggleClass( 'empty',
!Boolean( repoInfo ) );
@@ -361,6 +367,102 @@
this.$imageLinks.append( this.$usernameLi );
+ this.$useFile = $( '<a>' )
+ .addClass( 'mw-mlb-usefile' )
+ .prop( 'href', '#' )
+ .text( mw.message( 'multimediaviewer-use-file'
).text() )
+ .click( function ( e ) {
+ 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
)
+ .focus( function () {
$( this ).select(); } )
+ .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
)
+ .focus( function () {
$( this ).select(); } )
+ .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
)
+ .focus( function () {
$( this ).select(); } )
+ .val( '<a href="' +
link + '"><img src="' + src + '" /></a>' ),
+
+ $offWiki = $( '<div>' )
+ .append(
+ $owLabel,
+ $owField
+ ),
+
+ $dialog = $( '<div>' )
+ .addClass(
'mw-mlb-use-file-dialog' )
+ .append(
+ $onWikiThumb,
+ $onWikiNormal,
+ $offWiki
+ );
+
+ $dialog.dialog( {
+ width: 750
+ } );
+
+ $owtField.focus();
+
+ e.stopPropagation();
+ e.preventDefault();
+
+ 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' );
@@ -418,6 +520,12 @@
lightboxHooks.register( 'clearInterface', function () {
this.$imageDesc.empty();
this.$title.empty();
+
+ this.$useFile.data( 'title', null );
+ this.$useFile.data( 'link', null );
+ this.$useFile.data( 'src', null );
+
+ this.$useFileLi.addClass( 'empty' );
} );
}
@@ -560,4 +668,28 @@
} );
mw.MultimediaViewer = MultimediaViewer;
+
+ // Little hack to enable me to select at a specific position in an input
+ // Thanks to Mark (http://stackoverflow.com/users/65387/mark) at SO for
+ // this - from http://stackoverflow.com/a/841121
+ $.fn.selectRange = function ( start, end ) {
+ if ( !end ) {
+ end = start;
+ }
+
+ return this.each( function () {
+ var range;
+
+ if ( this.setSelectionRange ) {
+ this.focus();
+ 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: newchange
Gerrit-Change-Id: Ifd3e2f771010190c9f401fd4219342aff48f4be8
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MultimediaViewer
Gerrit-Branch: master
Gerrit-Owner: MarkTraceur <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
