aktionJS Basics #1

Simpe button class toggle

by megant

HTML

<button class="myButton"
  data-aktion-value="wide">
  Click me!
</button>

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

CSS

body {
  background: black;
}

.myButton {
  -webkit-transition: width 0.5 ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
	-moz-box-shadow: 0px 0px 0px 2px #9fb4f2;
	-webkit-box-shadow: 0px 0px 0px 2px #9fb4f2;
	box-shadow: 0px 0px 0px 2px #9fb4f2;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #476e9e));
	background:-moz-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-webkit-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-o-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-ms-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e',GradientType=0);
	background-color:#7892c2;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	padding:12px 37px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
  outline: none;
  width: 30%;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #476e9e), color-stop(1, #7892c2));
	background:-moz-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-webkit-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-o-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-ms-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#476e9e', endColorstr='#7892c2',GradientType=0);
	background-color:#476e9e;
}
.myButton:active {
	position:relative;
	top:1px;
}

.wide {
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width...

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