fnsymbianwrtexamples/Sample Applications/Qype/scripts/wrtpressurize.js

/*
 * 
 * Pressurize is badly named, yes, but a really useful feature:
 * We used this implementation to overcome issues with
 * mouse events when having touch UI
 * 
 * Take a look and feel free to use!
 * 
 */


if (typeof util == "undefined") {
	var util = {};
}

(function(namespace) {
    // matches " pressed" but not " pressedstyle" or "depressed"
    var pressedRegexp = /\ pressed\b/;
    
    function clearTimeouts(elem) {
        if (elem.pressurize_timeout) {
            clearTimeout(elem.pressurize_timeout);
            elem.pressurize_timeout = undefined;
        }
    }
    function setPressed(elem) {
        removePressed(elem);
		
		// add class
        elem.className += " pressed";
		
		// long press does not send click event,
		// overcome this by having a timeout for the click
        elem.pressurize_timeout = setTimeout(function() { removePressed(elem); },2000);
    }
    
    function removePressed(elem) {
		// remove class
        elem.className = elem.className.replace(pressedRegexp,'');
        clearTimeouts(elem);
    }
	
	function matchElem(input) {
		if(typeof input == "object") {
			return input;
		} else {
			return document.getElementById(elemId);
		}
	}
    
	function pressurizeAll(className) {
		var elems = getElementsByClass(className);
		for(var i=0;i<elems.length;i++) {
			pressurize(elems[i]);
		}
	}
	
	function depressurizeAll(className) {
        var elems = getElementsByClass(className);
        for(var i=0;i<elems.length;i++) {
            depressurize(elems[i]);
        }
    }
	
	function getElementsByClass(searchClass,node,tag) {
		// this caused problems, at least with Prototype.js in a widget
		//if(document.getElementsByClassName) {
		//    document.getElementById("test").innerHTML += "<div>using getElementsByClassName<div>"; 
        //	return document.getElementsByClassName(searchClass);
		//} else 
		if(typeof $$ == "function") {
		    return $$("."+searchClass);
		} else {
			var classElements = new Array();
	        if(node == null) node = document;
	        if(tag == null) tag = '*';
	        var els = node.getElementsByTagName(tag);
	        var elsLen = els.length;
	        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	        for (i = 0, j = 0; i < elsLen; i++) {
	                if ( pattern.test(els[i].className) ) {
	                        classElements[j] = els[i];
	                        j++;
	                }
	        }
	        return classElements;
		}
	}
	
    function pressurize(rawElem) {
	    var elem = matchElem(rawElem);
		
		// mouse down on device (note, do not modify dom inside the event handler,
		// otherwise click event does not fire!)
        elem.addEventListener("mousemove", function() { setPressed(elem); }, false);
		
		// mouse up on the device
        elem.addEventListener("click", function() { removePressed(elem); }, false);
		
		// mouse out does not work on device, but makes behaviour
		// on desktop more sane
        elem.addEventListener("mouseout", function() { removePressed(elem); }, false);
        
		// if mouseup outside the element, scroll event sometimes sent
		elem.pressurize_windowListener = function() { removePressed(elem); };
        window.addEventListener('scroll', elem.pressurize_windowListener, false);
	}
    
    function depressurize(rawElem) {
		var elem = matchElem(rawElem);
        
		// remove the (global) scroll event handler if the element is deleted
        window.removeEventListener('scroll', elem.pressurize_windowListener, false);
    }
    
    namespace.pressurize = pressurize;
    namespace.depressurize = depressurize;
    namespace.pressurizeAll = pressurizeAll;
    namespace.depressurizeAll = depressurizeAll;

})(util);