svelte-scrollable-card/index.js

Simple custom components for scrollable cards

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).ScrollableCard=n()}(this,function(){"use strict";function t(){}const n=t=>t;function e(t){return t()}function o(){return Object.create(null)}function i(t){t.forEach(e)}function r(t){return"function"==typeof t}function a(t,n){return t!=t?n==n:t!==n||t&&"object"==typeof t||"function"==typeof t}let c="undefined"!=typeof window?()=>window.performance.now():()=>Date.now();const l=new Set;let s,d=!1;function f(){l.forEach(t=>{t[0](c())||(l.delete(t),t[1]())}),(d=l.size>0)&&requestAnimationFrame(f)}function u(t,n){t.appendChild(n)}function m(t,n,e){t.insertBefore(n,e||null)}function p(t){t.parentNode.removeChild(t)}function b(t){return document.createElement(t)}function h(){return t=" ",document.createTextNode(t);var t}function g(t,n,e,o){return t.addEventListener(n,e,o),()=>t.removeEventListener(n,e,o)}function x(t,n,e){null==e?t.removeAttribute(n):t.setAttribute(n,e)}let y,v=0,$={};function w(t,n,e,o,i,r,a,c=0){const l=16.666/o;let d="{\n";for(let t=0;t<=1;t+=l){const o=n+(e-n)*r(t);d+=100*t+`%{${a(o,1-o)}}\n`}const f=d+`100% {${a(e,1-e)}}\n}`,u=`__svelte_${function(t){let n=5381,e=t.length;for(;e--;)n=(n<<5)-n^t.charCodeAt(e);return n>>>0}(f)}_${c}`;if(!$[u]){if(!s){const t=b("style");document.head.appendChild(t),s=t.sheet}$[u]=!0,s.insertRule(`@keyframes ${u} ${f}`,s.cssRules.length)}const m=t.style.animation||"";return t.style.animation=`${m?`${m}, `:""}${u} ${o}ms linear ${i}ms 1 both`,v+=1,u}function _(t,n){t.style.animation=(t.style.animation||"").split(", ").filter(n?t=>t.indexOf(n)<0:t=>-1===t.indexOf("__svelte")).join(", "),n&&!--v&&requestAnimationFrame(()=>{if(v)return;let t=s.cssRules.length;for(;t--;)s.deleteRule(t);$={}})}function k(t){y=t}function z(){if(!y)throw new Error("Function called outside component initialization");return y}const L=[],E=Promise.resolve();let C=!1;const M=[],R=[],T=[];function H(t){R.push(t)}function N(){const t=new Set;do{for(;L.length;){const t=L.shift();k(t),A(t.$$)}for(;M.length;)M.shift()();for(;R.length;){const n=R.pop();t.has(n)||(n(),t.add(n))}}while(L.length);for(;T.length;)T.pop()();C=!1}function A(t){t.fragment&&(t.update(t.dirty),i(t.before_render),t.fragment.p(t.dirty,t.ctx),t.dirty=null,t.after_render.forEach(H))}let j,S,q;function F(t,n,e){t.dispatchEvent(function(t,n){const e=document.createEvent("CustomEvent");return e.initCustomEvent(t,!1,!1,n),e}(`${n?"intro":"outro"}${e}`))}function I(){S={remaining:0,callbacks:[]}}function O(){S.remaining||i(S.callbacks)}function W(t){S.callbacks.push(t)}function B(e,o,r,a){let s=o(e,r),u=a?0:1,m=null,p=null,b=null;function h(){b&&_(e,b)}function g(t,n){const e=t.b-u;return n*=Math.abs(e),{a:u,b:t.b,d:e,duration:n,start:t.start,end:t.start+n,group:t.group}}function x(o){const{delay:r=0,duration:a=300,easing:x=n,tick:y=t,css:v}=s,$={start:c()+r,b:o};o||($.group=S,S.remaining+=1),m?p=$:(v&&(h(),b=w(e,u,o,a,r,x,v)),o&&y(0,1),m=g($,a),H(()=>F(e,o,"start")),function(t){let n;d||(d=!0,requestAnimationFrame(f)),new Promise(e=>{l.add(n=[t,e])})}(t=>{if(p&&t>p.start&&(m=g(p,a),p=null,F(e,m.b,"start"),v&&(h(),b=w(e,u,m.b,m.duration,0,x,s.css))),m)if(t>=m.end)y(u=m.b,1-u),F(e,m.b,"end"),p||(m.b?h():--m.group.remaining||i(m.group.callbacks)),m=null;else if(t>=m.start){const n=t-m.start;u=m.a+m.d*x(n/m.duration),y(u,1-u)}return!(!m&&!p)}))}return{run(t){"function"==typeof s?(j||(j=Promise.resolve()).then(()=>{j=null}),j).then(()=>{s=s(),x(t)}):x(t)},end(){h(),m=p=null}}}function P(t,n){t.$$.dirty||(L.push(t),C||(C=!0,E.then(N)),t.$$.dirty=o()),t.$$.dirty[n]=!0}function V(n,a,c,l,s,d){const f=y;k(n);const u=a.props||{},m=n.$$={fragment:null,ctx:null,props:d,update:t,not_equal:s,bound:o(),on_mount:[],on_destroy:[],before_render:[],after_render:[],context:new Map(f?f.$$.context:[]),callbacks:o(),dirty:null};let p=!1;m.ctx=c?c(n,u,(t,e)=>{m.ctx&&s(m.ctx[t],m.ctx[t]=e)&&(m.bound[t]&&m.bound[t](e),p&&P(n,t))}):u,m.update(),p=!0,i(m.before_render),m.fragment=l(m.ctx),a.target&&(a.hydrate?m.fragment.l(function(t){return Array.from(t.childNodes)}(a.target)):m.fragment.c(),a.intro&&n.$$.fragment.i&&n.$$.fragment.i(),function(t,n,o){const{fragment:a,on_mount:c,on_destroy:l,after_render:s}=t.$$;a.m(n,o),H(()=>{const n=c.map(e).filter(r);l?l.push(...n):i(n),t.$$.on_mount=[]}),s.forEach(H)}(n,a.target,a.anchor),N()),k(f)}function Y(t){const n=t-1;return n*n*n+1}function D(t,{delay:n=0,duration:e=400,easing:o=Y,x:i=0,y:r=0,opacity:a=0}){const c=getComputedStyle(t),l=+c.opacity,s="none"===c.transform?"":c.transform,d=l*(1-a);return{delay:n,duration:e,easing:o,css:(t,n)=>`\n\t\t\ttransform: ${s} translate(${(1-t)*i}px, ${(1-t)*r}px);\n\t\t\topacity: ${l-d*n}`}}function G(n){var e;return{c(){(e=b("div")).innerHTML="<slot></slot>",this.c=t,e.className="scroll-item"},m(t,n){m(t,e,n)},p:t,i:t,o:t,d(t){t&&p(e)}}}"undefined"!=typeof HTMLElement&&(q=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){for(const t in this.$$.slotted)this.appendChild(this.$$.slotted[t])}attributeChangedCallback(t,n,e){this[t]=e}$destroy(){var n,e;e=!0,(n=this).$$&&(i(n.$$.on_destroy),n.$$.fragment.d(e),n.$$.on_destroy=n.$$.fragment=null,n.$$.ctx={}),this.$destroy=t}$on(t,n){const e=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return e.push(n),()=>{const t=e.indexOf(n);-1!==t&&e.splice(t,1)}}$set(){}});function J(n){var e,o,i,r;return{c(){(e=b("div")).innerHTML='<svg class="mdc-fab__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg>',e.className="mdc-fab mdc-fab--mini skip-button start",x(e,"role","button"),r=g(e,"click",n.moveLeft)},m(t,n){m(t,e,n),i=!0},p:t,i(t){i||(H(()=>{o||(o=B(e,D,{x:-100,duration:200},!0)),o.run(1)}),i=!0)},o(t){o||(o=B(e,D,{x:-100,duration:200},!1)),o.run(0),i=!1},d(t){t&&(p(e),o&&o.end()),r()}}}function K(n){var e,o,i,r;return{c(){(e=b("div")).innerHTML='<svg class="mdc-fab__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg>',e.className="mdc-fab mdc-fab--mini skip-button end",x(e,"role","button"),r=g(e,"click",n.moveRight)},m(t,n){m(t,e,n),i=!0},p:t,i(t){i||(H(()=>{o||(o=B(e,D,{x:100,duration:200},!0)),o.run(1)}),i=!0)},o(t){o||(o=B(e,D,{x:100,duration:200},!1)),o.run(0),i=!1},d(t){t&&(p(e),o&&o.end()),r()}}}function Q(n){var e,o,i,r,a,c=n.leftEnable&&J(n),l=n.leftRight&&K(n);return{c(){e=b("div"),c&&c.c(),o=h(),(i=b("div")).innerHTML="<slot></slot>",r=h(),l&&l.c(),this.c=t,i.className="items",e.className="horizontal-list-container"},m(t,s){var d;m(t,e,s),c&&c.m(e,null),u(e,o),u(e,i),d=()=>n.div0_binding(i,null),M.push(d),u(e,r),l&&l.m(e,null),a=!0},p(t,n){n.leftEnable?c?(c.p(t,n),c.i(1)):((c=J(n)).c(),c.i(1),c.m(e,o)):c&&(I(),W(()=>{c.d(1),c=null}),c.o(1),O()),t.items&&(n.div0_binding(null,i),n.div0_binding(i,null)),n.leftRight?l?(l.p(t,n),l.i(1)):((l=K(n)).c(),l.i(1),l.m(e,null)):l&&(I(),W(()=>{l.d(1),l=null}),l.o(1),O())},i(t){a||(c&&c.i(),l&&l.i(),a=!0)},o(t){c&&c.o(),l&&l.o(),a=!1},d(t){t&&p(e),c&&c.d(),n.div0_binding(null,i),l&&l.d()}}}function U(t,n,e){let o,i=0;var r;r=()=>{e("left",i=o.scrollLeft),window.addEventListener("resize",()=>{i!==o.scrollLeft&&e("left",i=o.scrollLeft)})},z().$$.on_mount.push(r);const a=setInterval(()=>{i!==o.scrollLeft&&e("left",i=o.scrollLeft)},500);let c,l;return function(t){z().$$.on_destroy.push(t)}(()=>{clearInterval(a)}),t.$$.update=(t={list:1,left:1})=>{(t.list||t.left)&&e("leftEnable",c=!!o&&0!==i),(t.list||t.left)&&e("leftRight",l=!!o&&i<o.scrollWidth-o.clientWidth)},{list:o,moveLeft:function(){o.scrollTo({left:o.scrollLeft-window.innerWidth-21,behavior:"smooth"}),e("left",i=o.scrollLeft)},moveRight:function(){o.scrollTo({left:o.scrollLeft+window.innerWidth-21,behavior:"smooth"}),e("left",i=o.scrollLeft)},leftEnable:c,leftRight:l,div0_binding:function(t,n){e("list",o=t)}}}customElements.define("sv-scrollable-item",class extends q{constructor(t){super(),this.shadowRoot.innerHTML="<style>.scroll-item{display:inline-block;position:relative;flex:none;margin-right:6px;margin-left:6px;margin-bottom:6px}</style>",V(this,{target:this.shadowRoot},null,G,a,[]),t&&t.target&&m(t.target,this,t.anchor)}});class X extends q{constructor(t){super(),this.shadowRoot.innerHTML='<style>.horizontal-list-container{display:flex;align-content:center;width:calc(100vw - 20px);margin-bottom:-5px;animation-name:fadeIn;animation-duration:0.2s;animation-fill-mode:both}.horizontal-list-container .skip-button{position:absolute;align-self:center;z-index:99999;margin-top:10px !important}@media(max-width: 600px){.horizontal-list-container .skip-button{display:none}}.horizontal-list-container .skip-button.start{left:0}.horizontal-list-container .skip-button.end{right:0}.horizontal-list-container .items{overflow:hidden;transition-duration:0.15s;transition-timing-function:cubic-bezier(0.4, 0, 1, 1);will-change:transform;display:inline-block;white-space:nowrap;padding:14px 14px 0}@media(max-width: 600px){.horizontal-list-container .items{overflow:auto}}@keyframes fadeIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.mdc-fab{box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);display:inline-flex;position:relative;align-items:center;justify-content:center;box-sizing:border-box;width:56px;height:56px;padding:0;border:none;fill:currentColor;cursor:pointer;user-select:none;-moz-appearance:none;-webkit-appearance:none;overflow:hidden;transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);background-color:#018786;color:#fff;color:var(--mdc-theme-on-secondary, #fff)}.mdc-fab:not(.mdc-fab--extended){border-radius:50%}.mdc-fab::-moz-focus-inner{padding:0;border:0}.mdc-fab:hover,.mdc-fab:focus{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.mdc-fab:active{box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)}.mdc-fab:active,.mdc-fab:focus{outline:none}.mdc-fab:hover{cursor:pointer}.mdc-fab>svg{width:100%}@supports not (-ms-ime-align: auto){.mdc-fab{background-color:var(--mdc-theme-secondary, #018786)}}.mdc-fab .mdc-fab__icon{width:24px;height:24px;font-size:24px}.mdc-fab--mini{width:40px;height:40px}.mdc-fab--extended .mdc-fab__label+.mdc-fab__icon{margin-left:12px;margin-right:-8px}[dir="rtl"] .mdc-fab--extended .mdc-fab__label+.mdc-fab__icon{margin-left:-8px;margin-right:12px}.mdc-fab__icon{transition:transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);fill:currentColor;will-change:transform}.mdc-fab .mdc-fab__icon{display:inline-flex;align-items:center;justify-content:center}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-fab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.mdc-fab::before,.mdc-fab::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-fab::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1}.mdc-fab::before,.mdc-fab::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-fab::before,.mdc-fab::after{background-color:#fff}@supports not (-ms-ime-align: auto){.mdc-fab::before,.mdc-fab::after{background-color:var(--mdc-theme-on-secondary, #fff)}}.mdc-fab:hover::before{opacity:0.08}.mdc-fab:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.24}.mdc-fab:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-fab:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.24}</style>',V(this,{target:this.shadowRoot},U,Q,a,[]),t&&t.target&&m(t.target,this,t.anchor)}}return customElements.define("sv-scrollable",X),X});