Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/386923 )
Change subject: WIP: Toggling code needs to belong to MobileFrontend
......................................................................
WIP: Toggling code needs to belong to MobileFrontend
TODO: This can cause problems since Minerva already has this code
Want to make sure it can
* work if it's loaded twice
* avoid loading icon
* We'll need a few changes in Minerva to accompany this change
Change-Id: I894d69ad418dcd492af6a796c45b2d475a28ba60
---
M extension.json
A resources/mobile.init/initToggling.js
A resources/mobile.overlay.images/arrow.svg
M resources/mobile.toggle/toggle.less
4 files changed, 101 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/23/386923/1
diff --git a/extension.json b/extension.json
index 05dcb1b..6d0d7f0 100644
--- a/extension.json
+++ b/extension.json
@@ -131,6 +131,7 @@
"rtl":
"resources/mobile.overlay.images/back-rtl.svg"
}
},
+ "arrow":
"resources/mobile.overlay.images/arrow.svg",
"overlay-close":
"resources/mobile.overlay.images/close.svg"
}
},
@@ -268,6 +269,7 @@
"mediawiki.experiments",
"jquery.cookie",
"mobile.references.gateway",
+ "mobile.toggle",
"mobile.startup"
],
"targets": [
@@ -287,7 +289,8 @@
],
"scripts": [
"resources/mobile.init/BetaOptinPanel.js",
- "resources/mobile.init/init.js"
+ "resources/mobile.init/init.js",
+ "resources/mobile.init/initToggling.js"
]
},
"mobile.startup": {
diff --git a/resources/mobile.init/initToggling.js
b/resources/mobile.init/initToggling.js
new file mode 100644
index 0000000..db0ffec
--- /dev/null
+++ b/resources/mobile.init/initToggling.js
@@ -0,0 +1,45 @@
+( function ( M, $ ) {
+ var page = M.getCurrentPage(),
+ $contentContainer = $( '#mw-content-text > .mw-parser-output' ),
+ Toggler = M.require( 'mobile.toggle/Toggler' );
+
+ if ( !page.getLeadSectionElement() ) {
+ // Operating in desktop mode. Stop execution. (T172948)
+ return;
+ }
+ // If there was no mw-parser-output wrapper, just use the parent
+ if ( $contentContainer.length === 0 ) {
+ $contentContainer = $( '#mw-content-text' );
+ }
+
+ /**
+ * Initialises toggling code.
+ *
+ * @method
+ * @param {jQuery.Object} $container to enable toggling on
+ * @param {string} prefix a prefix to use for the id.
+ * @param {Page} page The current page
+ * @ignore
+ */
+ function init( $container, prefix, page ) {
+ // distinguish headings in content from other headings
+ $container.find( '> h1,> h2,> h3,> h4,> h5,> h6' ).addClass(
'section-heading' )
+ .removeAttr( 'onclick' );
+ // cleanup global as it is no longer needed. We check if it's
undefined because
+ // there is no guarantee this won't be run on other skins e.g.
Vector or cached HTML
+ if ( window.mfTempOpenSection !== undefined ) {
+ delete window.mfTempOpenSection;
+ }
+ // eslint-disable-next-line no-new
+ new Toggler( $container, prefix, page );
+ }
+
+ // avoid this running on Watchlist
+ if (
+ !page.inNamespace( 'special' ) &&
+ !mw.config.get( 'wgIsMainPage' ) &&
+ mw.config.get( 'wgAction' ) === 'view'
+ ) {
+ init( $contentContainer, 'content-', page );
+ }
+}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.overlay.images/arrow.svg
b/resources/mobile.overlay.images/arrow.svg
new file mode 100644
index 0000000..2ca0257
--- /dev/null
+++ b/resources/mobile.overlay.images/arrow.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg";
viewBox="0 -407 24 24"><path d="M21.348-401.268q.94 0 1.61.668l.92.922-11.858
11.86L.198-399.66l.922-.94q.65-.686 1.59-.686.94 0 1.61.668l7.718 7.7
7.7-7.682q.67-.668 1.61-.668z"/></svg>
\ No newline at end of file
diff --git a/resources/mobile.toggle/toggle.less
b/resources/mobile.toggle/toggle.less
index 3fd61ac..376de82 100644
--- a/resources/mobile.toggle/toggle.less
+++ b/resources/mobile.toggle/toggle.less
@@ -1,3 +1,44 @@
+@import 'mobile.variables';
+
+.client-js {
+ .collapsible-heading,
+ .collapsible-block {
+ clear: both;
+ }
+
+ .collapsible-heading {
+ cursor: pointer;
+ position: relative;
+
+ .indicator {
+ float: left;
+ margin-top: 0.7em;
+ font-size: @indicatorFontSize;
+ margin-left: -@iconGutterWidth;
+ }
+ }
+
+ .collapsible-block {
+ // bug 41401 - without this content doesn't always take up
whole width
+ width: 100%;
+ }
+
+ .collapsible-block {
+ display: none;
+
+ &.open-block {
+ display: block;
+ }
+ }
+}
+
+// Toggling indicators are unusable without JavaScript
+.client-nojs {
+ .section-heading .indicator {
+ display: none;
+ }
+}
+
@media print {
.collapsible-heading .indicator,
.collapsible-heading .edit-page {
@@ -9,3 +50,13 @@
display: block;
}
}
+
+@media all and ( min-width: @deviceWidthTablet ) {
+ .client-js {
+ // Avoid flash of unstyled content for tablet users while
JavaScript is loading
+ // onclick attribute is removed by the toggling code.
+ [onclick] + .collapsible-block {
+ display: block;
+ }
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/386923
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I894d69ad418dcd492af6a796c45b2d475a28ba60
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
