Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/106469
Change subject: WIP: Story 1522: Table of contents
......................................................................
WIP: Story 1522: Table of contents
TODO: merge HeadingLink with Section
TODO: Initialise a page with a Page object
TODO: Create TableOfContents based on Page object
TODO: Styling
Change-Id: Ieabe8f7071696cde6afbdc6df853aacdb741a4a3
---
M includes/Resources.php
M javascripts/common/View.js
M javascripts/common/application.js
A javascripts/modules/toc/toc.js
M javascripts/modules/toggling/toggle.js
A less/modules/toc/images/contents.png
A less/modules/toc/images/contents.svg
A less/modules/toc/toc.less
M less/tablet/common.less
A templates/modules/toc/toc.html
A templates/modules/toc/tocheading.html
11 files changed, 185 insertions(+), 10 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/69/106469/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 63fff9d..3009b0e 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -139,6 +139,29 @@
),
),
+ 'mobile.toc' => $wgMFMobileResourceBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.startup',
+ 'mobile.templates',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/toc/toc.js',
+ ),
+ 'styles' => array(
+ 'less/modules/toc/toc.less',
+ ),
+ 'templates' => array(
+ 'modules/toc/toc',
+ 'modules/toc/tocheading'
+ ),
+ ),
+
+ 'tablet.scripts' => $wgMFMobileResourceBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.toc',
+ ),
+ ),
+
'mobile.styles.beta' => $wgMFMobileResourceBoilerplate + array(
'styles' => array(
'less/common/uiNew.less',
@@ -194,8 +217,8 @@
'javascripts/common/OverlayManager.js',
'javascripts/common/api.js',
'javascripts/common/PageApi.js',
- 'javascripts/common/application.js',
'javascripts/common/View.js',
+ 'javascripts/common/application.js',
'javascripts/common/settings.js',
),
'position' => 'bottom',
diff --git a/javascripts/common/View.js b/javascripts/common/View.js
index 4a432ea..eb8b84b 100644
--- a/javascripts/common/View.js
+++ b/javascripts/common/View.js
@@ -155,6 +155,8 @@
};
} );
+ // FIXME: Deprecate view
M.define( 'view', View );
+ M.define( 'View', View );
}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/common/application.js
b/javascripts/common/application.js
index 8ca0a71..fd7963d 100644
--- a/javascripts/common/application.js
+++ b/javascripts/common/application.js
@@ -100,15 +100,18 @@
}
/**
- * Tests current window size and if suitable loads styles specific for
larger devices
+ * Tests current window size and if suitable loads styles and scripts
specific for larger devices
*
- * @name M.loadWideScreenStyles
+ * @name M.loadWideScreenModules
* @function
*/
- function loadWideScreenStyles() {
+ function loadWideScreenModules() {
if ( isWideScreen() ) {
// Adjust screen for tablets
- mw.loader.using( 'tablet.styles' );
+ mw.loader.using( [
+ 'tablet.styles',
+ 'tablet.scripts'
+ ] );
}
}
@@ -235,8 +238,8 @@
if ( supportsTouchEvents() ) {
$doc.addClass( 'touch-events' );
}
- loadWideScreenStyles();
- $( window ).on( 'resize', loadWideScreenStyles );
+ $( loadWideScreenModules );
+ $( window ).on( 'resize', loadWideScreenModules );
}
/**
diff --git a/javascripts/modules/toc/toc.js b/javascripts/modules/toc/toc.js
new file mode 100644
index 0000000..483b768
--- /dev/null
+++ b/javascripts/modules/toc/toc.js
@@ -0,0 +1,49 @@
+( function( M, $ ) {
+var View = M.require( 'View' ), TableOfContents, HeadingLink,
+ toggle = M.require( 'toggle' );
+
+HeadingLink = View.extend( {
+ link: '#foo',
+ text: 'Heading',
+ subheadings: [],
+ initialize: function( options ) {
+ this._super( options );
+ this.children = options.children;
+ this.text = options.text;
+ this.link = options.link;
+ }
+} );
+
+TableOfContents = View.extend( {
+ templatePartials: {
+ tocheading: mw.template.get( 'modules/toc/tocheading' )
+ },
+ template: mw.template.get( 'modules/toc/toc' ),
+ defaults: {
+ headings: [
+ new HeadingLink( {
+ text: '1',
+ link: '#1',
+ children: [
+ new HeadingLink( { text: '1.1', link:
'#1.1', children: [
+ new HeadingLink( { text:
'1.1.1', link: '#1.1.1', children: [] } )
+ ] } )
+ ]
+ } ),
+ new HeadingLink( { text: '2', link: '#2', children: []
} ),
+ new HeadingLink( { text: '3', link: '#3', children: []
} ),
+ new HeadingLink( { text: '4', link: '#4', children: []
} )
+ ]
+ }
+} );
+M.define( 'modules/toc/TableOfContents', TableOfContents );
+
+function init() {
+ var toc = new TableOfContents();
+ toc.appendTo( M.getLeadSection() );
+ toggle.enable( M.getLeadSection() );
+}
+$( init );
+M.on( 'page-loaded', init );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/toggling/toggle.js
b/javascripts/modules/toggling/toggle.js
index 98d547d..6011ef5 100644
--- a/javascripts/modules/toggling/toggle.js
+++ b/javascripts/modules/toggling/toggle.js
@@ -41,8 +41,9 @@
} catch ( e ) {}
}
- function init() {
- var $page = $( '#content' ), tagName = 'h2', $headings;
+ function init( $page ) {
+ var tagName = 'h2', $headings;
+ $page = $page || $( '#content' );
$( 'html' ).removeClass( 'stub' );
if ( $page.find( 'h1' ).length > 0 ) {
@@ -100,7 +101,10 @@
init();
}
- M.on( 'page-loaded', init );
+ M.on( 'page-loaded', function() {
+ // don't pass page-loaded parameter
+ init();
+ } );
// FIXME: Temporary workaround while toggle-dynamic is not in stable
// (needed for dynamic section loading after editing)
diff --git a/less/modules/toc/images/contents.png
b/less/modules/toc/images/contents.png
new file mode 100644
index 0000000..50c537c
--- /dev/null
+++ b/less/modules/toc/images/contents.png
Binary files differ
diff --git a/less/modules/toc/images/contents.svg
b/less/modules/toc/images/contents.svg
new file mode 100644
index 0000000..95a29ed
--- /dev/null
+++ b/less/modules/toc/images/contents.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
+ width="40px" height="40px" viewBox="0 0 40 40" enable-background="new
0 0 40 40" xml:space="preserve">
+<g>
+ <path fill="#ABABAB"
d="M2.176,37.586v-6.202c0-0.171,0.113-0.298,0.243-0.298h35.162c0.134,0,0.243,0.133,0.243,0.298v6.202
+
c0,0.164-0.11,0.296-0.243,0.296H2.419C2.289,37.882,2.176,37.75,2.176,37.586z"/>
+ <path fill="#ABABAB"
d="M37.824,16.602v6.207c0,0.166-0.11,0.298-0.243,0.298H2.419c-0.13,0-0.243-0.135-0.243-0.298v-6.207
+
c0-0.16,0.113-0.296,0.243-0.296h35.162C37.715,16.306,37.824,16.442,37.824,16.602z"/>
+ <path fill="#ABABAB"
d="M2.176,2.355c0-0.132,0.108-0.237,0.236-0.237h21.94c0.134,0,0.236,0.105,0.236,0.237v6.677
+
c0,0.133-0.103,0.237-0.236,0.237H2.412c-0.13,0-0.236-0.104-0.236-0.237V2.355z"/>
+</g>
+</svg>
diff --git a/less/modules/toc/toc.less b/less/modules/toc/toc.less
new file mode 100644
index 0000000..82bc8f4
--- /dev/null
+++ b/less/modules/toc/toc.less
@@ -0,0 +1,56 @@
+@import "../../mixins.less";
+@import "../../variables.less";
+
+@leftMargin: 1.5em;
+@iconSize: 2em;
+@iconHeadingGap: 0.4em;
+
+.client-js .table-of-contents {
+ // FIXME: Use predefined colors?
+ background-color: #f9f9f9;
+ border: solid 1px #e0e0e0;
+ font-size: 1.3em;
+ max-width: 320px;
+
+ h2 {
+ font-family: @fontFamily;
+ line-height: @iconSize;
+ margin-left: @leftMargin;
+ border-bottom: solid 1px black;
+ background-position: right center;
+ padding-left: @iconSize + @iconHeadingGap;
+ font-size: 15pt;
+ font-weight: bold;
+ padding-bottom: 10px;
+
+ .icon {
+ background: url(images/contents.png) no-repeat 0 center;
+ width: @iconSize;
+ height: @iconSize;
+ display: block;
+ position: absolute;
+ left: 0;
+ // comes from typography.less
+ top: .5em;
+ }
+ }
+
+ > div {
+ font-size: 0.8em;
+ margin-left: @leftMargin + @leftMargin + @iconSize +
@iconHeadingGap;
+
+ ul {
+ list-style: none;
+ }
+ }
+}
+
+@media all and (min-width: @wgMFDeviceWidthTablet) {
+ .beta #content_wrapper {
+ .table-of-contents {
+ .section_heading {
+ margin-right: @leftMargin;
+ }
+ }
+ }
+}
diff --git a/less/tablet/common.less b/less/tablet/common.less
index 3b5ba53..4fd2547 100644
--- a/less/tablet/common.less
+++ b/less/tablet/common.less
@@ -6,6 +6,7 @@
@media all and (min-width: @wgMFDeviceWidthTablet) {
.beta #content_wrapper {
+ .table-of-contents,
.section_heading,
.content_block {
margin-right: @infoboxWidth + 16;
diff --git a/templates/modules/toc/toc.html b/templates/modules/toc/toc.html
new file mode 100644
index 0000000..9cce38a
--- /dev/null
+++ b/templates/modules/toc/toc.html
@@ -0,0 +1,10 @@
+<div class="table-of-contents">
+ <h2>Contents <span class="icon"></span></h2>
+ <div>
+ <ul>
+ {{#headings}}
+ {{>tocheading}}
+ {{/headings}}
+ </ul>
+ </div>
+</div>
diff --git a/templates/modules/toc/tocheading.html
b/templates/modules/toc/tocheading.html
new file mode 100644
index 0000000..e27988b
--- /dev/null
+++ b/templates/modules/toc/tocheading.html
@@ -0,0 +1,13 @@
+<li>
+ <a href="{{link}}">{{text}}</a>
+ {{#subheadings}}
+ <ul>
+ {{/subheadings}}
+ {{#subheadings}}
+ {{>tocheading}}
+ {{/subheadings}}
+ {{#subheadings}}
+ </ul>
+ {{/subheadings}}
+</li>
+
--
To view, visit https://gerrit.wikimedia.org/r/106469
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ieabe8f7071696cde6afbdc6df853aacdb741a4a3
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
