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