Bmansurov has uploaded a new change for review.

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

Change subject: WIP: Beta: use TOC from core
......................................................................

WIP: Beta: use TOC from core

This allows us to:
* get rid of the custom TOC in MF, thus reducing tech debt and
  bytes shipped to users, among other benefits;
* get rid of section collapsing, thus improving site performance
  with fewer reflows and front end computations; searching text in
  a page will also be possible if sections are collapsed;
* create a floating TOC for JS capable browsers;

This change also shows the TOC for non JS browsers and small
mobile devices.

Change-Id: I57ed56421b842e82652a9970329026f66eacdecb
---
M extension.json
M includes/MobileFrontend.body.php
M includes/MobileFrontend.hooks.php
A resources/mobile.toc.beta/TableOfContentsOverlay.js
A resources/mobile.toc.beta/toc.less
M resources/skins.minerva.base.styles/common.less
A resources/skins.minerva.beta.scripts/toc.js
7 files changed, 84 insertions(+), 5 deletions(-)


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

diff --git a/extension.json b/extension.json
index d03ccc9..41626cf 100644
--- a/extension.json
+++ b/extension.json
@@ -535,6 +535,28 @@
                                "toc"
                        ]
                },
+               "mobile.toc.beta": {
+                       "targets": [
+                               "mobile",
+                               "desktop"
+                       ],
+                       "dependencies": [
+                               "mobile.overlays",
+                               "mobile.toc.images"
+                       ],
+                       "scripts": [
+                               
"resources/mobile.toc.beta/TableOfContentsOverlay.js"
+                       ],
+                       "styles": [
+                               "resources/mobile.toc.beta/toc.less"
+                       ],
+                       "templates": {
+                               "toc.hogan": 
"resources/mobile.toc.beta/tocButton.hogan"
+                       },
+                       "messages": [
+                               "toc"
+                       ]
+               },
                "mobile.ajax": {
                        "targets": [
                                "mobile",
@@ -1770,10 +1792,12 @@
                                "skins.minerva.scripts",
                                "mobile.settings",
                                "mobile.foreignApi",
-                               "mobile.backtotop"
+                               "mobile.backtotop",
+                               "mobile.toc.beta"
                        ],
                        "scripts": [
-                               
"resources/skins.minerva.beta.scripts/fontchanger.js"
+                               
"resources/skins.minerva.beta.scripts/fontchanger.js",
+                               "resources/skins.minerva.beta.scripts/toc.js"
                        ],
                        "messages": [
                                "mobile-frontend-commons-category-view"
diff --git a/includes/MobileFrontend.body.php b/includes/MobileFrontend.body.php
index 83745f7..af45ada 100644
--- a/includes/MobileFrontend.body.php
+++ b/includes/MobileFrontend.body.php
@@ -43,7 +43,8 @@
                // and the MFTOC flag has been set (which means the page 
originally had a table of contents)
                $includeTOC = $out->getProperty( 'MFTOC' ) && $ns === NS_MAIN;
                $formatter = MobileFormatter::newFromContext( $context, $html );
-               $formatter->enableTOCPlaceholder( $includeTOC );
+               // Enable TOC placeholder only in stable
+               $formatter->enableTOCPlaceholder( $includeTOC && 
!$context->isBetaGroupMember() );
 
                Hooks::run( 'MobileFrontendBeforeDOM', [ $context, $formatter ] 
);
 
diff --git a/includes/MobileFrontend.hooks.php 
b/includes/MobileFrontend.hooks.php
index 34f1dd7..b937c59 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -1240,7 +1240,7 @@
 
        /**
         * OutputPageParserOutput hook handler
-        * Disables TOC in output before it grabs HTML
+        * In stable, disables TOC in output before it grabs HTML
         * @see 
https://www.mediawiki.org/wiki/Manual:Hooks/OutputPageParserOutput
         *
         * @param OutputPage $outputPage
@@ -1251,7 +1251,7 @@
                $context = MobileContext::singleton();
 
                if ( $context->shouldDisplayMobileView() ) {
-                       $outputPage->enableTOC( false );
+                       $outputPage->enableTOC( $context->isBetaGroupMember() );
                        $outputPage->setProperty( 'MFTOC', $po->getTOCHTML() 
!== '' );
 
                        if ( $context->shouldShowWikibaseDescriptions( 
'tagline' ) ) {
diff --git a/resources/mobile.toc.beta/TableOfContentsOverlay.js 
b/resources/mobile.toc.beta/TableOfContentsOverlay.js
new file mode 100644
index 0000000..3e37c66
--- /dev/null
+++ b/resources/mobile.toc.beta/TableOfContentsOverlay.js
@@ -0,0 +1,28 @@
+( function ( M, $ ) {
+       var Overlay = M.require( 'mobile.overlays/Overlay' ),
+               $toc = $( '#toc' );
+
+       /**
+        * Table of Contents overlay
+        * @class TableOfContentsOverlay
+        * @extends Overlay
+        */
+       function TableOfContentsOverlay( $toc ) {
+               Overlay.apply( this, arguments );
+       }
+
+       OO.mfExtend( TableOfContentsOverlay, Overlay, {
+               shouldRemoveOnHide: false,
+               className: 'overlay pointer-overlay toc-overlay',
+               /** @inheritdoc */
+               postRender: function () {
+                       this.$( '.overlay-content' ).append( this.options.$toc 
);
+               },
+               onExit: function ( ev ) {
+                       this.hide();
+               }
+       } );
+
+       M.define( 'mobile.toc.beta/TableOfContentsOverlay', 
TableOfContentsOverlay );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.toc.beta/toc.less 
b/resources/mobile.toc.beta/toc.less
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/resources/mobile.toc.beta/toc.less
diff --git a/resources/skins.minerva.base.styles/common.less 
b/resources/skins.minerva.base.styles/common.less
index 1ed48a5..85451da 100644
--- a/resources/skins.minerva.base.styles/common.less
+++ b/resources/skins.minerva.base.styles/common.less
@@ -51,6 +51,17 @@
        resize: none;
 }
 
+// TOC from core in beta
+#toc {
+       // FIXME: prevent `mediawiki.toc` from loading or make it work better 
on mobile
+       .toctoggle {
+               display: none;
+       }
+       ul {
+               list-style: none;
+       }
+}
+
 // We hide the table of contents unless the user is viewing in tablet 
resolution or higher
 .toc-mobile,
 // We also need a more specific rule for tablet non-JS users who will load 
skins.minerva.tablet.styles
diff --git a/resources/skins.minerva.beta.scripts/toc.js 
b/resources/skins.minerva.beta.scripts/toc.js
new file mode 100644
index 0000000..7bbe69c
--- /dev/null
+++ b/resources/skins.minerva.beta.scripts/toc.js
@@ -0,0 +1,15 @@
+( function ( M, $ ) {
+       var TableOfContentsOverlay = M.require( 
'mobile.toc.beta/TableOfContentsOverlay' ),
+               $toc = $( '#toc' ).find( 'ul' ),
+               $tocButton = $( '<a id="toc-button">Floating TOC</a>' );
+
+       $( function () {
+               $tocButton.on( 'click', function () {
+                       new TableOfContentsOverlay( {
+                               $toc: $toc.clone()
+                       } ).show();
+               } );
+               $( '#content' ).append( $tocButton );
+       } );
+
+}( mw.mobileFrontend, jQuery ) );

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

Gerrit-MessageType: newchange
Gerrit-Change-Id: I57ed56421b842e82652a9970329026f66eacdecb
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to