jenkins-bot has submitted this change and it was merged.
Change subject: Load images normally
......................................................................
Load images normally
Removes the spinner, loads images line-by-line. Supposedly more
expected for most users.
Change-Id: Ia5fba4c8d8af681c0a95e43d34014b07e33941c4
---
M MultimediaViewer.php
M resources/ext.multimediaViewer/ext.multimediaViewer.css
M resources/ext.multimediaViewer/ext.multimediaViewer.js
M resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
M resources/multilightbox/lightboximage.js
M resources/multilightbox/lightboxinterface.js
M tests/qunit/ext.multimediaViewer.test.js
7 files changed, 65 insertions(+), 45 deletions(-)
Approvals:
MarkTraceur: Looks good to me, approved
jenkins-bot: Verified
diff --git a/MultimediaViewer.php b/MultimediaViewer.php
index 5050d42..6df2b66 100644
--- a/MultimediaViewer.php
+++ b/MultimediaViewer.php
@@ -101,7 +101,6 @@
'ext.multimediaViewer.lightboximage',
'mediawiki.Title',
'jquery.ui.dialog',
- 'jquery.spinner',
'jquery.hidpi',
),
diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.css
b/resources/ext.multimediaViewer/ext.multimediaViewer.css
index db8c7b9..3aac386 100644
--- a/resources/ext.multimediaViewer/ext.multimediaViewer.css
+++ b/resources/ext.multimediaViewer/ext.multimediaViewer.css
@@ -278,15 +278,6 @@
width: 50%;
}
-.mlb-image .mw-spinner {
- margin-left: auto;
- margin-right: auto;
-}
-
-.mlb-image.empty .mw-spinner {
- display: block;
-}
-
.mlb-image.empty img {
display: none;
}
@@ -361,4 +352,4 @@
.mlb-post-image:hover .mw-mlb-drag-icon {
opacity: 1;
-}
\ No newline at end of file
+}
diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.js
b/resources/ext.multimediaViewer/ext.multimediaViewer.js
index 3e4508a..c11fa3c 100755
--- a/resources/ext.multimediaViewer/ext.multimediaViewer.js
+++ b/resources/ext.multimediaViewer/ext.multimediaViewer.js
@@ -327,32 +327,22 @@
*
* @protected
*
- * @param {mw.LightboxInterface} ui lightbox that got resized
- * @param {Object} data information regarding the new resized image
+ * @param {LightboxInterface} ui lightbox that got resized
+ * @param {Object} imageInfo information regarding the new resized image
* @param {number} targetWidth
*/
- MMVP.loadResizedImage = function ( ui, data, targetWidth ) {
- var imageInfo, innerInfo, rpid, viewer, image;
+ MMVP.loadResizedImage = function ( ui, imageInfo, targetWidth ) {
+ var innerInfo, rpid, viewer, image;
// Replace image only if data was returned.
- if ( data && data.query && data.query.pages ) {
+ if ( imageInfo ) {
viewer = this;
image = new Image();
-
- $.each( data.query.pages, function ( i, page ) {
- imageInfo = page;
- return false;
- } );
innerInfo = imageInfo.imageinfo[0];
image.onload = function () {
- if ( image.width > targetWidth ) {
- image.width = targetWidth;
- }
viewer.profileEnd( rpid );
- ui.replaceImageWith( image );
- this.updateControls();
};
rpid = this.profileStart( 'image-resize', {
@@ -362,6 +352,11 @@
}, innerInfo.mime );
image.src = innerInfo.thumburl || innerInfo.url;
+ if ( innerInfo.thumbwidth > targetWidth ) {
+ image.width = targetWidth;
+ }
+ ui.replaceImageWith( image );
+ this.updateControls();
}
};
@@ -677,16 +672,12 @@
// Avoids trying to load /wiki/Undefined and doesn't
// cost any network time - the library currently needs
// some src attribute to work. Will fix.
- image.src = initialSrc;
+ image.initialSrc = initialSrc;
this.currentImageFilename =
image.filePageTitle.getPrefixedText();
this.currentImageFileTitle = image.filePageTitle;
this.lightbox.iface.comingFromPopstate = comingFromPopstate;
this.lightbox.open();
$( document.body ).addClass( 'mw-mlb-lightbox-open' );
- this.lightbox.iface.$imageDiv.append( $.createSpinner( {
- id: 'mw-mlb-loading-spinner',
- size: 'large'
- } ) );
mdpid = this.profileStart( 'metadata-fetch' );
@@ -695,9 +686,6 @@
innerInfo = imageInfo.imageinfo[0],
imageEle = new Image(),
targetWidth = size;
-
- viewer.profileEnd( mdpid );
- viewer.setImageInfo( image.filePageTitle, imageInfo );
if ( !viewer.hasAnimatedMetadata ) {
viewer.animateMetadataDiv();
@@ -709,20 +697,22 @@
}
viewer.profileEnd( pid );
-
- viewer.lightbox.iface.replaceImageWith(
imageEle );
- viewer.lightbox.iface.$imageDiv.removeClass(
'empty' );
viewer.updateControls();
- $.removeSpinner( 'mw-mlb-loading-spinner' );
};
- imageEle.src = imageInfo.imageinfo[0].thumburl ||
imageInfo.imageinfo[0].url;
+ viewer.profileEnd( mdpid );
pid = viewer.profileStart( 'image-load', {
width: innerInfo.width,
height: innerInfo.height,
fileSize: innerInfo.size
}, innerInfo.mime );
+
+ imageEle.src = imageInfo.imageinfo[0].thumburl ||
imageInfo.imageinfo[0].url;
+
+ viewer.lightbox.iface.$imageDiv.removeClass( 'empty' );
+ viewer.lightbox.iface.replaceImageWith( imageEle );
+ viewer.setImageInfo( image.filePageTitle, imageInfo );
} );
comingFromPopstate = false;
diff --git
a/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
b/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
index 8bd4a51..673212d 100644
--- a/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
+++ b/resources/ext.multimediaViewer/ext.multimediaViewer.lightboxinterface.js
@@ -582,5 +582,19 @@
}
};
+ LIP.replaceImageWith = function ( imageEle ) {
+ var $image = $( imageEle );
+
+ this.currentImage.src = imageEle.src;
+
+ this.$image.replaceWith( $image );
+ this.$image = $image;
+
+ this.$image.css( {
+ maxHeight: $image.parent().height(),
+ maxWidth: $image.parent().width()
+ } );
+ };
+
mw.LightboxInterface = LightboxInterface;
}( mediaWiki, jQuery, OO, window.LightboxInterface ) );
diff --git a/resources/multilightbox/lightboximage.js
b/resources/multilightbox/lightboximage.js
index ddff3d9..9ea200f 100644
--- a/resources/multilightbox/lightboximage.js
+++ b/resources/multilightbox/lightboximage.js
@@ -12,6 +12,21 @@
var LIP = LightboxImage.prototype;
+ /**
+ * The URL of the image (in the size we intend use to display the it in
the lightbox)
+ * @type {String}
+ * @protected
+ */
+ LIP.src = null;
+
+ /**
+ * The URL of a placeholder while the image loads. Typically a smaller
version of the image, which is already
+ * loaded in the browser.
+ * @type {String}
+ * @protected
+ */
+ LIP.initialSrc = null;
+
LIP.getImageElement = function ( loadcb ) {
var ele;
@@ -19,7 +34,7 @@
ele = new Image();
ele.addEventListener( 'load', loadcb );
- ele.src = this.src;
+ ele.src = this.src || this.initialSrc;
lightboxHooks.callAll( 'modifyImageElement', ele );
diff --git a/resources/multilightbox/lightboxinterface.js
b/resources/multilightbox/lightboxinterface.js
index 9c44c52..607c7c6 100644
--- a/resources/multilightbox/lightboxinterface.js
+++ b/resources/multilightbox/lightboxinterface.js
@@ -90,6 +90,12 @@
LIP = LightboxInterface.prototype;
+ /**
+ * @type {LightboxImage}
+ * @protected
+ */
+ LIP.currentImage = null;
+
LIP.empty = function () {
this.$imageDiv.empty();
@@ -195,11 +201,14 @@
lightboxHooks.callAll( 'imageLoaded', this );
};
+ /**
+ * @param {LightboxImage} image
+ */
LIP.load = function ( image ) {
- var ele = image.getImageElement( function () {
+ var iface = this,
+ ele = image.getImageElement( function () {
iface.loadCallback( image, ele );
- } ),
- iface = this;
+ } );
this.currentImage = image;
};
@@ -210,6 +219,10 @@
this.$imageDiv.append( this.$image );
};
+ /**
+ * Changes what image is being displayed.
+ * @param {HTMLImageElement} imageEle
+ */
LIP.replaceImageWith = function ( imageEle ) {
var $image = $( imageEle );
diff --git a/tests/qunit/ext.multimediaViewer.test.js
b/tests/qunit/ext.multimediaViewer.test.js
index f45ccc8..54b095f 100644
--- a/tests/qunit/ext.multimediaViewer.test.js
+++ b/tests/qunit/ext.multimediaViewer.test.js
@@ -131,8 +131,6 @@
// Calling loadResizedImage() with empty/undefined data should
not fail.
viewer.loadResizedImage( ui, data );
- viewer.loadResizedImage( ui, {} );
- viewer.loadResizedImage( ui, { query: {} } );
assert.ok( true, 'Resized image is not replaced since we have
not data.' );
} );
--
To view, visit https://gerrit.wikimedia.org/r/100693
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ia5fba4c8d8af681c0a95e43d34014b07e33941c4
Gerrit-PatchSet: 8
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: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
