Load all images during print action
When the print button is clicked, load all images from the page before calling window.print Add a timeout to make sure the user doesnt wait too long. Change-Id: Ie922d239f9c5b5757237dc10b673fb500ff203ad Depends-on: Id7f21606be3db22fe8dfde2db675f9905547cfea Bug: T180058
This commit is contained in:
parent
1d7a497f23
commit
b05da8d49d
|
@ -49,12 +49,17 @@ class MinervaHooks {
|
||||||
) {
|
) {
|
||||||
$testModule = [
|
$testModule = [
|
||||||
'dependencies' => [
|
'dependencies' => [
|
||||||
|
'mobile.startup',
|
||||||
'skins.minerva.notifications.badge'
|
'skins.minerva.notifications.badge'
|
||||||
],
|
],
|
||||||
'localBasePath' => dirname( __DIR__ ),
|
'localBasePath' => dirname( __DIR__ ),
|
||||||
'remoteSkinPath' => 'MinervaNeue',
|
'remoteSkinPath' => 'MinervaNeue',
|
||||||
'targets' => [ 'mobile', 'desktop' ],
|
'targets' => [ 'mobile', 'desktop' ],
|
||||||
'scripts' => [
|
'scripts' => [
|
||||||
|
// additional scaffolding (minus initialisation scripts)
|
||||||
|
'resources/skins.minerva.scripts/DownloadIcon.js',
|
||||||
|
// test files
|
||||||
|
'tests/qunit/skins.minerva.scripts/test_DownloadIcon.js',
|
||||||
'tests/qunit/skins.minerva.notifications.badge/test_NotificationBadge.js'
|
'tests/qunit/skins.minerva.notifications.badge/test_NotificationBadge.js'
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
"jqXHR",
|
"jqXHR",
|
||||||
"View",
|
"View",
|
||||||
"Page",
|
"Page",
|
||||||
|
"Skin",
|
||||||
"File",
|
"File",
|
||||||
"Router",
|
"Router",
|
||||||
"Icon",
|
"Icon",
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
( function ( M ) {
|
( function ( M ) {
|
||||||
|
|
||||||
var msg = mw.msg,
|
var msg = mw.msg,
|
||||||
|
MAX_PRINT_TIMEOUT = 3000,
|
||||||
Icon = M.require( 'mobile.startup/Icon' );
|
Icon = M.require( 'mobile.startup/Icon' );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -8,10 +9,12 @@
|
||||||
* @class DownloadIcon
|
* @class DownloadIcon
|
||||||
* @extends Icon
|
* @extends Icon
|
||||||
*
|
*
|
||||||
|
* @param {Skin} skin
|
||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
function DownloadIcon() {
|
function DownloadIcon( skin ) {
|
||||||
var options = {};
|
var options = {};
|
||||||
|
this.skin = skin;
|
||||||
options.tagName = 'li';
|
options.tagName = 'li';
|
||||||
options.title = msg( 'minerva-download' );
|
options.title = msg( 'minerva-download' );
|
||||||
options.name = 'download';
|
options.name = 'download';
|
||||||
|
@ -19,8 +22,47 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
OO.mfExtend( DownloadIcon, Icon, {
|
OO.mfExtend( DownloadIcon, Icon, {
|
||||||
|
/**
|
||||||
|
* Replace download icon with a spinner
|
||||||
|
*/
|
||||||
|
showSpinner: function () {
|
||||||
|
this.options.name = 'spinner';
|
||||||
|
this.render();
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Restore download icon from spinner state
|
||||||
|
*/
|
||||||
|
hideSpinner: function () {
|
||||||
|
this.options.name = 'download';
|
||||||
|
this.render();
|
||||||
|
},
|
||||||
|
isTemplateMode: false,
|
||||||
|
/**
|
||||||
|
* onClick handler for button that invokes print function
|
||||||
|
*/
|
||||||
onClick: function () {
|
onClick: function () {
|
||||||
window.print();
|
var self = this,
|
||||||
|
hideSpinner = this.hideSpinner.bind( this );
|
||||||
|
|
||||||
|
function doPrint() {
|
||||||
|
self.timeout = clearTimeout( self.timeout );
|
||||||
|
hideSpinner();
|
||||||
|
window.print();
|
||||||
|
}
|
||||||
|
|
||||||
|
// The click handler may be invoked multiple times so if a pending print is occurring
|
||||||
|
// do nothing.
|
||||||
|
if ( !this.timeout ) {
|
||||||
|
this.showSpinner();
|
||||||
|
// If all image downloads are taking longer to load then the MAX_PRINT_TIMEOUT
|
||||||
|
// abort the spinner and print regardless.
|
||||||
|
this.timeout = setTimeout( doPrint, MAX_PRINT_TIMEOUT );
|
||||||
|
this.skin.loadImagesList().always( function () {
|
||||||
|
if ( self.timeout ) {
|
||||||
|
doPrint();
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
click: 'onClick'
|
click: 'onClick'
|
||||||
|
|
|
@ -0,0 +1,67 @@
|
||||||
|
( function ( M ) {
|
||||||
|
var Skin = M.require( 'mobile.startup/Skin' ),
|
||||||
|
Deferred = $.Deferred,
|
||||||
|
DownloadIcon = M.require( 'skins.minerva.scripts/DownloadIcon' );
|
||||||
|
|
||||||
|
QUnit.module( 'Minerva DownloadIcon', {
|
||||||
|
setup: function () {
|
||||||
|
this.skin = new Skin( {} );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
|
||||||
|
QUnit.test( '#DownloadIcon (print after image download)', function ( assert ) {
|
||||||
|
var icon = new DownloadIcon( this.skin ),
|
||||||
|
d = Deferred(),
|
||||||
|
spy = this.sandbox.stub( window, 'print' );
|
||||||
|
|
||||||
|
this.sandbox.stub( this.skin, 'loadImagesList' ).returns( d.resolve() );
|
||||||
|
|
||||||
|
icon.onClick();
|
||||||
|
d.then( function () {
|
||||||
|
assert.ok( spy.calledOnce, 'Print occurred.' );
|
||||||
|
} );
|
||||||
|
|
||||||
|
return d;
|
||||||
|
} );
|
||||||
|
|
||||||
|
QUnit.test( '#DownloadIcon (print via timeout)', function ( assert ) {
|
||||||
|
var icon = new DownloadIcon( this.skin ),
|
||||||
|
d = Deferred(),
|
||||||
|
spy = this.sandbox.stub( window, 'print' );
|
||||||
|
|
||||||
|
this.sandbox.stub( this.skin, 'loadImagesList' ).returns( d );
|
||||||
|
|
||||||
|
window.setTimeout( function () {
|
||||||
|
d.resolve();
|
||||||
|
}, 3400 );
|
||||||
|
|
||||||
|
icon.onClick();
|
||||||
|
d.then( function () {
|
||||||
|
assert.ok( spy.calledOnce,
|
||||||
|
'Print was called once despite loadImagesList resolving after MAX_PRINT_TIMEOUT' );
|
||||||
|
} );
|
||||||
|
|
||||||
|
return d;
|
||||||
|
} );
|
||||||
|
|
||||||
|
QUnit.test( '#DownloadIcon (multiple clicks)', function ( assert ) {
|
||||||
|
var icon = new DownloadIcon( this.skin ),
|
||||||
|
d = Deferred(),
|
||||||
|
spy = this.sandbox.stub( window, 'print' );
|
||||||
|
|
||||||
|
this.sandbox.stub( this.skin, 'loadImagesList' ).returns( d );
|
||||||
|
|
||||||
|
window.setTimeout( function () {
|
||||||
|
d.resolve();
|
||||||
|
}, 3400 );
|
||||||
|
|
||||||
|
icon.onClick();
|
||||||
|
icon.onClick();
|
||||||
|
d.then( function () {
|
||||||
|
assert.ok( spy.calledOnce,
|
||||||
|
'Print was called once despite multiple clicks' );
|
||||||
|
} );
|
||||||
|
|
||||||
|
return d;
|
||||||
|
} );
|
||||||
|
}( mw.mobileFrontend ) );
|
Loading…
Reference in New Issue