JSFiddle - React, Tailwind, and code Playground

by Ahmad Sharif

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/ink/2.2.1/js/ink-all.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ink/2.2.1/css/ink.css">
<ul class="ink-tree-view" id="treeview">
  <li class="open"><span></span><a href="#">root</a>
    <ul>
      <li><a href="">child 1</a></li>
      <li><span></span><a href="#">child 2</a>
        <ul>
          <li><a href="">grandchild 2a</a></li>
          <li><span></span><a href="#">grandchild 2b</a>
            <ul>
              <li><a href="">grandgrandchild 1bA</a></li>
              <li><a href="">grandgrandchild 1bB</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="">child 3</a></li>
    </ul>
  </li>
</ul>

JavaScript

/**
 * @module Ink.UI.TreeView_1
 * @author inkdev AT sapo.pt
 * @version 1
 */
Ink.createModule('Ink.UI.TreeView', '1', ['Ink.UI.Aux_1','Ink.Dom.Event_1','Ink.Dom.Css_1','Ink.Dom.Element_1','Ink.Dom.Selector_1','Ink.Util.Array_1'], function(Aux, Event, Css, Element, Selector, InkArray ) {
    'use strict';
    var TreeView = function(selector, options){

        /**
         * Gets the element
         */
        if( !Aux.isDOMElement(selector) && (typeof selector !== 'string') ){
            throw '[Ink.UI.TreeView] :: Invalid selector';
        } else if( typeof selector === 'string' ){
            this._element = Selector.select( selector );
            if( this._element.length < 1 ){
                throw '[Ink.UI.TreeView] :: Selector has returned no elements';
            }
            this._element = this._element[0];
        } else {
            this._element = selector;
        }

        /**
         * Default options and they're overrided by data-attributes if any.
         * The parameters are:
         * @param {string} node Selector to define which elements are seen as nodes. Default: li
         * @param {string} child Selector to define which elements are represented as childs. Default: ul
         */
        this._options = Ink.extendObj({
            node:   'li:not(.open)',
            child:  'ul',
            closedClass: 'closed',
            openClass: 'open',
            parentClass: 'parent',
            hideClass: 'hide-all'

        },Element.data(this._element));

        this._options = Ink.extendObj(this._options, options || {});

        this._init();
    };

    TreeView.prototype = {

        /**
         * Init function called by the constructor. Sets the necessary event handlers.
         * 
         * @method _init
         * @private
         */
        _init: function(){

            this._handlers = {
                click: Ink.bindEvent(this._onClick,this)
            };

            Event.observe(this._element, 'click',...