Phuedx has uploaded a new change for review.
https://gerrit.wikimedia.org/r/315512
Change subject: [WIP] Use "checkbox hack" for section toggling
......................................................................
[WIP] Use "checkbox hack" for section toggling
Terminology:
* Toggle: the checkbox used to store whether a section has been toggled
element and immediately before the content container
* Switch: the label for the toggle
In order to minimise the number of changes to the established DOM
structure, add the toggle immediately after the section heading and
immediately before the section content container, using adjacent sibling
selector to bind the toggle to the latter.
Stretch the switch over the heading element so that the heading is
clickable, as before.
Additional changes:
* Add mobile.toggle/toggle.less to top-loaded styles to avoid FOUC
* Remove notion of "collapsible blocks", as all sections can now be
toggled without being enhanced by mobile.toggle
Change-Id: I3430c1ee8696ab2627600269cef404188de2189d
---
M extension.json
M includes/MobileFormatter.php
M resources/mobile.toggle/toggle.less
3 files changed, 74 insertions(+), 37 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/12/315512/1
diff --git a/extension.json b/extension.json
index 1eb0a0a..c1b693a 100644
--- a/extension.json
+++ b/extension.json
@@ -117,7 +117,8 @@
"resources/skins.minerva.base.styles/common.less",
"resources/skins.minerva.base.styles/icons.less",
"resources/skins.minerva.base.styles/images.less",
- "resources/skins.minerva.base.styles/print.less"
+
"resources/skins.minerva.base.styles/print.less",
+ "resources/mobile.toggle/toggle.less"
]
},
"skins.minerva.content.styles": {
@@ -1126,11 +1127,7 @@
],
"dependencies": [
"mobile.settings",
- "skins.minerva.icons.images.variants",
"mobile.startup"
- ],
- "styles": [
- "resources/mobile.toggle/toggle.less"
],
"scripts": [
"resources/mobile.toggle/toggle.js"
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index e9f1da6..5c00bbc 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -475,17 +475,30 @@
$firstHeading = reset( $headings );
$sectionNumber = 0;
+
$sectionBody = $doc->createElement( 'div' );
- $sectionBody->setAttribute( 'class', 'mf-section-' .
$sectionNumber );
+ $sectionBody->setAttribute(
+ 'class',
+ "mf-section-{$sectionNumber} section-content no-toggle"
+ );
// Mark the top level headings which will become collapsible
soon.
- foreach ( $headings as $heading ) {
+ foreach ( $headings as $i => $heading ) {
$className = $heading->hasAttribute( 'class' ) ?
$heading->getAttribute( 'class' ) . ' ' : '';
$heading->setAttribute( 'class', $className .
'section-heading' );
// prepend indicator
$indicator = $doc->createElement( 'div' );
$indicator->setAttribute( 'class', MobileUI::iconClass(
'', 'element', 'indicator' ) );
$heading->insertBefore( $indicator,
$heading->firstChild );
+
+ // Prepend label for the checkbox that'll toggle the
section's content.
+ $t = $i + 1;
+
+ $sectionToggleLabel = $doc->createElement( 'label' );
+ $sectionToggleLabel->setAttribute( 'for',
"section-toggle-{$t}" );
+ $sectionToggleLabel->setAttribute( 'class',
'section-toggle-switch' );
+
+ $heading->insertBefore( $sectionToggleLabel,
$heading->firstChild );
}
while ( $sibling ) {
@@ -502,6 +515,20 @@
// Apply transformations to the section
body
$this->filterContentInSection(
$sectionBody, $doc, $sectionNumber, $transformOptions );
}
+
+ if ( $sectionNumber > 0 ) {
+
+ // <input type="checkbox"
id="section-toggle-{$sectionNumber}" />
+ $sectionToggleId =
"section-toggle-{$sectionNumber}";
+
+ $sectionToggle = $doc->createElement(
'input' );
+ $sectionToggle->setAttribute( 'type',
'checkbox' );
+ $sectionToggle->setAttribute( 'id',
$sectionToggleId );
+ $sectionToggle->setAttribute( 'class',
'section-toggle' );
+
+ $body->insertBefore( $sectionToggle,
$node );
+ }
+
// Insert the previous section body and reset
it for the new section
$body->insertBefore( $sectionBody, $node );
@@ -515,8 +542,12 @@
$sectionBody->appendChild( $toc );
}
$sectionNumber += 1;
+
$sectionBody = $doc->createElement( 'div' );
- $sectionBody->setAttribute( 'class',
'mf-section-' . $sectionNumber );
+ $sectionBody->setAttribute(
+ 'class',
+ "mf-section-{$sectionNumber}
section-content"
+ );
continue;
}
diff --git a/resources/mobile.toggle/toggle.less
b/resources/mobile.toggle/toggle.less
index 0c398d7..dc51d00 100644
--- a/resources/mobile.toggle/toggle.less
+++ b/resources/mobile.toggle/toggle.less
@@ -1,46 +1,55 @@
-/* Styling of sections and toggling
-moved from beta_common.css in
-Change-Id: I683d029d09340a460b02016c5c4fbd6ada5a9b35
-*/
+/**
+ * Styling of sections and toggling moved from beta_common.css in
+ * I683d029d09340a460b02016c5c4fbd6ada5a9b35.
+ */
+
@import 'minerva.variables';
@import 'minerva.mixins';
-.client-js {
- .collapsible-heading,
- .collapsible-block {
- clear: both;
+.section-heading {
+ position: relative;
+
+ .indicator {
+ float: left;
+ margin-top: 0.7em;
+ font-size: @indicatorFontSize;
}
- .collapsible-heading {
+ .section-toggle-switch {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+
cursor: pointer;
- position: relative;
-
- .indicator {
- float: left;
- margin-top: 0.7em;
- font-size: @indicatorFontSize;
- }
- }
-
- .collapsible-block {
- // bug 41401 - without this content doesn't always take up
whole width
- width: 100%;
- display: none;
-
- &.open-block {
- display: block;
- }
}
}
+.section-content {
+ // bug 41401 - without this content doesn't always take up whole width
+ width: 100%;
+ display: none;
+}
+
+.section-toggle {
+ position: absolute;
+ left: -9999px;
+}
+
+.section-content.no-toggle,
+input.section-toggle:checked + .section-content {
+ display: block;
+}
+
@media print {
- .collapsible-heading .indicator,
- .collapsible-heading .edit-page {
+ .section-heading .indicator,
+ .section-heading .edit-page {
display: none;
}
// need to be this specific in order to override the default style
- .client-js .collapsible-block {
+ .section-content {
display: block;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/315512
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3430c1ee8696ab2627600269cef404188de2189d
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Phuedx <g...@samsmith.io>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
