Selector demo #1

data-aktion-destination-selector demo

by megant

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/buttons-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<form class="pure-form pure-form-stacked">
    <fieldset>
        <label for="name">Name</label>
        <input id="name" type="text" placeholder="Name">

        <label for="drinks">Alcohols</label>
        <select id="drinks" data-for-kids="no">
            <option>Beer</option>
            <option>Wine</option>
            <option>Vodka</option>
            <option>Whiskey</option>
        </select>

        <label for="vehicles">Vehicles</label>
        <select id="vehicles">
            <option>Bicycle</option>
            <option data-for-kids="no">Motorbike</option>
            <option data-for-kids="no">Car</option>
            <option data-for-kids="no">Truck</option>
            <option>Skateboard</option>
        </select>

        <label for="option-two" class="pure-radio">
            <input id="option-two" type="radio" name="kid_check"
                data-aktion-destination-selector='[data-for-kids="no"]'
                data-aktion-type="add"
                data-aktion-attribute="disabled"
                data-aktion-value="disabled">
            I'm a kid.
        </label>

        <label for="option-three" class="pure-radio">
            <input id="option-three" type="radio" name="kid_check" checked="checked"
                   data-aktion-destination-selector='[data-for-kids="no"]'
                   data-aktion-attribute="disabled"
                   data-aktion-type="remove"
                   data-aktion-value="disabled">
            I'm an adult.
        </label>
    </fieldset>
</form>

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

CSS

body {
  margin: 20px;
}

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...