Last active
November 28, 2020 14:21
-
-
Save mopcweb/fddf86ef824c801228484f990b4ec1ac to your computer and use it in GitHub Desktop.
Web-Components (not pusblisde yet): <animated-svg>, <svg-loader>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var app=function(t){"use strict";function e(){}function n(t){return t()}function i(){return Object.create(null)}function o(t){t.forEach(n)}function s(t){return"function"==typeof t}function a(t,e){return t!=t?e==e:t!==e}function r(t,e,n){t.insertBefore(e,n||null)}function l(t){t.parentNode.removeChild(t)}function d(t){return document.createElement(t)}function u(t){const e={};for(const n of t)e[n.name]=n.value;return e}let h;function c(t){h=t}function f(){if(!h)throw new Error("Function called outside component initialization");return h}function p(t){f().$$.on_mount.push(t)}function y(t){f().$$.after_update.push(t)}function g(t){f().$$.on_destroy.push(t)}function m(){const t=f();return(e,n)=>{const i=t.$$.callbacks[e];if(i){const o=function(t,e){const n=document.createEvent("CustomEvent");return n.initCustomEvent(t,!1,!1,e),n}(e,n);i.slice().forEach((e=>{e.call(t,o)}))}}}const $=[],b=[],k=[],w=[],x=Promise.resolve();let A=!1;function C(t){k.push(t)}let _=!1;const v=new Set;function D(){if(!_){_=!0;do{for(let t=0;t<$.length;t+=1){const e=$[t];c(e),E(e.$$)}for(c(null),$.length=0;b.length;)b.pop()();for(let t=0;t<k.length;t+=1){const e=k[t];v.has(e)||(v.add(e),e())}k.length=0}while($.length);for(;w.length;)w.pop()();A=!1,_=!1,v.clear()}}function E(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(C)}}const B=new Set;function O(t,e){-1===t.$$.dirty[0]&&($.push(t),A||(A=!0,x.then(D)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function T(t,a,r,d,u,f,p=[-1]){const y=h;c(t);const g=a.props||{},m=t.$$={fragment:null,ctx:null,props:f,update:e,not_equal:u,bound:i(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(y?y.$$.context:[]),callbacks:i(),dirty:p,skip_bound:!1};let $=!1;if(m.ctx=r?r(t,g,((e,n,...i)=>{const o=i.length?i[0]:n;return m.ctx&&u(m.ctx[e],m.ctx[e]=o)&&(!m.skip_bound&&m.bound[e]&&m.bound[e](o),$&&O(t,e)),n})):[],m.update(),$=!0,o(m.before_update),m.fragment=!!d&&d(m.ctx),a.target){if(a.hydrate){const t=function(t){return Array.from(t.childNodes)}(a.target);m.fragment&&m.fragment.l(t),t.forEach(l)}else m.fragment&&m.fragment.c();a.intro&&((b=t.$$.fragment)&&b.i&&(B.delete(b),b.i(k))),function(t,e,i){const{fragment:a,on_mount:r,on_destroy:l,after_update:d}=t.$$;a&&a.m(e,i),C((()=>{const e=r.map(n).filter(s);l?l.push(...e):o(e),t.$$.on_mount=[]})),d.forEach(C)}(t,a.target,a.anchor),D()}var b,k;c(y)}let S;function W(t){return"string"==typeof t?Number.parseFloat(t):t}function j(t){return"true"===t||""===t||!0===t}function F(t){const e=W(t);return Number.isInteger(e)?e:j(t)}"function"==typeof HTMLElement&&(S=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){for(const t in this.$$.slotted)this.appendChild(this.$$.slotted[t])}attributeChangedCallback(t,e,n){this[t]=n}$destroy(){!function(t,e){const n=t.$$;null!==n.fragment&&(o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}(this,1),this.$destroy=e}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}});class H{constructor(t){this.dispatch=t,this._defaultConfig={enabled:!0,duration:2e3,oneByOne:!1,delay:0,timingFunction:"ease-in-out",loop:!1,loopDelay:500,stroke:"#000000",strokeWidth:1},this.animationTimers={},this.animationDataAttribute="data-svg-animation-end"}enable(t,e){this.updateTimer&&clearTimeout(this.updateTimer),this.container=t,this.props=Object.assign({enabled:!0},e),this.updateSvgs(t)}disable(){Object.keys(this.animationTimers).forEach((t=>clearTimeout(this.animationTimers[t]))),this.animationTimers={},this.container&&this.svgs(this.container).forEach((t=>t.removeAttribute(this.animationDataAttribute))),this.props.enabled=!1}updateSvgs(t){this.svgs(t).forEach(((t,e)=>{this.applySvgConfig(t),this.execAnimation(t,e)}))}applySvgConfig(t){if(!t)return;const{width:e}=window.getComputedStyle(t),n=t.getAttribute("viewBox"),i=this.defaultConfig(this.props).width;let o=W(e);o&&0!==o||(o=W(n.split(" ")[2])),o&&0!==o||!i||(o=i),t.style.width=o?o+"px":"auto"}execAnimation(t,e){if(!t)return;const{duration:n,loopDelay:i,loop:o,enabled:s}=this.defaultConfig(this.props),a=Array.from(t.querySelectorAll("path"));if(a.forEach((t=>{this.applySvgPathBasicStyles(t,this.props)})),!s||t.hasAttribute(this.animationDataAttribute)&&!o)return;if(t.hasAttribute(this.animationDataAttribute)){const n=W(t.getAttribute(this.animationDataAttribute))-Date.now()+1;return void this.setTimer(e,n+i,(()=>this.execAnimation(t,e)))}const r=this.calculateAnimationDuration(a.length-1,this.props),l=Date.now()+r;if(t.setAttribute(this.animationDataAttribute,""+l),setTimeout((()=>t.removeAttribute(this.animationDataAttribute)),r),a.forEach(((t,e)=>{this.animateSvgPath(t,e,this.props)})),this.dispatch&&this.dispatch({latestAnimationDuration:r}),o){const s=Math.max("number"==typeof o?o:n,r);this.setTimer(e,s+i,(()=>this.execAnimation(t,e)))}return r}setTimer(t,e,n){this.animationTimers[t]=setTimeout((()=>{n()}),e)}calculateAnimationDuration(t,e){const{duration:n,delay:i,oneByOne:o}=this.defaultConfig(e);let s=n;return o&&(s=n*t+(0===t?0:i*t||0)+n),s}applySvgPathBasicStyles(t,e){const{stroke:n,strokeWidth:i}=this.defaultConfig(e),{stroke:o,strokeWidth:s}=window.getComputedStyle(t);o&&"none"!==o||(t.style.stroke=this._defaultConfig.stroke),n&&(t.style.stroke=n),s||(t.style.strokeWidth=this._defaultConfig.strokeWidth+"px"),i&&(t.style.strokeWidth=i+"px"),t.style.fill="none"}animateSvgPath(t,e,n){const{duration:i,delay:o,timingFunction:s,oneByOne:a}=this.defaultConfig(n);let r=i;const l=0===e?0:o*e||0,d=t.getTotalLength();return t.style.transition="none",t.style.strokeDasharray=`${d} ${d}`,t.style.strokeDashoffset=""+d,t.getBoundingClientRect(),t.style.transitionProperty="stroke-dashoffset",t.style.transitionTimingFunction=s,t.style.transitionDuration=i+"ms",a&&(t.style.transitionDelay=i*e+l+"ms",r=i*e+l+i),t.style.strokeDashoffset="0",r}defaultConfig(t){const{enabled:e,duration:n,oneByOne:i,delay:o,timingFunction:s,loop:a,loopDelay:r,stroke:l,strokeWidth:d,width:u}=t;return{enabled:j(null!=e?e:this._defaultConfig.enabled),duration:W(null!=n?n:this._defaultConfig.duration),oneByOne:j(null!=i?i:this._defaultConfig.oneByOne),delay:W(null!=o?o:this._defaultConfig.delay),timingFunction:null!=s?s:this._defaultConfig.timingFunction,loop:F(null!=a?a:this._defaultConfig.loop),loopDelay:W(null!=r?r:this._defaultConfig.loopDelay),stroke:l,strokeWidth:W(d),width:W(null!=u?u:this._defaultConfig.width)}}svgs(t){return t?Array.from(t.querySelectorAll("svg")):[]}}class L extends H{constructor(t){super(t),this._defaultConfig=Object.assign(Object.assign({},this._defaultConfig),{shouldWaitAnimationEnd:!0,backdrop:"#fffffffa",delayBeforeHide:0,fadeOutDuration:1e3})}disable(){super.disable(),this.hideBackdrop(this.props)}updateSvgs(t){this.svgs(t).forEach(((t,e)=>{this.applySvgConfig(t);const n=this.execAnimation(t,e);n&&(this._latestAnimationDuration=n),this.applyContainerConfig(this.props)}))}applyContainerConfig(t){const{backdrop:e,enabled:n}=this.defaultConfig(t);this.container.style.background=e,this.container.style.width="100%",this.container.style.height="100%",this.container.style.position="absolute",this.container.style.top="0",this.container.style.left="0",this.container.style.display="flex",this.container.style.justifyContent="center",this.container.style.alignItems="center",this.container.style.alignContent="center",n&&this._latestAnimationDuration&&this.showBackdrop(),!n&&this._latestAnimationDuration&&this.hideBackdrop(t)}showBackdrop(){this._hideTimer&&clearTimeout(this._hideTimer),this.container.style.opacity="1",this.container.style.zIndex="1234567"}hideBackdrop(t){const{shouldWaitAnimationEnd:e,delayBeforeHide:n,fadeOutDuration:i}=this.defaultConfig(t);this._hideTimer=setTimeout((()=>{this.container.style.opacity="0",this.container.style.zIndex="-1",this.container.style.transition=`all ${i}ms`}),e?this._latestAnimationDuration+n:0)}defaultConfig(t){const{shouldWaitAnimationEnd:e=!0,backdrop:n="#fffffffa",delayBeforeHide:i=0,fadeOutDuration:o=1e3}=t;return Object.assign(Object.assign({},super.defaultConfig(t)),{backdrop:n,shouldWaitAnimationEnd:j(e),delayBeforeHide:W(i),fadeOutDuration:W(o)})}}function M(t){let n;return{c(){n=d("div"),n.innerHTML="<slot></slot>",this.c=e},m(e,i){r(e,n,i),t[11](n)},p:e,i:e,o:e,d(e){e&&l(n),t[11](null)}}}function P(t,e,n){let{enabled:i}=e,{duration:o}=e,{delay:s}=e,{onebyone:a}=e,{timingfunction:r}=e,{loop:l}=e,{loopdelay:d}=e,{stroke:u}=e,{strokewidth:h}=e,{width:c}=e;const f=m();let $;const k=new H((({latestAnimationDuration:t})=>f("animate",{latestAnimationDuration:t})));function w(){return $&&$.parentNode.host}function x(){return{enabled:i,duration:o,oneByOne:a,delay:s,timingFunction:r,loop:l,loopDelay:d,stroke:u,strokeWidth:h,width:c}}return p((()=>k.enable(w(),x()))),y((()=>k.enable(w(),x()))),g((()=>k.disable())),t.$$set=t=>{"enabled"in t&&n(1,i=t.enabled),"duration"in t&&n(2,o=t.duration),"delay"in t&&n(3,s=t.delay),"onebyone"in t&&n(4,a=t.onebyone),"timingfunction"in t&&n(5,r=t.timingfunction),"loop"in t&&n(6,l=t.loop),"loopdelay"in t&&n(7,d=t.loopdelay),"stroke"in t&&n(8,u=t.stroke),"strokewidth"in t&&n(9,h=t.strokewidth),"width"in t&&n(10,c=t.width)},[$,i,o,s,a,r,l,d,u,h,c,function(t){b[t?"unshift":"push"]((()=>{$=t,n(0,$)}))}]}class I extends S{constructor(t){super(),T(this,{target:this.shadowRoot,props:u(this.attributes)},P,M,a,{enabled:1,duration:2,delay:3,onebyone:4,timingfunction:5,loop:6,loopdelay:7,stroke:8,strokewidth:9,width:10}),t&&(t.target&&r(t.target,this,t.anchor),t.props&&(this.$set(t.props),D()))}static get observedAttributes(){return["enabled","duration","delay","onebyone","timingfunction","loop","loopdelay","stroke","strokewidth","width"]}get enabled(){return this.$$.ctx[1]}set enabled(t){this.$set({enabled:t}),D()}get duration(){return this.$$.ctx[2]}set duration(t){this.$set({duration:t}),D()}get delay(){return this.$$.ctx[3]}set delay(t){this.$set({delay:t}),D()}get onebyone(){return this.$$.ctx[4]}set onebyone(t){this.$set({onebyone:t}),D()}get timingfunction(){return this.$$.ctx[5]}set timingfunction(t){this.$set({timingfunction:t}),D()}get loop(){return this.$$.ctx[6]}set loop(t){this.$set({loop:t}),D()}get loopdelay(){return this.$$.ctx[7]}set loopdelay(t){this.$set({loopdelay:t}),D()}get stroke(){return this.$$.ctx[8]}set stroke(t){this.$set({stroke:t}),D()}get strokewidth(){return this.$$.ctx[9]}set strokewidth(t){this.$set({strokewidth:t}),D()}get width(){return this.$$.ctx[10]}set width(t){this.$set({width:t}),D()}}function N(t){let n;return{c(){n=d("div"),n.innerHTML="<slot></slot>",this.c=e},m(e,i){r(e,n,i),t[15](n)},p:e,i:e,o:e,d(e){e&&l(n),t[15](null)}}}function q(t,e,n){let{enabled:i}=e,{duration:o}=e,{delay:s}=e,{onebyone:a}=e,{timingfunction:r}=e,{loop:l}=e,{loopdelay:d}=e,{stroke:u}=e,{strokewidth:h}=e,{width:c}=e,{shouldwaitanimationend:f}=e,{backdrop:$}=e,{delaybeforehide:k}=e,{fadeoutduration:w}=e;const x=m();let A;const C=new L((({latestAnimationDuration:t})=>x("animate",{latestAnimationDuration:t})));function _(){return A&&A.parentNode.host}function v(){return{enabled:i,duration:o,oneByOne:a,delay:s,timingFunction:r,loop:l,loopDelay:d,stroke:u,strokeWidth:h,width:c,shouldWaitAnimationEnd:f,backdrop:$,delayBeforeHide:k,fadeOutDuration:w}}return p((()=>C.enable(_(),v()))),y((()=>C.enable(_(),v()))),g((()=>C.disable())),t.$$set=t=>{"enabled"in t&&n(1,i=t.enabled),"duration"in t&&n(2,o=t.duration),"delay"in t&&n(3,s=t.delay),"onebyone"in t&&n(4,a=t.onebyone),"timingfunction"in t&&n(5,r=t.timingfunction),"loop"in t&&n(6,l=t.loop),"loopdelay"in t&&n(7,d=t.loopdelay),"stroke"in t&&n(8,u=t.stroke),"strokewidth"in t&&n(9,h=t.strokewidth),"width"in t&&n(10,c=t.width),"shouldwaitanimationend"in t&&n(11,f=t.shouldwaitanimationend),"backdrop"in t&&n(12,$=t.backdrop),"delaybeforehide"in t&&n(13,k=t.delaybeforehide),"fadeoutduration"in t&&n(14,w=t.fadeoutduration)},[A,i,o,s,a,r,l,d,u,h,c,f,$,k,w,function(t){b[t?"unshift":"push"]((()=>{A=t,n(0,A)}))}]}customElements.define("animated-svg",I);class z extends S{constructor(t){super(),T(this,{target:this.shadowRoot,props:u(this.attributes)},q,N,a,{enabled:1,duration:2,delay:3,onebyone:4,timingfunction:5,loop:6,loopdelay:7,stroke:8,strokewidth:9,width:10,shouldwaitanimationend:11,backdrop:12,delaybeforehide:13,fadeoutduration:14}),t&&(t.target&&r(t.target,this,t.anchor),t.props&&(this.$set(t.props),D()))}static get observedAttributes(){return["enabled","duration","delay","onebyone","timingfunction","loop","loopdelay","stroke","strokewidth","width","shouldwaitanimationend","backdrop","delaybeforehide","fadeoutduration"]}get enabled(){return this.$$.ctx[1]}set enabled(t){this.$set({enabled:t}),D()}get duration(){return this.$$.ctx[2]}set duration(t){this.$set({duration:t}),D()}get delay(){return this.$$.ctx[3]}set delay(t){this.$set({delay:t}),D()}get onebyone(){return this.$$.ctx[4]}set onebyone(t){this.$set({onebyone:t}),D()}get timingfunction(){return this.$$.ctx[5]}set timingfunction(t){this.$set({timingfunction:t}),D()}get loop(){return this.$$.ctx[6]}set loop(t){this.$set({loop:t}),D()}get loopdelay(){return this.$$.ctx[7]}set loopdelay(t){this.$set({loopdelay:t}),D()}get stroke(){return this.$$.ctx[8]}set stroke(t){this.$set({stroke:t}),D()}get strokewidth(){return this.$$.ctx[9]}set strokewidth(t){this.$set({strokewidth:t}),D()}get width(){return this.$$.ctx[10]}set width(t){this.$set({width:t}),D()}get shouldwaitanimationend(){return this.$$.ctx[11]}set shouldwaitanimationend(t){this.$set({shouldwaitanimationend:t}),D()}get backdrop(){return this.$$.ctx[12]}set backdrop(t){this.$set({backdrop:t}),D()}get delaybeforehide(){return this.$$.ctx[13]}set delaybeforehide(t){this.$set({delaybeforehide:t}),D()}get fadeoutduration(){return this.$$.ctx[14]}set fadeoutduration(t){this.$set({fadeoutduration:t}),D()}}return customElements.define("svg-loader",z),t.AnimatedSvg=H,t.AnimatedSvgWebComponent=I,t.SvgLoader=L,t.SvgLoaderWebComponent=z,t.getBoolean=j,t.getBooleanOrInt=F,t.getInt=W,t.isEmpty=function(t){return!Object.keys(t).length},Object.defineProperty(t,"__esModule",{value:!0}),t}({}); | |
//# sourceMappingURL=index.js.map |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Already published as @tsrt/web-components.