Custom events demo #1

data-aktion-event demo

by megant

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<h2>
  Scroll the text and see what happens!
</h2>
<div class="panel-container"
    data-aktion-name="remove-panels"
    data-aktion-source-selector="window"
    data-aktion-event="scroll-stop"
    data-aktion-destination-selector=".panel"
    data-aktion-type="remove"
    data-aktion-value="visible">
  <div class="panel panel-scroll"
    data-aktion-source-selector="window"
    data-aktion-event="scroll"
    data-aktion-trigger-after="remove-panels"
    data-aktion-destination-selector=".panel-scroll"
    data-aktion-type="add"
    data-aktion-value="visible">
    Scrolling is in progress
  </div>
  <div class="panel panel-scroll-start"
    data-aktion-source-selector="window"
    data-aktion-event="scroll-start"
    data-aktion-trigger-after="remove-panels"
    data-aktion-destination-selector=".panel-scroll-start"
    data-aktion-type="add"
    data-aktion-value="visible">
    Scrolling has started
  </div>
  <div class="panel panel-scroll-up"
    data-aktion-source-selector="window"
    data-aktion-event="scroll-up"
    data-aktion-trigger-after="remove-panels"
    data-aktion-destination-selector=".panel-scroll-up"
    data-aktion-type="add"
    data-aktion-value="visible">
    Scrolling up is in progress
  </div>
  <div class="panel panel-scroll-down"  
    data-aktion-source-selector="window"
    data-aktion-event="scroll-down"
    data-aktion-trigger-after="remove-panels"
    data-aktion-destination-selector=".panel-scroll-down"
    data-aktion-type="add"
    data-aktion-value="visible">
    Scrolling down is in progress
  </div>
  <div class="panel panel-scroll-dir-change"
    data-aktion-source-selector="window"
    data-aktion-event="scroll-dir-change"
    data-aktion-trigger-after="remove-panels"    
    data-aktion-destination-selector=".panel-scroll-dir-change"
    data-aktion-type="add"
    data-aktion-value="visible">
    Scrolling direction has changed
 ...

CSS

body {
  margin: 60px;
}

.panel-container {
  position: fixed;
  top: 0;
  width: 80%;
}

.panel {
  opacity: 0;
  -webkit-transition: opacity 0.25s 1s;
  -moz-transition: opacity 0.25s 1s;
  -o-transition: opacity 0.25s 1s;
  transition: opacity 0.25s 1s;  
  position: relative;
  border-radius: 19px; 
  -moz-border-radius: 19px; 
  -webkit-border-radius: 19px; 
  border: 3px inset #607E80;
  text-align: center;
  height: 100px;
  width: 130px;
  float: left;
  background: #fafafa;
  padding: 10px 5px;
}

.panel.visible {
  opacity: 1;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;  
}

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,scrollStatus: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...