Dynamic Sections in Wikipedia Mobile Site

gistfile1.txt

diff --git a/MobileFormatter.php b/MobileFormatter.php
index 597b211..487121f 100644
--- a/MobileFormatter.php
+++ b/MobileFormatter.php
@@ -207,9 +207,11 @@ class MobileFormatter extends HtmlFormatter {
 		$base = Html::openElement( 'div', array( 'class' => 'section' ) );
 		if ( $this->expandableSections ) {
 			$h2OnClick = 'javascript:wm_toggle_section(' . $this->headings . ');';
+			$headingId = $this->headings;
 			$base .= Html::openElement( 'h2',
 				array( 'class' => 'section_heading',
-					'id' => 'section_' . $this->headings, 'onclick' => $h2OnClick
+					'data-section' => $headingId,
+					'id' => 'section_' . $headingId, 'onclick' => $h2OnClick
 				)
 			);
 		} else {
@@ -218,8 +220,9 @@ class MobileFormatter extends HtmlFormatter {
 			);
 		}
 		$base .= $buttons .
-			Html::rawElement( 'span',
-					array( 'id' => $headlineId ),
+			Html::rawElement( 'a',
+					array( 'id' => $headlineId,
+					'href' => $wgScriptPath . 'sections/' . $headlineId ),
 					$matches[2]
 				)
 				. Html::closeElement( 'h2' )
diff --git a/javascripts/toggle.js b/javascripts/toggle.js
index 981b061..1a5a066 100644
--- a/javascripts/toggle.js
+++ b/javascripts/toggle.js
@@ -1,7 +1,52 @@
 /*global MobileFrontend, document, window */
 /*jslint sloppy: true, white:true, maxerr: 50, indent: 4, plusplus: true*/
+$(".section .content_block").empty(); // TODO: should be done in php
 MobileFrontend.toggle = (function() {
-	var u = MobileFrontend.utils;
+	var u = MobileFrontend.utils,
+		title = MobileFrontend.setting( 'pageTitle' ),
+		loadedSections = {},
+		scriptPath = MobileFrontend.setting( 'scriptPath' );
+
+	function wasLoaded( title, id ) {
+		return loadedSections[ title ] && loadedSections[ title ][ id ];
+	}
+
+	function markLoaded( title, id, failFlag ) {
+		loadedSections[ title ] = loadedSections[ title ] || {};
+		loadedSections[ title ][ id ] = failFlag ? false : true;
+	}
+
+	function getSection( title, section_id, callback ) {
+		if( !wasLoaded( title, section_id ) ) {
+			markLoaded( title, section_id );
+			u.ajax({
+				url: scriptPath + '/api.php',
+				dataType: 'json',
+				data: {
+					format: 'json',
+					action: 'mobileview',
+					page: title,
+					redirects: 'yes',
+					prop: 'sections',
+					sections: section_id,
+					sectionprop: 'level|line',
+					noheadings: 'yes'
+				},
+				success: function( data ) {
+					var i, sections = data && data.mobileview && data.mobileview.sections ?
+						data.mobileview.sections : [];
+					for( i = 0; i < sections.length; i++ ) {
+						if( sections[i].text ) {
+							callback( sections[i] );
+						}
+					}
+				},
+				error: function() {
+					markLoaded( title, section_id, true );
+				}
+			})
+		}
+	}
 
 	function init() {
 		var i, a, heading, h2, btns = [], buttons,
@@ -44,6 +89,13 @@ MobileFrontend.toggle = (function() {
 
 		for( i = 0; i < sectionHeadings.length; i++ ) {
 			heading = sectionHeadings[i];
+			// disable link
+			a = heading.getElementsByTagName( 'a' );
+			if( a ) {
+				u( a[0] ).bind( 'click', function(ev) {
+					ev.preventDefault();
+				} )
+			}
 			heading.removeAttribute( 'onclick' ); // TODO: remove any legacy onclick handlers
 			heading.insertBefore( createButton( true ), heading.firstChild );
 			heading.insertBefore( createButton( false ), heading.firstChild );
@@ -89,6 +141,12 @@ MobileFrontend.toggle = (function() {
 			reset.push( b );
 			u( b ).addClass( 'openSection' );
 		}
+		if( b.hasAttribute( 'data-section' ) ) {
+			getSection( title, section_id, function( section ) {
+				var el = document.getElementById( 'content_' + section_id );
+				el.innerHTML = section.text;
+			} );
+		}
 		for ( i = 0, d = ['content_','anchor_']; i<=1; i++ ) {
 			e = document.getElementById( d[i] + section_id );
 			if ( e && u( e ).hasClass( 'openSection' ) ) {
diff --git a/templates/ApplicationTemplate.php b/templates/ApplicationTemplate.php
index 71ff258..7d1bb4f 100644
--- a/templates/ApplicationTemplate.php
+++ b/templates/ApplicationTemplate.php
@@ -46,6 +46,7 @@ class ApplicationTemplate extends MobileFrontendTemplate {
 				'remove-results' => wfMsg( 'mobile-frontend-wml-back' ),
 				),
 			'settings' => array(
+				'pageTitle' => ( $this->data['pageTitle'] ),
 				'scriptPath' => ( $this->data['wgScriptPath'] ),
 				'useFormatCookieName' => ( $this->data['useFormatCookieName'] ),
 				'useFormatCookieDuration' => ( $this->data['useFormatCookieDuration'] ),