@slidy/plugins
Version:
Simple plugins functions for @slidy/core
2 lines (1 loc) • 11.7 kB
JavaScript
;var S=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var se=Object.prototype.hasOwnProperty;var ae=(t,e)=>{for(var n in e)S(t,n,{get:e[n],enumerable:!0})},ue=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of re(e))!se.call(t,o)&&o!==n&&S(t,o,{get:()=>e[o],enumerable:!(i=ie(e,o))||i.enumerable});return t};var le=t=>ue(S({},"__esModule",{value:!0}),t);var ye={};ae(ye,{audio:()=>J,autoplay:()=>Q,fool:()=>$,log:()=>I,marquee:()=>N,play:()=>q,share:()=>U});module.exports=le(ye);function I(t){return console.log("log",t),({node:e,options:n,instance:i})=>(console.log("log",{node:e,options:n,instance:i}),e.addEventListener("destroy",function o(){e.removeEventListener("destroy",o)}),null)}function h(t,e,n){let i=n?new CustomEvent(e,n):new Event(e,{bubbles:!0});return t.dispatchEvent(i)}function A(t,e,n=0){let i,o=0,r=0,s=e;function a(){o===1&&(o=2,clearInterval(i),s=n||e-Math.abs(performance.now()-r))}function u(){o===2&&(o=3,setTimeout(L,s))}function c(){o=0,clearInterval(i)}function p(){o=1,r=performance.now(),i=setInterval(()=>{t(),r=performance.now()},e)}function L(){o===3&&(t(),p())}return{play:p,pause:a,resume:u,stop:c}}function q(t,e,n=0){(!t||!Object.keys(t).length)&&(t={duration:1500,delay:0});let{duration:i,delay:o}=t;return({node:r,options:s,instance:a})=>{e||=()=>{!s.loop&&s.index&&s.edged?(h(r,"stop"),u.stop(),n=0):(n=1,a.to(s.index+1))};let u=A(e,i,o);return r.addEventListener("mount",c),r.addEventListener("destroy",u.stop),u;function c(){document.onvisibilitychange=()=>{if(document.visibilityState==="hidden"){if(n!==1)return;h(r,"pause"),u.pause(),n=2}else{if(n!==2)return;h(r,"resume"),u.resume()}},r.onpointerenter=()=>{n===1&&(h(r,"pause"),u.pause(),n=2)},r.onpointerleave=()=>{n===2&&(h(r,"resume"),u.resume())}}}}function N(t={duration:700,delay:1}){let{duration:e,delay:n}=t;return({node:i,options:o,instance:r})=>{let s=A(()=>{r.to(o.index,e/16.667)},Math.abs(e/16.667),n);return i.addEventListener("mount",a),i.addEventListener("destroy",s.stop),s;function a(){o.loop=!0,o.snap=void 0,o.duration=Math.abs(e),s.play(),document.onvisibilitychange=()=>{document.visibilityState==="hidden"?s.pause():s.resume()},i.onpointerenter=()=>s.pause(),i.onpointerleave=()=>s.resume()}}}function $(){return({node:t,instance:e})=>{t.addEventListener("destroy",function i(){t.removeEventListener("destroy",i),t.removeEventListener("index",n)}),t.addEventListener("index",n);function n({detail:{index:i}}){setTimeout(function(){e.update({axis:i%2?"x":"y"})})}}}var F={viewBox:"0 0 24 24",path:"M5.75,3A1.75,1.75,0,0,0,4,4.75v14.5A1.75,1.75,0,0,0,5.75,21h3.5A1.75,1.75,0,0,0,11,19.25V4.75A1.75,1.75,0,0,0,9.25,3ZM5.5,4.75a.25.25,0,0,1,.25-.25h3.5a.25.25,0,0,1,.25.25v14.5a.25.25,0,0,1-.25.25H5.75a.25.25,0,0,1-.25-.25ZM14.75,3A1.75,1.75,0,0,0,13,4.75v14.5A1.75,1.75,0,0,0,14.75,21h3.5A1.75,1.75,0,0,0,20,19.25V4.75A1.75,1.75,0,0,0,18.25,3ZM14.5,4.75a.25.25,0,0,1,.25-.25h3.5a.25.25,0,0,1,.25.25v14.5a.25.25,0,0,1-.25.25h-3.5a.25.25,0,0,1-.25-.25Z"},z={viewBox:"0 0 24 24",path:"M7.61,4.61a.75.75,0,0,0-1.11.66V18.73a.75.75,0,0,0,1.11.65L20,12.66a.75.75,0,0,0,0-1.32ZM5,5.27a2.25,2.25,0,0,1,3.33-2L20.69,10a2.26,2.26,0,0,1,0,4L8.33,20.7a2.25,2.25,0,0,1-3.33-2Z"},Z={viewBox:"0 0 24 24",path:"M5.75,3h12.5A2.75,2.75,0,0,1,21,5.75v12.5A2.75,2.75,0,0,1,18.25,21H5.75A2.75,2.75,0,0,1,3,18.25V5.75A2.75,2.75,0,0,1,5.75,3Zm0,1.5A1.25,1.25,0,0,0,4.5,5.75v12.5A1.25,1.25,0,0,0,5.75,19.5h12.5a1.25,1.25,0,0,0,1.25-1.25V5.75A1.25,1.25,0,0,0,18.25,4.5Z"};var V=!!(typeof window<"u"&&window.document&&window.document.createElement);var T=(t,e)=>{if(!V)return class{};let n=e();return customElements.define(t,n),n};var l=15,b=2,j={play:z.path,pause:F.path,stop:Z.path},ce=`0 0 ${2*l+b} ${2*l+b}`,D=`${b}px`,H=`M ${l+b/2}, ${l+b/2} m -${l}, 0 a ${l},${l} 0 1,0 ${2*l},0 a ${l},${l} 0 1,0 ${-2*l},0`,$e=T("autoplay-button",()=>class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`<style>:host{grid-area:slides;--slidy-autoplay-stroke-length: ${2*Math.PI*l};width:var(--slidy-autoplay-control-size,2.25em);height:var(--slidy-autoplay-control-size,2.25em);grid-template:1fr/1fr;place-content:center;place-items:center;display:grid;position:absolute;bottom:1em;right:1em}:host>svg{width:var(--slidy-autoplay-control-size,2.25em);height:var(--slidy-autoplay-control-size,2.25em)}:host>*{grid-area:1/1}:host>button{pointer-events:all;fill:var(--slidy-arrow-icon-color,currentColor);background-color:var(--slidy-counter-bg,#4e4e4ebf);cursor:pointer;border:none;border-radius:1em;outline:none;justify-content:center;align-items:center;padding:.25em;font-family:inherit;display:flex}:host>button,:host>button svg{width:calc(.9*var(--slidy-autoplay-control-size,2.25em));height:calc(.9*var(--slidy-autoplay-control-size,2.25em))}:host>button:disabled{opacity:.75;cursor:not-allowed}:host>button:focus-visible{outline:2px dashed var(--slidy-focus-ring-color,#c9c9c9e6);outline-offset:calc(.25*var(--slidy-autoplay-control-size,2.25em));border-radius:50%}.slidy-autoplay-indicator{stroke-dasharray:var(--slidy-autoplay-stroke-length);stroke-dashoffset:var(--slidy-autoplay-stroke-length);animation:slidy-autoplay-indicator var(--slidy-autoplay-interval)linear forwards infinite}.slidy-autoplay-indicator.stop{animation:unset}.slidy-autoplay-indicator.pause{animation-play-state:paused}@keyframes slidy-autoplay-indicator{to{stroke-dashoffset:0}}</style><svg viewBox="${ce}"><path stroke="var(--slidy-counter-bg, #4e4e4ebf)" stroke-width="${D}" fill="none" d="${H}"></path><path class="slidy-autoplay-indicator stop" stroke="var(--slidy-autoplay-indicator-accent, lightpink)" stroke-width="${D}" fill="none" d="${H}"></path></svg><button type="button"><svg viewBox="0 0 24 24"><path d=""></path></svg></button>`}setDuration(e){this.style.setProperty("--slidy-autoplay-interval",e+"ms")}get path0(){return this.shadowRoot.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling}get button(){return this.shadowRoot.firstElementChild.nextElementSibling.nextElementSibling}get path1(){return this.button.firstElementChild.firstElementChild}get animation(){let e=this.path0.classList;return{pause(){e.add("pause")},cancel(){e.add("stop")},play(){e.remove("stop","pause")}}}});function O(t){let e=document.createElement("autoplay-button"),n=e.button;return n.onclick=t,[e,n,e.path1]}var B=(t,e)=>{let n=Object.entries(e),i=()=>{for(let[r,s]of n)t.addEventListener(r,s)},o=()=>{for(let[r,s]of n)t.removeEventListener(r,s)};return i(),o},C=(t,...e)=>e.includes(t);var v=performance.now.bind(performance),P=class{queue;timeoutId;index;off;time=v();constructor(e){this.queue=e,this.index=0,this.off=0}start(){this.time=v(),this.runNextTask()}pause(){clearTimeout(this.timeoutId),this.off+=v()-this.time}stop(){clearTimeout(this.timeoutId),this.off=0,this.index=0}runNextTask(){this.index===this.queue.length&&this.stop();let e=this.queue[this.index];if(typeof e=="function"){let n=v();e(),this.index++,this.off+=v()-n,this.runNextTask()}else this.timeoutId=setTimeout(()=>{this.index++,this.time=v(),this.off=0,this.runNextTask()},e.await-this.off)}};function R(t,e,n=0){let i=new P([()=>{e.animation.play()},{await:e.interval},()=>{t(),e.animation.cancel(),n=3},{await:e.delay},()=>{n=1,e.animation.cancel()}]);return{play(){n!==3&&e.animation.play(),n=1,e.state=0,i.start()},pause(){n!==3&&(n=2),e.state=2,e.animation.pause(),i.pause()},stop(){n=0,e.state=1,e.animation.cancel(),i.stop()}}}var de={play:"Start autoplay",stop:"Stop autoplay"};var pe={0:"pause",1:"play",2:"stop"},Q=({i18n:t=de,duration:e=2500,delay:n=0,autoplay:i=!1,target:o}={})=>{let r=1,s={0:t.stop,1:t.play,2:t.stop};return({node:a,options:u,instance:c})=>{let p=()=>a.childElementCount,L=()=>{let f=u.index+1;u.loop||f<p()?(r=0,y(),c.to(f)):d.stop()},[m,w,X]=O(()=>{C(r,2,0)?d.stop():d.play(),y()}),d=R(L,{set state(f){r=f,y()},delay:n,interval:e,animation:m.animation});o?typeof o=="string"?document.querySelector(o).appendChild(m):o.appendChild(m):a.insertAdjacentElement("afterend",m),m.setDuration(e);let y=()=>{y.current!==r&&(w.setAttribute("title",s[r]),X.setAttribute("d",j[pe[r]]),y.current=r)};y();let Y=f=>{let oe=f.detail.index+1;u.loop||oe<p()?w.removeAttribute("disabled"):(w.setAttribute("disabled","disabled"),d.stop()),y()},k=()=>{r===0&&d.pause()},M=()=>{r===2&&d.play()},ee=()=>{C(x,0,1)||M()},E=2,x=2;a.onpointerenter=()=>{x=1,E!==0&&k()},m.onpointerenter=()=>{x=0,k()},m.onpointerleave=()=>{E!==1&&M(),E=0},a.onpointerleave=()=>{E=1,x=2,queueMicrotask(ee)};let te=B(document,{visibilitychange:()=>{document.visibilityState==="hidden"&&r===0?d.pause():r===2&&d.play()}}),ne=B(a,{index:Y,mount:()=>{i&&d.play()},destroy:()=>{d.stop(),te(),ne()}})}};var g={C4:261.63,E4:329.63,G4:392,Bell:1567.98,Beep:493.88},G={index:[{freq:g.C4,dur:.5},{freq:g.E4,dur:.5},{freq:g.G4,dur:.5},{freq:g.C4,dur:1}],keys:[{freq:g.Beep,dur:1},{freq:g.Bell,dur:.5}]};var _=(t,e,n)=>{let i=t.createOscillator();i.type="square";let o=t.createGain();i.connect(o),o.connect(t.destination),i.frequency.value=e,o.gain.setValueAtTime(1,t.currentTime),o.gain.exponentialRampToValueAtTime(.001,t.currentTime+n),i.start(t.currentTime),i.stop(t.currentTime+n)};var J=(t=G)=>{let e,n=!1,i=Object.entries(t).reduce((o,[r,s])=>(o[r]=()=>{if(!e)try{e=new AudioContext}catch{return}n||s.forEach((a,u,c)=>{let p=u>0?c[u-1].dur*1e3:0;setTimeout(()=>{_(e,a.freq,a.dur),u===0&&(n=!0),u===c.length-1&&setTimeout(()=>{n=!1},a.dur)},p)})},o),{});return({node:o})=>{function r(){for(let[s,a]of Object.entries(i))o.removeEventListener(s,a);o.removeEventListener("destroy",r)}o.addEventListener("destroy",r);for(let[s,a]of Object.entries(i))o.addEventListener(s,a)}};var me="Share",K="slidy-share-button",Ye=T(K,()=>class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`<style>:host{width:var(--slidy-share-control-size,2.25em);height:var(--slidy-share-control-size,2.25em);grid-area:slides;place-content:center;place-items:center;display:grid;position:absolute;bottom:1em;left:1em}:host>button{pointer-events:all;fill:var(--slidy-arrow-icon-color,currentColor);background-color:var(--slidy-counter-bg,#4e4e4ebf);cursor:pointer;width:var(--slidy-share-control-size,2.25em);height:var(--slidy-share-control-size,2.25em);border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;padding:.25em;font-family:inherit;display:flex}:host>button svg{width:calc(.9*var(--slidy-share-control-size,2.25em));height:calc(.9*var(--slidy-share-control-size,2.25em))}</style><button type="button" aria-label="${me}"><svg viewBox="1 0 15 15" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M5 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm.713 1.164a2.5 2.5 0 1 1 0-2.328l3.391-2.12A2.5 2.5 0 1 1 14 3.5a2.5 2.5 0 0 1-4.484 1.52l-3.53 2.207a2.526 2.526 0 0 1 0 .546l3.53 2.206a2.5 2.5 0 1 1-.411.804l-3.392-2.12ZM11.5 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 6.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" clip-rule="evenodd"/></svg></button>`}}),W=t=>{let e=document.createElement(K);return e.onclick=t,e};var U=({target:t,type:e}={target:void 0,type:"url"})=>({node:n,options:i})=>{let o=W(()=>{let s=i.index;if(!s)return;let a=n.childNodes[s];if(!a)return;let u=a.querySelector("[src]")?.src||a.style.backgroundImage||void 0,c=a.querySelector("img")?.alt||void 0;if(u)try{e==="url"&&navigator.share({url:u,title:c})}finally{}});function r(){o.remove(),n.removeEventListener("destroy",r)}n.addEventListener("destroy",r),t?typeof t=="string"?document.querySelector(t).appendChild(o):t.appendChild(o):n.insertAdjacentElement("afterend",o)};