Vanilla JS Utils

utils.js

/**
 * Useful common operations wrttien in vanilla JS. Found, borrowed, created and modified from various sources on the internet.
 */

/**
 * Helper to test if an element has a given class
 * @param {*} el Element to test
 * @param {*} className Class to test
 */
function hasClass(el, className) {
    if (el.classList)
        return el.classList.contains(className);
    else
        return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

/**
 * Helper to add a class to an element
 * @param {*} el Element to add class to
 * @param {*} className Class to be added
 */
function addClass(el, className) {
    if (el.classList)
        el.classList.add(className);
    else if (!hasClass(el, className)) el.className += " " + className;
}

/**
 * Helper to remove a class from an element
 * @param {*} el Element to remove class from
 * @param {*} className Class to be removed
 */
function removeClass(el, className) {
    if (el.classList)
        el.classList.remove(className);
    else if (hasClass(el, className)) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className = el.className.replace(reg, ' ');
    }
}

/**
 * Helper to add an event listener to an element
 * @param {*} el Element to add a listener to
 * @param {*} eventList Space separated event list
 * @param {*} callback Function to be executed when event is triggered
 */
function addListenerToEvents(el, eventList, callback) {
    eventList.split(' ').forEach(function (event) {
        el.addEventListener(event, callback);
    });
}

/**
 * Helper to add an event listener to an element
 * @param {*} el Element to remove listeners from
 * @param {*} eventList Space separated event list
 * @param {*} callback Function to be executed when event is triggered
 */
function removeListenerFromEvents(el, eventList, callback) {
    eventList.split(' ').forEach(function (event) {
        el.removeEventListener(event, callback);
    });
}

/**
 * Helper to add multiple on load events to the page
 * @param {*} func to be added to load time execution 
 */
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

/**
 * Helper to get the pixels value of 1rem
 * @param {DOM element} parentElement 
 */
function getDefaultFontSize(parentElement) {
    parentElement = parentElement || document.body;
    var div = document.createElement('div');
    div.style.width = "1000rem";
    parentElement.appendChild(div);
    var pixels = div.offsetWidth / 1000;
    parentElement.removeChild(div);
    return pixels;
}

/**
 * Helper to truncate text to fit into a given width over a specified number of lines
 * @param {string} text Text to truncate
 * @param {string} oneChar Average width of one character in px
 * @param {number} pxWidth Width of the container (adjusted for padding)
 * @param {number} lineCount Number of lines to span over
 */
function truncateTextForDisplay(text, oneChar, pxWidth, lineCount, pad) {
    var ellipsisPadding = isNaN(pad) ? 0 : pad;
    var charsPerLine = Math.floor(pxWidth / oneChar);
    var allowedCount = (charsPerLine * (lineCount)) - ellipsisPadding;
    return text.substr(0, allowedCount) + "...";
}


/**
 * Helper to get the average width of a character in px
 * NOTE: Ensure this is used only AFTER font files are loaded (after page load)
 * @param {DOM element} parentElement 
 * @param {string} fontSize 
 */
function getAverageCharacterWidth(parentElement, fontSize) {
    var textSample = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()";
    parentElement = parentElement || document.body;
    fontSize = fontSize || "1rem";
    var div = document.createElement('div');
    div.style.width = "auto";
    div.style.height = "auto";
    div.style.fontSize = fontSize;
    div.style.whiteSpace = "nowrap";
    div.style.position = "absolute";
    div.innerHTML = textSample;
    parentElement.appendChild(div);

    var pixels = Math.ceil((div.clientWidth + 1) / textSample.length);
    parentElement.removeChild(div);
    return pixels;
}

👍