User:Yair rand/MobileJS.js

// this replaces MobileFrontend/javascripts/opensearch.js and MobileFrontend/javascripts/application.js.
// Assumes that this is in the head, and that pageLoaded is called from the bottom of that body, and
// that #logo has onclick="logoClick()" in the html, and that #results is available.

// handle clicking on headers to expand sections and clicking on links that lead to hidden sections
document.onclick = function(e) { 
	e = e || event;
	for( e = e.target || e.srcElement; e && e.nodeName != "A" && e.className != "section_heading"; ) {
		e = e.parentNode;
	}
	if( e && e.className == "section_heading") { // headers
		wm_toggle_section( parseInt( e.id.replace( /section_(\d+)/, '$1' ) ) );
	} else if( e && e.hash && e.hash.indexOf( '#' ) == 0 ) { // links
		wm_reveal_for_hash( e.hash );
	}
}

var languageSelection;

// called from the bottom of the body
function pageLoaded() { 

	if ( document.location.hash.indexOf( '#' ) == 0 ) {
		wm_reveal_for_hash( document.location.hash );
	}

	var search = document.getElementById('search'), 
		clearSearch = document.getElementById('clearsearch'),
		results = document.getElementById('results'),
		sq = document.getElementById( 'sq' );
	languageSelection = document.getElementById( 'languageselection' );
	clearSearch.setAttribute('title', 'Clear'); // should start with correct title attribute
	
	
	results.style.width = ( sq.offsetWidth - 2 ) + pixels;
	results.style.left = sq.offsetLeft + pixels;
	results.style.top = ( sq.offsetTop + sq.offsetHeight )	+ pixels;

	function clearSearchBox() {
		search.value = '';
		clearSearch.style.display = results.style.display = 'none';
		return false;
	}
	clearSearch.onmousedown = clearSearchBox;

	search.onkeyup = function() {
		if ( clearSearch ) {
			clearSearch.style.display = search.value.length > 0 ? 'block' : results.style.display = 'none';
		}
		// from bottom
		clearTimeout( timer );
		var term = this.value;
		if ( term.length < 1 ) {
			results.innerHTML = '';
		} else {
			timer = setTimeout( function () { searchApi( term ); }, typingDelay );
		}
	}

	// Try to scroll and hide URL bar
	window.scrollTo( 0, 1 );
};

// Activated by "onclick='logoClick()'" in #logo html
function logoClick() {
	var n = document.getElementById( 'nav' ).style;
	n.display = n.display == 'block' ? 'none' : 'block';
	if (n.display == 'block' && languageSelection && languageSelection.offsetWidth > 175 ) {
		n.width = (languageSelection.offsetWidth + 30) + 'px';
	}
};

// Activated by "onchange='javascript:navigateToLanguageSelection();'" in #languageSelection html
function navigateToLanguageSelection() {
	if ( languageSelection ) {
		var url = languageSelection.options[languageSelection.selectedIndex].value;
		if ( url ) {
			location.href = url;
		}
	}
}

updateOrientation();

/**
 * updateOrientation checks the current orientation, sets the body's class
 * attribute to portrait, landscapeLeft, or landscapeRight,
 * and displays a descriptive message on "Handling iPhone or iPod touch Orientation Events".
 */

function updateOrientation() {
	switch (window.orientation) {
	case 0:
		document.body.setAttribute('class', 'portrait');
		break;
	case 90:
	case -90:
		document.body.setAttribute('class', 'landscape');
	}
}

// Point to the updateOrientation function when iPhone switches between portrait and landscape modes.
window.onorientationchange = updateOrientation;

function wm_reveal_for_hash(hash) {
	var targetel = document.getElementById(hash.substr(1));
	if (targetel) {
		for (var p = targetel.parentNode; p && p.className != 'content_block' && p.className != 'section_heading';) {
			p = p.parentNode;
		}
		if (p && p.style.display != 'block') {
			var section_idx = parseInt(p.id.split('_')[1]);
			wm_toggle_section(section_idx);
		}
	}
}

function wm_toggle_section(section_id) {
	var b = document.getElementById('section_' + section_id),
		bb = b.getElementsByTagName('button');
	for (var i = 0; i <= 1; i++) {
		var s = bb[i].style;
		s.display = s.display == 'none' || (i && !s.display) ? 'inline-block' : 'none';
	}
	for (var i = 0, d = ['content_', 'anchor_']; i <= 1; i++) {
		var s = document.getElementById(d[i] + section_id).style;
		s.display = s.display == 'block' ? 'none' : 'block';
	}
}

var apiUrl = (window.scriptPath?scriptPath:'/w')+'/api.php'; // this actually needs to get the real script path, atm unavailable

var timer = -1;
var typingDelay = 500;
var numResults = 10;
var pixels = 'px';

function searchApi( term ) {
	var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject( 'Microsoft.XMLHTTP' );

	xmlHttp.onreadystatechange = function() {
		if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
			var response = (window.JSON && JSON.parse ? JSON.parse : eval)( xmlHttp.responseText )[1];
			results.style.display = 'block';
			for(;results.firstChild;){results.removeChild(results.firstChild)}
			if(response.length === 0){
				results.appendChild( document.createTextNode( "No results" ) );
			} else { 
				results.appendChild( document.createElement('div') ).className = "suggestions-results";
				for( var i = 0; i < response.length; i++ ){
					var newdiv = results.lastChild.appendChild( document.createElement('div') );
					newdiv.className = "suggestions-result"; // seriously, why does this need a class? can't any css be done as #results>div?
					newdiv.title = response[i];
					newdiv.appendChild( document.createElement('a') ).href = '/wiki/' + response[i];
					newdiv.firstChild.appendChild( document.createTextNode( response[i] ) );
				}
			}
		}
	}
	var url = apiUrl + '?action=opensearch&limit=' + numResults + '&namespace=0&format=json&search=' + term;
	xmlHttp.open( 'GET', url, true );
	xmlHttp.send();
}