es6tween-tool-createui
Version:
UI Tool for managing es6-tween tween
1 lines • 3.32 kB
JavaScript
!function(e){"use strict";"function"==typeof define&&define.amd?define(["es6-tween","@tweenjs/tween.js"],function(t,n){return e(t||n)}):"undefined"!=typeof module&&module.exports&&(require("es6-tween")||require("@tweenjs/tween.js"))?module.exports=e(require("es6-tween")||require("@tweenjs/tween.js")):"undefined"!=typeof exports&&exports.TWEEN?e(exports.TWEEN):"undefined"!=typeof window&&window.TWEEN&&e(window.TWEEN)}(function(e){"use strict";var t=function(e,t,n){var i=document.createElement(e);if(t)for(var a in t)i.setAttribute(a,t[a]);return n&&n.map(function(e){"string"!=typeof e&&"number"!=typeof e||(e=document.createTextNode(e)),i.appendChild(e)}),i},n=function(e){return t("div",{class:"controls-container"},[t("div",{class:"controls"},[t("div",{class:"button",id:"play"},[t("i",{class:"fa fa-play"})]),t("div",{class:"button",id:"pause"},[t("i",{class:"fa fa-pause"})]),t("div",{class:"button",id:"stop"},[t("i",{class:"fa fa-stop"})]),t("div",{class:"button",id:"restart"},[t("i",{class:"fa fa-refresh"})]),t("div",{id:"seekDiv"},[t("input",{type:"range",id:"seek",min:0,max:e._duration*(isFinite(e._repeat)?1:e._repeat+1),value:0})]),t("div",{id:"durationDiv"},[t("input",{type:"range",id:"duration",min:0,max:2*e._duration,value:e._duration})]),t("div",{id:"easingDiv"},[t("select",{id:"easing"})]),t("div",{class:"button",id:"reverseDiv"},[t("input",{id:"reverse",type:"checkbox",value:e._reversed,checked:e._reversed})]),t("div",{class:"button",id:"yoyoDiv"},[t("input",{id:"yoyo",type:"checkbox",value:e._yoyo,checked:e._yoyo})]),t("div",{id:"repeatDiv"},[t("input",{type:"text",id:"repeat",value:e._repeat})])])])};e.createUi=function(e,t){var i=n(e),a=[].slice.call(i.querySelectorAll(".button")),r=i.querySelector("#seek"),s=i.querySelector("#duration"),d=i.querySelector("#easing"),o=i.querySelector("#repeat"),u=i.querySelector("#yoyo"),c=i.querySelector("#reverse");e.reverse||(c.parentNode.style.display="none"),e.seek||(r.parentNode.style.display="none"),e.yoyo||(u.parentNode.style.display="none"),t.appendChild(i),a.map(function(t){if(t.addEventListener("contextmenu",function(e){return e.preventDefault(),!1}),!e[t.id]&&-1===t.id.indexOf("Div"))return t.style.display="none",!1;var n="ontap"in t?"tap":"click";t.addEventListener(n,function(n){switch(t.id){case"pause":e.pause();break;case"play":e.play();break;case"stop":e.stop();break;case"restart":e.restart()}})});var p=function(t){e.seek(parseInt(t.target.value))};r.addEventListener("input",p),r.addEventListener("change",p);var v=function(t){e.duration(+t.target.value)};s.addEventListener("input",v),s.addEventListener("change",v);var l={};for(var f in Easing){var y=Easing[f];for(var g in y){var E=y[g],b=document.createElement("option");"number"!=typeof E(0)&&(E=E(10),g+="=10");var m=f+"."+g;b.value=m,b.textContent=m,d.appendChild(b),l[m]=E}}d.addEventListener("change",function(t){l[t.target.value]&&e.easing(l[t.target.value])}),u.addEventListener("change",function(t){e.yoyo(t.target.checked)}),o.addEventListener("change",function(t){var n=t.target.value,i="Infinity"!==n,a=i?parseInt(n):1;i?(r.removeAttribute("disabled"),r.setAttribute("max",e._duration*(a+1))):(r.setAttribute("disabled",!0),r.setAttribute("max",e._duration)),e.repeat(i?a:1/0)}),c.addEventListener("change",function(t){e.reverse(t.target.checked)})}});