jenkins-bot has submitted this change and it was merged.
Change subject: Don't render a toast on page load
......................................................................
Don't render a toast on page load
Separating init functions of toast from the ToastDrawer itself. ToastDrawer
is the "old" toast.js, which lives in the new module ToastDrawer. toast.js
is a wrapper around one (unique) ToastDrawer instance, which will be created,
when the toast drawer is used the first time, instead of when the toast object
is created.
toast.js wraps all needed and all used Api's of the now called ToastDrawer,
so there is no need to change any existing code. Toast.js (from an Api point
of view) feels like the current implementation.
To save a pending toast, you can use the same function like before, which is
handled directly in the toast module, instead of in the drawer itself. That's
allows us to create a toast out of _showPending() only, if there is a pending
toast message to show. That avoids to render a toast on every page load, even,
if it isn't used directly after or during the page load.
Bug: T108249
Change-Id: Ia4649843f9810007454bdf27612f375c0eea7c5c
---
M includes/Resources.php
A resources/mobile.toast/ToastDrawer.js
M resources/mobile.toast/toast.js
3 files changed, 108 insertions(+), 64 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/Resources.php b/includes/Resources.php
index 01f772a..afc7bb8 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -892,6 +892,7 @@
'mobile.drawers',
),
'scripts' => array(
+ 'resources/mobile.toast/ToastDrawer.js',
'resources/mobile.toast/toast.js',
),
'skinStyles' => array(
diff --git a/resources/mobile.toast/ToastDrawer.js
b/resources/mobile.toast/ToastDrawer.js
new file mode 100644
index 0000000..895de33
--- /dev/null
+++ b/resources/mobile.toast/ToastDrawer.js
@@ -0,0 +1,31 @@
+( function ( M ) {
+ var ToastDrawer,
+ Drawer = M.require( 'mobile.drawers/Drawer' );
+
+ /**
+ * Auto-expiring notification.
+ * @class
+ * @extends Drawer
+ */
+ ToastDrawer = Drawer.extend( {
+ className: 'toast position-fixed view-border-box',
+ minHideDelay: 1000,
+ /**
+ * Show the toast message with a given class and content
+ * @method
+ * @param {String} content Content to be placed in element
+ * @param {String} className class to add to element
+ */
+ show: function ( content, className ) {
+ this.$el
+ .html( content )
+ .removeAttr( 'class' )
+ .addClass( this.className )
+ .addClass( className );
+ Drawer.prototype.show.apply( this, arguments );
+ }
+ } );
+
+ M.define( 'mobile.toast/ToastDrawer', ToastDrawer );
+
+}( mw.mobileFrontend ) );
diff --git a/resources/mobile.toast/toast.js b/resources/mobile.toast/toast.js
index a24c610..7502742 100644
--- a/resources/mobile.toast/toast.js
+++ b/resources/mobile.toast/toast.js
@@ -1,75 +1,87 @@
-( function ( M ) {
+( function ( M, $ ) {
var Toast,
settingsKey = 'mobileFrontend/toast',
settings = M.require( 'mobile.settings/settings' ),
- Drawer = M.require( 'mobile.drawers/Drawer' );
+ ToastDrawer = M.require( 'mobile.toast/ToastDrawer' );
/**
- * Auto-expiring notification.
+ * Wrapper for one global ToastDrawer
* @class
- * @extends Drawer
*/
- Toast = Drawer.extend( {
- className: 'toast position-fixed view-border-box',
- minHideDelay: 1000,
- /**
- * @inheritdoc
- */
- postRender: function () {
- Drawer.prototype.postRender.call( this );
- this._showPending();
- },
- /**
- * Show the toast message with a given class and content
- * @method
- * @param {String} content Content to be placed in element
- * @param {String} className class to add to element
- */
- show: function ( content, className ) {
- this.$el
- .html( content )
- .removeAttr( 'class' )
- .addClass( this.className )
- .addClass( className );
- Drawer.prototype.show.apply( this, arguments );
- },
- /**
- * Save the toast data in settings so that we can show it on
page reload.
- * Also check whether there is a pending message that's not
shown yet.
- * If yes, output a warning message and discard this message.
- * This is to ensure that the page needs to be reloaded before
adding
- * a new message for showing later.
- * @method
- * @param {String} content Content to be placed in element
- * @param {String} className class to add to element
- */
- showOnPageReload: function ( content, className ) {
- if ( settings.get( settingsKey ) ) {
- mw.log.warn(
- 'A pending toast message already exits.
' +
- 'The page should have been reloaded by
now.'
- );
- return;
- }
- settings.save( settingsKey, JSON.stringify( {
- content: content,
- className: className
- } ) );
- },
- /**
- * Show the previously saved toast data and delete it from
settings
- * @private
- */
- _showPending: function () {
- var data = settings.get( settingsKey );
- if ( data ) {
- data = JSON.parse( data );
- this.show( data.content, data.className );
- settings.remove( settingsKey );
- }
+ Toast = function Toast() {
+ // FIXME: Use mw.requestIdleCallback, once it's available
(T111456)
+ $( this._showPending() );
+ };
+
+ /**
+ * Get a unique, global ToastDrawer object
+ * @return {ToastDrawer}
+ * @private
+ * @method
+ */
+ Toast.prototype._getToastDrawer = function () {
+ // check, if there is a ToastDrawer object already
+ if ( this.drawer === undefined ) {
+ this.drawer = new ToastDrawer();
}
- } );
+ return this.drawer;
+ };
+
+ /**
+ * Show a message with the given class in a toast.
+ * @method
+ * @param {String} msg Message to show in the toast
+ * @param {String} cssClass CSS class to add to the element
+ */
+ Toast.prototype.show = function ( msg, cssClass ) {
+ this._getToastDrawer().show( msg, cssClass );
+ };
+
+ /**
+ * Hide the ToastDrawer if it's visible.
+ * @method
+ */
+ Toast.prototype.hide = function () {
+ this._getToastDrawer().hide();
+ };
+
+ /**
+ * Save the toast data in settings so that we can show it on page
reload.
+ * Also check whether there is a pending message that's not shown yet.
+ * If yes, output a warning message and discard this message.
+ * This is to ensure that the page needs to be reloaded before adding
+ * a new message for showing later.
+ * @method
+ * @param {String} content Content to be placed in element
+ * @param {String} className class to add to element
+ */
+ Toast.prototype.showOnPageReload = function ( content, className ) {
+ if ( settings.get( settingsKey ) ) {
+ mw.log.warn(
+ 'A pending toast message already exits. ' +
+ 'The page should have been reloaded by now.'
+ );
+ return;
+ }
+ settings.save( settingsKey, JSON.stringify( {
+ content: content,
+ className: className
+ } ) );
+ };
+
+ /**
+ * Show the previously saved toast data and delete it from settings
+ * @private
+ */
+ Toast.prototype._showPending = function () {
+ var data = settings.get( settingsKey );
+ if ( data ) {
+ data = JSON.parse( data );
+ this._getToastDrawer().show( data.content,
data.className );
+ settings.remove( settingsKey );
+ }
+ };
M.define( 'mobile.toast/toast', new Toast() );
-}( mw.mobileFrontend ) );
+}( mw.mobileFrontend, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/230112
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ia4649843f9810007454bdf27612f375c0eea7c5c
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: Robmoen <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
