elision-helpers/src/helpers.js

Small collection of handy javascript functions.

function addClass (element, newClass){

    // Check if elemnt exists, exit if not
    if (!element){
        return;
    } 

    // if the element has no class, just add a new class
    else if (element.getAttribute('class') == null){
        element.setAttribute('class', newClass);
    } 

    // if the class already exists, exit
    else if (hasClass(element, newClass)){
        return;
    } 

    // If the element already has a class, add the new one to the list
    else {
        element.setAttribute('class', element.getAttribute('class') + ' ' + newClass);
    }
}

function removeClass (element, className){
    // Check if element exists, exit if not
    if (!element || element.getAttribute('class') === null) {
        return;
    }

    // first get the current class list, get rid of the desired class and return new state
    var newState = element.getAttribute('class').replace(new RegExp('(\\s|^)' + className + '(\\s|$)', 'g'), '$2');

    //set the new class list
    element.setAttribute('class', newState);
}

function hasClass (element, className){

    // test if the element has contains given class
    // return TRUE if yes
    if(!element){
        return false;
    }
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.getAttribute('class'));
}

function getElementIndex(element, parentElement) {
    // determine numerical position (index) of the element within the parrent
    var index = Array.prototype.indexOf.call(parentElement.children, element);
    return index;
}

function toggleClass(element, className) {
    // Determine whether the element contains given class
    var visible = element.classList.contains(className);

    // if yes, remove it
    if (visible) {
        removeClass(element, className);
    } 

    // if not, add it to the list
    else {
        addClass(element, className);
    }
}

// get current property of given element
function getStyle(element, property) {
    // get the actual displayed style (may differ from css initial setting)
    var getComputedStyle = window.getComputedStyle;

    if(element && property){
        // currentStyle is for IE
        return ( getComputedStyle ? getComputedStyle(element) : element.currentStyle )[
            // transforms css property into camel sized javascript version
            property.replace(/-(\w)/gi, function (word, letter) {
                return letter.toUpperCase();   
            })
        ];        
    }

    return;
}

// check if element belongs to a node list (querySelectorAll for instance)
function isNodeList(element){
    return NodeList.prototype.isPrototypeOf(element)
}

// Check if element is an Array
function isArray(element){
    // older browsers don't support isArray method
    if (!Array.isArray) {
        return Object.prototype.toString.call(element) === '[object Array]';
    } else {
        return Array.isArray(element);
    }
}


// debounce multiple events
// if immediate is passed, trigger the function on the leading edge instead of trailer
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}



function makeRequest(url, callback) {

    var httpRequest = new XMLHttpRequest();
    if (!httpRequest) {
        return false;
    }

    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            callback(httpRequest.responseText);
        }
    };

    httpRequest.open('GET', url);
    httpRequest.send();
}

function makePostRequest(url,data,callback){
    var httpRequest = new XMLHttpRequest();
    if (!httpRequest) {
        return false;
    }

    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            callback(httpRequest.responseText);
        }
    };

    httpRequest.open('POST', url);
    httpRequest.send(data);
}

function parseSafeJSON(data) {
    var jsonString = data.replace(")]}',", "");
    return JSON.parse(jsonString);
}

//safely registers event listener
function addEvent(object, event, callback) {

    if (object == null || typeof(object) == 'undefined') return;

    if (object.addEventListener) {
        object.addEventListener(event, callback, false);

    } else if (object.attachEvent) {
        object.attachEvent("on" + event, callback);

    } else {
        object["on" + event] = callback;
    }
}

// determine window width the same way CSS @media does

//export for easier testing with mocha
if (typeof module !== 'undefined' && typeof module.exports !== "undefined") {
    exports.addClass = addClass;
    exports.removeClass = removeClass;
    exports.hasClass = hasClass;
    exports.toggleClass = toggleClass;
    exports.makeRequest = makeRequest;
    exports.parseSafeJSON = parseSafeJSON;
    exports.addEvent = addEvent;
    exports.getStyle = getStyle;
    exports.isArray = isArray;
    exports.isNodeList = isNodeList;
    exports.debounce = debounce;
}