Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/319067
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: Ia342b3ddfbf0a419122aa0de282310396fa264e7
---
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
M tests/phpunit/MobileFormatterTest.php
5 files changed, 65 insertions(+), 19 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/67/319067/1
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index e83b9f3..1587241 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -49,6 +49,19 @@
const SHOW_FIRST_PARAGRAPH_BEFORE_INFOBOX =
'showFirstParagraphBeforeInfobox';
/**
+ * Global script which allows toggling to function before
ResourceLoader modules
+ * have loaded.
+ * @const string GLOBAL_TOGGLE_SCRIPT
+ */
+ const GLOBAL_TOGGLE_SCRIPT= <<<JAVASCRIPT
+function mfTempOpenSection( id ) {
+ var block = document.getElementById( "mf-section-" + id );
+ block.className += " open-block";
+ block.previousSibling.className += " open-block";
+}
+JAVASCRIPT;
+
+ /**
* Constructor
*
* @param string $html Text to process
@@ -418,12 +431,16 @@
* @return string Processed HTML
*/
public function getText( $element = null ) {
+ $script = '';
if ( $this->mainPage ) {
$element = $this->parseMainPage( $this->getDoc() );
+ } else if ( $this->expandableSections ) {
+ $script = Html::inlineScript(
+ ResourceLoader::filter( 'minify-js',
self::GLOBAL_TOGGLE_SCRIPT )
+ );
}
- $html = parent::getText( $element );
- return $html;
+ return $script . parent::getText( $element );
}
/**
@@ -539,14 +556,18 @@
// 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;
@@ -580,8 +601,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 );
}
diff --git a/tests/phpunit/MobileFormatterTest.php
b/tests/phpunit/MobileFormatterTest.php
index dab1d7d..5ea28c7 100644
--- a/tests/phpunit/MobileFormatterTest.php
+++ b/tests/phpunit/MobileFormatterTest.php
@@ -14,11 +14,14 @@
*
* @param string $heading
* @param string $innerHtml of the heading element
+ * @param integer [$sectionNumber] heading corresponds to
* @return string
*/
- private function makeSectionHeading( $heading, $innerHtml ) {
- return "<$heading class=\"section-heading\">" .
self::SECTION_INDICATOR .
- "$innerHtml</$heading>";
+ private function makeSectionHeading( $heading, $innerHtml,
$sectionNumber=1 ) {
+ return "<$heading class=\"section-heading\""
+ . "
onclick=\"javascript:mfTempOpenSection($sectionNumber)\">"
+ . self::SECTION_INDICATOR
+ . "$innerHtml</$heading>";
}
/**
@@ -31,7 +34,18 @@
*/
private function makeSectionHtml( $sectionNumber, $contentHtml='',
$isReferenceSection=false ) {
$attrs = $isReferenceSection ? ' data-is-reference-section="1"'
: '';
- return "<div class=\"mf-section-$sectionNumber\"
id=\"mf-section-$sectionNumber\""
+ $className = "mf-section-$sectionNumber";
+
+ if ( $sectionNumber === 0 ) {
+ $prefix = Html::inlineScript(
+ ResourceLoader::filter( 'minify-js',
MobileFormatter::GLOBAL_TOGGLE_SCRIPT )
+ );
+ } else {
+ $prefix = '';
+ $className = 'collapsible-block ' . $className;
+ }
+
+ return "$prefix<div class=\"$className\"
id=\"mf-section-$sectionNumber\""
. "$attrs>$contentHtml</div>";
}
@@ -126,7 +140,7 @@
$this->makeSectionHtml( 0, '<p>' .
$originalImage . '</p>' )
. $this->makeSectionHeading( 'h2',
'heading 1' )
. $this->makeSectionHtml( 1,
'<p>text</p>' )
- . $this->makeSectionHeading( 'h2',
'heading 2' )
+ . $this->makeSectionHeading( 'h2',
'heading 2', 2 )
. $this->makeSectionHtml( 2, 'abc' ),
$enableSections,
false, false, true,
@@ -140,7 +154,7 @@
. $this->makeSectionHtml( 1,
'<p>text</p>' . $noscript .
$placeholder
)
- . $this->makeSectionHeading( 'h2',
'heading 2' )
+ . $this->makeSectionHeading( 'h2',
'heading 2', 2 )
. $this->makeSectionHtml( 2, 'abc' ),
$enableSections,
false, false, true,
@@ -154,7 +168,7 @@
. $this->makeSectionHtml( 1,
'<p>text</p>' . $noscriptStyles
. $placeholderStyles
)
- . $this->makeSectionHeading( 'h2',
'heading 2' )
+ . $this->makeSectionHeading( 'h2',
'heading 2', 2 )
. $this->makeSectionHtml( 2, 'abc' ),
$enableSections,
false, false, true,
@@ -168,7 +182,7 @@
. $this->makeSectionHtml( 1,
'<p>text</p>' . $noscript .
$placeholder
)
- . $this->makeSectionHeading( 'h2',
'heading 2' )
+ . $this->makeSectionHeading( 'h2',
'heading 2', 2 )
. $this->makeSectionHtml( 2, $noscript
. $placeholder ),
$enableSections,
false, false, true,
@@ -676,7 +690,7 @@
$this->makeSectionHtml( 0, '' )
. $this->makeSectionHeading( 'h1',
'Foo' )
. $this->makeSectionHtml( 1, '<h2
class="in-block">Bar</h2>Baz' )
- . $this->makeSectionHeading( 'h1',
'Qux' )
+ . $this->makeSectionHeading( 'h1',
'Qux', 2 )
. $this->makeSectionHtml( 2, 'Quux' ),
],
];
--
To view, visit https://gerrit.wikimedia.org/r/319067
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia342b3ddfbf0a419122aa0de282310396fa264e7
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
