azureabstraction > javascript

Javascript resources

select scripts to generate a javascript include file

• addEvent.js

  Flexible, cross-browser event registration.

  addEvent and removeEvent, designed by Aaron Moore

  Event registration, the attaching of code to events triggered by the user, is the crux of interactive javascript programming. Javascript functions need to know when they are supposed to run, be it onload, onclick, onmouseover, etc.

  This is a flexible, cross-browser solution to the problem. It's based on the window.onload = function; syntax, therefore it should work in old browsers. Inside a handler registered with this method:

  • this refers to the target element which fired the event.
  • e refers to the the event object (yes, in IE, too). Event properties, suchas keycode data can be gathered from e
  • return false; cancles the default behavior of the event, such as the navigation behavior associated with the onclick listener on hyper-link elements.

  One last note: at the core of these functions is a generic way to assign and remove multiple function references to a single method of an object. There is no requirement that this method be and event listener. This makes my functions very flexible. This property of them makes it possible to treat clock.ontick like an event, when using my functions for registration.

  // addEvent and removeEvent, designed by Aaron Moore
function addEvent(element, listener, handler)
{
    //if the system is not set up, set it up, and
    // store any outside script's event registration in the first handler slot
    if(typeof element[listener] != 'function' ||
    typeof element[listener + '_num'] == 'undefined'){
        element[listener + '_num'] = 0;
        if(typeof element[listener] == 'function'){
            element[listener + 0] = element[listener];
            element[listener + '_num']++;
        }
        element[listener] = function(e){
            var r = true;
            e = (e) ? e : window.event;
            for(var i = 0; i < element[listener + '_num']; i++)
                if(element[listener + i](e) === false) r = false;
            return r;
        }
    }
    //if handler is not already stored, assign it
    for(var i = 0; i < element[listener + '_num']; i++)
        if(element[listener + i] == handler) return;
    element[listener + element[listener + '_num']] = handler;
    element[listener + '_num']++;
}
function removeEvent(element, listener, handler)
{
    //if the system is not set up, or there are no handlers to remove, exit
    if(typeof element[listener] != 'function' ||
    typeof element[listener + '_num'] == 'undefined' ||
    element[listener + '_num'] == 0) return;
    //loop through handlers,
    // if target handler is reached, begin overwriting each
    // handler with the handler in front of it until one before the last
    var found = false;
    for(var i = 0; i < element[listener + '_num']; i++){
        if(!found)
            found = element[listener + i] == handler;
        if(found && (i+1) < element[listener + '_num'])
            element[listener + i] = element[listener + (i+1)];
    }
    //if handler was found, decrement the handler count
    if(found)
        element[listener + '_num']--;
}


• class functions.js

  add and remove classes

  addClass and removeClass, designed by Chris Sullins

  These functions make adding and removing classes easier and more universal. Instead of directly assigning a class (e.g. element.className = 'new_class'), you use this code: addClass( element, 'new_class' ). The function then checks (in the case of addClass) whether the class exists, and if not it appends it to the end of the element's class. In the case of removeClass, the function uses a regular expression to replace all instances of the old class with an empty string.

  // hasClass, addClass and removeClass written by Chris Sullins

function hasClass( element, className )
{
    if( !element.className )
    {
        return false;
    }
    else
    {
        var reg = new RegExp( "\\b" + className + "\\b", "gi" );
        return reg.test(element.className);
    }
}

function addClass( element, className )
{
    if( !hasClass(element, className) )
    {
        element.className += " " + className;
    }
}

function removeClass( element, className )
{
    if( element.className )
    {
        var reg = new RegExp( "\\b" + className + "\\b", "gi" );
        element.className = element.className.replace( reg, "" );
    }
}

• clock.js

  global clock for timing

  designed by Aaron Moore

  Javascript animation is quite a difficult task, due to the scarsity of timing functions. There are two, the major of which is setTimeout( function, time ). This runs a text string of javascript upon the passage of time milliseconds.

  // designed by Aaron Moore
var clock = new Object;
clock.tick = 50;
clock.count = 0;
clock.start = clockTick;
function clockTick(){
    clock.reference = setTimeout("clockTick()",clock.tick);
    clock.ontick();
    clock.count++;
}
clock.stop = function(){
    clearTimeout(clock.reference);
}
clock.ontick;


• getElementsByClassName.js

  by class, get array of elements

  Written by Jonathan Snook

  Add-ons by Robert Nyman

  This is one of the most needed functions in javascript. I use it in 75% of the javascript projects I work on. It's surprising that it isn't built in, but here it is.

  // Credits for getElementsByClassName:
// Written by Jonathan Snook, http://www.snook.ca/jonathan
// Add-ons by Robert Nyman, http://www.robertnyman.com
function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && document.all)? document.all :
    oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("\\b" + strClassName + "\\b");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}


• getStyle.js

  get assigned style of element

  written by Robert Nyman

  Getting style is a moderately difficult task to do cross-browser, and here is a version that is ready-made for the purpose. I don't use it terribly often, but when I need it, it's a lifesaver.

  // Credits for getStyle:
// Robert Nyman, http://www.robertnyman.com
function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}


• jsSyntax.js

  add syntax highlighting to js code

  designed by Chris Sullins

  Code is a lot easier to read when it has syntax highlighting. This script goes through javascript text and adds span elements where it needs to for display. A stylesheet is needed. Here's the one that is being used:

  .c { /* comment */
color: #F70;
}
.c span {
color: #F70;
font-weight: normal;
}
.q { /* quoted */
color: #F0C;
}
.q span {
color: #F0C;
font-weight: normal;
}
.f { /* functions */
color: #A7F;
}
.v { /* keyword */
color: #07A;
font-weight: bold;
}
.d { /* digits */
color: #F00;
}
.s { /* symbols */
font-weight: bold;
}
.t { /* types */
font-weight: bold;
color: #0AF;
}
.b { /* boolean */
color: #C0C;
}
  // jsSyntax designed by Chris Sullins
function jsSyntax( text ) {
    // quotes
    text = text.replace(/\"(.*)\"/g, "<span class=\"q\">\"$1\"</span>");
    text = text.replace(/\'(.*)\'/g, "<span class=\"q\">\'$1\'</span>");
    // numbers
    text = text.replace(/\b(\d+)\b/g, "<span class=\"d\">$1</span>");
    text = text.replace(/\[(\d+)\]/g, "<span class=\"d\">$1</span>");
    // functions
    text = text.replace(/([\s\.][\w_]+)\s?\(/g, "<span class=\"f\">$1</span>(");
    // keywords
    text = text.replace(/(new|var|return|function|typeof)/g, "<span class=\"v\">$1</span>");
    // control structures
    text = text.replace(/(if|for|while|do|case)([^\s\w])/g, "<span class=\"v\">$1</span>$2");
    // ojbects
    text = text.replace(/\b(Object|RegExp|Array|Date|Math|Number|String|Boolean)\b/g, "<span class=\"t\">$1</span>");
    // comments
    text = text.replace(/\/\/(.*)\n/g, "<span class=\"c\">//$1</span>\n");
    // symbols
    text = text.replace(/([{}\[\]\|\?])/g, "<span class=\"s\">$1</span>");
    text = text.replace(/(&amp;)/g, "<span class=\"b\">$1</span>");
    //boolean
    text = text.replace(/\b(true|false|null)\b/g, "<span class=\"b\">$1</span>");
    // this
    text = text.replace(/\b(this)\b/g, "<span class=\"b\">$1</span>");
    return text;
}

• ondomload.js

  DOM onload event

  ondomload, designed by Dean Edwards, Matthias Miller, John Resig. Assembled by Aaron Moore.

  Sometimes you need to run javascript after the document has loaded, but before all the media has. In that event, you run something after the DOM has loaded. This script accomplishes that task

  // Create event 'ondomload' which runs once when the dom of the document
// has loaded. This is before images and other long downloads start.
// If the browser does not support this, falls back to window.onload.
// (Firefox and Opera)
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", onDOMContentLoaded, false);
}

// (Safari)
if (/WebKit/i.test(navigator.userAgent)) { // sniff
    var _timer = setInterval(function() {
        if (/loaded|complete/.test(document.readyState)) {
            clearInterval(_timer);
            onDOMContentLoaded(); // call the onload handler
        }
    }, 10);
}
// (Internet Explorer (using conditional comments))
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
    if (this.readyState == "complete") {
        onDOMContentLoaded(); // call the onload handler
    }
};
/*@end @*/
window.onload = onDOMContentLoaded;
function onDOMContentLoaded(){
    // quit if this function has already been called
    if (arguments.callee.done) return;
    // flag this function so we don't do the same thing twice
    arguments.callee.done = true;
    ondomload();
}

window.ondomload = function(){};