no.js

/*
* Signature:
*   on-[evtType]-[action]-[propertyType] = "target propertyName propertyValue"
*   on-[evtType]-[action]-[propertyType] = "target propertyValue"
*   on-[evtType]-[action]-[propertyType]-self = "propertyName propertyValue"
*
* Supported actions:
*   add, remove, set, toggle, switch, reset, trigger
*
* Supported propertyTypes:
*   attribute:
*     on-[eventType]-add||set-attribute="[target] [attributeName] [attributeValue]"
*     on-[eventType]-remove-attribute="[target] [attributeName]"
*   class:
*     on-[eventType]-add-class="[target] [className]"
*     on-[eventType]-set-class="[target] [className]"
*     on-[eventType]-remove-class="[target] [className]"
*     on-[eventType]-toggle-class="[target] [className]"
*     on-[eventType]-switch-class="[target] [className]"
*   id:
*     on-[eventType]-add||set-id="[target] [idValue]"
*     on-[eventType]-remove-id="[target]"
*   dom:
*     on-[eventType]-remove-dom="[target]"
*   value:
*     on-[eventType]-set-value="[form input target] [value]"
*     on-[eventType]-reset-value="[form input target]"
*   text:
*     on-[eventType]-set-text="[target] [textValue]"
*   click,blur,focus,scrollIntoView:
*     on-[eventType]-trigger-click="[target]"
*     on-[eventType]-trigger-focus="[target]"
*     on-[eventType]-trigger-blur="[target]"
*     on-[eventType]-trigger-scrollIntoView="[target]"
*
*/
(function() {
  function NoJS (dom) {
    var supportedEvents = ['add', 'remove', 'set', 'toggle', 'switch', 'reset', 'trigger'];
    var noJsEventAttributeRegex = new RegExp('on-\\w+-(' + supportedEvents.join('|') + ')');
    this.noJsEventAttributeRegex = noJsEventAttributeRegex;
    this.js(dom);
  }

  NoJS.prototype.js = function (dom) {
    dom = dom || 'html';
    var this_ = this;
    var isSelf = false;
    var trickleFromEl = document.querySelector('[no-js][no-js-trickle]');
    var elements = trickleFromEl ? trickleFromEl.querySelectorAll('*') : document.querySelector(dom).querySelectorAll('[no-js]');
    
    elements.forEach(function(el) {
      if(!this_.needsHydration(el)) {
        return;
      }

      Object.keys(el.attributes).forEach(function(prop) {
        var attr = el.attributes[prop];

        // to enable support for single and double dashes.
        // note the order of condition checking is important.
        if (attr.name.indexOf('on--') === 0) {
          var doubleDash = true;
          console.warn('Deprecation warning: using double dashes "--" are deprecated. Use a single dash "-" instead.')
        } else if (attr.name.indexOf('on-') === 0) {
          var doubleDash = false;
        } else {
          return;
        }

        var signatureParts = attr.name.split(doubleDash ? '--' : '-');
        var paramValues = attr.value.split(' ');

        var eventType = signatureParts[1], action = signatureParts[2], propertyOrEventType = signatureParts[3];

        if (signatureParts.length > 3 && signatureParts[signatureParts.length -1] === 'self') {
          var target = el;
          isSelf = true;
        } else {
          isSelf = false;
          var target = paramValues[0];
        }

        var propertyName = propertyOrEventType;
        var propertyValue;
        if (action !== 'reset') {
          var index = this_._getPropertyValueIndex(propertyOrEventType, isSelf);
          // join space containing values that might have been split.
          propertyValue = paramValues.slice(index).join(' ');
          if (propertyOrEventType === 'attribute') {
            propertyName = paramValues[index - 1];
          }
        }

        var options = {
          action: action,
          target: target,
          sourceElement: el,
          propertyOrEventType: propertyOrEventType,
          propertyValue: propertyValue,
          propertyName: propertyName
        }

        el.addEventListener(eventType, function(e) {
          this_._handler(options);
        })
      })
    })
  }

  NoJS.prototype._handler = function (options) {
    var targets = typeof options.target === "string" ? document.querySelectorAll(options.target) : [options.target];
    targets.forEach(function(el) {
      if (options.action === 'trigger' && typeof el[options.propertyOrEventType] === 'function') {
        el[options.propertyOrEventType]();
        return;
      }

      if (options.propertyOrEventType === 'class') {
        if (options.action === 'set') {
          el.className = options.propertyValue;
        } else if (options.action == 'switch') {
          // @todo add and remove based on the class presence
          // during time of action
          el.classList.remove(options.propertyValue);
          options.sourceElement.classList.add(options.propertyValue);
        } else {
          el.classList[options.action](options.propertyValue);
        }
      }

      else if (options.propertyOrEventType === 'attribute' || options.propertyOrEventType === 'id') {
        if (options.action === 'remove') {
          el.removeAttribute(options.propertyName);
        } else if (options.action === 'add' || options.action == 'set') {
          el.setAttribute(options.propertyName, options.propertyValue);
        }
      }

      else if (options.propertyOrEventType === 'dom' && options.action === 'remove') {
        el.remove();
      }

      else if (options.propertyOrEventType === 'value') {
        if (options.action === 'set') {
          el.value = options.propertyValue;
        } else if (options.action === 'reset') {
          el.value = null;
        }
      }

      else if (options.propertyOrEventType === 'text' && options.action === 'set') {
        el.innerText = options.propertyValue;
      }
    })
  }

  NoJS.prototype._getPropertyValueIndex = function (propertyOrEventType, isSelf) {
    // if props type is attribute, the signature takes the form
    // on-[evtType]-[action]-attribute = "target propertyName propertyValue"
    var index = propertyOrEventType === 'attribute' ? 2 : 1;
    return isSelf ? index - 1 : index;
  }

  /**
   * Determines whether an element has valid no.js event attributes and thus needs to be hydrated
   * @param {HTMLElement} el
   */
  NoJS.prototype.needsHydration = function (el) {
    var this_ = this;
    var attributes = el.getAttributeNames();
    return !!attributes.find(function(a) {
      return this_.noJsEventAttributeRegex.test(a);
    });
  }

  document.addEventListener('DOMContentLoaded', function() {
    window.no = new NoJS();
  })
})()