Selector #2 - tree demo

data-aktion-source-selector demo

by megant

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<h2>
  Click on a node!
</h2>
<ul
  data-aktion-source-selector="li"
  data-aktion-value="opened">
  <li>
    Drinks
    <ul>
      <li>
        Alcohols
        <ul>
          <li>
            Beer
          </li>
          <li>
            Wine
          </li>
          <li>
            Vodka
          </li>
          <li>
            Whiskey
          </li>          
        </ul>
      </li>
      <li>
        Soft drinks
        <ul>
          <li>
            Coke
          </li>
          <li>
            Orange
          </li>
          <li>
            Pineapple
          </li>
          <li>
            Soda
          </li>                  
        </ul>
      </li>
    </ul>
  </li>
  <li>
    Foods
    <ul>
      <li>
        Meals
        <ul>
          <li>
            Soup
          </li>
          <li>
            Meat
          </li>
          <li>
            French fries
          </li>
          <li>
            Rice
          </li>          
        </ul>
      </li>
      <li>
        Sweets
        <ul>
          <li>
            Cookie
          </li>
          <li>
            Cake
          </li>
          <li>
            Chocolate
          </li>
          <li>
            Honey
          </li>                  
        </ul>
      </li>
    </ul>
  </li>
</ul>

<!-- Init script -->
<script>
	window.addEventListener('load', function() {
		var aktion = new Aktion({
			debugMode: true
		});
	});
</script>

CSS

body {
  margin: 20px;
}

        li {
            cursor: pointer;
        }
        
        li > ul {
            display: none;
        }

        li.opened > ul {
            display: block;
        }

JavaScript

var $=function(a,b,c){var j,d=Node.prototype,e=NodeList.prototype,f="forEach",g="trigger",h=[][f],i=a.createElement("i");return e[f]=h,b.on=d.on=function(a,b){a=a.split(" ");for(j in a)this.addEventListener(a[j],b,!1);return this},e.on=function(a,b){return a=a.split(" "),this[f](function(c){for(j in a)c.on(a[j],b)}),this},b[g]=d[g]=function(b,c){var d=a.createEvent("HTMLEvents");return d.initEvent(b,!0,!0),d.data=c||{},d.eventName=b,d.target=this,this.dispatchEvent(d),this},e[g]=function(a){return this[f](function(b){b[g](a)}),this},c=function(b){var c=a.querySelectorAll(b||"☺"),d=c.length;return 1==d?c[0]:c},c.on=d.on.bind(i),c[g]=d[g].bind(i),c}(document,this);Node.prototype.delegate=function(a,b,c){var d=this.mozMatchesSelector||this.webkitMatchesSelector||this.oMatchesSelector||this.matchesSelector||function(a){var b=this,c=$(a),d=!1;return c instanceof NodeList?c.forEach(function(a){a===b&&(d=!0)}):c===b&&(d=!0),d};return this.on(b,function(b){d.call(b.target,a)&&c.call(b.target,b)}),this};var Aktion=function(a){var b=null,c=[],d={isIOS:!1,actionCheckInProgress:!1,elementNameCounter:0},e={startX:null,startY:null,currentX:null,currentY:null},f={dataAttributePrefix:"aktion",autoActivate:!0,debugMode:!1},g={},h={type:"toggle",source_selector:null,destination_selector:null,event:"click",event_threshold:10,attribute:"class",value:null,value_type:"static",trigger_before:!1,trigger_after:!1,interval_time:100,extra_condition:function(){return!0}},i={},j=[],k={log:function(a,b){return!!g.debugMode&&void console.log(a,b)},extend:function(){var a={},b=!1,c=0,d=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(b=arguments[0],c++);for(var e=function(c){for(var d in c)Object.prototype.hasOwnProperty.call(c,d)&&(b&&"[object Object]"===Object.prototype.toString.call(c[d])?a[d]=extend(!0,a[d],c[d]):a[d]=c[d])};c<d;c++){var f=arguments[c];e(f)}return a},getPointerEvent:function(a){return...