https://www.mediawiki.org/wiki/Special:Code/MediaWiki/113640
Revision: 113640
Author: jdlrobson
Date: 2012-03-12 17:59:11 +0000 (Mon, 12 Mar 2012)
Log Message:
-----------
separate toggle code from application, remove beta_application
this separates all toggling related code so that it is more
self contained and better for consumption by the phonegap app
which makes use of it.
during this refactoring I noticed that application.js is
actually the same as beta_application.js so I have removed
the latter to make the project easier to maintain.
Modified Paths:
--------------
trunk/extensions/MobileFrontend/Makefile
trunk/extensions/MobileFrontend/MobileFrontend.body.php
trunk/extensions/MobileFrontend/javascripts/application.js
trunk/extensions/MobileFrontend/tests/js/test_application.js
Added Paths:
-----------
trunk/extensions/MobileFrontend/javascripts/toggle.js
trunk/extensions/MobileFrontend/tests/js/test_toggle.js
Removed Paths:
-------------
trunk/extensions/MobileFrontend/javascripts/beta_application.js
Modified: trunk/extensions/MobileFrontend/Makefile
===================================================================
--- trunk/extensions/MobileFrontend/Makefile 2012-03-12 17:31:45 UTC (rev
113639)
+++ trunk/extensions/MobileFrontend/Makefile 2012-03-12 17:59:11 UTC (rev
113640)
@@ -2,5 +2,5 @@
java -jar yuicompressor-2.4.6.jar javascripts/application.js -o
javascripts/application.min.js
java -jar yuicompressor-2.4.6.jar javascripts/banner.js -o
javascripts/banner.min.js
java -jar yuicompressor-2.4.6.jar javascripts/opensearch.js -o
javascripts/opensearch.min.js
- java -jar yuicompressor-2.4.6.jar javascripts/beta_application.js -o
javascripts/beta_application.min.js
+ java -jar yuicompressor-2.4.6.jar javascripts/toggle.js -o
javascripts/toggle.min.js
java -jar yuicompressor-2.4.6.jar javascripts/beta_opensearch.js -o
javascripts/beta_opensearch.min.js
Modified: trunk/extensions/MobileFrontend/MobileFrontend.body.php
===================================================================
--- trunk/extensions/MobileFrontend/MobileFrontend.body.php 2012-03-12
17:31:45 UTC (rev 113639)
+++ trunk/extensions/MobileFrontend/MobileFrontend.body.php 2012-03-12
17:59:11 UTC (rev 113640)
@@ -1276,6 +1276,7 @@
$testModules['qunit']['ext.mobilefrontend.tests'] = array(
'scripts' => array( 'tests/js/fixtures.js',
'javascripts/application.js',
'javascripts/opensearch.js',
'javascripts/banner.js',
+ 'javascripts/toggle.js',
'tests/js/test_toggle.js',
'tests/js/test_application.js',
'tests/js/test_opensearch.js', 'tests/js/test_banner.js' ),
'dependencies' => array( ),
'localBasePath' => dirname( __FILE__ ),
Modified: trunk/extensions/MobileFrontend/javascripts/application.js
===================================================================
--- trunk/extensions/MobileFrontend/javascripts/application.js 2012-03-12
17:31:45 UTC (rev 113639)
+++ trunk/extensions/MobileFrontend/javascripts/application.js 2012-03-12
17:59:11 UTC (rev 113640)
@@ -4,45 +4,9 @@
var utilities;
function init() {
- var i, results, languageSelection, a, heading, btns,
- sectionHeadings = utilities( '.section_heading' );
+ var languageSelection;
utilities( document.body ).addClass( 'jsEnabled' );
- // TODO: remove in future - currently enables toggling in
Wikipedia Mobile App v < 1.1
- window.wm_toggle_section = wm_toggle_section;
- var btns = utilities( '.section_heading button' );
- for( i = 0; i < btns.length; i++ ) {
- utilities( btns[i] ).remove();
- }
-
- function openSectionHandler() {
- var sectionNumber = this.id ? this.id.split( '_' )[1] :
-1;
- if( sectionNumber > -1 ) {
- wm_toggle_section( sectionNumber );
- }
- }
- function createButton( visible ) {
- var btn, label;
- btn = document.createElement( 'button' );
- label = document.createTextNode( visible ? showText :
hideText );
- btn.className = visible ? 'show' : 'hide';
- btn.appendChild( label );
- btn.style.display = visible ? 'inline-block' : 'none';
- return btn;
- }
- if(!sectionHeadings) {
- sectionHeadings = [];
- } else {
- utilities( document.body ).addClass( 'togglingEnabled'
);
- }
- for( i = 0; i < sectionHeadings.length; i++ ) {
- heading = sectionHeadings[i];
- heading.removeAttribute( 'onclick' ); // TODO: remove
any legacy onclick handlers
- heading.insertBefore( createButton( true ),
heading.firstChild );
- heading.insertBefore( createButton( false ),
heading.firstChild );
- utilities( heading ).bind( 'click', openSectionHandler
);
- }
- results = document.getElementById( 'results' );
languageSelection = document.getElementById(
'languageselection' );
function navigateToLanguageSelection() {
@@ -62,52 +26,10 @@
}
utilities( document.getElementById( 'logo' ) ).bind( 'click',
logoClick );
- function checkHash() {
- var hash = this.hash || document.location.hash;
- if ( hash.indexOf( '#' ) === 0 ) {
- wm_reveal_for_hash( hash );
- }
- }
- checkHash();
- for ( a = document.getElementsByTagName( 'a' ), i = 0; i <
a.length; i++ ) {
- utilities( a[i] ).bind( 'click', checkHash );
- }
-
// Try to scroll and hide URL bar
window.scrollTo( 0, 1 );
}
- function wm_reveal_for_hash( hash ) {
- var targetel = document.getElementById( hash.substr(1) ),
- p, section_idx;
- if ( targetel ) {
- p = targetel;
- while ( p && p.className !== 'content_block' &&
- p.className !== 'section_heading' ) {
- p = p.parentNode;
- }
- if ( p && p.style.display !== 'block' ) {
- section_idx = parseInt( p.id.split( '_' )[1],
10 );
- wm_toggle_section( section_idx );
- }
- }
- }
-
- function wm_toggle_section( section_id ) {
- var b = document.getElementById( 'section_' + section_id ),
- bb = b.getElementsByTagName( 'button' ), i, s, e;
- for ( i = 0; i <= 1; i++ ) {
- s = bb[i].style;
- s.display = s.display === 'none' || ( i && !s.display )
? 'inline-block' : 'none';
- }
- for ( i = 0, d = ['content_','anchor_']; i<=1; i++ ) {
- e = document.getElementById( d[i] + section_id );
- if ( e ) {
- e.style.display = e.style.display === 'block' ?
'none' : 'block';
- }
- }
- }
-
utilities = typeof jQuery !== 'undefined' ? jQuery : function( el ) {
if( typeof(el) === 'string' ) {
if( document.querySelectorAll ) {
@@ -169,8 +91,6 @@
init();
return {
- wm_reveal_for_hash: wm_reveal_for_hash,
- wm_toggle_section: wm_toggle_section,
init: init,
utils: utilities
};
Deleted: trunk/extensions/MobileFrontend/javascripts/beta_application.js
===================================================================
--- trunk/extensions/MobileFrontend/javascripts/beta_application.js
2012-03-12 17:31:45 UTC (rev 113639)
+++ trunk/extensions/MobileFrontend/javascripts/beta_application.js
2012-03-12 17:59:11 UTC (rev 113640)
@@ -1,183 +0,0 @@
-/*global document, window */
-/*jslint sloppy: true, white:true, maxerr: 50, indent: 4, plusplus: true*/
-/*
-TODO: getElementsByClassName not supported by IE < 9
-TODO: addEventListener not supported by IE < 9
-*/
-MobileFrontend = (function() {
- var utilities;
-
- function init() {
- var i, search, clearSearch, results, languageSelection, a,
heading, btns,
- sectionHeadings = utilities( '.section_heading' );
- utilities( document.body ).addClass( 'jsEnabled' );
-
- // TODO: remove in future - currently enables toggling in
Wikipedia Mobile App v < 1.1
- window.wm_toggle_section = wm_toggle_section;
- var btns = utilities( '.section_heading button' );
- for( i = 0; i < btns.length; i++ ) {
- utilities( btns[i] ).remove();
- }
-
- function openSectionHandler() {
- var sectionNumber = this.id ? this.id.split( '_' )[1] :
-1;
- if( sectionNumber > -1 ) {
- wm_toggle_section( sectionNumber );
- }
- }
- function createButton( visible ) {
- var btn, label;
- btn = document.createElement( 'button' );
- label = document.createTextNode( visible ? showText :
hideText );
- btn.className = visible ? 'show' : 'hide';
- btn.appendChild( label );
- btn.style.display = visible ? 'inline-block' : 'none';
- return btn;
- }
- if(!sectionHeadings) {
- sectionHeadings = [];
- } else {
- utilities( document.body ).addClass( 'togglingEnabled'
);
- }
- for( i = 0; i < sectionHeadings.length; i++ ) {
- heading = sectionHeadings[i];
- heading.removeAttribute( 'onclick' ); // TODO: remove
any legacy onclick handlers
- heading.insertBefore( createButton( true ),
heading.firstChild );
- heading.insertBefore( createButton( false ),
heading.firstChild );
- utilities( heading ).bind( 'click', openSectionHandler
);
- }
- results = document.getElementById( 'results' );
- languageSelection = document.getElementById(
'languageselection' );
-
- function navigateToLanguageSelection() {
- var url;
- if ( languageSelection ) {
- url =
languageSelection.options[languageSelection.selectedIndex].value;
- if ( url ) {
- location.href = url;
- }
- }
- }
- utilities( languageSelection ).bind( 'change',
navigateToLanguageSelection );
-
- function logoClick() {
- var n = document.getElementById( 'nav' ).style;
- n.display = n.display === 'block' ? 'none' : 'block';
- }
- utilities( document.getElementById( 'logo' ) ).bind( 'click',
logoClick );
-
- function checkHash() {
- var hash = this.hash || document.location.hash;
- if ( hash.indexOf( '#' ) === 0 ) {
- wm_reveal_for_hash( hash );
- }
- }
- checkHash();
- for ( a = document.getElementsByTagName( 'a' ), i = 0; i <
a.length; i++ ) {
- utilities( a[i] ).bind( 'click', checkHash );
- }
-
- // Try to scroll and hide URL bar
- window.scrollTo( 0, 1 );
- }
-
- function wm_reveal_for_hash( hash ) {
- var targetel = document.getElementById( hash.substr(1) ),
- p, section_idx;
- if ( targetel ) {
- p = targetel;
- while ( p && p.className !== 'content_block' &&
- p.className !== 'section_heading' ) {
- p = p.parentNode;
- }
- if ( p && p.style.display !== 'block' ) {
- section_idx = parseInt( p.id.split( '_' )[1],
10 );
- wm_toggle_section( section_idx );
- }
- }
- }
-
- function wm_toggle_section( section_id ) {
- var b = document.getElementById( 'section_' + section_id ),
- bb = b.getElementsByTagName( 'button' ), i, s, e;
- for ( i = 0; i <= 1; i++ ) {
- s = bb[i].style;
- s.display = s.display === 'none' || ( i && !s.display )
? 'inline-block' : 'none';
- }
- for ( i = 0, d = ['content_','anchor_']; i<=1; i++ ) {
- e = document.getElementById( d[i] + section_id );
- if ( e ) {
- e.style.display = e.style.display === 'block' ?
'none' : 'block';
- }
- }
- }
-
- utilities = typeof jQuery !== 'undefined' ? jQuery : function( el ) {
- if( typeof(el) === 'string' ) {
- if( document.querySelectorAll ) {
- return [].slice.call(
document.querySelectorAll( el ) );
- }
- }
-
- function addClass( name ) {
- var className = el.className,
- classNames = className.split( ' ' );
- classNames.push(name); // TODO: only push if unique
- el.className = classNames.join( ' ' );
- }
-
- function removeClass( name ) {
- var className = el.className,
- classNames = className.split( ' ' ),
- newClasses = [], i;
- for( i = 0; i < classNames.length; i++ ) {
- if( classNames[i] !== name ) {
- newClasses.push( classNames[i] );
- }
- }
- el.className = newClasses.join( ' ' );
- }
-
- function bind( type, handler ) {
- el.addEventListener( type, handler, false );
- }
-
- function remove() {
- el.parentNode.removeChild(el);
- }
-
- return {
- addClass: addClass,
- bind: bind,
- remove: remove,
- removeClass: removeClass
- };
- }
- utilities.ajax = utilities.ajax || function( options ) {
- var xmlHttp, url;
- if ( window.XMLHttpRequest ) {
- xmlHttp = new XMLHttpRequest();
- } else {
- xmlHttp = new ActiveXObject( 'Microsoft.XMLHTTP' );
- }
- if( xmlHttp.overrideMimeType ) { // non standard
- xmlHttp.overrideMimeType( 'text/xml' );
- }
- xmlHttp.onreadystatechange = function() {
- if ( xmlHttp.readyState === 4 && xmlHttp.status === 200
) {
- options.success( xmlHttp.responseXML );
- }
- };
- xmlHttp.open( 'GET', options.url, true );
- xmlHttp.send();
- };
-
- init();
- return {
- wm_reveal_for_hash: wm_reveal_for_hash,
- wm_toggle_section: wm_toggle_section,
- init: init,
- utils: utilities
- };
-
-}());
Added: trunk/extensions/MobileFrontend/javascripts/toggle.js
===================================================================
--- trunk/extensions/MobileFrontend/javascripts/toggle.js
(rev 0)
+++ trunk/extensions/MobileFrontend/javascripts/toggle.js 2012-03-12
17:59:11 UTC (rev 113640)
@@ -0,0 +1,95 @@
+/*global document, window */
+/*jslint sloppy: true, white:true, maxerr: 50, indent: 4, plusplus: true*/
+MobileFrontend.toggle = (function() {
+ var u = MobileFrontend.utils;
+
+ function init() {
+ var i, a, heading, btns,
+ sectionHeadings = u( '.section_heading' );
+
+ // TODO: remove in future - currently enables toggling in
Wikipedia Mobile App v < 1.1
+ window.wm_toggle_section = wm_toggle_section;
+ btns = u( '.section_heading button' );
+ for( i = 0; i < btns.length; i++ ) {
+ u( btns[i] ).remove();
+ }
+
+ function openSectionHandler() {
+ var sectionNumber = this.id ? this.id.split( '_' )[1] :
-1;
+ if( sectionNumber > -1 ) {
+ wm_toggle_section( sectionNumber );
+ }
+ }
+ function createButton( visible ) {
+ var btn, label;
+ btn = document.createElement( 'button' );
+ label = document.createTextNode( visible ? showText :
hideText );
+ btn.className = visible ? 'show' : 'hide';
+ btn.appendChild( label );
+ btn.style.display = visible ? 'inline-block' : 'none';
+ return btn;
+ }
+ if(!sectionHeadings) {
+ sectionHeadings = [];
+ } else {
+ u( document.body ).addClass( 'togglingEnabled' );
+ }
+ for( i = 0; i < sectionHeadings.length; i++ ) {
+ heading = sectionHeadings[i];
+ heading.removeAttribute( 'onclick' ); // TODO: remove
any legacy onclick handlers
+ heading.insertBefore( createButton( true ),
heading.firstChild );
+ heading.insertBefore( createButton( false ),
heading.firstChild );
+ u( heading ).bind( 'click', openSectionHandler );
+ }
+
+ function checkHash() {
+ var hash = this.hash || document.location.hash;
+ if ( hash.indexOf( '#' ) === 0 ) {
+ wm_reveal_for_hash( hash );
+ }
+ }
+ checkHash();
+ for ( a = document.getElementsByTagName( 'a' ), i = 0; i <
a.length; i++ ) {
+ u( a[i] ).bind( 'click', checkHash );
+ }
+ }
+
+ function wm_reveal_for_hash( hash ) {
+ var targetel = document.getElementById( hash.substr(1) ),
+ p, section_idx;
+ if ( targetel ) {
+ p = targetel;
+ while ( p && p.className !== 'content_block' &&
+ p.className !== 'section_heading' ) {
+ p = p.parentNode;
+ }
+ if ( p && p.style.display !== 'block' ) {
+ section_idx = parseInt( p.id.split( '_' )[1],
10 );
+ wm_toggle_section( section_idx );
+ }
+ }
+ }
+
+ function wm_toggle_section( section_id ) {
+ var b = document.getElementById( 'section_' + section_id ),
+ bb = b.getElementsByTagName( 'button' ), i, s, e;
+ for ( i = 0; i <= 1; i++ ) {
+ s = bb[i].style;
+ s.display = s.display === 'none' || ( i && !s.display )
? 'inline-block' : 'none';
+ }
+ for ( i = 0, d = ['content_','anchor_']; i<=1; i++ ) {
+ e = document.getElementById( d[i] + section_id );
+ if ( e ) {
+ e.style.display = e.style.display === 'block' ?
'none' : 'block';
+ }
+ }
+ }
+
+ init();
+ return {
+ wm_reveal_for_hash: wm_reveal_for_hash,
+ wm_toggle_section: wm_toggle_section,
+ init: init
+ };
+
+})();
Modified: trunk/extensions/MobileFrontend/tests/js/test_application.js
===================================================================
--- trunk/extensions/MobileFrontend/tests/js/test_application.js
2012-03-12 17:31:45 UTC (rev 113639)
+++ trunk/extensions/MobileFrontend/tests/js/test_application.js
2012-03-12 17:59:11 UTC (rev 113640)
@@ -57,61 +57,3 @@
strictEqual(visible3, false, "toggle");
});
-module("MobileFrontend application.js: wm_toggle_section", {
- setup: function() {
- MFET.createFixtures();
- MFE.init();
- $("#content_1,#anchor_1,#section_1 .hide").hide();
- $("#section_1 .show").show();
- },
- teardown: function() {
- MFET.cleanFixtures();
- window.location.hash = "#";
- }
-});
-
-test("wm_toggle_section", function() {
- MFE.wm_toggle_section("1");
- strictEqual($("#content_1").is(":visible"), true, "check content is
visible on a toggle");
- strictEqual($("#anchor_1").is(":visible"), true, "check anchor is
visible on toggle");
- strictEqual($("#section_1 .hide").is(":visible"), true, "check hide
button now visible");
- strictEqual($("#section_1 .show").is(":visible"), false, "check show
button now hidden");
-
- // perform second toggle
- MFE.wm_toggle_section("1");
- strictEqual($("#content_1").is(":visible"), false, "check content is
hidden on a toggle");
- strictEqual($("#anchor_1").is(":visible"), false, "check anchor is
hidden on toggle");
- strictEqual($("#section_1 .hide").is(":visible"), false, "check hide
button now hidden");
- strictEqual($("#section_1 .show").is(":visible"), true, "check show
button now visible");
-});
-
-test("wm_reveal_for_hash", function() {
- MFE.wm_reveal_for_hash("#First_Section");
- strictEqual($("#content_1").is(":visible"), true, "check content is
visible on a toggle");
- strictEqual($("#anchor_1").is(":visible"), true, "check anchor is
visible on toggle");
- strictEqual($("#section_1 .hide").is(":visible"), true, "check hide
button now visible");
- strictEqual($("#section_1 .show").is(":visible"), false, "check show
button now hidden");
-});
-
-test("wm_reveal_for_hash", function() {
- MFE.wm_reveal_for_hash("#First_Section_2");
- strictEqual($("#content_1").is(":visible"), true, "check content is
visible on a toggle");
- strictEqual($("#anchor_1").is(":visible"), true, "check anchor is
visible on toggle");
- strictEqual($("#section_1 .hide").is(":visible"), true, "check hide
button now visible");
- strictEqual($("#section_1 .show").is(":visible"), false, "check show
button now hidden");
-});
-
-test("clicking hash links", function() {
- MFET.triggerEvent($("[href=#First_Section_2]")[0], "click");
- strictEqual($("#content_1").is(":visible"), true, "check content is
visible on a toggle");
- strictEqual($("#anchor_1").is(":visible"), true, "check anchor is
visible on toggle");
- strictEqual($("#section_1 .hide").is(":visible"), true, "check hide
button now visible");
- strictEqual($("#section_1 .show").is(":visible"), false, "check show
button now hidden");
-});
-
-test("clicking a heading toggles it", function() {
- var visibilityStart = $("#content_1").is(":visible");
- MFET.triggerEvent($("#section_1")[0], "click");
- strictEqual(visibilityStart, false, "check content is hidden at start");
- strictEqual($("#content_1").is(":visible"), true, "check content is
hidden on a toggle");
-});
Added: trunk/extensions/MobileFrontend/tests/js/test_toggle.js
===================================================================
--- trunk/extensions/MobileFrontend/tests/js/test_toggle.js
(rev 0)
+++ trunk/extensions/MobileFrontend/tests/js/test_toggle.js 2012-03-12
17:59:11 UTC (rev 113640)
@@ -0,0 +1,58 @@
+module("MobileFrontend toggle.js: wm_toggle_section", {
+ setup: function() {
+ MFET.createFixtures();
+ MFE.toggle.init();
+ $("#content_1,#anchor_1,#section_1 .hide").hide();
+ $("#section_1 .show").show();
+ },
+ teardown: function() {
+ MFET.cleanFixtures();
+ window.location.hash = "#";
+ }
+});
+
+test("wm_toggle_section", function() {
+ MFE.toggle.wm_toggle_section("1");
+ strictEqual($("#content_1").is(":visible"), true, "check content is
visible on a toggle");
+ strictEqual($("#anchor_1").is(":visible"), true, "check anchor is
visible on toggle");
+ strictEqual($("#section_1 .hide").is(":visible"), true, "check hide
button now visible");
+ strictEqual($("#section_1 .show").is(":visible"), false, "check show
button now hidden");
+
+ // perform second toggle
+ MFE.toggle.wm_toggle_section("1");
+ strictEqual($("#content_1").is(":visible"), false, "check content is
hidden on a toggle");
+ strictEqual($("#anchor_1").is(":visible"), false, "check anchor is
hidden on toggle");
+ strictEqual($("#section_1 .hide").is(":visible"), false, "check hide
button now hidden");
+ strictEqual($("#section_1 .show").is(":visible"), true, "check show
button now visible");
+});
+
+test("wm_reveal_for_hash", function() {
+ MFE.toggle.wm_reveal_for_hash("#First_Section");
+ strictEqual($("#content_1").is(":visible"), true, "check content is
visible on a toggle");
+ strictEqual($("#anchor_1").is(":visible"), true, "check anchor is
visible on toggle");
+ strictEqual($("#section_1 .hide").is(":visible"), true, "check hide
button now visible");
+ strictEqual($("#section_1 .show").is(":visible"), false, "check show
button now hidden");
+});
+
+test("wm_reveal_for_hash", function() {
+ MFE.toggle.wm_reveal_for_hash("#First_Section_2");
+ strictEqual($("#content_1").is(":visible"), true, "check content is
visible on a toggle");
+ strictEqual($("#anchor_1").is(":visible"), true, "check anchor is
visible on toggle");
+ strictEqual($("#section_1 .hide").is(":visible"), true, "check hide
button now visible");
+ strictEqual($("#section_1 .show").is(":visible"), false, "check show
button now hidden");
+});
+
+test("clicking hash links", function() {
+ MFET.triggerEvent($("[href=#First_Section_2]")[0], "click");
+ strictEqual($("#content_1").is(":visible"), true, "check content is
visible on a toggle");
+ strictEqual($("#anchor_1").is(":visible"), true, "check anchor is
visible on toggle");
+ strictEqual($("#section_1 .hide").is(":visible"), true, "check hide
button now visible");
+ strictEqual($("#section_1 .show").is(":visible"), false, "check show
button now hidden");
+});
+
+test("clicking a heading toggles it", function() {
+ var visibilityStart = $("#content_1").is(":visible");
+ MFET.triggerEvent($("#section_1")[0], "click");
+ strictEqual(visibilityStart, false, "check content is hidden at start");
+ strictEqual($("#content_1").is(":visible"), true, "check content is
hidden on a toggle");
+});
_______________________________________________
MediaWiki-CVS mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
