JSFiddle - React, Tailwind, and code Playground

by Daniel Lizik

HTML

<div id="sc-wrapper" class="sc-overlay:default sc-litebox:default"></div>

<button id="red">
  easyToggle('#sc-wrapper', ':', 'sc-overlay').set('red');
</button>

<button id="blue">
  easyToggle('#sc-wrapper', ':', 'sc-overlay').set('blue');
</button>

<button id="unset">
  easyToggle('#sc-wrapper', ':', 'sc-overlay').unset();
</button>

<button id="hash-blue">
  easyToggle('#sc-wrapper', ':', {a: 'sc-litebox'}).set('a', 'blue');
</button>

<button id="hash-white">
  easyToggle('#sc-wrapper', ':', {a: 'sc-litebox'}).set('a', 'white');
</button>

CSS

#sc-wrapper {
  width: 90%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid black;
}

.sc-overlay\:red {
  color: red;
}

.sc-overlay\:blue {
  color: blue;
}

.sc-litebox\:blue {
  background: blue;
}

button {
  background: white;
  font-family: "Consolas", monospace;
  cursor: pointer;
  margin: 5px 0px;
}

JavaScript

(function(root, name, factory) {
  'use strict';
  
  if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else if (typeof define === 'function') {
    define([name, factory]);
  } else {
    root[name] = factory();
  }
  
})(this, 'easyToggle', function() {
	'use strict';
  
  var _DEFAULT = 'null';
  
  function $(sel) {
    var arr = document.querySelectorAll(sel);
    return arr.length < 2 ? arr[0] : arr;
  }
  
  function exposeAPI() {
    var el = this.el,
        delim = this.delim,
        config = this.config,
        type = typeof config,
        user = arguments,
    		val = type === 'string' ? (user[0] || _DEFAULT) : user[1],
    		rx = type === 'string' ? makeRx(config) : makeRx(config[user[0]]);
    function makeRx(k) { 
    	return new RegExp(k + '\\' + delim + '[a-zA-Z0-9\-\_]+'); 
    }
    function repl(str) { 
      return str.split(delim)[0] + delim + val;
    }
    el.className = el.className.replace(rx, repl);
    return this;
  }  

  return function(sel, delim, config) {
    return {
      delim: delim,
      config: config,
      el: $(sel),
			set: exposeAPI,
      unset: exposeAPI
    };
  }
 
});

//for demo purpose

var wrapper = easyToggle('#sc-wrapper', ':', 'sc-overlay');
var hash = easyToggle('#sc-wrapper', ':', {a: 'sc-litebox'});

function click(e) {
  wrapper.el.textContent = '';
  if (this.id === 'red') 
    wrapper.set('red');
  if (this.id === 'blue')
    wrapper.set('blue'); 
  if (this.id === 'unset') 
    wrapper.unset();
  if (this.id === 'hash-blue')
    hash.set('a', 'blue')
  if (this.id === 'hash-white') {
    hash.set('a', 'white')
  }
  wrapper.el.textContent = wrapper.el.outerHTML;
}

wrapper.el.textContent = wrapper.el.outerHTML;
document.querySelector('#red').addEventListener('click', click);
document.querySelector('#blue').addEventListener('click', click);
document.querySelector('#unset').addEventListener('click',...