Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/314210
Change subject: Collapse sections by default
......................................................................
Collapse sections by default
A global function mfTempOpenSection is added to the top of the page
and all heading elements have click handlers bound to it
As soon as skins.minerva.toggling is enabled these will be unbound
and the global destroyed and it will be business as usual.
In the mean time for eager readers it will be possible to expand sections.
It will not be possible to collapse them again (easily added but not worth
the additional complexity)
The experience remains the same as before for non-js users thanks to
client-nojs and toggle.js will honour any existing sections that are
open
Bug: T147338
Change-Id: I899605ae9c8788d1c614365be030cfd6b2140030
---
M includes/MobileFormatter.php
M resources/mobile.toggle/toggle.less
M resources/skins.minerva.content.styles/main.less
M resources/skins.minerva.toggling/init.js
4 files changed, 35 insertions(+), 9 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/10/314210/1
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index e9f1da6..35d3ca9 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -366,7 +366,17 @@
if ( $this->mainPage ) {
$element = $this->parseMainPage( $this->getDoc() );
}
- $html = parent::getText( $element );
+ // We inject a tiny global script to allow section headings to
expand section bodies in the time before the toggle
+ // code has fully loaded. This will be unbound.
+ $script = <<<JAVASCRIPT
+function mfTempOpenSection(id) {
+ var block = document.getElementById("mf-section-"+id);
+ block.className += " open-block";
+ block.previousSibling.className += " open-block";
+}
+JAVASCRIPT;
+
+ $html = Html::inlineScript( $script ) . parent::getText(
$element );
return $html;
}
@@ -476,18 +486,23 @@
$sectionNumber = 0;
$sectionBody = $doc->createElement( 'div' );
+ // FIXME: Remove usages of class `mf-section-` in favour of
`id` attribute
$sectionBody->setAttribute( 'class', 'mf-section-' .
$sectionNumber );
// Mark the top level headings which will become collapsible
soon.
foreach ( $headings as $heading ) {
+ $sectionNumber += 1;
$className = $heading->hasAttribute( 'class' ) ?
$heading->getAttribute( 'class' ) . ' ' : '';
$heading->setAttribute( 'class', $className .
'section-heading' );
+ $heading->setAttribute( 'onClick',
'javascript:mfTempOpenSection(' . $sectionNumber . ')' );
// prepend indicator
$indicator = $doc->createElement( 'div' );
$indicator->setAttribute( 'class', MobileUI::iconClass(
'', 'element', 'indicator' ) );
$heading->insertBefore( $indicator,
$heading->firstChild );
}
+ // reset section number
+ $sectionNumber = 0;
while ( $sibling ) {
$node = $sibling;
$sibling = $sibling->nextSibling;
@@ -516,8 +531,9 @@
}
$sectionNumber += 1;
$sectionBody = $doc->createElement( 'div' );
- $sectionBody->setAttribute( 'class',
'mf-section-' . $sectionNumber );
-
+ // FIXME: Remove usages of class `mf-section-`
in favour of `id` attribute
+ $sectionBody->setAttribute( 'class',
'collapsible-block mf-section-' . $sectionNumber );
+ $sectionBody->setAttribute( 'id', 'mf-section-'
. $sectionNumber );
continue;
}
diff --git a/resources/mobile.toggle/toggle.less
b/resources/mobile.toggle/toggle.less
index 0c398d7..98d1cde 100644
--- a/resources/mobile.toggle/toggle.less
+++ b/resources/mobile.toggle/toggle.less
@@ -25,11 +25,6 @@
.collapsible-block {
// bug 41401 - without this content doesn't always take up
whole width
width: 100%;
- display: none;
-
- &.open-block {
- display: block;
- }
}
}
diff --git a/resources/skins.minerva.content.styles/main.less
b/resources/skins.minerva.content.styles/main.less
index 5824802..27fa974 100644
--- a/resources/skins.minerva.content.styles/main.less
+++ b/resources/skins.minerva.content.styles/main.less
@@ -44,6 +44,16 @@
}
}
+.client-js {
+ .collapsible-block {
+ display: none;
+
+ &.open-block {
+ display: block;
+ }
+ }
+}
+
.nomobile {
// No mobile should trump any other class. e.g. .content table {
display: table; }
display: none !important;
diff --git a/resources/skins.minerva.toggling/init.js
b/resources/skins.minerva.toggling/init.js
index 834caeb..4a4bcf7 100644
--- a/resources/skins.minerva.toggling/init.js
+++ b/resources/skins.minerva.toggling/init.js
@@ -14,7 +14,12 @@
*/
function init( $container, prefix, page ) {
// distinguish headings in content from other headings
- $container.find( '> h1,> h2,> h3,> h4,> h5,> h6' ).addClass(
'section-heading' );
+ $container.find( '> h1,> h2,> h3,> h4,> h5,> h6' ).addClass(
'section-heading' )
+ .removeAttr( 'onclick' );
+ // cleanup global as it is no longer needed
+ if ( window.mfTempOpenSection !== undefined ) {
+ delete window.mfTempOpenSection;
+ }
new Toggler( $container, prefix, page );
}
--
To view, visit https://gerrit.wikimedia.org/r/314210
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I899605ae9c8788d1c614365be030cfd6b2140030
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
