MarkTraceur has uploaded a new change for review.
https://gerrit.wikimedia.org/r/100618
Change subject: Add caption to the interface in place of description
......................................................................
Add caption to the interface in place of description
Also include the description on the right side of the page, but the caption
generally is more relevant and so should have the place of honour.
Change-Id: I512b3dd99207878233d501135b4dda0d0bd9cdd6
---
M resources/ext.multimediaViewer/ext.multimediaViewer.css
M resources/ext.multimediaViewer/ext.multimediaViewer.js
M resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
M tests/qunit/lightboxinterface.test.js
4 files changed, 79 insertions(+), 41 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer
refs/changes/18/100618/1
diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.css
b/resources/ext.multimediaViewer/ext.multimediaViewer.css
index b27f87d..a2ed3b7 100644
--- a/resources/ext.multimediaViewer/ext.multimediaViewer.css
+++ b/resources/ext.multimediaViewer/ext.multimediaViewer.css
@@ -127,12 +127,12 @@
}
.mw-mlb-image-desc-div {
- width: 60%;
+ width: 50%;
overflow-y: auto;
}
.mw-mlb-image-links-div {
- width: 40%;
+ width: 50%;
}
.mw-mlb-image-desc-div,
@@ -142,6 +142,7 @@
vertical-align: top;
}
+.mw-mlb-description-backup,
.mw-mlb-image-desc {
color: #6f7073;
}
diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.js
b/resources/ext.multimediaViewer/ext.multimediaViewer.js
index 296cef5..4b3a3a0 100755
--- a/resources/ext.multimediaViewer/ext.multimediaViewer.js
+++ b/resources/ext.multimediaViewer/ext.multimediaViewer.js
@@ -68,6 +68,37 @@
};
/**
+ * Helper function for whitelisting HTML to only keep links. Works
in-place.
+ * @param {jQuery} $el
+ */
+ function whitelistHtml( $el ) {
+ var child, $prev, $child = $el.children().first();
+
+ while ( $child && $child.length ) {
+ child = $child.get( 0 );
+
+ if ( child.nodeType !== child.ELEMENT_NODE ) {
+ return;
+ }
+
+ whitelistHtml( $child );
+
+ if ( !$child.is( 'a' ) ) {
+ $prev = $child.prev();
+ $child.replaceWith( $child.contents() );
+ } else {
+ $prev = $child;
+ }
+
+ if ( $prev && $prev.length === 1 ) {
+ $child = $prev.next();
+ } else {
+ $child = $el.children().first();
+ }
+ }
+ }
+
+ /**
* Class that analyses the page, looks for image content and sets up
the hooks
* to manage the viewing experience of such content.
*
@@ -100,7 +131,7 @@
// Traverse DOM, looking for potential thumbnails
$thumbs.each( function ( i, thumb ) {
- var fileLink, thisImage,
+ var fileLink, thisImage, $thumbCaption,
$thumb = $( thumb ),
$link = $thumb.closest( 'a.image' ),
$thumbContain = $link.closest( '.thumb' ),
@@ -119,6 +150,10 @@
// This isn't a thumbnail! Just use the link.
$thumbContain = $link;
} else if ( $thumbContain.is( '.thumb' ) ) {
+ $thumbCaption = $thumbContain.find(
'.thumbcaption' ).clone();
+ $thumbCaption.find( '.magnify' ).remove();
+ whitelistHtml( $thumbCaption );
+ $links.data( 'caption', $thumbCaption.html() );
$thumbContain = $thumbContain.find( '.image' );
}
@@ -210,7 +245,7 @@
e.preventDefault();
- this.loadImage( thisImage, initial );
+ this.loadImage( thisImage, initial, $clickedEle.data( 'caption'
) );
};
/**
@@ -411,34 +446,14 @@
}
};
- MMVP.setImageInfo = function ( fileTitle, imageInfo ) {
- function whitelistHtml( $el ) {
- var child, $prev, $child = $el.children().first();
-
- while ( $child && $child.length ) {
- child = $child.get( 0 );
-
- if ( child.nodeType !== child.ELEMENT_NODE ) {
- return;
- }
-
- whitelistHtml( $child );
-
- if ( !$child.is( 'a' ) ) {
- $prev = $child.prev();
- $child.replaceWith( $child.contents() );
- } else {
- $prev = $child;
- }
-
- if ( $prev && $prev.length === 1 ) {
- $child = $prev.next();
- } else {
- $child = $el.children().first();
- }
- }
- }
-
+ /**
+ * @method
+ * Sets image info in the interface
+ * @param {mw.Title} fileTitle
+ * @param {object} imageInfo Returned from the API and treated slightly
+ * @param {string} [caption] HTML caption for the image
+ */
+ MMVP.setImageInfo = function ( fileTitle, imageInfo, caption ) {
function setUserpageLink( username, gender ) {
var userpage = 'User:' + username,
userTitle = mw.Title.newFromText( userpage );
@@ -542,13 +557,6 @@
if ( extmeta ) {
desc = extmeta.ImageDescription;
- ui.$imageDescDiv.toggleClass( 'empty', !desc );
-
- if ( desc ) {
- desc = desc.value;
- whitelistHtml( ui.$imageDesc.append(
$.parseHTML( desc ) ) );
- }
-
datetime = extmeta.DateTimeOriginal || extmeta.DateTime;
if ( datetime ) {
@@ -603,6 +611,22 @@
license = extmeta.License;
}
+ ui.$imageDescDiv.toggleClass( 'empty', !desc );
+
+ if ( desc ) {
+ desc = desc.value;
+ }
+
+ if ( caption ) {
+ whitelistHtml( ui.$imageDesc.append( $.parseHTML(
caption ) ) );
+
+ if ( desc ) {
+ whitelistHtml( ui.$imageBackupDesc.append(
$.parseHTML( desc ) ) );
+ }
+ } else if ( desc ) {
+ whitelistHtml( ui.$imageDesc.append( $.parseHTML( desc
) ) );
+ }
+
if ( license ) {
license = license.value;
}
@@ -626,7 +650,14 @@
ui.$license.toggleClass( 'empty', !license );
};
- MMVP.loadImage = function ( image, initialSrc ) {
+ /**
+ * @method
+ * Loads a specified image.
+ * @param {mw.LightboxImage} image
+ * @param {string} initialSrc The string to set the src attribute to at
first.
+ * @param {string} [caption] The caption of the image - optional
because some don't have any.
+ */
+ MMVP.loadImage = function ( image, initialSrc, caption ) {
var mdpid,
viewer = this;
@@ -661,7 +692,7 @@
viewer.lightbox.iface.$imageDiv.removeClass(
'empty' );
viewer.updateControls();
$.removeSpinner( 'mw-mlb-loading-spinner' );
- viewer.setImageInfo( image.filePageTitle,
imageInfo );
+ viewer.setImageInfo( image.filePageTitle,
imageInfo, caption );
};
imageEle.src = imageInfo.imageinfo[0].thumburl ||
imageInfo.imageinfo[0].url;
diff --git
a/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
b/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
index e650e8f..55aad86 100644
--- a/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
+++ b/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
@@ -45,6 +45,7 @@
this.$imageDesc.empty();
this.$imageDescDiv.addClass( 'empty' );
+ this.$imageBackupDesc.empty();
this.$title.empty();
this.$credit.empty().addClass( 'empty' );
@@ -198,6 +199,10 @@
.addClass( 'mw-mlb-image-links' )
.appendTo( this.$imageLinkDiv );
+ this.$imageBackupDesc = $( '<p>' )
+ .addClass( 'mw-mlb-description-backup' )
+ .appendTo( this.$imageLinkDiv );
+
this.initializeRepoLink();
this.initializeDatetime();
this.initializeUploader();
diff --git a/tests/qunit/lightboxinterface.test.js
b/tests/qunit/lightboxinterface.test.js
index c1a36e3..f9da7e2 100644
--- a/tests/qunit/lightboxinterface.test.js
+++ b/tests/qunit/lightboxinterface.test.js
@@ -2,6 +2,7 @@
var thingsShouldBeEmptied = [
'$license',
'$imageDesc',
+ '$imageBackupDesc',
'$title',
'$credit',
'$username',
--
To view, visit https://gerrit.wikimedia.org/r/100618
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I512b3dd99207878233d501135b4dda0d0bd9cdd6
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
