drab 5.0.2 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/animate/define.iife.js +1 -1
  2. package/animate/index.iife.js +1 -1
  3. package/base/define.iife.js +1 -1
  4. package/base/index.d.ts +8 -4
  5. package/base/index.iife.js +1 -1
  6. package/base/index.js +28 -5
  7. package/breakpoint/define.iife.js +1 -1
  8. package/breakpoint/index.iife.js +1 -1
  9. package/contextmenu/define.iife.js +1 -1
  10. package/contextmenu/index.iife.js +1 -1
  11. package/copy/define.iife.js +1 -1
  12. package/copy/index.iife.js +1 -1
  13. package/define/index.iife.js +9 -9
  14. package/details/define.iife.js +1 -1
  15. package/details/index.iife.js +1 -1
  16. package/dialog/define.iife.js +1 -1
  17. package/dialog/index.iife.js +1 -1
  18. package/editor/define.iife.js +4 -4
  19. package/editor/index.iife.js +5 -5
  20. package/fullscreen/define.iife.js +1 -1
  21. package/fullscreen/index.iife.js +1 -1
  22. package/fullscreen/index.js +2 -1
  23. package/index.d.ts +3 -1
  24. package/index.iife.js +9 -9
  25. package/index.js +3 -1
  26. package/package.json +19 -1
  27. package/popover/define.iife.js +1 -1
  28. package/popover/index.iife.js +1 -1
  29. package/prefetch/define.d.ts +1 -0
  30. package/prefetch/define.iife.js +1 -0
  31. package/prefetch/define.js +2 -0
  32. package/prefetch/index.d.ts +80 -0
  33. package/prefetch/index.iife.js +1 -0
  34. package/prefetch/index.js +164 -0
  35. package/share/define.iife.js +1 -1
  36. package/share/index.iife.js +1 -1
  37. package/tablesort/define.iife.js +1 -1
  38. package/tablesort/index.iife.js +1 -1
  39. package/wakelock/define.d.ts +1 -0
  40. package/wakelock/define.iife.js +1 -0
  41. package/wakelock/define.js +2 -0
  42. package/wakelock/index.d.ts +32 -0
  43. package/wakelock/index.iife.js +1 -0
  44. package/wakelock/index.js +88 -0
  45. package/youtube/define.iife.js +1 -1
  46. package/youtube/index.iife.js +1 -1
package/index.d.ts CHANGED
@@ -8,7 +8,9 @@ import { Dialog, type DialogAttributes } from "./dialog/index.js";
8
8
  import { Editor, type EditorAttributes } from "./editor/index.js";
9
9
  import { Fullscreen, type FullscreenAttributes } from "./fullscreen/index.js";
10
10
  import { Popover, type PopoverAttributes } from "./popover/index.js";
11
+ import { Prefetch, type PrefetchAttributes } from "./prefetch/index.js";
11
12
  import { Share, type ShareAttributes } from "./share/index.js";
12
13
  import { TableSort, type TableSortAttributes } from "./tablesort/index.js";
14
+ import { WakeLock, type WakeLockAttributes } from "./wakelock/index.js";
13
15
  import { YouTube, type YouTubeAttributes } from "./youtube/index.js";
14
- export { Base, Animate, AnimateAttributes, Breakpoint, BreakpointAttributes, ContextMenu, ContextMenuAttributes, Copy, CopyAttributes, Details, DetailsAttributes, Dialog, DialogAttributes, Editor, EditorAttributes, Fullscreen, FullscreenAttributes, Popover, PopoverAttributes, Share, ShareAttributes, TableSort, TableSortAttributes, YouTube, YouTubeAttributes, };
16
+ export { Base, Animate, AnimateAttributes, Breakpoint, BreakpointAttributes, ContextMenu, ContextMenuAttributes, Copy, CopyAttributes, Details, DetailsAttributes, Dialog, DialogAttributes, Editor, EditorAttributes, Fullscreen, FullscreenAttributes, Popover, PopoverAttributes, Prefetch, PrefetchAttributes, Share, ShareAttributes, TableSort, TableSortAttributes, WakeLock, WakeLockAttributes, YouTube, YouTubeAttributes, };
package/index.iife.js CHANGED
@@ -1,9 +1,9 @@
1
- "use strict";(()=>{var h=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let i=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(i){let s=Array.from(this.getContent().childNodes);i instanceof HTMLTemplateElement?this.getContent().replaceChildren(i.content.cloneNode(!0)):this.getContent().replaceChildren(...i.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...s),e)}}safeListener(t,e,i=document.body,s={}){s.signal=this.#t.signal,i.addEventListener(t,e,s)}triggerListener(t,e=this.event){for(let i of this.getTrigger())i.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var m=class extends h{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let i=this.getAttribute(e),[,,s]=e.split("-");i&&(s==="duration"||s==="delay"?t[s]=Number(i):s==="easing"&&(t[s]=i))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:i={}}=t,s=this.keyframes;if(s.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){i=Object.assign(this.animationOptions,i),i.duration||(i.duration=200),i.easing||(i.easing="ease-in-out");let r=s.at(0),n=s.at(-1);if(r&&n){let l=["composite","easing","offset"];for(let u of l)delete r[u],delete n[u]}i.direction?.includes("reverse")&&([r,n]=[n,r]),Object.assign(e.style,r),await e.animate(s,i).finished,Object.assign(e.style,n)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let i=this.getAttribute(e),[,,s,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let n=r.map((o,l)=>l<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(s&&n){s==="from"?s="0":s==="to"?s="1":s=String(parseInt(s)*.01);let o=Number(s),l=t.find(u=>u.offset===o);l?l[n]=i:t.push({[n]:i,offset:o})}}}return t.sort((e,i)=>Number(e.offset)-Number(i.offset)),t}};var b=class extends h{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...i]=e.split("-");i&&t.push({name:i.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,i)=>i.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};var A=class extends m{#t;constructor(){super()}set#r(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,i=window.scrollX,s=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,n=s+i,o=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let l=this.getContent().offsetWidth+24,u=this.getContent().offsetHeight+6,c=window.innerWidth,p=window.innerHeight;n+l>i+c&&(n=i+c-l),o+u>e+p&&(o=e+p-u),this.#r={x:n,y:o},await this.animateElement()}async hide(){this.getContent().style.display!=="none"&&(await this.animateElement({options:{direction:"reverse"}}),this.getContent().style.display="none")}mount(){this.triggerListener(e=>{e.preventDefault(),this.show(e)},"contextmenu"),this.safeListener("click",()=>this.hide()),this.triggerListener(e=>{this.#t=setTimeout(()=>{this.show(e)},800)},"touchstart");let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend"),this.triggerListener(t,"touchcancel"),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};var f=class extends h{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(t){this.setAttribute("value",t)}async copy(t=this.value){await navigator.clipboard.writeText(t),this.swapContent()}};var x=class extends f{constructor(){super()}mount(){this.triggerListener(async()=>await this.copy())}};var w=class extends m{constructor(){super()}get details(){let t=this.getContent(HTMLElement).parentElement;if(!(t instanceof HTMLDetailsElement))throw new Error("Details: HTMLDetailsElement not found.");return t}async open(){this.details.open=!0,await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.details.open=!1}toggle(){this.details.open?this.close():this.open()}mount(){this.triggerListener(t=>{t.preventDefault(),this.toggle()})}};var v=class extends m{constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}async show(){this.dialog.showModal(),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.dialog.close()}async toggle(){this.dialog.open?this.close():this.show()}mount(){this.triggerListener(()=>this.toggle()),this.safeListener("keydown",t=>{t.key==="Escape"&&this.dialog.open&&(t.preventDefault(),this.close())})}};var k=class extends h{#t=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#r)t.type==="wrap"&&(this.keyPairs[t.value]=t.value)}get textArea(){return this.getContent(HTMLTextAreaElement)}get text(){return this.textArea.value}set text(t){this.textArea.value=t}get#r(){let t=[];for(let e of this.getTrigger())t.push(this.#a(e));return t}get#u(){let t=this.text.split("```"),e=0;for(let[i,s]of t.entries())if(e+=s.length+3,this.#i<e)return i;return 0}get#e(){return this.textArea.selectionEnd}get#i(){return this.textArea.selectionStart}#s(t,e){this.textArea.setSelectionRange(t,e)}#a(t){let e=t.dataset.type,i=t.dataset.value,s=t.dataset.key??void 0;return{type:e,value:i,key:s}}async#h(t,e,i){if(t.type==="inline")this.text=`${this.text.slice(0,i)}${t.value}${this.text.slice(i)}`;else if(t.type==="wrap")this.text=S(this.text,t.value,e),this.text=S(this.text,this.keyPairs[t.value],i+t.value.length),t.value.length<2&&this.#t.push(t.value);else if(t.type==="block"){let{lines:s,lineNumber:r}=this.#o(),n=t.value.at(0);n&&s[r]?.startsWith(n)?s[r]=t.value.trim()+s[r]:s[r]=t.value+s[r],this.text=s.join(`
2
- `)}}async#c(t,e,i){let s=0,r=0;if(/[a-z]/i.test(t)){for(let n=i;n<this.text.length;n++)if(this.text[n]?.match(/[a-z]/i))s?r=n+1:s=n;else if(s)break}else s=e+t.length,r=i+t.length;this.#s(s,r),this.textArea.focus()}async#n(t){let e=this.#e,i=this.#i;await this.#h(t,i,e),this.#c(t.value,i,e)}#m(t){if(t){let e=[];this.#r.forEach(s=>{s.type==="block"&&e.push(s.value)});for(let s=0;s<e.length;s++){let r=e[s];if(r&&t.startsWith(r))return r}let i=E(t);if(i)return`${i}. `}return""}#o(){let t=this.text.split(`
3
- `),e=0;for(let i=0;i<t.length;i++){let s=t.at(i)?.length??0;if(e++,e+=s,e>this.#e)return{lines:t,lineNumber:i,columnNumber:this.#e-(e-s-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#l(t,e=!1){let{lines:i}=this.#o();for(let s=t+1;s<i.length;s++){let r=i[s];if(r){let n=E(r);if(n){let o;if(e)if(n>1)o=n-1;else break;else o=n+1;i[s]=r.slice(String(n).length),i[s]=String(o)+i[s]}else break}}this.text=i.join(`
4
- `)}mount(){this.textArea.addEventListener("keydown",async t=>{let e=["ArrowUp","ArrowDown","Delete"],i=this.text[this.#e]??"";if(e.includes(t.key))this.#t=[];else if(t.key==="Backspace"){let s=this.text[this.#i-1];if(s&&s in this.keyPairs&&i===this.keyPairs[s]){t.preventDefault();let r=this.#i-1,n=this.#e-1;this.text=g(this.text,r),this.text=g(this.text,n),setTimeout(()=>{this.#s(r,n)},0),this.#t.pop()}if(s===`
5
- `&&this.#i===this.#e){t.preventDefault();let r=this.#i-1,{lineNumber:n}=this.#o();this.#l(n,!0),this.text=g(this.text,r),setTimeout(async()=>{this.#s(r,r)},0)}}else if(t.key==="Tab")this.#u%2!==0&&(t.preventDefault(),await this.#n({type:"inline",value:" "}));else if(t.key==="Enter"){let{lines:s,lineNumber:r,columnNumber:n}=this.#o(),o=s.at(r),l=this.#m(o),u=l,c=E(l);if(c&&(l=`${c+1}. `),l&&u.length<n)t.preventDefault(),c&&this.#l(r),await this.#n({type:"inline",value:`
6
- ${l}`});else if(l&&u.length===n){t.preventDefault();let p=this.#e,d=p-u.length;for(let y=0;y<u.length;y++)this.text=g(this.text,p-(y+1));setTimeout(async()=>{this.#s(d,d),this.textArea.focus(),await this.#n({type:"inline",value:`
7
- `})},0)}}else{let s=Object.values(this.keyPairs).includes(i),r=this.#i!==this.#e;if((t.ctrlKey||t.metaKey)&&this.#i===this.#e&&(t.key==="c"||t.key==="x")){t.preventDefault();let{lines:n,lineNumber:o,columnNumber:l}=this.#o();if(await navigator.clipboard.writeText(`${o===0&&t.key==="x"?"":`
8
- `}${n[o]}`),t.key==="x"){let u=this.#i-l;n.splice(o,1),this.text=n.join(`
9
- `),setTimeout(()=>{this.#s(u,u)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let n=this.#r.find(o=>o.key===t.key);n&&this.#n(n)}else s&&(i===t.key||t.key==="ArrowRight")&&this.#t.length&&!r?(t.preventDefault(),this.#s(this.#i+1,this.#e+1),this.#t.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#n({type:"wrap",value:t.key}),this.#t.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#i!==this.#e&&(this.text[this.#i]===" "&&this.#s(this.#i+1,this.#e),this.text[this.#e-1]===" "&&this.#s(this.#i,this.#e-1))}),this.textArea.addEventListener("click",()=>this.#t=[]);for(let t of this.getTrigger())t.addEventListener(this.event,()=>{this.#n(this.#a(t))})}},E=a=>{let t=a.match(/^(\d+)\./);return t?Number(t[1]):null},S=(a,t,e)=>a.slice(0,e)+t+a.slice(e),g=(a,t)=>a.slice(0,t)+a.slice(t+1);var T=class extends h{constructor(){super()}isFullscreen(){return document.fullscreenElement!==null}fullscreenSupported(){return!!document.documentElement.requestFullscreen}toggle(){if(this.isFullscreen())document.exitFullscreen();else try{this.getContent(HTMLElement).requestFullscreen()}catch{document.documentElement.requestFullscreen()}}mount(){this.triggerListener(()=>this.toggle());for(let t of this.getTrigger())!this.fullscreenSupported()&&t instanceof HTMLButtonElement&&(t.disabled=!0)}};var C=class extends m{constructor(){super()}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}async show(){this.getContent().showPopover(),await this.animateElement()}async hide(){await this.animateElement({options:{direction:"reverse"}}),this.getContent().hidePopover()}async toggle(){this.open?this.hide():this.show()}mount(){this.triggerListener(t=>{t.preventDefault(),this.toggle()}),this.getContent().addEventListener("toggle",t=>{t.newState==="open"?this.open=!0:this.open=!1}),this.safeListener("keydown",t=>{t.key==="Escape"&&this.open&&(t.preventDefault(),this.hide())})}};var L=class extends f{constructor(){super()}async share(t=this.value){if(navigator.canShare&&navigator.canShare({url:t}))try{await navigator.share({url:t})}catch(e){e?.name!=="AbortError"&&console.error(e)}else this.copy()}mount(){this.triggerListener(async()=>await this.share())}};var M=class extends h{constructor(){super()}#t(t){let e="data-asc",i="data-desc";for(let s of this.getTrigger())s!==t&&(s.removeAttribute(e),s.removeAttribute(i));return t.hasAttribute(e)?(t.removeAttribute(e),t.setAttribute(i,""),!1):(t.removeAttribute(i),t.setAttribute(e,""),!0)}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(D(e,this.#t(e))).forEach(i=>t.appendChild(i))})}},D=(a,t)=>(i,s)=>{let r=Array.from(a.parentNode?.children??[]).indexOf(a);return((o,l)=>{let u=a.dataset.type??"string";if(u==="string")return new Intl.Collator().compare(o,l);if(u==="boolean"){let c=p=>["0","false","null","undefined"].includes(p)?!1:!!p;return c(o)===c(l)?0:c(o)?-1:1}else return Number(o)-Number(l)})(N(t?i:s,r),N(t?s:i,r))},N=(a,t)=>{let e=a.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};var H=class extends h{static observedAttributes=["autoplay","start","uid"];constructor(){super()}get iframe(){return this.getContent(HTMLIFrameElement)}get autoplay(){return this.hasAttribute("autoplay")}set autoplay(t){t?this.setAttribute("autoplay",""):this.removeAttribute("autoplay")}get start(){return this.getAttribute("start")??"0"}set start(t){this.setAttribute("start",t)}get uid(){let t=this.getAttribute("uid");if(!t)throw new Error("YouTube: missing `uid` attribute.");return t}set uid(t){this.setAttribute("uid",t)}mount(){this.iframe.allowFullscreen=!0,this.iframe.allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"}attributeChangedCallback(){queueMicrotask(()=>{this.iframe.src=`https://www.youtube-nocookie.com/embed/${this.uid}?start=${this.start}${this.autoplay?"&autoplay=1":""}`})}};})();
1
+ "use strict";(()=>{var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let s=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(s){let i=Array.from(this.getContent().childNodes),n=[];s instanceof HTMLTemplateElement?(n.push(s.content.cloneNode(!0)),s.content.replaceChildren(...i)):(n.push(...s.childNodes),s.replaceChildren(...i)),this.getContent().replaceChildren(...n),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,s=document.body,i={}){i.signal=this.#t.signal,s.addEventListener(t,e,i)}triggerListener(t,e=this.event){for(let s of this.getTrigger())s.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var p=class extends c{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let s=this.getAttribute(e),[,,i]=e.split("-");s&&(i==="duration"||i==="delay"?t[i]=Number(s):i==="easing"&&(t[i]=s))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:s={}}=t,i=this.keyframes;if(i.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){s=Object.assign(this.animationOptions,s),s.duration||(s.duration=200),s.easing||(s.easing="ease-in-out");let n=i.at(0),r=i.at(-1);if(n&&r){let u=["composite","easing","offset"];for(let a of u)delete n[a],delete r[a]}s.direction?.includes("reverse")&&([n,r]=[r,n]),Object.assign(e.style,n),await e.animate(i,s).finished,Object.assign(e.style,r)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let s=this.getAttribute(e),[,,i,...n]=e.split("-");if(e.startsWith("animation-keyframe-")){let r=n.map((o,u)=>u<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(i&&r){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let o=Number(i),u=t.find(a=>a.offset===o);u?u[r]=s:t.push({[r]:s,offset:o})}}}return t.sort((e,s)=>Number(e.offset)-Number(s.offset)),t}};var b=class extends c{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...s]=e.split("-");s&&t.push({name:s.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,s)=>s.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};var A=class extends p{#t;constructor(){super()}set#i(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,s=window.scrollX,i=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,n=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,r=i+s,o=n+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let u=this.getContent().offsetWidth+24,a=this.getContent().offsetHeight+6,h=window.innerWidth,m=window.innerHeight;r+u>s+h&&(r=s+h-u),o+a>e+m&&(o=e+m-a),this.#i={x:r,y:o},await this.animateElement()}async hide(){this.getContent().style.display!=="none"&&(await this.animateElement({options:{direction:"reverse"}}),this.getContent().style.display="none")}mount(){this.triggerListener(e=>{e.preventDefault(),this.show(e)},"contextmenu"),this.safeListener("click",()=>this.hide()),this.triggerListener(e=>{this.#t=setTimeout(()=>{this.show(e)},800)},"touchstart");let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend"),this.triggerListener(t,"touchcancel"),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};var f=class extends c{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(t){this.setAttribute("value",t)}async copy(t=this.value){await navigator.clipboard.writeText(t),this.swapContent()}};var x=class extends f{constructor(){super()}mount(){this.triggerListener(async()=>await this.copy())}};var k=class extends p{constructor(){super()}get details(){let t=this.getContent(HTMLElement).parentElement;if(!(t instanceof HTMLDetailsElement))throw new Error("Details: HTMLDetailsElement not found.");return t}async open(){this.details.open=!0,await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.details.open=!1}toggle(){this.details.open?this.close():this.open()}mount(){this.triggerListener(t=>{t.preventDefault(),this.toggle()})}};var v=class extends p{constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}async show(){this.dialog.showModal(),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.dialog.close()}async toggle(){this.dialog.open?this.close():this.show()}mount(){this.triggerListener(()=>this.toggle()),this.safeListener("keydown",t=>{t.key==="Escape"&&this.dialog.open&&(t.preventDefault(),this.close())})}};var E=class extends c{#t=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#i)t.type==="wrap"&&(this.keyPairs[t.value]=t.value)}get textArea(){return this.getContent(HTMLTextAreaElement)}get text(){return this.textArea.value}set text(t){this.textArea.value=t}get#i(){let t=[];for(let e of this.getTrigger())t.push(this.#l(e));return t}get#a(){let t=this.text.split("```"),e=0;for(let[s,i]of t.entries())if(e+=i.length+3,this.#s<e)return s;return 0}get#e(){return this.textArea.selectionEnd}get#s(){return this.textArea.selectionStart}#r(t,e){this.textArea.setSelectionRange(t,e)}#l(t){let e=t.dataset.type,s=t.dataset.value,i=t.dataset.key??void 0;return{type:e,value:s,key:i}}async#c(t,e,s){if(t.type==="inline")this.text=`${this.text.slice(0,s)}${t.value}${this.text.slice(s)}`;else if(t.type==="wrap")this.text=D(this.text,t.value,e),this.text=D(this.text,this.keyPairs[t.value],s+t.value.length),t.value.length<2&&this.#t.push(t.value);else if(t.type==="block"){let{lines:i,lineNumber:n}=this.#o(),r=t.value.at(0);r&&i[n]?.startsWith(r)?i[n]=t.value.trim()+i[n]:i[n]=t.value+i[n],this.text=i.join(`
2
+ `)}}async#h(t,e,s){let i=0,n=0;if(/[a-z]/i.test(t)){for(let r=s;r<this.text.length;r++)if(this.text[r]?.match(/[a-z]/i))i?n=r+1:i=r;else if(i)break}else i=e+t.length,n=s+t.length;this.#r(i,n),this.textArea.focus()}async#n(t){let e=this.#e,s=this.#s;await this.#c(t,s,e),this.#h(t.value,s,e)}#p(t){if(t){let e=[];this.#i.forEach(i=>{i.type==="block"&&e.push(i.value)});for(let i=0;i<e.length;i++){let n=e[i];if(n&&t.startsWith(n))return n}let s=w(t);if(s)return`${s}. `}return""}#o(){let t=this.text.split(`
3
+ `),e=0;for(let s=0;s<t.length;s++){let i=t.at(s)?.length??0;if(e++,e+=i,e>this.#e)return{lines:t,lineNumber:s,columnNumber:this.#e-(e-i-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#u(t,e=!1){let{lines:s}=this.#o();for(let i=t+1;i<s.length;i++){let n=s[i];if(n){let r=w(n);if(r){let o;if(e)if(r>1)o=r-1;else break;else o=r+1;s[i]=n.slice(String(r).length),s[i]=String(o)+s[i]}else break}}this.text=s.join(`
4
+ `)}mount(){this.textArea.addEventListener("keydown",async t=>{let e=["ArrowUp","ArrowDown","Delete"],s=this.text[this.#e]??"";if(e.includes(t.key))this.#t=[];else if(t.key==="Backspace"){let i=this.text[this.#s-1];if(i&&i in this.keyPairs&&s===this.keyPairs[i]){t.preventDefault();let n=this.#s-1,r=this.#e-1;this.text=d(this.text,n),this.text=d(this.text,r),setTimeout(()=>{this.#r(n,r)},0),this.#t.pop()}if(i===`
5
+ `&&this.#s===this.#e){t.preventDefault();let n=this.#s-1,{lineNumber:r}=this.#o();this.#u(r,!0),this.text=d(this.text,n),setTimeout(async()=>{this.#r(n,n)},0)}}else if(t.key==="Tab")this.#a%2!==0&&(t.preventDefault(),await this.#n({type:"inline",value:" "}));else if(t.key==="Enter"){let{lines:i,lineNumber:n,columnNumber:r}=this.#o(),o=i.at(n),u=this.#p(o),a=u,h=w(u);if(h&&(u=`${h+1}. `),u&&a.length<r)t.preventDefault(),h&&this.#u(n),await this.#n({type:"inline",value:`
6
+ ${u}`});else if(u&&a.length===r){t.preventDefault();let m=this.#e,g=m-a.length;for(let y=0;y<a.length;y++)this.text=d(this.text,m-(y+1));setTimeout(async()=>{this.#r(g,g),this.textArea.focus(),await this.#n({type:"inline",value:`
7
+ `})},0)}}else{let i=Object.values(this.keyPairs).includes(s),n=this.#s!==this.#e;if((t.ctrlKey||t.metaKey)&&this.#s===this.#e&&(t.key==="c"||t.key==="x")){t.preventDefault();let{lines:r,lineNumber:o,columnNumber:u}=this.#o();if(await navigator.clipboard.writeText(`${o===0&&t.key==="x"?"":`
8
+ `}${r[o]}`),t.key==="x"){let a=this.#s-u;r.splice(o,1),this.text=r.join(`
9
+ `),setTimeout(()=>{this.#r(a,a)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let r=this.#i.find(o=>o.key===t.key);r&&this.#n(r)}else i&&(s===t.key||t.key==="ArrowRight")&&this.#t.length&&!n?(t.preventDefault(),this.#r(this.#s+1,this.#e+1),this.#t.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#n({type:"wrap",value:t.key}),this.#t.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#s!==this.#e&&(this.text[this.#s]===" "&&this.#r(this.#s+1,this.#e),this.text[this.#e-1]===" "&&this.#r(this.#s,this.#e-1))}),this.textArea.addEventListener("click",()=>this.#t=[]);for(let t of this.getTrigger())t.addEventListener(this.event,()=>{this.#n(this.#l(t))})}},w=l=>{let t=l.match(/^(\d+)\./);return t?Number(t[1]):null},D=(l,t,e)=>l.slice(0,e)+t+l.slice(e),d=(l,t)=>l.slice(0,t)+l.slice(t+1);var T=class extends c{constructor(){super()}isFullscreen(){return document.fullscreenElement!==null}fullscreenSupported(){return!!document.documentElement.requestFullscreen}toggle(){if(this.isFullscreen())document.exitFullscreen();else try{this.getContent(HTMLElement).requestFullscreen()}catch{document.documentElement.requestFullscreen()}}mount(){this.triggerListener(()=>this.toggle());for(let t of this.getTrigger())!this.fullscreenSupported()&&"disabled"in t&&(t.disabled=!0)}};var L=class extends p{constructor(){super()}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}async show(){this.getContent().showPopover(),await this.animateElement()}async hide(){await this.animateElement({options:{direction:"reverse"}}),this.getContent().hidePopover()}async toggle(){this.open?this.hide():this.show()}mount(){this.triggerListener(t=>{t.preventDefault(),this.toggle()}),this.getContent().addEventListener("toggle",t=>{t.newState==="open"?this.open=!0:this.open=!1}),this.safeListener("keydown",t=>{t.key==="Escape"&&this.open&&(t.preventDefault(),this.hide())})}};var C=class extends c{constructor(){super()}get#t(){return this.getAttribute("strategy")??"hover"}get#i(){return this.hasAttribute("prerender")}get#a(){return this.getAttribute("url")}appendTag(t){let{url:e,prerender:s}=t;if(e!==window.location.href){let i="speculationrules";if(!(r=>{if(document.querySelector(`link[href='${r}']`))return!0;let o=document.querySelectorAll(`script[type='${i}']`);for(let u of o)if(JSON.parse(u.textContent??"{}").prerender?.at(0)?.urls?.includes(r))return!0;return!1})(e))if(s&&HTMLScriptElement.supports&&HTMLScriptElement.supports(i)){let r=document.createElement("script");r.type=i,r.textContent=JSON.stringify({prerender:[{source:"list",urls:[e]}]}),document.head.append(r)}else{let r=document.createElement("link");r.rel="prefetch",r.as="document",r.href=e,document.head.append(r)}}}prefetch(t={anchors:this.getTrigger(),prerender:this.#i,strategy:this.#t}){let{anchors:e=this.getTrigger(),prerender:s=this.#i,strategy:i=this.#t}=t,n,r=(a=200)=>h=>{let{href:m}=h.currentTarget;n=setTimeout(()=>this.appendTag({url:m,prerender:s}),a)},o=()=>clearTimeout(n),u=new IntersectionObserver(a=>{for(let h of a)h.isIntersecting&&this.appendTag({url:h.target.href,prerender:s})});for(let a of e)i==="load"?this.appendTag({url:a.href,prerender:s}):i==="visible"?u.observe(a):(a.addEventListener("mouseover",r()),a.addEventListener("mouseout",o),a.addEventListener("focus",r()),a.addEventListener("focusout",o),a.addEventListener("touchstart",r(0)))}mount(){this.#a&&this.appendTag({url:this.#a,prerender:this.#i}),this.prefetch()}};var M=class extends f{constructor(){super()}async share(t=this.value){if(navigator.canShare&&navigator.canShare({url:t}))try{await navigator.share({url:t})}catch(e){e?.name!=="AbortError"&&console.error(e)}else this.copy()}mount(){this.triggerListener(async()=>await this.share())}};var S=class extends c{constructor(){super()}#t(t){let e="data-asc",s="data-desc";for(let i of this.getTrigger())i!==t&&(i.removeAttribute(e),i.removeAttribute(s));return t.hasAttribute(e)?(t.removeAttribute(e),t.setAttribute(s,""),!1):(t.removeAttribute(s),t.setAttribute(e,""),!0)}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(j(e,this.#t(e))).forEach(s=>t.appendChild(s))})}},j=(l,t)=>(s,i)=>{let n=Array.from(l.parentNode?.children??[]).indexOf(l);return((o,u)=>{let a=l.dataset.type??"string";if(a==="string")return new Intl.Collator().compare(o,u);if(a==="boolean"){let h=m=>["0","false","null","undefined"].includes(m)?!1:!!m;return h(o)===h(u)?0:h(o)?-1:1}else return Number(o)-Number(u)})(P(t?s:i,n),P(t?i:s,n))},P=(l,t)=>{let e=l.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};var H=class extends c{wakeLock=null;constructor(){super()}#t(){return"wakeLock"in navigator}get#i(){return this.hasAttribute("auto-lock")}async request(){this.#t()&&document.visibilityState==="visible"&&(this.wakeLock=await navigator.wakeLock.request("screen"),this.setAttribute("locked",""),this.swapContent(!1),this.wakeLock.addEventListener("release",()=>{this.removeAttribute("locked"),this.swapContent(!1),this.#i||(this.wakeLock=null)}))}async release(){await this.wakeLock?.release(),this.wakeLock=null}mount(){this.hasAttribute("locked")&&this.request(),this.triggerListener(()=>{this.wakeLock?this.release():this.request()});for(let t of this.getTrigger())!this.#t()&&"disabled"in t&&(t.disabled=!0);this.#i&&this.safeListener("visibilitychange",()=>{this.wakeLock&&this.request()},document)}destroy(){this.release()}};var N=class extends c{static observedAttributes=["autoplay","start","uid"];constructor(){super()}get iframe(){return this.getContent(HTMLIFrameElement)}get autoplay(){return this.hasAttribute("autoplay")}set autoplay(t){t?this.setAttribute("autoplay",""):this.removeAttribute("autoplay")}get start(){return this.getAttribute("start")??"0"}set start(t){this.setAttribute("start",t)}get uid(){let t=this.getAttribute("uid");if(!t)throw new Error("YouTube: missing `uid` attribute.");return t}set uid(t){this.setAttribute("uid",t)}mount(){this.iframe.allowFullscreen=!0,this.iframe.allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"}attributeChangedCallback(){queueMicrotask(()=>{this.iframe.src=`https://www.youtube-nocookie.com/embed/${this.uid}?start=${this.start}${this.autoplay?"&autoplay=1":""}`})}};})();
package/index.js CHANGED
@@ -8,7 +8,9 @@ import { Dialog } from "./dialog/index.js";
8
8
  import { Editor } from "./editor/index.js";
9
9
  import { Fullscreen } from "./fullscreen/index.js";
10
10
  import { Popover } from "./popover/index.js";
11
+ import { Prefetch } from "./prefetch/index.js";
11
12
  import { Share } from "./share/index.js";
12
13
  import { TableSort } from "./tablesort/index.js";
14
+ import { WakeLock } from "./wakelock/index.js";
13
15
  import { YouTube } from "./youtube/index.js";
14
- export { Base, Animate, Breakpoint, ContextMenu, Copy, Details, Dialog, Editor, Fullscreen, Popover, Share, TableSort, YouTube, };
16
+ export { Base, Animate, Breakpoint, ContextMenu, Copy, Details, Dialog, Editor, Fullscreen, Popover, Prefetch, Share, TableSort, WakeLock, YouTube, };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "drab",
3
3
  "description": "A headless custom element library",
4
- "version": "5.0.2",
4
+ "version": "5.2.0",
5
5
  "homepage": "https://drab.robino.dev",
6
6
  "license": "MIT",
7
7
  "author": {
@@ -12,6 +12,7 @@
12
12
  "web components",
13
13
  "custom elements",
14
14
  "animate",
15
+ "wakelock",
15
16
  "contextmenu",
16
17
  "details",
17
18
  "youtube",
@@ -19,6 +20,7 @@
19
20
  "dialog",
20
21
  "popover",
21
22
  "tablesort",
23
+ "prefetch",
22
24
  "copy",
23
25
  "fullscreen",
24
26
  "base",
@@ -46,6 +48,14 @@
46
48
  "types": "./animate/define.d.ts",
47
49
  "default": "./animate/define.js"
48
50
  },
51
+ "./wakelock": {
52
+ "types": "./wakelock/index.d.ts",
53
+ "default": "./wakelock/index.js"
54
+ },
55
+ "./wakelock/define": {
56
+ "types": "./wakelock/define.d.ts",
57
+ "default": "./wakelock/define.js"
58
+ },
49
59
  "./contextmenu": {
50
60
  "types": "./contextmenu/index.d.ts",
51
61
  "default": "./contextmenu/index.js"
@@ -102,6 +112,14 @@
102
112
  "types": "./tablesort/define.d.ts",
103
113
  "default": "./tablesort/define.js"
104
114
  },
115
+ "./prefetch": {
116
+ "types": "./prefetch/index.d.ts",
117
+ "default": "./prefetch/index.js"
118
+ },
119
+ "./prefetch/define": {
120
+ "types": "./prefetch/define.d.ts",
121
+ "default": "./prefetch/define.js"
122
+ },
105
123
  "./copy": {
106
124
  "types": "./copy/index.d.ts",
107
125
  "default": "./copy/index.js"
@@ -1 +1 @@
1
- "use strict";(()=>{var l=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let i=this.querySelector(this.getAttribute("content")??"[data-content]");if(i instanceof e)return i;throw new Error("Content not found")}swapContent(e=!0,i=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let n=Array.from(this.getContent().childNodes);t instanceof HTMLTemplateElement?this.getContent().replaceChildren(t.content.cloneNode(!0)):this.getContent().replaceChildren(...t.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...n),i)}}safeListener(e,i,t=document.body,n={}){n.signal=this.#e.signal,t.addEventListener(e,i,n)}triggerListener(e,i=this.event){for(let t of this.getTrigger())t.addEventListener(i,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var f=class extends l{constructor(){super()}get animationOptions(){let e={};for(let i of this.getAttributeNames())if(i.startsWith("animation-option-")){let t=this.getAttribute(i),[,,n]=i.split("-");t&&(n==="duration"||n==="delay"?e[n]=Number(t):n==="easing"&&(e[n]=t))}return e}async animateElement(e={element:this.getContent(),options:{}}){let{element:i=this.getContent(),options:t={}}=e,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){t=Object.assign(this.animationOptions,t),t.duration||(t.duration=200),t.easing||(t.easing="ease-in-out");let o=n.at(0),s=n.at(-1);if(o&&s){let a=["composite","easing","offset"];for(let m of a)delete o[m],delete s[m]}t.direction?.includes("reverse")&&([o,s]=[s,o]),Object.assign(i.style,o),await i.animate(n,t).finished,Object.assign(i.style,s)}}get keyframes(){let e=[];for(let i of this.getAttributeNames()){let t=this.getAttribute(i),[,,n,...o]=i.split("-");if(i.startsWith("animation-keyframe-")){let s=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&s){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=e.find(m=>m.offset===r);a?a[s]=t:e.push({[s]:t,offset:r})}}}return e.sort((i,t)=>Number(i.offset)-Number(t.offset)),e}};var p=class extends f{constructor(){super()}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}async show(){this.getContent().showPopover(),await this.animateElement()}async hide(){await this.animateElement({options:{direction:"reverse"}}),this.getContent().hidePopover()}async toggle(){this.open?this.hide():this.show()}mount(){this.triggerListener(e=>{e.preventDefault(),this.toggle()}),this.getContent().addEventListener("toggle",e=>{e.newState==="open"?this.open=!0:this.open=!1}),this.safeListener("keydown",e=>{e.key==="Escape"&&this.open&&(e.preventDefault(),this.hide())})}};customElements.define("drab-popover",p);})();
1
+ "use strict";(()=>{var l=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let i=this.querySelector(this.getAttribute("content")??"[data-content]");if(i instanceof e)return i;throw new Error("Content not found")}swapContent(e=!0,i=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let n=Array.from(this.getContent().childNodes),s=[];t instanceof HTMLTemplateElement?(s.push(t.content.cloneNode(!0)),t.content.replaceChildren(...n)):(s.push(...t.childNodes),t.replaceChildren(...n)),this.getContent().replaceChildren(...s),e&&setTimeout(()=>this.swapContent(!1),i)}}safeListener(e,i,t=document.body,n={}){n.signal=this.#e.signal,t.addEventListener(e,i,n)}triggerListener(e,i=this.event){for(let t of this.getTrigger())t.addEventListener(i,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var f=class extends l{constructor(){super()}get animationOptions(){let e={};for(let i of this.getAttributeNames())if(i.startsWith("animation-option-")){let t=this.getAttribute(i),[,,n]=i.split("-");t&&(n==="duration"||n==="delay"?e[n]=Number(t):n==="easing"&&(e[n]=t))}return e}async animateElement(e={element:this.getContent(),options:{}}){let{element:i=this.getContent(),options:t={}}=e,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){t=Object.assign(this.animationOptions,t),t.duration||(t.duration=200),t.easing||(t.easing="ease-in-out");let s=n.at(0),o=n.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let m of a)delete s[m],delete o[m]}t.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(i.style,s),await i.animate(n,t).finished,Object.assign(i.style,o)}}get keyframes(){let e=[];for(let i of this.getAttributeNames()){let t=this.getAttribute(i),[,,n,...s]=i.split("-");if(i.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&o){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=e.find(m=>m.offset===r);a?a[o]=t:e.push({[o]:t,offset:r})}}}return e.sort((i,t)=>Number(i.offset)-Number(t.offset)),e}};var p=class extends f{constructor(){super()}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}async show(){this.getContent().showPopover(),await this.animateElement()}async hide(){await this.animateElement({options:{direction:"reverse"}}),this.getContent().hidePopover()}async toggle(){this.open?this.hide():this.show()}mount(){this.triggerListener(e=>{e.preventDefault(),this.toggle()}),this.getContent().addEventListener("toggle",e=>{e.newState==="open"?this.open=!0:this.open=!1}),this.safeListener("keydown",e=>{e.key==="Escape"&&this.open&&(e.preventDefault(),this.hide())})}};customElements.define("drab-popover",p);})();
@@ -1 +1 @@
1
- "use strict";(()=>{var m=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let i=this.querySelector(this.getAttribute("content")??"[data-content]");if(i instanceof e)return i;throw new Error("Content not found")}swapContent(e=!0,i=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let n=Array.from(this.getContent().childNodes);t instanceof HTMLTemplateElement?this.getContent().replaceChildren(t.content.cloneNode(!0)):this.getContent().replaceChildren(...t.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...n),i)}}safeListener(e,i,t=document.body,n={}){n.signal=this.#e.signal,t.addEventListener(e,i,n)}triggerListener(e,i=this.event){for(let t of this.getTrigger())t.addEventListener(i,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var f=class extends m{constructor(){super()}get animationOptions(){let e={};for(let i of this.getAttributeNames())if(i.startsWith("animation-option-")){let t=this.getAttribute(i),[,,n]=i.split("-");t&&(n==="duration"||n==="delay"?e[n]=Number(t):n==="easing"&&(e[n]=t))}return e}async animateElement(e={element:this.getContent(),options:{}}){let{element:i=this.getContent(),options:t={}}=e,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){t=Object.assign(this.animationOptions,t),t.duration||(t.duration=200),t.easing||(t.easing="ease-in-out");let o=n.at(0),s=n.at(-1);if(o&&s){let a=["composite","easing","offset"];for(let l of a)delete o[l],delete s[l]}t.direction?.includes("reverse")&&([o,s]=[s,o]),Object.assign(i.style,o),await i.animate(n,t).finished,Object.assign(i.style,s)}}get keyframes(){let e=[];for(let i of this.getAttributeNames()){let t=this.getAttribute(i),[,,n,...o]=i.split("-");if(i.startsWith("animation-keyframe-")){let s=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&s){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=e.find(l=>l.offset===r);a?a[s]=t:e.push({[s]:t,offset:r})}}}return e.sort((i,t)=>Number(i.offset)-Number(t.offset)),e}};var c=class extends f{constructor(){super()}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}async show(){this.getContent().showPopover(),await this.animateElement()}async hide(){await this.animateElement({options:{direction:"reverse"}}),this.getContent().hidePopover()}async toggle(){this.open?this.hide():this.show()}mount(){this.triggerListener(e=>{e.preventDefault(),this.toggle()}),this.getContent().addEventListener("toggle",e=>{e.newState==="open"?this.open=!0:this.open=!1}),this.safeListener("keydown",e=>{e.key==="Escape"&&this.open&&(e.preventDefault(),this.hide())})}};})();
1
+ "use strict";(()=>{var m=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let i=this.querySelector(this.getAttribute("content")??"[data-content]");if(i instanceof e)return i;throw new Error("Content not found")}swapContent(e=!0,i=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let n=Array.from(this.getContent().childNodes),s=[];t instanceof HTMLTemplateElement?(s.push(t.content.cloneNode(!0)),t.content.replaceChildren(...n)):(s.push(...t.childNodes),t.replaceChildren(...n)),this.getContent().replaceChildren(...s),e&&setTimeout(()=>this.swapContent(!1),i)}}safeListener(e,i,t=document.body,n={}){n.signal=this.#e.signal,t.addEventListener(e,i,n)}triggerListener(e,i=this.event){for(let t of this.getTrigger())t.addEventListener(i,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var f=class extends m{constructor(){super()}get animationOptions(){let e={};for(let i of this.getAttributeNames())if(i.startsWith("animation-option-")){let t=this.getAttribute(i),[,,n]=i.split("-");t&&(n==="duration"||n==="delay"?e[n]=Number(t):n==="easing"&&(e[n]=t))}return e}async animateElement(e={element:this.getContent(),options:{}}){let{element:i=this.getContent(),options:t={}}=e,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){t=Object.assign(this.animationOptions,t),t.duration||(t.duration=200),t.easing||(t.easing="ease-in-out");let s=n.at(0),o=n.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let l of a)delete s[l],delete o[l]}t.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(i.style,s),await i.animate(n,t).finished,Object.assign(i.style,o)}}get keyframes(){let e=[];for(let i of this.getAttributeNames()){let t=this.getAttribute(i),[,,n,...s]=i.split("-");if(i.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&o){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=e.find(l=>l.offset===r);a?a[o]=t:e.push({[o]:t,offset:r})}}}return e.sort((i,t)=>Number(i.offset)-Number(t.offset)),e}};var c=class extends f{constructor(){super()}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}async show(){this.getContent().showPopover(),await this.animateElement()}async hide(){await this.animateElement({options:{direction:"reverse"}}),this.getContent().hidePopover()}async toggle(){this.open?this.hide():this.show()}mount(){this.triggerListener(e=>{e.preventDefault(),this.toggle()}),this.getContent().addEventListener("toggle",e=>{e.newState==="open"?this.open=!0:this.open=!1}),this.safeListener("keydown",e=>{e.key==="Escape"&&this.open&&(e.preventDefault(),this.hide())})}};})();
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ "use strict";(()=>{var c=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(n){this.setAttribute("event",n)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(n=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof n)return t;throw new Error("Content not found")}swapContent(n=!0,t=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let s=Array.from(this.getContent().childNodes),i=[];e instanceof HTMLTemplateElement?(i.push(e.content.cloneNode(!0)),e.content.replaceChildren(...s)):(i.push(...e.childNodes),e.replaceChildren(...s)),this.getContent().replaceChildren(...i),n&&setTimeout(()=>this.swapContent(!1),t)}}safeListener(n,t,e=document.body,s={}){s.signal=this.#e.signal,e.addEventListener(n,t,s)}triggerListener(n,t=this.event){for(let e of this.getTrigger())e.addEventListener(t,n)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var u=class extends c{constructor(){super()}get#e(){return this.getAttribute("strategy")??"hover"}get#t(){return this.hasAttribute("prerender")}get#r(){return this.getAttribute("url")}appendTag(n){let{url:t,prerender:e}=n;if(t!==window.location.href){let s="speculationrules";if(!(r=>{if(document.querySelector(`link[href='${r}']`))return!0;let a=document.querySelectorAll(`script[type='${s}']`);for(let d of a)if(JSON.parse(d.textContent??"{}").prerender?.at(0)?.urls?.includes(r))return!0;return!1})(t))if(e&&HTMLScriptElement.supports&&HTMLScriptElement.supports(s)){let r=document.createElement("script");r.type=s,r.textContent=JSON.stringify({prerender:[{source:"list",urls:[t]}]}),document.head.append(r)}else{let r=document.createElement("link");r.rel="prefetch",r.as="document",r.href=t,document.head.append(r)}}}prefetch(n={anchors:this.getTrigger(),prerender:this.#t,strategy:this.#e}){let{anchors:t=this.getTrigger(),prerender:e=this.#t,strategy:s=this.#e}=n,i,r=(o=200)=>l=>{let{href:h}=l.currentTarget;i=setTimeout(()=>this.appendTag({url:h,prerender:e}),o)},a=()=>clearTimeout(i),d=new IntersectionObserver(o=>{for(let l of o)l.isIntersecting&&this.appendTag({url:l.target.href,prerender:e})});for(let o of t)s==="load"?this.appendTag({url:o.href,prerender:e}):s==="visible"?d.observe(o):(o.addEventListener("mouseover",r()),o.addEventListener("mouseout",a),o.addEventListener("focus",r()),o.addEventListener("focusout",a),o.addEventListener("touchstart",r(0)))}mount(){this.#r&&this.appendTag({url:this.#r,prerender:this.#t}),this.prefetch()}};customElements.define("drab-prefetch",u);})();
@@ -0,0 +1,2 @@
1
+ import { Prefetch } from "./index.js";
2
+ customElements.define("drab-prefetch", Prefetch);
@@ -0,0 +1,80 @@
1
+ import { Base } from "../base/index.js";
2
+ import type { Attributes } from "../types/index.js";
3
+ type Strategy = "hover" | "load" | "visible";
4
+ export type PrefetchAttributes = Attributes<Prefetch> & Partial<{
5
+ strategy: Strategy;
6
+ prerender: boolean;
7
+ }>;
8
+ /**
9
+ * The `Prefetch` element can prefetch a url, or enhance the `HTMLAnchorElement` by loading
10
+ * the HTML for a page before it is navigated to. This element speeds up the navigation for
11
+ * multi-page applications (MPAs).
12
+ *
13
+ * If you are using a framework that already has a prefetch feature or uses a client side router,
14
+ * it is best to use the framework's feature instead of this element to prefetching is working in
15
+ * accordance with the router.
16
+ *
17
+ * `strategy`
18
+ *
19
+ * Set the `strategy` attribute to specify the when the prefetch will take place.
20
+ *
21
+ * - `"hover"` - (default) After `mouseover`, `focus`, or `touchstart` for > 200ms
22
+ * - `"visible"` - Uses an intersection observer to prefetch when the anchor is within the viewport.
23
+ * - `"load"` - Immediately prefetches when the element is loaded, use carefully.
24
+ *
25
+ * `prerender`
26
+ *
27
+ * Use the `prerender` attribute to use the experimental Speculation Rules API when supported to
28
+ * prerender on the client. This allows you to run client side JavaScript in advance instead of
29
+ * only fetching the HTML.
30
+ *
31
+ * Browsers that do not support will still use `<link rel="prefetch">` instead.
32
+ *
33
+ * [Speculation Rules Reference](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API)
34
+ *
35
+ * `url`
36
+ *
37
+ * Add a `url` attribute to immediately prefetch a url without having to provide
38
+ * (or in addition to) `trigger` anchor elements.
39
+ */
40
+ export declare class Prefetch extends Base {
41
+ #private;
42
+ constructor();
43
+ /**
44
+ * Adds a `<link rel="prefetch">` or a `<script type="speculationrules">` to the
45
+ * head of the document.
46
+ *
47
+ * @param options Configuration options.
48
+ */
49
+ appendTag(options: {
50
+ /** `url` to prefetch. */
51
+ url: string;
52
+ /**
53
+ * Uses the experimental Speculation Rules API when supported
54
+ * to prerender on the client, defaults to `false`.
55
+ */
56
+ prerender?: boolean;
57
+ }): void;
58
+ /**
59
+ * Use to prefetch/prerender HTML.
60
+ *
61
+ * Can be used more than once with different options for different selectors.
62
+ *
63
+ * @param options Prefetch options.
64
+ */
65
+ prefetch(options?: {
66
+ /** The anchors to prefetch. Defaults to `trigger` elements. */
67
+ anchors?: NodeListOf<HTMLAnchorElement>;
68
+ /**
69
+ * Uses the experimental Speculation Rules API when supported
70
+ * to prerender on the client, defaults to `false`.
71
+ */
72
+ prerender?: boolean;
73
+ /**
74
+ * Determines when the prefetch takes place, defaults to `"hover"`.
75
+ */
76
+ strategy?: "hover" | "load" | "visible";
77
+ }): void;
78
+ mount(): void;
79
+ }
80
+ export {};
@@ -0,0 +1 @@
1
+ "use strict";(()=>{var c=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(n){this.setAttribute("event",n)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(n=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof n)return t;throw new Error("Content not found")}swapContent(n=!0,t=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let s=Array.from(this.getContent().childNodes),i=[];e instanceof HTMLTemplateElement?(i.push(e.content.cloneNode(!0)),e.content.replaceChildren(...s)):(i.push(...e.childNodes),e.replaceChildren(...s)),this.getContent().replaceChildren(...i),n&&setTimeout(()=>this.swapContent(!1),t)}}safeListener(n,t,e=document.body,s={}){s.signal=this.#e.signal,e.addEventListener(n,t,s)}triggerListener(n,t=this.event){for(let e of this.getTrigger())e.addEventListener(t,n)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var d=class extends c{constructor(){super()}get#e(){return this.getAttribute("strategy")??"hover"}get#t(){return this.hasAttribute("prerender")}get#r(){return this.getAttribute("url")}appendTag(n){let{url:t,prerender:e}=n;if(t!==window.location.href){let s="speculationrules";if(!(r=>{if(document.querySelector(`link[href='${r}']`))return!0;let a=document.querySelectorAll(`script[type='${s}']`);for(let u of a)if(JSON.parse(u.textContent??"{}").prerender?.at(0)?.urls?.includes(r))return!0;return!1})(t))if(e&&HTMLScriptElement.supports&&HTMLScriptElement.supports(s)){let r=document.createElement("script");r.type=s,r.textContent=JSON.stringify({prerender:[{source:"list",urls:[t]}]}),document.head.append(r)}else{let r=document.createElement("link");r.rel="prefetch",r.as="document",r.href=t,document.head.append(r)}}}prefetch(n={anchors:this.getTrigger(),prerender:this.#t,strategy:this.#e}){let{anchors:t=this.getTrigger(),prerender:e=this.#t,strategy:s=this.#e}=n,i,r=(o=200)=>l=>{let{href:h}=l.currentTarget;i=setTimeout(()=>this.appendTag({url:h,prerender:e}),o)},a=()=>clearTimeout(i),u=new IntersectionObserver(o=>{for(let l of o)l.isIntersecting&&this.appendTag({url:l.target.href,prerender:e})});for(let o of t)s==="load"?this.appendTag({url:o.href,prerender:e}):s==="visible"?u.observe(o):(o.addEventListener("mouseover",r()),o.addEventListener("mouseout",a),o.addEventListener("focus",r()),o.addEventListener("focusout",a),o.addEventListener("touchstart",r(0)))}mount(){this.#r&&this.appendTag({url:this.#r,prerender:this.#t}),this.prefetch()}};})();
@@ -0,0 +1,164 @@
1
+ import { Base } from "../base/index.js";
2
+ /**
3
+ * The `Prefetch` element can prefetch a url, or enhance the `HTMLAnchorElement` by loading
4
+ * the HTML for a page before it is navigated to. This element speeds up the navigation for
5
+ * multi-page applications (MPAs).
6
+ *
7
+ * If you are using a framework that already has a prefetch feature or uses a client side router,
8
+ * it is best to use the framework's feature instead of this element to prefetching is working in
9
+ * accordance with the router.
10
+ *
11
+ * `strategy`
12
+ *
13
+ * Set the `strategy` attribute to specify the when the prefetch will take place.
14
+ *
15
+ * - `"hover"` - (default) After `mouseover`, `focus`, or `touchstart` for > 200ms
16
+ * - `"visible"` - Uses an intersection observer to prefetch when the anchor is within the viewport.
17
+ * - `"load"` - Immediately prefetches when the element is loaded, use carefully.
18
+ *
19
+ * `prerender`
20
+ *
21
+ * Use the `prerender` attribute to use the experimental Speculation Rules API when supported to
22
+ * prerender on the client. This allows you to run client side JavaScript in advance instead of
23
+ * only fetching the HTML.
24
+ *
25
+ * Browsers that do not support will still use `<link rel="prefetch">` instead.
26
+ *
27
+ * [Speculation Rules Reference](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API)
28
+ *
29
+ * `url`
30
+ *
31
+ * Add a `url` attribute to immediately prefetch a url without having to provide
32
+ * (or in addition to) `trigger` anchor elements.
33
+ */
34
+ export class Prefetch extends Base {
35
+ constructor() {
36
+ super();
37
+ }
38
+ /** When to prefetch the url. */
39
+ get #strategy() {
40
+ return (this.getAttribute("strategy") ?? "hover");
41
+ }
42
+ /** Use the speculation rules API. */
43
+ get #prerender() {
44
+ return this.hasAttribute("prerender");
45
+ }
46
+ /** `url` to append to the head on `mount`. */
47
+ get #url() {
48
+ return this.getAttribute("url");
49
+ }
50
+ /**
51
+ * Adds a `<link rel="prefetch">` or a `<script type="speculationrules">` to the
52
+ * head of the document.
53
+ *
54
+ * @param options Configuration options.
55
+ */
56
+ appendTag(options) {
57
+ const { url, prerender } = options;
58
+ // if not the current page
59
+ if (!(url === window.location.href)) {
60
+ // minifies
61
+ const speculationrules = "speculationrules";
62
+ /** If the tag for this `url` already been added to the head. */
63
+ const alreadyAdded = (url) => {
64
+ // is there a link?
65
+ if (document.querySelector(`link[href='${url}']`)) {
66
+ return true;
67
+ }
68
+ // is there a speculationrules script?
69
+ const existing = document.querySelectorAll(`script[type='${speculationrules}']`);
70
+ for (const s of existing) {
71
+ const rules = JSON.parse(s.textContent ?? "{}");
72
+ if (rules.prerender?.at(0)?.urls?.includes(url)) {
73
+ return true;
74
+ }
75
+ }
76
+ return false;
77
+ };
78
+ if (!alreadyAdded(url)) {
79
+ if (prerender &&
80
+ HTMLScriptElement.supports &&
81
+ HTMLScriptElement.supports(speculationrules)) {
82
+ const script = document.createElement("script");
83
+ script.type = speculationrules;
84
+ script.textContent = JSON.stringify({
85
+ prerender: [
86
+ {
87
+ source: "list",
88
+ urls: [url],
89
+ },
90
+ ],
91
+ });
92
+ document.head.append(script);
93
+ }
94
+ else {
95
+ // prerender off/not supported, and it isn't already there
96
+ const link = document.createElement("link");
97
+ link.rel = "prefetch";
98
+ link.as = "document";
99
+ link.href = url;
100
+ document.head.append(link);
101
+ }
102
+ }
103
+ }
104
+ }
105
+ /**
106
+ * Use to prefetch/prerender HTML.
107
+ *
108
+ * Can be used more than once with different options for different selectors.
109
+ *
110
+ * @param options Prefetch options.
111
+ */
112
+ prefetch(options = {
113
+ anchors: this.getTrigger(),
114
+ prerender: this.#prerender,
115
+ strategy: this.#strategy,
116
+ }) {
117
+ // defaults if partially defined
118
+ const { anchors = this.getTrigger(), prerender = this.#prerender, strategy = this.#strategy, } = options;
119
+ let prefetchTimer;
120
+ /**
121
+ * @param delay ms delay - for `hover`
122
+ * @returns the event listener with delay
123
+ */
124
+ const listener = (delay = 200) => (e) => {
125
+ const { href } = e.currentTarget;
126
+ prefetchTimer = setTimeout(() => this.appendTag({ url: href, prerender }), delay);
127
+ };
128
+ const reset = () => clearTimeout(prefetchTimer);
129
+ const observer = new IntersectionObserver((entries) => {
130
+ for (const e of entries) {
131
+ if (e.isIntersecting) {
132
+ this.appendTag({
133
+ url: e.target.href,
134
+ prerender,
135
+ });
136
+ }
137
+ }
138
+ });
139
+ for (const anchor of anchors) {
140
+ if (strategy === "load") {
141
+ this.appendTag({ url: anchor.href, prerender });
142
+ }
143
+ else if (strategy === "visible") {
144
+ observer.observe(anchor);
145
+ }
146
+ else {
147
+ // "hover" - default
148
+ anchor.addEventListener("mouseover", listener());
149
+ anchor.addEventListener("mouseout", reset);
150
+ anchor.addEventListener("focus", listener());
151
+ anchor.addEventListener("focusout", reset);
152
+ anchor.addEventListener("touchstart", listener(0));
153
+ }
154
+ }
155
+ }
156
+ mount() {
157
+ // immediately prefetch the `url` attribute if it exists
158
+ if (this.#url) {
159
+ this.appendTag({ url: this.#url, prerender: this.#prerender });
160
+ }
161
+ // prefetch the `trigger` elements
162
+ this.prefetch();
163
+ }
164
+ }
@@ -1 +1 @@
1
- "use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var i=class extends s{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(e){this.setAttribute("value",e)}async copy(e=this.value){await navigator.clipboard.writeText(e),this.swapContent()}};var o=class extends i{constructor(){super()}async share(e=this.value){if(navigator.canShare&&navigator.canShare({url:e}))try{await navigator.share({url:e})}catch(t){t?.name!=="AbortError"&&console.error(t)}else this.copy()}mount(){this.triggerListener(async()=>await this.share())}};customElements.define("drab-share",o);})();
1
+ "use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes),a=[];n instanceof HTMLTemplateElement?(a.push(n.content.cloneNode(!0)),n.content.replaceChildren(...r)):(a.push(...n.childNodes),n.replaceChildren(...r)),this.getContent().replaceChildren(...a),e&&setTimeout(()=>this.swapContent(!1),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var o=class extends s{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(e){this.setAttribute("value",e)}async copy(e=this.value){await navigator.clipboard.writeText(e),this.swapContent()}};var i=class extends o{constructor(){super()}async share(e=this.value){if(navigator.canShare&&navigator.canShare({url:e}))try{await navigator.share({url:e})}catch(t){t?.name!=="AbortError"&&console.error(t)}else this.copy()}mount(){this.triggerListener(async()=>await this.share())}};customElements.define("drab-share",i);})();
@@ -1 +1 @@
1
- "use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var i=class extends s{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(e){this.setAttribute("value",e)}async copy(e=this.value){await navigator.clipboard.writeText(e),this.swapContent()}};var a=class extends i{constructor(){super()}async share(e=this.value){if(navigator.canShare&&navigator.canShare({url:e}))try{await navigator.share({url:e})}catch(t){t?.name!=="AbortError"&&console.error(t)}else this.copy()}mount(){this.triggerListener(async()=>await this.share())}};})();
1
+ "use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes),i=[];n instanceof HTMLTemplateElement?(i.push(n.content.cloneNode(!0)),n.content.replaceChildren(...r)):(i.push(...n.childNodes),n.replaceChildren(...r)),this.getContent().replaceChildren(...i),e&&setTimeout(()=>this.swapContent(!1),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var o=class extends s{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(e){this.setAttribute("value",e)}async copy(e=this.value){await navigator.clipboard.writeText(e),this.swapContent()}};var c=class extends o{constructor(){super()}async share(e=this.value){if(navigator.canShare&&navigator.canShare({url:e}))try{await navigator.share({url:e})}catch(t){t?.name!=="AbortError"&&console.error(t)}else this.copy()}mount(){this.triggerListener(async()=>await this.share())}};})();
@@ -1 +1 @@
1
- "use strict";(()=>{var n=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let i=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(i){let s=Array.from(this.getContent().childNodes);i instanceof HTMLTemplateElement?this.getContent().replaceChildren(i.content.cloneNode(!0)):this.getContent().replaceChildren(...i.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...s),e)}}safeListener(t,e,i=document.body,s={}){s.signal=this.#t.signal,i.addEventListener(t,e,s)}triggerListener(t,e=this.event){for(let i of this.getTrigger())i.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var o=class extends n{constructor(){super()}#t(t){let e="data-asc",i="data-desc";for(let s of this.getTrigger())s!==t&&(s.removeAttribute(e),s.removeAttribute(i));return t.hasAttribute(e)?(t.removeAttribute(e),t.setAttribute(i,""),!1):(t.removeAttribute(i),t.setAttribute(e,""),!0)}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(d(e,this.#t(e))).forEach(i=>t.appendChild(i))})}},d=(r,t)=>(i,s)=>{let c=Array.from(r.parentNode?.children??[]).indexOf(r);return((a,h)=>{let m=r.dataset.type??"string";if(m==="string")return new Intl.Collator().compare(a,h);if(m==="boolean"){let l=p=>["0","false","null","undefined"].includes(p)?!1:!!p;return l(a)===l(h)?0:l(a)?-1:1}else return Number(a)-Number(h)})(f(t?i:s,c),f(t?s:i,c))},f=(r,t)=>{let e=r.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};customElements.define("drab-tablesort",o);})();
1
+ "use strict";(()=>{var i=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let s=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(s){let r=Array.from(this.getContent().childNodes),o=[];s instanceof HTMLTemplateElement?(o.push(s.content.cloneNode(!0)),s.content.replaceChildren(...r)):(o.push(...s.childNodes),s.replaceChildren(...r)),this.getContent().replaceChildren(...o),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,s=document.body,r={}){r.signal=this.#t.signal,s.addEventListener(t,e,r)}triggerListener(t,e=this.event){for(let s of this.getTrigger())s.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var a=class extends i{constructor(){super()}#t(t){let e="data-asc",s="data-desc";for(let r of this.getTrigger())r!==t&&(r.removeAttribute(e),r.removeAttribute(s));return t.hasAttribute(e)?(t.removeAttribute(e),t.setAttribute(s,""),!1):(t.removeAttribute(s),t.setAttribute(e,""),!0)}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(g(e,this.#t(e))).forEach(s=>t.appendChild(s))})}},g=(n,t)=>(s,r)=>{let o=Array.from(n.parentNode?.children??[]).indexOf(n);return((l,h)=>{let p=n.dataset.type??"string";if(p==="string")return new Intl.Collator().compare(l,h);if(p==="boolean"){let u=m=>["0","false","null","undefined"].includes(m)?!1:!!m;return u(l)===u(h)?0:u(l)?-1:1}else return Number(l)-Number(h)})(f(t?s:r,o),f(t?r:s,o))},f=(n,t)=>{let e=n.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};customElements.define("drab-tablesort",a);})();
@@ -1 +1 @@
1
- "use strict";(()=>{var n=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let i=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(i){let s=Array.from(this.getContent().childNodes);i instanceof HTMLTemplateElement?this.getContent().replaceChildren(i.content.cloneNode(!0)):this.getContent().replaceChildren(...i.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...s),e)}}safeListener(t,e,i=document.body,s={}){s.signal=this.#t.signal,i.addEventListener(t,e,s)}triggerListener(t,e=this.event){for(let i of this.getTrigger())i.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var h=class extends n{constructor(){super()}#t(t){let e="data-asc",i="data-desc";for(let s of this.getTrigger())s!==t&&(s.removeAttribute(e),s.removeAttribute(i));return t.hasAttribute(e)?(t.removeAttribute(e),t.setAttribute(i,""),!1):(t.removeAttribute(i),t.setAttribute(e,""),!0)}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(d(e,this.#t(e))).forEach(i=>t.appendChild(i))})}},d=(r,t)=>(i,s)=>{let c=Array.from(r.parentNode?.children??[]).indexOf(r);return((o,u)=>{let m=r.dataset.type??"string";if(m==="string")return new Intl.Collator().compare(o,u);if(m==="boolean"){let a=p=>["0","false","null","undefined"].includes(p)?!1:!!p;return a(o)===a(u)?0:a(o)?-1:1}else return Number(o)-Number(u)})(f(t?i:s,c),f(t?s:i,c))},f=(r,t)=>{let e=r.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};})();
1
+ "use strict";(()=>{var i=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let s=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(s){let r=Array.from(this.getContent().childNodes),o=[];s instanceof HTMLTemplateElement?(o.push(s.content.cloneNode(!0)),s.content.replaceChildren(...r)):(o.push(...s.childNodes),s.replaceChildren(...r)),this.getContent().replaceChildren(...o),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,s=document.body,r={}){r.signal=this.#t.signal,s.addEventListener(t,e,r)}triggerListener(t,e=this.event){for(let s of this.getTrigger())s.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var h=class extends i{constructor(){super()}#t(t){let e="data-asc",s="data-desc";for(let r of this.getTrigger())r!==t&&(r.removeAttribute(e),r.removeAttribute(s));return t.hasAttribute(e)?(t.removeAttribute(e),t.setAttribute(s,""),!1):(t.removeAttribute(s),t.setAttribute(e,""),!0)}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(g(e,this.#t(e))).forEach(s=>t.appendChild(s))})}},g=(n,t)=>(s,r)=>{let o=Array.from(n.parentNode?.children??[]).indexOf(n);return((a,c)=>{let p=n.dataset.type??"string";if(p==="string")return new Intl.Collator().compare(a,c);if(p==="boolean"){let l=m=>["0","false","null","undefined"].includes(m)?!1:!!m;return l(a)===l(c)?0:l(a)?-1:1}else return Number(a)-Number(c)})(f(t?s:r,o),f(t?r:s,o))},f=(n,t)=>{let e=n.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};})();
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ "use strict";(()=>{var i=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof e)return n;throw new Error("Content not found")}swapContent(e=!0,n=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let s=Array.from(this.getContent().childNodes),o=[];t instanceof HTMLTemplateElement?(o.push(t.content.cloneNode(!0)),t.content.replaceChildren(...s)):(o.push(...t.childNodes),t.replaceChildren(...s)),this.getContent().replaceChildren(...o),e&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(e,n,t=document.body,s={}){s.signal=this.#e.signal,t.addEventListener(e,n,s)}triggerListener(e,n=this.event){for(let t of this.getTrigger())t.addEventListener(n,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var r=class extends i{wakeLock=null;constructor(){super()}#e(){return"wakeLock"in navigator}get#t(){return this.hasAttribute("auto-lock")}async request(){this.#e()&&document.visibilityState==="visible"&&(this.wakeLock=await navigator.wakeLock.request("screen"),this.setAttribute("locked",""),this.swapContent(!1),this.wakeLock.addEventListener("release",()=>{this.removeAttribute("locked"),this.swapContent(!1),this.#t||(this.wakeLock=null)}))}async release(){await this.wakeLock?.release(),this.wakeLock=null}mount(){this.hasAttribute("locked")&&this.request(),this.triggerListener(()=>{this.wakeLock?this.release():this.request()});for(let e of this.getTrigger())!this.#e()&&"disabled"in e&&(e.disabled=!0);this.#t&&this.safeListener("visibilitychange",()=>{this.wakeLock&&this.request()},document)}destroy(){this.release()}};customElements.define("drab-wakelock",r);})();
@@ -0,0 +1,2 @@
1
+ import { WakeLock } from "./index.js";
2
+ customElements.define("drab-wakelock", WakeLock);
@@ -0,0 +1,32 @@
1
+ import { Base } from "../base/index.js";
2
+ import type { Attributes } from "../types/index.js";
3
+ export type WakeLockAttributes = Attributes<WakeLock> & Partial<{
4
+ "auto-lock": boolean;
5
+ locked: boolean;
6
+ }>;
7
+ /**
8
+ * `WakeLock` uses the [WakeLock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) to ensure the screen does not turn off when viewing the page on supported devices. Use your best judgement for when this is necessary, for example, if you have a timer that needs to stay on, or you are displaying a QR code.
9
+ *
10
+ * - WakeLock can be toggled with a `trigger`, or will be requested if the element has a `locked` attribute when connected.
11
+ * - Use `content` and `swap` elements to adjust the UI based on the current state.
12
+ * - `request` and `release` methods are provided to set the WakeLock with JavaScript.
13
+ * - `trigger` is disabled if not supported.
14
+ * - WakeLock is released when the element is removed from the DOM.
15
+ *
16
+ * `auto-lock`
17
+ *
18
+ * - By default, the WakeLock will be released when the tab is not active. Use the `auto-lock` attribute to automatically request the WakeLock when the user views the tab again.
19
+ *
20
+ *
21
+ */
22
+ export declare class WakeLock extends Base {
23
+ #private;
24
+ wakeLock: WakeLockSentinel | null;
25
+ constructor();
26
+ /** Requests WakeLock on the current page. */
27
+ request(): Promise<void>;
28
+ /** Releases the WakeLock, sets `this.wakeLock` to null. */
29
+ release(): Promise<void>;
30
+ mount(): void;
31
+ destroy(): void;
32
+ }
@@ -0,0 +1 @@
1
+ "use strict";(()=>{var i=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof e)return n;throw new Error("Content not found")}swapContent(e=!0,n=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let s=Array.from(this.getContent().childNodes),r=[];t instanceof HTMLTemplateElement?(r.push(t.content.cloneNode(!0)),t.content.replaceChildren(...s)):(r.push(...t.childNodes),t.replaceChildren(...s)),this.getContent().replaceChildren(...r),e&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(e,n,t=document.body,s={}){s.signal=this.#e.signal,t.addEventListener(e,n,s)}triggerListener(e,n=this.event){for(let t of this.getTrigger())t.addEventListener(n,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var o=class extends i{wakeLock=null;constructor(){super()}#e(){return"wakeLock"in navigator}get#t(){return this.hasAttribute("auto-lock")}async request(){this.#e()&&document.visibilityState==="visible"&&(this.wakeLock=await navigator.wakeLock.request("screen"),this.setAttribute("locked",""),this.swapContent(!1),this.wakeLock.addEventListener("release",()=>{this.removeAttribute("locked"),this.swapContent(!1),this.#t||(this.wakeLock=null)}))}async release(){await this.wakeLock?.release(),this.wakeLock=null}mount(){this.hasAttribute("locked")&&this.request(),this.triggerListener(()=>{this.wakeLock?this.release():this.request()});for(let e of this.getTrigger())!this.#e()&&"disabled"in e&&(e.disabled=!0);this.#t&&this.safeListener("visibilitychange",()=>{this.wakeLock&&this.request()},document)}destroy(){this.release()}};})();