Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/279562
Change subject: WIP: Avoid repaints for table of contents.
......................................................................
WIP: Avoid repaints for table of contents.
Using MobileFormatter always add a table of contents placeholder
Hide table of contents in mobile mode
In tablet mode use visibility to leave space for an uncollapsed
table of contents to load.
Bug: T126836
Change-Id: I86e054eadc5f5f7bcc87b7de977785e629245b29
---
M includes/MobileFormatter.php
M minerva.less/minerva.variables.less
M resources/mobile.toc/TableOfContents.js
M resources/mobile.toc/toc.less
M resources/mobile.toggle/toggle.js
M resources/skins.minerva.base.styles/common.less
M resources/skins.minerva.tablet.scripts/toc.js
M resources/skins.minerva.tablet.styles/common.less
M resources/skins.minerva.tablet.styles/hacks.less
9 files changed, 51 insertions(+), 24 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/62/279562/1
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index 913822b..7124ef8 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -390,6 +390,16 @@
}
// Insert the previous section body and reset
it for the new section
$body->insertBefore( $sectionBody, $node );
+
+ if ( $sectionNumber === 0 ) {
+ // Insert table of content placeholder
which will be progressively enhanced via JS
+ $toc = $doc->createElement( 'div' );
+ $toc->setAttribute( 'id', 'toc' );
+ $toc->setAttribute( 'class',
'toc-mobile' );
+ $tocHeading = $doc->createElement(
'h2', wfMessage( 'toc' )->text() );
+ $toc->appendChild( $tocHeading );
+ $sectionBody->appendChild( $toc );
+ }
$sectionNumber += 1;
$sectionBody = $doc->createElement( 'div' );
$sectionBody->setAttribute( 'class',
'mf-section-' . $sectionNumber );
diff --git a/minerva.less/minerva.variables.less
b/minerva.less/minerva.variables.less
index d04f4ca..d21a4cf 100644
--- a/minerva.less/minerva.variables.less
+++ b/minerva.less/minerva.variables.less
@@ -111,5 +111,7 @@
@z-indexOverlay: 4;
@z-indexOverOverlay: 5;
+// table of contents
+@tocFontSize: .8em;
// indicators
@indicatorFontSize: .4em;
diff --git a/resources/mobile.toc/TableOfContents.js
b/resources/mobile.toc/TableOfContents.js
index 2cdd17e..7830449 100644
--- a/resources/mobile.toc/TableOfContents.js
+++ b/resources/mobile.toc/TableOfContents.js
@@ -33,6 +33,7 @@
contentsMsg: mw.msg( 'toc' )
},
tagName: 'div',
+ isBorderBox: false,
className: 'toc-mobile',
template: mw.template.get( 'mobile.toc', 'toc.hogan' ),
events: {
diff --git a/resources/mobile.toc/toc.less b/resources/mobile.toc/toc.less
index 209f0dc..3e1d7cb 100644
--- a/resources/mobile.toc/toc.less
+++ b/resources/mobile.toc/toc.less
@@ -4,19 +4,10 @@
@paddingHorizontal: 24px;
@iconSize: 16px;
@iconHeadingGap: 12px;
-@paddingVertical: 1.4em;
-@fontSize: .8em;
+@fontSize: @tocFontSize;
.client-js .toc-mobile {
- position: relative;
- // FIXME: Use predefined colors?
- background-color: @colorGray15;
- border: solid 1px @grayLightest;
- font-size: 1.3em;
- float: left;
- clear: left;
- margin: 1em 0;
.toc-button {
float: left;
@@ -25,12 +16,11 @@
}
.collapsible-heading {
- font-family: @fontFamily;
- font-size: @fontSize;
+ visibility: visible;
+ // FIXME: Use predefined colors?
+ background-color: @colorGray15;
+ border: solid 1px @grayLightest;
background-position: right center;
- font-weight: bold;
- padding: @paddingVertical / 2 0;
- border-bottom: none;
// Override rules for section toggler
// In table of contents the collapsing caret is on the right
diff --git a/resources/mobile.toggle/toggle.js
b/resources/mobile.toggle/toggle.js
index 32aecf7..52035f4 100644
--- a/resources/mobile.toggle/toggle.js
+++ b/resources/mobile.toggle/toggle.js
@@ -16,11 +16,12 @@
* @param {jQuery.Object} $container to apply toggling to
* @param {String} prefix a prefix to use for the id.
* @param {Page} [page] to allow storage of session for future visits
+ * @param {Boolean} [isClosed] whether the element should begin closed
* @extends OO.EventEmitter
*/
- function Toggler( $container, prefix, page ) {
+ function Toggler( $container, prefix, page, isClosed ) {
OO.EventEmitter.call( this );
- this._enable( $container, prefix, page );
+ this._enable.apply( this, arguments );
}
OO.mixinClass( Toggler, OO.EventEmitter );
@@ -215,7 +216,7 @@
* @param {Page} [page] to allow storage of session for future visits
* @private
*/
- Toggler.prototype._enable = function ( $container, prefix, page ) {
+ Toggler.prototype._enable = function ( $container, prefix, page,
isClosed ) {
var tagName, expandSections, indicator,
$firstHeading,
self = this,
@@ -271,7 +272,7 @@
} );
enableKeyboardActions( self, $heading );
- if ( browser.isWideScreen() || expandSections )
{
+ if ( !isClosed && browser.isWideScreen() ||
expandSections ) {
// Expand sections by default on wide
screen devices or if the expand sections setting is set
self.toggle.call( self, $heading );
}
diff --git a/resources/skins.minerva.base.styles/common.less
b/resources/skins.minerva.base.styles/common.less
index 82f593b..4c11261 100644
--- a/resources/skins.minerva.base.styles/common.less
+++ b/resources/skins.minerva.base.styles/common.less
@@ -51,8 +51,6 @@
resize: none;
}
-// For Minerva desktop
-#toc,
.client-js .no-js-only,
// FIXME: Use generic rule for print stylesheets
.printfooter,
diff --git a/resources/skins.minerva.tablet.scripts/toc.js
b/resources/skins.minerva.tablet.scripts/toc.js
index 4035965..bf3da2a 100644
--- a/resources/skins.minerva.tablet.scripts/toc.js
+++ b/resources/skins.minerva.tablet.scripts/toc.js
@@ -10,7 +10,7 @@
* @ignore
*/
function init( page ) {
- var toc, toggle,
+ var toc,
sections = page.getSections(),
$toc = $( '#toc' ),
enableToc = mw.config.get( 'wgMinervaTocEnabled' );
@@ -22,6 +22,9 @@
sections: sections
} );
+ // setup toggling before appending to DOM
+ new Toggler( toc.$el, 'toc-', null, true );
+
// if there is a toc already, replace it
if ( $toc.length > 0 ) {
// don't show toc at end of page, when no
sections there
@@ -30,7 +33,6 @@
// otherwise append it to the lead section
toc.appendTo( page.getLeadSectionElement() );
}
- toggle = new Toggler( toc.$el, 'toc-' );
}
}
diff --git a/resources/skins.minerva.tablet.styles/common.less
b/resources/skins.minerva.tablet.styles/common.less
index 1336f94..f13a998 100644
--- a/resources/skins.minerva.tablet.styles/common.less
+++ b/resources/skins.minerva.tablet.styles/common.less
@@ -4,9 +4,33 @@
@import "minerva.variables";
@import "minerva.mixins";
+@paddingVertical: 1.4em;
+.toc-mobile {
+ display: none;
+}
@media all and (min-width: @deviceWidthTablet) {
+ .toc-mobile {
+ display: block;
+ visibility: visible;
+ position: relative;
+ border-width: 1px;
+ font-size: 1.3em;
+ float: left;
+ clear: left;
+ margin: 1em 0;
+
+ > h2 {
+ visibility: hidden;
+ font-family: @fontFamily;
+ font-size: @tocFontSize;
+ font-weight: bold;
+ border-bottom: none;
+ padding: @paddingVertical / 2 0;
+ }
+ }
+
.content_block {
width: auto;
clear: none;
diff --git a/resources/skins.minerva.tablet.styles/hacks.less
b/resources/skins.minerva.tablet.styles/hacks.less
index b335383..0b4e1f3 100644
--- a/resources/skins.minerva.tablet.styles/hacks.less
+++ b/resources/skins.minerva.tablet.styles/hacks.less
@@ -11,7 +11,6 @@
@import "minerva.variables";
@import "minerva.mixins";
-
/* Tablet specific styling */
@media all and (min-width: @deviceWidthTablet) {
// Float infoboxes to the right of the page
--
To view, visit https://gerrit.wikimedia.org/r/279562
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I86e054eadc5f5f7bcc87b7de977785e629245b29
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
