From 509416ce8d5e3930f8439e298522f32889470f93 Mon Sep 17 00:00:00 2001 From: Mark Holmquist Date: Mon, 7 Oct 2013 17:54:18 -0700 Subject: [PATCH] Add remote image repository information to list Change-Id: Icfab093a44530949d1672a683fb8d4c0e7b901fc --- MultimediaViewer.i18n.php | 2 ++ MultimediaViewer.php | 1 + css/ext.multimediaViewer.css | 4 +++ img/repo.svg | 1 + js/ext.multimediaViewer.js | 62 ++++++++++++++++++++++++++---------- 5 files changed, 53 insertions(+), 17 deletions(-) create mode 100644 img/repo.svg diff --git a/MultimediaViewer.i18n.php b/MultimediaViewer.i18n.php index df966760c..128743d80 100644 --- a/MultimediaViewer.i18n.php +++ b/MultimediaViewer.i18n.php @@ -30,6 +30,7 @@ $messages['en'] = array( 'multimediaviewer-pref' => 'Media Viewer', 'multimediaviewer-pref-desc' => 'Improve your multimedia viewing experience with this new tool. It displays images in larger size on pages that have thumbnails. Images are shown in a nicer lightbox overlay, and can also be viewed in full-size.', 'multimediaviewer-file-page' => 'Go to corresponding file page', + 'multimediaviewer-repository' => 'Learn more on $1', ); /** Message documentation (Message documentation) @@ -40,6 +41,7 @@ $messages['qqq'] = array( 'multimediaviewer-pref' => 'Preference title', 'multimediaviewer-pref-desc' => 'Description of preference', 'multimediaviewer-file-page' => 'Text for a link to the file page for an image.', + 'multimediaviewer-repository' => 'Link to the repository where the image is hosted. $1 is the display name of that site.', ); /** Arabic (العربية) diff --git a/MultimediaViewer.php b/MultimediaViewer.php index ff6a6866d..dcb7da9ea 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -71,6 +71,7 @@ $wgResourceModules['ext.multimediaViewer'] = array_merge( array( 'messages' => array( 'multimediaviewer-file-page', + 'multimediaviewer-repository', ), ), $moduleInfo ); diff --git a/css/ext.multimediaViewer.css b/css/ext.multimediaViewer.css index ed332fcaf..730109f5a 100644 --- a/css/ext.multimediaViewer.css +++ b/css/ext.multimediaViewer.css @@ -124,6 +124,10 @@ background-size: contain; } +.mw-mlb-image-links li.mw-mlb-repo-li:before { + background-image: url( '../img/repo.svg' ); +} + .mw-mlb-image-links li.empty:before { background-image: none !important; } diff --git a/img/repo.svg b/img/repo.svg new file mode 100644 index 000000000..743ba40aa --- /dev/null +++ b/img/repo.svg @@ -0,0 +1 @@ + diff --git a/js/ext.multimediaViewer.js b/js/ext.multimediaViewer.js index 339967593..4150910e5 100644 --- a/js/ext.multimediaViewer.js +++ b/js/ext.multimediaViewer.js @@ -63,13 +63,41 @@ viewer.lightbox.open(); viewer.fetchImageInfo( fileTitle, function ( imageInfo ) { - var ui = viewer.lightbox.iface, + var repoInfo, articlePath, + ui = viewer.lightbox.iface, innerInfo = imageInfo.imageinfo[0] || {}; viewer.lightbox.images[index].src = innerInfo.url; viewer.lightbox.open(); ui.$title.text( fileTitle.getNameText() ); + + if ( viewer.repoInfo ) { + repoInfo = viewer.repoInfo[imageInfo.imagerepository]; + } + + if ( repoInfo ) { + if ( repoInfo.displayname ) { + ui.$repo.text( + mw.message( 'multimediaviewer-repository', repoInfo.displayname ).text() + ); + } else { + ui.$repo.text( + mw.message( 'multimediaviewer-repository', mw.config.get( 'wgSiteName' ) ).text() + ); + } + + if ( repoInfo.server && repoInfo.articlepath ) { + articlePath = repoInfo.server + repoInfo.articlepath; + } else { + articlePath = mw.config.get( 'wgArticlePath' ); + } + + ui.$repo + .prop( 'href', articlePath.replace( '$1', fileTitle.getPrefixedText() ) ); + } + + ui.$repoLi.toggleClass( 'empty', !Boolean( repoInfo ) ); } ); return false; @@ -83,10 +111,10 @@ lightboxHooks.register( 'imageLoaded', function () { // Add link wrapper to the image div, put image inside it this.$imageLink = $( '' ) - .addClass( 'mw-mlb-image-link' ) - .html( this.$image.detach() ); + .addClass( 'mw-mlb-image-link' ) + .html( this.$image.detach() ); - this.$imageDiv.append( this.$imageLink ); + this.$imageDiv.append( this.$imageLink ); } ); lightboxHooks.register( 'modifyInterface', function () { @@ -111,6 +139,17 @@ this.$wrapper.append( this.$imageMetadata ); + this.$repo = $( '' ) + .addClass( 'mw-mlb-repo' ) + .prop( 'href', '#' ); + + this.$repoLi = $( '
  • ' ) + .addClass( 'mw-mlb-repo-li' ) + .addClass( 'empty' ) + .append( this.$repo ); + + this.$imageLinks.append( this.$repoLi ); + this.$title = $( '

    ' ) .addClass( 'mw-mlb-title' ); @@ -136,6 +175,7 @@ if ( !data || !data.query ) { // Damn, failure. Do it gracefully-ish. cb( {} ); + return; } viewer.setRepoInfo( data.query.repos ); @@ -162,8 +202,6 @@ MultimediaViewer.prototype.fetchImageInfo = function ( fileTitle, cb ) { function apiCallback( sitename ) { return function ( data ) { - var ii, iikeys, i; - if ( !data || !data.query ) { // No information, oh well return; @@ -193,16 +231,6 @@ viewer.imageInfo[filename].sites[sitename] = imageInfo; - ii = imageInfo.imageinfo[0]; - iikeys = Object.keys( ii ); - for ( i = 0; i < iikeys.length; i++ ) { - viewer.imageInfo[filename].imageinfo[0][iikeys[i]] = ii[iikeys[i]]; - } - - if ( imageInfo.title ) { - viewer.imageInfo[filename].title = imageInfo.title; - } - if ( imageInfo.pageid ) { viewer.imageInfo[filename].pageid = imageInfo.pageid; } @@ -223,7 +251,7 @@ apiArgs.meta = 'filerepoinfo'; } - viewer.api.get( apiArgs ).done( apiCallback( '' ) ); + viewer.api.get( apiArgs ).done( apiCallback( null ) ); } var imageInfo,