UNPKG

@htmlbricks/hb-animated-container

Version:

Svelte-Bootstrap animated-container

3 lines (2 loc) 6.16 kB
var release=function(){"use strict";function t(){}function n(t){return t()}function e(){return Object.create(null)}function o(t){t.forEach(n)}function r(t){return"function"==typeof t}function i(t,n){return t!=t?n==n:t!==n||t&&"object"==typeof t||"function"==typeof t}function a(t,n,e){t.insertBefore(n,e||null)}function s(t){t.parentNode&&t.parentNode.removeChild(t)}function c(t){return document.createElement(t)}function l(){return t=" ",document.createTextNode(t);var t}function d(t,n,e){null==e?t.removeAttribute(n):t.getAttribute(n)!==e&&t.setAttribute(n,e)}function u(t){const n={};for(const e of t)n[e.name]=e.value;return n}let f;function h(t){f=t}function p(){if(!f)throw new Error("Function called outside component initialization");return f}const m=[],$=[];let g=[];const b=[],y=Promise.resolve();let x=!1;function v(t){g.push(t)}const _=new Set;let w=0;function E(){if(0!==w)return;const t=f;do{try{for(;w<m.length;){const t=m[w];w++,h(t),k(t.$$)}}catch(t){throw m.length=0,w=0,t}for(h(null),m.length=0,w=0;$.length;)$.pop()();for(let t=0;t<g.length;t+=1){const n=g[t];_.has(n)||(_.add(n),n())}g.length=0}while(m.length);for(;b.length;)b.pop()();x=!1,_.clear(),h(t)}function k(t){if(null!==t.fragment){t.update(),o(t.before_update);const n=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,n),t.after_update.forEach(v)}}const C=new Set;function M(t,n){const e=t.$$;null!==e.fragment&&(!function(t){const n=[],e=[];g.forEach((o=>-1===t.indexOf(o)?n.push(o):e.push(o))),e.forEach((t=>t())),g=n}(e.after_update),o(e.on_destroy),e.fragment&&e.fragment.d(n),e.on_destroy=e.fragment=null,e.ctx=[])}function N(t,n){-1===t.$$.dirty[0]&&(m.push(t),x||(x=!0,y.then(E)),t.$$.dirty.fill(0)),t.$$.dirty[n/31|0]|=1<<n%31}function R(i,a,c,l,d,u,p,m=[-1]){const $=f;h(i);const g=i.$$={fragment:null,ctx:[],props:u,update:t,not_equal:d,bound:e(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(a.context||($?$.$$.context:[])),callbacks:e(),dirty:m,skip_bound:!1,root:a.target||$.$$.root};p&&p(g.root);let b=!1;if(g.ctx=c?c(i,a.props||{},((t,n,...e)=>{const o=e.length?e[0]:n;return g.ctx&&d(g.ctx[t],g.ctx[t]=o)&&(!g.skip_bound&&g.bound[t]&&g.bound[t](o),b&&N(i,t)),n})):[],g.update(),b=!0,o(g.before_update),g.fragment=!!l&&l(g.ctx),a.target){if(a.hydrate){const t=function(t){return Array.from(t.childNodes)}(a.target);g.fragment&&g.fragment.l(t),t.forEach(s)}else g.fragment&&g.fragment.c();a.intro&&((y=i.$$.fragment)&&y.i&&(C.delete(y),y.i(x))),function(t,e,i,a){const{fragment:s,after_update:c}=t.$$;s&&s.m(e,i),a||v((()=>{const e=t.$$.on_mount.map(n).filter(r);t.$$.on_destroy?t.$$.on_destroy.push(...e):o(e),t.$$.on_mount=[]})),c.forEach(v)}(i,a.target,a.anchor,a.customElement),E()}var y,x;h($)}let A;function H(t){let n;return{c(){n=c("div"),n.innerHTML='<div id="content"></div>',d(n,"id","container")},m(t,e){a(t,n,e)},d(t){t&&s(n)}}}function O(n){let e,o,r=n[0]&&H();return{c(){var n,i,a,s;r&&r.c(),e=l(),o=c("div"),this.c=t,d(o,"class","circle"),n=o,i="display",null==(a="none")?n.style.removeProperty(i):n.style.setProperty(i,a,s?"important":"")},m(t,n){r&&r.m(t,n),a(t,e,n),a(t,o,n)},p(t,[n]){t[0]?r||(r=H(),r.c(),r.m(e.parentNode,e)):r&&(r.d(1),r=null)},i:t,o:t,d(t){r&&r.d(t),t&&s(e),t&&s(o)}}}function T(t,n,e){const o=p();let r,i,a,{id:s}=n,{animation:c}=n,{params:l}=n;var d;return d=()=>(r=o.shadowRoot.getElementById("container"),i=o.shadowRoot.getElementById("content"),function(){if("rain"===c){function t(){if(r&&i){const t=document.createElement("div");t.classList.add("circle"),r.clientHeight&&(t.style.top=Math.random()*r.clientHeight+"px"),r.clientWidth&&(t.style.left=Math.random()*r.clientWidth+"px"),i.appendChild(t),setTimeout((()=>{t.remove()}),(null==l?void 0:l.speed)?10*l.speed:3e3)}}a=setInterval(t,(null==l?void 0:l.speed)||300)}}(),()=>{a&&clearInterval(a)}),p().$$.on_mount.push(d),t.$$set=t=>{"id"in t&&e(1,s=t.id),"animation"in t&&e(0,c=t.animation),"params"in t&&e(2,l=t.params)},t.$$.update=()=>{if(7&t.$$.dirty){if(s||e(1,s=""),"string"==typeof l)try{e(2,l=JSON.parse(l))}catch(t){console.error("error parsing params",t)}e(0,c="rain")}},[c,s,l]}"function"==typeof HTMLElement&&(A=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){const{on_mount:t}=this.$$;this.$$.on_disconnect=t.map(n).filter(r);for(const t in this.$$.slotted)this.appendChild(this.$$.slotted[t])}attributeChangedCallback(t,n,e){this[t]=e}disconnectedCallback(){o(this.$$.on_disconnect)}$destroy(){M(this,1),this.$destroy=t}$on(n,e){if(!r(e))return t;const o=this.$$.callbacks[n]||(this.$$.callbacks[n]=[]);return o.push(e),()=>{const t=o.indexOf(e);-1!==t&&o.splice(t,1)}}$set(t){var n;this.$$set&&(n=t,0!==Object.keys(n).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}});class I extends A{constructor(t){super();const n=document.createElement("style");n.textContent='@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");:host{font-family:"Roboto", sans-serif;height:200px;display:block;--hb-animated-container-background:#30336b;--hb-animated-container-lines:rgba(255, 255, 255, 0.6)}#container{overflow:hidden;height:100%}#content{background:var(--hb-animated-container-background);position:relative;height:100%}.circle{z-index:3;animation:grow 3s linear;border:1px solid var(--hb-animated-container-lines);border-radius:50%;position:absolute;height:50px;width:50px}@keyframes grow{to{opacity:0;transform:scale(5)}}',this.shadowRoot.appendChild(n),R(this,{target:this.shadowRoot,props:u(this.attributes),customElement:!0},T,O,i,{id:1,animation:0,params:2},null),t&&(t.target&&a(t.target,this,t.anchor),t.props&&(this.$set(t.props),E()))}static get observedAttributes(){return["id","animation","params"]}get id(){return this.$$.ctx[1]}set id(t){this.$$set({id:t}),E()}get animation(){return this.$$.ctx[0]}set animation(t){this.$$set({animation:t}),E()}get params(){return this.$$.ctx[2]}set params(t){this.$$set({params:t}),E()}}return customElements.define("hb-animated-container",I),I}(); //# sourceMappingURL=release.js.map