axe-light
Version:
A Lightweight javascript library extensively for creating animations
22 lines (18 loc) • 15.2 kB
JavaScript
/** *
*
* AXE v1.0.0 and is a lightweight javascript library for creating animations
* Lear more about AXE <https://github.com/matnex-mix/AXE.JS/wiki/Introduction>
* Copyright (C) <2019> <Jolaosho AbdulMateen (Matnex Mix)>
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
** */
function AXE(e){e.a&&e.n&&e.t&&(this.animation=e.a,this.name=e.n,this.duration=e.t,this.iteration=e.i||1,this.delay=e.d||0,this.timing=e.f||"ease-in",this.mode=e.m||"",this.direction=e.z||"",this.pseudo=e.pseudo||"",!this.pseudo||(this.pseudo=":"+this.pseudo),this.prepare(),this.build())}function AXECONTROLS(e){try{"string"==typeof e&&(e=document.querySelector(e)),e.length?(e.forEach(function(e,t){$obj={DOM:e,index:t},$obj.__proto__=this.__proto__,$this=this,e.onanimationstart=function(){$this.runEvents("start")},e.onanimationcancel=function(){$this.runEvents("cancel")},e.onanimationiteration=function(){$this.runEvents("cycle")},e.onanimationend=function(){$this.runEvents("end")},this[t]=$obj}),this.length=e.length):($obj={DOM:e,index:0},$obj.__proto__=this.__proto__,$this=this,e.onanimationstart=function(){$this.runEvents("start")},e.onanimationcancel=function(){$this.runEvents("cancel")},e.onanimationiteration=function(){$this.runEvents("cycle")},e.onanimationend=function(){$this.runEvents("end")},this[0]=$obj,this.length=1),this.index=-1}catch(e){console.log("AXE: Catched Exception; "+e)}}function AXEEASY(e,t){return"object"!=typeof $xeasy?(console.log("AXE: Cannot use Easy-Axe, Module not loaded"),void console.trace()):$xeasy[e]?($easy=new AXE($xeasy[e]),t&&$easy.reset(t),$xeasy[e].ini&&$xeasy[e].ini($easy),$easy):(console.warn("AXE: Trying to Use undefined AXE-EASY Animation"),void console.trace())}String.prototype.endsWith||(String.prototype.endsWith=function(e){return this[this.length-1]==e}),AXE.prototype.compile_keyframes=function(e){if("object"==typeof this){var s={};try{$ex=e.split(/\s*AT[0-9.,%]+\s*/),$mex=e.match(/AT[0-9.,%]+/g),$ex.shift(0,1),$mex.forEach(function(e,t){$cur_build_object={},$frame_string=$ex[t].split(";"),$frame_string[$frame_string.length-1]||$frame_string.pop(),$frame_string.forEach(function(e){$cur=e.split(/\s*:\s*/),$curs="","t"==$cur[0]&&($curs=$cur[1].split(/\s/),$cur[1]={},$curs.forEach(function(e){$curi=e.indexOf("-"),e=[e.substring(0,$curi),e.substring($curi+1)],$cur[1][e[0]]=e[1]||""})),$cur_build_object[$cur[0]]=$cur[1]||""}),$nm=e.substring(2).split(","),$nm.forEach(function(e){s[e]=$cur_build_object})}),this.compiled_frames=s}catch(e){console.log("AXE: Keyframes Sequence Not Properly Formed"),console.trace()}$cur_build_object,$cur,$curs,$frame_string,$ex,$mex}},AXE.prototype.define_vars=function($vars){if("object"==typeof this){if($vars.startsWith("DEF")){$real_vars=$vars.replace("DEF","").replace(":","").trim(),$real_vars=$real_vars.match(/\$?[A-Za-z_]{1,6}\[[A-Za-z0-9.`]*\]/g);try{for(this.vars=this.vars||{},$ri=0;$ri<$real_vars.length;$ri++)$propv=$real_vars[$ri].replace(/]$/,"").split("["),$propv[1].startsWith("`")?this.vars[$propv[0]]=eval($propv[1].substring(1)):this.vars[$propv[0]]=$propv[1]}catch(e){console.log(e),console.warn("AXE: You have an error in your definition syntax, kindly check and retry")}}$real_vars,$propv,$ri}},AXE.prototype.prepare=function(){"object"==typeof this&&($anim=this.animation,-1!=$anim.indexOf("DEF")&&-1!=$anim.indexOf("||")?($anim=$anim.split(/\|\|/),this.define_vars($anim[0].trim())):this.compile_keyframes($anim))},AXE.prototype.build=function(){for($axe in $class=".axe-"+this.name+this.pseudo+"{\n",$arrs=["","-webkit-","-ms-","-os-"],$this=this,$arrs.forEach(function(e){$class+="\t"+e+"animation-name: axeframes-"+$this.name+";\n",$class+="\t"+e+"animation-duration: "+$this.duration+"s;\n",$class+="\t"+e+"animation-iteration-count: "+$this.iteration+";\n",$class+="\t"+e+"animation-delay: "+$this.delay+"s;\n",$class+="\t"+e+"animation-timing-function: "+$this.timing+";\n",$class+="\t"+e+"animation-fill-mode: "+$this.mode+";\n",$class+="\t"+e+"animation-direction: "+$this.direction+";\n"}),$class+="}",$Keyframes="@Keyframes axeframes-"+this.name+" {\n",$axe_obj=this.compiled_frames,$axe_obj){for($axe_ind in $axes=$axe,$axe.endsWith("%")||($axes=parseFloat($axe)/this.duration*100+"%"),$Keyframes+="\t"+$axes+" {\n",$axe_obj[$axe])if($axe_main=$axe_obj[$axe][$axe_ind],$axe_ind=$axe_ind.trim(),$XE.cssProps[$axe_ind]){if("object"==typeof $axe_main){for($axe_n in $axe_mains="",$axe_main)$axe_lit=$axe_n,$XE.cssProps["-"+$axe_ind+$axe_n]&&($axe_lit=$XE.cssProps["-"+$axe_ind+$axe_n].long_name),$axe_mains+=$axe_lit+"("+$axe_main[$axe_n]+") ";$axe_main=$axe_mains}RegExp(/\d+/).test($axe_main)&&($axe_main+=$XE.cssProps[$axe_ind].default_unit),$XE.cssProps[$axe_ind].browser_support.forEach(function(e){$brow=$XE.cssProps[$axe_ind].browser_support[e],$Keyframes+="\t\t-"+e+"-"+$XE.cssProps[$axe_ind].long_name+": "+$axe_main+";\n"}),$Keyframes+="\t\t"+$XE.cssProps[$axe_ind].long_name+": "+$axe_main+";\n"}$Keyframes+="\t}\n"}$Keyframes+="}",$el=document.getElementById("axestyle-"+this.name),$el||($el=document.createElement("style"),$el.id="axestyle-"+this.name,document.head.appendChild($el)),$el.innerHTML=$class+"\n\n"+$Keyframes},AXE.prototype.reset=function(e){this.animation=e.a||this.animation,e.n&&(document.head.removeChild(document.getElementById("axestyle-"+this.name)),this.name=e.n),this.duration=e.t||this.duration,this.iteration=e.i||this.iteration||1,this.delay=e.d||this.delay||0,this.timing=e.f||this.timing||"ease-in",this.mode=e.m||this.mode||"",this.direction=e.z||this.direction||"",this.pseudo=e.pseudo||this.pseudo||"",!this.pseudo||(this.pseudo=":"+this.pseudo),this.prepare(),this.build()},AXE.prototype.setFrames=function(e){$df_object=this.compiled_frames,"string"==typeof e&&(this.compile_keyframes(e),e=this.compiled_frames);try{for($frame in e)for($frames in $df_object[$frame]&&!$frame.axe_write||($df_object[$frame]={}),e[$frame])$df_object[$frame][$frames]=e[$frame][$frames];this.compiled_frames=$df_object,this.build()}catch(e){console.error("AXE Error: Unknown Error Ocurred"),console.trace(),this.compiled_frames=$df_object}},AXE.prototype.apply=function(e){return"string"==typeof e&&(e=document.querySelector(e)),e.length&&e.forEach(function(e){e.classList.add("axe-paused"),e.classList.add("axe-"+this.name),e.setAttribute("data-axe-class","axe-"+this.name)}),e.classList.add("axe-paused"),e.setAttribute("data-axe-class","axe-"+this.name),$axec=$XE.control(e),this.ini&&this.ini($axec),$axec},AXECONTROLS.prototype.start=function(){-1!=this.index?($class=this.DOM.dataset.axeClass,this.DOM.classList.add($class),this.play()):this.forEach(function(e){e.start()})},AXECONTROLS.prototype.pause=function(){-1!=this.index?(this.DOM.classList.add("axe-paused"),this.runEvents("pause")):this.forEach(function(e){e.pause()})},AXECONTROLS.prototype.play=function(){-1!=this.index?(this.DOM.classList.remove("axe-paused"),this.runEvents("play")):this.forEach(function(e){e.play()})},AXECONTROLS.prototype.end=function(){-1!=this.index?($class=this.DOM.dataset.axeClass,this.DOM.classList.remove($class),this.pause()):this.forEach(function(e){e.end()})},AXECONTROLS.prototype.restart=function(){-1!=this.index?(this.end(),$this=this,setTimeout(function(){$this.start()},10),this.runEvents("restart")):this.forEach(function(e){e.restart()})},AXECONTROLS.prototype.forEach=function(e){for($i=0;$i<this.length;$i++)e(this[$i],$i)},AXECONTROLS.prototype.event=function(e,t){this.events||(this.events={}),this.events[e]||(this.events[e]=[]),this.events[e].push(btoa(t))},AXECONTROLS.prototype.r_event=function(e,t){this.events[e]?($i=this.events[e].indexOf(btoa(t)),-1!=$i&&this.events[e].shift($i,1)):console.warn("AXE: Attempting to Remove function of undefined Event Type")},AXECONTROLS.prototype.runEvents=function($event_name){this.events||(this.events={}),-1!=this.index?this.events[$event_name]&&this.events[$event_name].forEach(function($_do){eval("("+atob($_do)+")()")}):this.forEach(function(e){e.runEvents($event_name)})},AXECONTROLS.prototype.moment=function($ct){if($ct=$ct.split(","),$func=btoa($ct.join(",")).replace(/=/gi,""),eval($func+" = function () { $this[$ct[0]](); }"),$ct[2])if($els=document.querySelectorAll($ct[2].trim()),1<$els.length){var $this=this;$els.forEach(function($obj){eval("$obj.addEventListener($ct[1].trim(), "+$func+")")})}else{var $this=this;eval("$els[0].addEventListener($ct[1].trim(), "+$func+")")}else if(-1==this.index){var $this=this;this.forEach(function($obj){eval("$obj.DOM.addEventListener($ct[1].trim(), "+$func+")")})}else{var $this=this;eval("this.DOM.addEventListener($ct[1].trim(), "+$func+")")}},AXECONTROLS.prototype.r_moment=function($ct){if("CLEAR"===$ct.toUpperCase())$XE.moments={};else if($id=btoa($ct).replace(/=/gi,""),$XE.moments[$id]&&delete $XE.moments[$id],$ct=$ct.split(","),$ct[2])if($els=document.querySelectorAll($ct[2].trim()),1<$els.length){var $this=this;$els.forEach(function($obj){eval("$obj.removeEventListener($ct[1].trim(), "+$id+")")})}else{var $this=this;eval("$els[0].removeEventListener($ct[1].trim(), "+$id+")")}else if(-1==this.index){var $this=this;this.forEach(function($obj){eval("$obj.DOM.removeEventListener($ct[1].trim(), "+$id+")")})}else{var $this=this;eval("this.DOM.removeEventListener($ct[1].trim(), "+$id+")")}};var $XE={$:function(e){return new AXE(e)},OPTIMIZE:{registerCssProp:function(e,t,s,r){return e?t?((s=(s=(s=s||"").replace("o","|os|").replace("m","|moz|").replace("e","|ms|").replace("w","|webkit|")).split(/\s*\|\|?\s*/)||[]).pop(),s.shift(0,1),void($XE.cssProps[e]={long_name:t,browser_support:s||"",default_unit:r||""})):console.log("AXE: registerCssProp; long_name not specified"):console.log("AXE: registerCssProp; short_name not specified")},cssPropExists:function(e){return $XE.cssProps.hasOwnProperty(e)}},cssProps:{},Initialize:function(){$axe_style=document.createElement("style"),$axe_style.innerHTML=".axe-paused{animation-play-state: paused !important;}",document.head.appendChild($axe_style)},moments:{},control:function(e){return new AXECONTROLS(e)},easy:function(e,t){return AXEEASY(e,t)}};"loading"!=document.readyState?document.addEventListener("DOMContentLoaded",function(){$XE.Initialize()}):$XE.Initialize(),$XE.OPTIMIZE.registerCssProp("t","transform","mwoe"),$XE.OPTIMIZE.registerCssProp("-tr","rotate"),$XE.OPTIMIZE.registerCssProp("-trX","rotateX"),$XE.OPTIMIZE.registerCssProp("-trY","rotateY"),$XE.OPTIMIZE.registerCssProp("-ts","scale"),$XE.OPTIMIZE.registerCssProp("-tsX","scaleX"),$XE.OPTIMIZE.registerCssProp("-tsY","scaleY"),$XE.OPTIMIZE.registerCssProp("-tsk","skew"),$XE.OPTIMIZE.registerCssProp("-tskX","skewX"),$XE.OPTIMIZE.registerCssProp("-tskY","skewY"),$XE.OPTIMIZE.registerCssProp("-tt","translate"),$XE.OPTIMIZE.registerCssProp("-ttX","translateX"),$XE.OPTIMIZE.registerCssProp("-ttY","translateY"),$XE.OPTIMIZE.registerCssProp("bg","background"),$XE.OPTIMIZE.registerCssProp("bga","background-attachment"),$XE.OPTIMIZE.registerCssProp("bgc","background-color"),$XE.OPTIMIZE.registerCssProp("bgi","background-image"),$XE.OPTIMIZE.registerCssProp("bgp","background-position"),$XE.OPTIMIZE.registerCssProp("bgr","background-repeat"),$XE.OPTIMIZE.registerCssProp("b","border"),$XE.OPTIMIZE.registerCssProp("bb","border-bottom"),$XE.OPTIMIZE.registerCssProp("bbc","border-bottom-color"),$XE.OPTIMIZE.registerCssProp("bbs","border-bottom-style"),$XE.OPTIMIZE.registerCssProp("bbw","border-bottom-width"),$XE.OPTIMIZE.registerCssProp("bc","border-color"),$XE.OPTIMIZE.registerCssProp("bl","border-left"),$XE.OPTIMIZE.registerCssProp("blc","border-left-color"),$XE.OPTIMIZE.registerCssProp("bls","border-left-style"),$XE.OPTIMIZE.registerCssProp("blw","border-left-width"),$XE.OPTIMIZE.registerCssProp("br","border-right"),$XE.OPTIMIZE.registerCssProp("brc","border-right-color"),$XE.OPTIMIZE.registerCssProp("brs","border-right-style"),$XE.OPTIMIZE.registerCssProp("brw","border-right-width"),$XE.OPTIMIZE.registerCssProp("bs","border-style"),$XE.OPTIMIZE.registerCssProp("bt","border-top"),$XE.OPTIMIZE.registerCssProp("btc","border-top-color"),$XE.OPTIMIZE.registerCssProp("bts","border-top-style"),$XE.OPTIMIZE.registerCssProp("btw","border-top-width"),$XE.OPTIMIZE.registerCssProp("bw","border-width"),$XE.OPTIMIZE.registerCssProp("clr","clear"),$XE.OPTIMIZE.registerCssProp("clp","clip"),$XE.OPTIMIZE.registerCssProp("col","color"),$XE.OPTIMIZE.registerCssProp("cur","cursor"),$XE.OPTIMIZE.registerCssProp("dis","display"),$XE.OPTIMIZE.registerCssProp("fil","filter"),$XE.OPTIMIZE.registerCssProp("fl","float"),$XE.OPTIMIZE.registerCssProp("f","font"),$XE.OPTIMIZE.registerCssProp("ff","font-family"),$XE.OPTIMIZE.registerCssProp("fs","font-size"),$XE.OPTIMIZE.registerCssProp("fv","font-variant"),$XE.OPTIMIZE.registerCssProp("fw","font-weight"),$XE.OPTIMIZE.registerCssProp("h","height"),$XE.OPTIMIZE.registerCssProp("lef","left"),$XE.OPTIMIZE.registerCssProp("lts","letter-spacing"),$XE.OPTIMIZE.registerCssProp("lh","line-height"),$XE.OPTIMIZE.registerCssProp("ls","list-style"),$XE.OPTIMIZE.registerCssProp("lsi","list-style-image"),$XE.OPTIMIZE.registerCssProp("lsp","list-style-position"),$XE.OPTIMIZE.registerCssProp("lst","list-style-type"),$XE.OPTIMIZE.registerCssProp("m","margin"),$XE.OPTIMIZE.registerCssProp("mb","margin-bottom"),$XE.OPTIMIZE.registerCssProp("ml","margin-left"),$XE.OPTIMIZE.registerCssProp("mr","margin-right"),$XE.OPTIMIZE.registerCssProp("mt","margin-top"),$XE.OPTIMIZE.registerCssProp("o","opacity"),$XE.OPTIMIZE.registerCssProp("ov","overflow"),$XE.OPTIMIZE.registerCssProp("ox","overflow-x"),$XE.OPTIMIZE.registerCssProp("oy","overflow-y"),$XE.OPTIMIZE.registerCssProp("p","padding"),$XE.OPTIMIZE.registerCssProp("pb","padding-bottom"),$XE.OPTIMIZE.registerCssProp("pl","padding-left"),$XE.OPTIMIZE.registerCssProp("pr","padding-right"),$XE.OPTIMIZE.registerCssProp("pt","padding-top"),$XE.OPTIMIZE.registerCssProp("pba","page-break-after"),$XE.OPTIMIZE.registerCssProp("pbb","page-break-before"),$XE.OPTIMIZE.registerCssProp("pos","position"),$XE.OPTIMIZE.registerCssProp("sda","stroke-dasharray"),$XE.OPTIMIZE.registerCssProp("sdo","stroke-dashoffset"),$XE.OPTIMIZE.registerCssProp("sw","stroke-width"),$XE.OPTIMIZE.registerCssProp("ta","text-align"),$XE.OPTIMIZE.registerCssProp("td","text-decoration"),$XE.OPTIMIZE.registerCssProp("ti","text-indent"),$XE.OPTIMIZE.registerCssProp("tt","text-transform"),$XE.OPTIMIZE.registerCssProp("top","top"),$XE.OPTIMIZE.registerCssProp("va","vertical-align"),$XE.OPTIMIZE.registerCssProp("vis","visibility"),$XE.OPTIMIZE.registerCssProp("w","width"),$XE.OPTIMIZE.registerCssProp("z","z-index");