JSFiddle - React, Tailwind, and code Playground

by ilazarte

JavaScript

function safeSplit(str, ch) {
    if (str == null || str == "") {
        return null;
    }
    if (str.indexOf(ch) == -1) {
        return [str];
    }
    return str.split(ch);
}

function pushState(clsStr, state) {
    var clsName = clsStr;
    var sarr = [];
    var idx = clsStr.indexOf("state");
    if (idx  > -1) {
        var states = clsStr.substr(idx + 6);
        sarr = safeSplit(states, "_");
       
        var contains = false;
        for (var i = 0; i < sarr.length; i++) {
            if (sarr[i] == state) {
                contains = true;
                break;
            }
        }
        if (!contains) {
            sarr.push(state);
        }
        sarr.sort();
        clsName = clsStr.substr(0, idx - 1);
    } else {
        sarr.push(state);
    }
    var newClsName = clsName + "_state_" + sarr.join("_");
    return newClsName;
}

function popState(clsStr, state) {

    var idx = clsStr.indexOf("state");
    if (idx == -1) {
        return clsStr;
    }

    var states = clsStr.substr(idx + 6);
    var sarr = safeSplit(states, "_");
    var clsName = clsStr.substr(0, idx - 1);
    var newsarr = [];
    
    for (var i = 0; i < sarr.length; i++) {
        if (sarr[i] != state) {
            newsarr.push(sarr[i]);
        }
    }

    if (newsarr.length == 0) {
        return clsName;
    }
    
    newsarr.sort();
    
    var newClsName = clsName + "_state_" + newsarr.join("_");
    return newClsName;
}

var cls1 = "dt_handler";
console.log(cls1);

var cls2 = pushState(cls1, "mouseover");
console.log(cls2);

var cls2a = pushState(cls2, "mouseover");
console.log(cls2a);

var cls3 = pushState(cls2, "highlight");
console.log(cls3);

var cls4 = popState(cls3, "derp");
console.log(cls4);

var cls5 = popState(cls4, "mouseover");
console.log(cls5);

var cls6 = popState(cls5, "highlight");
console.log(cls6);