Bmansurov has uploaded a new change for review.
https://gerrit.wikimedia.org/r/313814
Change subject: WIP: Floating TOC
......................................................................
WIP: Floating TOC
Change-Id: I6d98fd4d957c83bce129d4d2ea2a52c8d3267383
---
M extension.json
A resources/mobile.toc.beta/TableOfContentsOverlay.js
A resources/mobile.toc.beta/toc.less
A resources/mobile.toc.beta/tocButton.hogan
M resources/skins.minerva.base.styles/common.less
A resources/skins.minerva.beta.scripts/toc.js
6 files changed, 139 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/14/313814/1
diff --git a/extension.json b/extension.json
index 08e4aa7..c3e8402 100644
--- a/extension.json
+++ b/extension.json
@@ -536,6 +536,25 @@
"toc"
]
},
+ "mobile.toc.beta": {
+ "targets": [
+ "mobile",
+ "desktop"
+ ],
+ "dependencies": [
+ "mobile.overlays",
+ "mobile.toc.images"
+ ],
+ "scripts": [
+
"resources/mobile.toc.beta/TableOfContentsOverlay.js"
+ ],
+ "styles": [
+ "resources/mobile.toc.beta/toc.less"
+ ],
+ "messages": [
+ "toc"
+ ]
+ },
"mobile.ajax": {
"targets": [
"mobile",
@@ -1771,10 +1790,12 @@
"skins.minerva.scripts",
"mobile.settings",
"mobile.foreignApi",
- "mobile.backtotop"
+ "mobile.backtotop",
+ "mobile.toc.beta"
],
"scripts": [
-
"resources/skins.minerva.beta.scripts/fontchanger.js"
+
"resources/skins.minerva.beta.scripts/fontchanger.js",
+ "resources/skins.minerva.beta.scripts/toc.js"
],
"messages": [
"mobile-frontend-commons-category-view"
diff --git a/resources/mobile.toc.beta/TableOfContentsOverlay.js
b/resources/mobile.toc.beta/TableOfContentsOverlay.js
new file mode 100644
index 0000000..0e50b12
--- /dev/null
+++ b/resources/mobile.toc.beta/TableOfContentsOverlay.js
@@ -0,0 +1,49 @@
+( function ( M, $ ) {
+ var Overlay = M.require( 'mobile.overlays/Overlay' ),
+ tocHTML = $( '#toc' ).find( ' > ul' ).clone().get( 0
).outerHTML;
+
+ /**
+ * Table of Contents overlay
+ *
+ * @class TableOfContentsOverlay
+ * @extends Overlay
+ */
+ function TableOfContentsOverlay() {
+ Overlay.apply( this, arguments );
+ }
+
+ OO.mfExtend( TableOfContentsOverlay, Overlay, {
+ /** @inheritdoc */
+ className: Overlay.prototype.className + ' toc-overlay',
+ /** @inheritdoc */
+ defaults: $.extend ( {}, Overlay.prototype.defaults, {
+ heading: mw.msg( 'toc' )
+ } ),
+ /** @inheritdoc */
+ templatePartials: $.extend( {},
Overlay.prototype.templatePartials, {
+ content: tocHTML
+ } ),
+ /** @inheritdoc */
+ events: $.extend( {}, Overlay.prototype.events, {
+ 'click li a': 'onClickLink'
+ } ),
+ /**
+ * Don't try going back.
+ * @inheritdoc
+ */
+ onExit: function ( ev ) {
+ ev.preventDefault();
+ ev.stopPropagation();
+ this.hide();
+ },
+ /**
+ * Hide the overlay when the user clicks on a link
+ */
+ onClickLink: function () {
+ this.hide();
+ }
+ } );
+
+ M.define( 'mobile.toc.beta/TableOfContentsOverlay',
TableOfContentsOverlay );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/mobile.toc.beta/toc.less
b/resources/mobile.toc.beta/toc.less
new file mode 100644
index 0000000..08cf480
--- /dev/null
+++ b/resources/mobile.toc.beta/toc.less
@@ -0,0 +1,29 @@
+@import 'mediawiki.ui/variables';
+@import 'minerva.variables';
+
+.floating-toc-button {
+ .navigation-enabled & {
+ display: none;
+ }
+
+ // don't clash with the 'back-to-top' button
+ bottom: 80px;
+ box-shadow: 0.1em 0.2em 0.3em @colorGray10;
+ cursor: pointer;
+ font-size: 0.75em;
+ min-width: 3em;
+ opacity: 0.3;
+ position: fixed;
+ right: 16px;
+ z-index: @z-indexBase;
+}
+
+.toc-overlay {
+ .overlay-content {
+ padding: 1em;
+ }
+
+ ul ul {
+ margin-left: 1em;
+ }
+}
diff --git a/resources/mobile.toc.beta/tocButton.hogan
b/resources/mobile.toc.beta/tocButton.hogan
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/resources/mobile.toc.beta/tocButton.hogan
diff --git a/resources/skins.minerva.base.styles/common.less
b/resources/skins.minerva.base.styles/common.less
index 85451da..31222eb 100644
--- a/resources/skins.minerva.base.styles/common.less
+++ b/resources/skins.minerva.base.styles/common.less
@@ -53,12 +53,17 @@
// TOC from core in beta
#toc {
+ padding-bottom: 16px;
+
// FIXME: prevent `mediawiki.toc` from loading or make it work better
on mobile
.toctoggle {
display: none;
}
ul {
list-style: none;
+ li {
+ margin-bottom: 0;
+ }
}
}
diff --git a/resources/skins.minerva.beta.scripts/toc.js
b/resources/skins.minerva.beta.scripts/toc.js
new file mode 100644
index 0000000..3454016
--- /dev/null
+++ b/resources/skins.minerva.beta.scripts/toc.js
@@ -0,0 +1,33 @@
+// FIXME: TOC and the button code should lazy-load
+( function ( M, $ ) {
+ var TableOfContentsOverlay = M.require(
'mobile.toc.beta/TableOfContentsOverlay' ),
+ Button = M.require( 'mobile.startup/Button' );
+
+ function TocButton( options ) {
+ Button.call( this, options );
+ }
+
+ OO.mfExtend( TocButton, Button, {
+ /** @inheritdoc **/
+ events: {
+ click: function () {
+ new TableOfContentsOverlay().show();
+ }
+ }
+ } );
+
+ $( function () {
+ var $toc = $( '#toc' ).find( ' > ul' );
+
+ if ( $toc.length ) {
+ new TocButton( {
+ additionalClassNames: 'floating-toc-button',
+ progressive: true,
+ // ⋮≡ - poor man's TOC
+ // FIXME: replace with a single entity or an SVG
+ label: '⋮≡'
+ } ).appendTo( 'body' );
+ }
+ } );
+
+}( mw.mobileFrontend, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/313814
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6d98fd4d957c83bce129d4d2ea2a52c8d3267383
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
