JGonera has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/83958


Change subject: Load talk overlay dynamically
......................................................................

Load talk overlay dynamically

Only when talk icon is clicked.
Initial page load (beta, desktop Chrome) before: 339KB, after: 332KB.

Change-Id: I4aa7976e88dbb214e37c7c6aae082a82623d3a3d
---
M includes/Resources.php
R javascripts/modules/talk/TalkOverlay.js
A javascripts/modules/talk/talk.js
3 files changed, 83 insertions(+), 56 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend 
refs/changes/58/83958/1

diff --git a/includes/Resources.php b/includes/Resources.php
index fbd1bfc..18bec83 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -263,10 +263,6 @@
                'templates' => array(
                        // notifications.js
                        'overlays/notifications',
-                       // talk.js
-                       'overlays/talk',
-                       'overlays/talkSectionAdd',
-                       'talkSection',
                        // page.js
                        'pageActionTutorial',
                ),
@@ -301,8 +297,7 @@
                'scripts' => array(
                        'javascripts/modules/mf-toggle-dynamic.js',
                        'javascripts/modules/notifications.js',
-                       'javascripts/modules/talk/TalkSectionOverlay.js',
-                       'javascripts/modules/talk.js',
+                       'javascripts/modules/talk/talk.js',
                        'javascripts/modules/search/pageImages.js',
                        'javascripts/modules/languages/preferred.js',
                        'javascripts/modules/tutorials/PageActionOverlay.js',
@@ -321,10 +316,39 @@
                        'mobile-frontend-editor-tutorial-confirm',
 
                        // for talk.js
+                       'mobile-frontend-talk-overlay-header',
+
+                       // notifications.js (defined in Echo)
+                       'echo-none',
+                       'notifications',
+               ),
+       ),
+
+       'mobile.dynamic.talk' => $wgMFMobileResourceBoilerplate + array(
+               'dependencies' => array(
+                       'mobile.beta',
+                       'mobile.dynamic.talk.plumbing',
+               ),
+               'scripts' => array(
+                       'javascripts/modules/talk/TalkSectionOverlay.js',
+                       'javascripts/modules/talk/TalkOverlay.js',
+               ),
+       ),
+
+       'mobile.dynamic.talk.plumbing' => array(
+               'class' => 'MFResourceLoaderModule',
+               'localBasePath' => $localBasePath,
+               'localTemplateBasePath' => $localBasePath . '/templates',
+               'templates' => array(
+                       // talk.js
+                       'overlays/talk',
+                       'overlays/talkSectionAdd',
+                       'talkSection',
+               ),
+               'messages' => array(
                        'mobile-frontend-talk-explained',
                        'mobile-frontend-talk-explained-empty',
                        'mobile-frontend-talk-overlay-lead-header',
-                       'mobile-frontend-talk-overlay-header',
                        'mobile-frontend-talk-add-overlay-subject-placeholder',
                        'mobile-frontend-talk-add-overlay-content-placeholder',
                        'mobile-frontend-talk-edit-summary',
@@ -332,10 +356,6 @@
                        'mobile-frontend-talk-reply-success',
                        'mobile-frontend-talk-reply',
                        'mobile-frontend-talk-reply-info',
-
-                       // notifications.js (defined in Echo)
-                       'echo-none',
-                       'notifications',
                ),
        ),
 
diff --git a/javascripts/modules/talk.js 
b/javascripts/modules/talk/TalkOverlay.js
similarity index 71%
rename from javascripts/modules/talk.js
rename to javascripts/modules/talk/TalkOverlay.js
index ee8a332..5e7fea3 100644
--- a/javascripts/modules/talk.js
+++ b/javascripts/modules/talk/TalkOverlay.js
@@ -5,7 +5,6 @@
                Overlay = M.require( 'Overlay' ),
                TalkSectionOverlay = M.require( 
'modules/talk/TalkSectionOverlay' ),
                api = M.require( 'api' ),
-               leadHeading = mw.msg( 
'mobile-frontend-talk-overlay-lead-header' ),
                TalkSectionAddOverlay = Overlay.extend( {
                        defaults: {
                                cancelMsg: mw.msg( 
'mobile-frontend-editor-cancel' ),
@@ -64,6 +63,10 @@
                TalkOverlay = Overlay.extend( {
                        template: M.template.get( 'overlays/talk' ),
                        className: 'mw-mf-overlay list-overlay',
+                       defaults: {
+                               heading: mw.msg( 
'mobile-frontend-talk-overlay-header' ),
+                               leadHeading: mw.msg( 
'mobile-frontend-talk-overlay-lead-header' )
+                       },
                        appendSection: function( heading, text ) {
                                var $newTopic;
                                this.options.page.appendSection( heading, text 
);
@@ -104,7 +107,7 @@
                                                leadSection = {
                                                        content: page.lead,
                                                        id: 0,
-                                                       heading: leadHeading
+                                                       heading: mw.msg( 
'mobile-frontend-talk-overlay-lead-header' )
                                                },
                                                section = id === 0 ? 
leadSection : page.getSubSection( id ),
                                                childOverlay = new 
TalkSectionOverlay( {
@@ -118,50 +121,8 @@
                                        this.$( '.lead-discussion' ).remove();
                                }
                        }
-               } ),
-               Page = M.require( 'page' );
-
-       function renderTalkOverlay( pageData ) {
-               var topOverlay,
-                       page = new Page( pageData );
-
-               topOverlay = new TalkOverlay( {
-                       heading: mw.msg( 'mobile-frontend-talk-overlay-header' 
),
-                       leadHeading: mw.msg( 
'mobile-frontend-talk-overlay-lead-header' ),
-                       page: page
                } );
-               topOverlay.show();
-       }
 
-       function onTalkClick( ev ) {
-               var $talk = $( this ), talkPage = $talk.data( 'title' );
-               // FIXME: this currently gives an indication something async is 
happening. We can do better.
-               $talk.addClass( 'loading' );
-               ev.preventDefault();
-
-               // FIXME: use Page's mechanisms for retrieving page data instead
-               M.pageApi.getPage( talkPage ).fail( function( resp ) {
-                       if ( resp.error && resp.error.code === 'missingtitle' ) 
{
-                               renderTalkOverlay( {
-                                       sections: [], title: talkPage
-                               } );
-                       }
-                       $talk.removeClass( 'loading' );
-               } ).done( function( pageData ) {
-                       renderTalkOverlay( pageData );
-                       $talk.removeClass( 'loading' );
-               } );
-       }
-
-       function init( title ) {
-               var talkPrefix = mw.config.get( 'wgFormattedNamespaces' ) 
[mw.config.get( 'wgNamespaceNumber' ) + 1 ] + ':';
-               // FIXME change when micro.tap.js in stable
-               $( '#ca-talk' ).on( M.tapEvent( 'click' ), onTalkClick ).data( 
'title', talkPrefix + title );
-       }
-
-       init( mw.config.get( 'wgTitle' ) );
-       M.on( 'page-loaded', function( page ) {
-               init( page.title );
-       } );
+       M.define( 'modules/talk/TalkOverlay', TalkOverlay );
 
 }( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/talk/talk.js b/javascripts/modules/talk/talk.js
new file mode 100644
index 0000000..4c811a6
--- /dev/null
+++ b/javascripts/modules/talk/talk.js
@@ -0,0 +1,46 @@
+( function( M, $ ) {
+       M.assertMode( [ 'beta', 'alpha' ] );
+
+       var LoadingOverlay = M.require( 'LoadingOverlay' ),
+               Page = M.require( 'page' ),
+               loadingOverlay = new LoadingOverlay();
+
+       function renderTalkOverlay( pageData ) {
+               mw.loader.using( 'mobile.dynamic.talk', function() {
+                       var TalkOverlay = M.require( 'modules/talk/TalkOverlay' 
);
+
+                       loadingOverlay.hide();
+                       new TalkOverlay( { page: new Page( pageData ) } 
).show();
+               } );
+       }
+
+       function onTalkClick( ev ) {
+               var talkPage = $( this ).data( 'title' );
+
+               ev.preventDefault();
+               loadingOverlay.show();
+
+               // FIXME: use Page's mechanisms for retrieving page data instead
+               M.pageApi.getPage( talkPage ).fail( function( resp ) {
+                       if ( resp.error && resp.error.code === 'missingtitle' ) 
{
+                               renderTalkOverlay( {
+                                       sections: [], title: talkPage
+                               } );
+                       }
+               } ).done( function( pageData ) {
+                       renderTalkOverlay( pageData );
+               } );
+       }
+
+       function init( title ) {
+               var talkPrefix = mw.config.get( 'wgFormattedNamespaces' ) 
[mw.config.get( 'wgNamespaceNumber' ) + 1 ] + ':';
+               // FIXME change when micro.tap.js in stable
+               $( '#ca-talk' ).on( M.tapEvent( 'click' ), onTalkClick ).data( 
'title', talkPrefix + title );
+       }
+
+       init( mw.config.get( 'wgTitle' ) );
+       M.on( 'page-loaded', function( page ) {
+               init( page.title );
+       } );
+
+}( mw.mobileFrontend, jQuery ) );

-- 
To view, visit https://gerrit.wikimedia.org/r/83958
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I4aa7976e88dbb214e37c7c6aae082a82623d3a3d
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <jgon...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to