JSFiddle - React, Tailwind, and code Playground

by webvitaly

HTML

<div id="myToolbar" class="toolbar">
  <span class="toolbar-item">0</span>
  <span class="toolbar-item">1</span>
  <span class="toolbar-item">2</span>
  <span class="toolbar-item">3</span>
</div>

CSS

.toolbar {
  background-color: #ccc;
  height: 50px;
  padding: 5px;
  margin: 5px;
}

.toolbar-item {
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: #00f;
  margin: 5px;
}

.active {
  background-color: #ff0;
}

.disabled {
  background-color: #555;
}

JavaScript

var oojs = (function(oojs) {

  var createToolbarItem = function(itemElement) {

    var item = {
      toggleActiveState: function() {
        this.activated = !this.activated;
      }
    };

    Object.defineProperties(item, {
      el: {
        value: itemElement
      },
      enabled: {
        get: function() {
          return !this.el.classList.contains('disabled');
        },
        set: function(value) {
          if (value) {
            this.el.classList.remove('disabled');
          } else {
            this.el.classList.add('disabled');
          }
        }
      },
      activated: {
        get: function() {
          return this.el.classList.contains('active');
        },
        set: function(value) {
          if (value) {
            this.el.classList.add('active');
          } else {
            this.el.classList.remove('active');
          }
        }
      }

    });

    return item;
  };

  var createToolbarItems = function(itemElements) {
    var items = [];

    [].forEach.call(itemElements, function(el, index, array) {
      var item = createToolbarItem(el);
      items.push(item);
    });
    return items;
  };

  oojs.createToolbar = function(elementId) {
    var element = document.getElementById(elementId);

    if (!element) {
      element = document.createElement('div');
      element.id = elementId;
      element.className = 'toolbar';
    }

    var items = element.querySelectorAll('.toolbar-item');

    var toolbar = {
      add: function(options) {
        var span = document.createElement('span');
        span.className = 'toolbar-item';
        this.el.appendChild(span);
        var item = createToolbarItem(span);
        this.items.push(item);
      },
      remove: function(index) {
        var len = this.items.length;
        if (index > len || index < 0) {
          throw new Error('Index is out ');
        }
        var item = this.items[index];
        this.items.splice(index, 1);
       ...