drab 5.3.1 → 5.3.3
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.
- package/define.iife.js +9 -9
- package/dialog/define.iife.js +1 -1
- package/dialog/index.d.ts +8 -1
- package/dialog/index.iife.js +1 -1
- package/dialog/index.js +17 -0
- package/index.iife.js +9 -9
- package/package.json +1 -1
- package/prefetch/define.iife.js +1 -1
- package/prefetch/index.d.ts +11 -20
- package/prefetch/index.iife.js +1 -1
- package/prefetch/index.js +17 -45
package/define.iife.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";(()=>{var W=Object.defineProperty;var
|
|
2
|
-
`)}}async#h(t,e,s){let i=0,
|
|
3
|
-
`),e=0;for(let s=0;s<t.length;s++){let i=t.at(s)?.length??0;if(e++,e+=i,e>this.#
|
|
4
|
-
`)}mount(){this.textArea.addEventListener("keydown",async t=>{let e=["ArrowUp","ArrowDown","Delete"],s=this.text[this.#
|
|
5
|
-
`&&this.#i===this.#
|
|
6
|
-
${u}`});else if(u&&l.length===
|
|
7
|
-
`})},0)}}else{let i=Object.values(this.keyPairs).includes(s),
|
|
8
|
-
`}${
|
|
9
|
-
`),setTimeout(()=>{this.#r(l,l)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let
|
|
1
|
+
"use strict";(()=>{var W=Object.defineProperty;var I=(o,t)=>{for(var e in t)W(o,e,{get:t[e],enumerable:!0})};var H={};I(H,{Animate:()=>p,Base:()=>c,Breakpoint:()=>d,ContextMenu:()=>g,Copy:()=>b,Details:()=>y,Dialog:()=>A,Editor:()=>x,Fullscreen:()=>v,Intersect:()=>w,Popover:()=>E,Prefetch:()=>T,Share:()=>L,TableSort:()=>C,WakeLock:()=>M,YouTube:()=>S});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),r=[];s instanceof HTMLTemplateElement?(r.push(s.content.cloneNode(!0)),s.content.replaceChildren(...i)):(r.push(...s.childNodes),s.replaceChildren(...i)),this.getContent().replaceChildren(...r),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,s){for(let i of this.getTrigger())i.addEventListener(e,t,s)}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 r=i.at(0),n=i.at(-1);if(r&&n){let u=["composite","easing","offset"];for(let l of u)delete r[l],delete n[l]}s.direction?.includes("reverse")&&([r,n]=[n,r]),Object.assign(e.style,r),await e.animate(i,s).finished,Object.assign(e.style,n)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let s=this.getAttribute(e),[,,i,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let n=r.map((a,u)=>u<1?a:a.at(0)?.toUpperCase()+a.slice(1)).join("");if(i&&n){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let a=Number(i),u=t.find(l=>l.offset===a);u?u[n]=s:t.push({[n]:s,offset:a})}}}return t.sort((e,s)=>Number(e.offset)-Number(s.offset)),t}};var d=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 g=class extends p{#t;constructor(){super()}set#s(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,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,n=i+s,a=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let u=this.getContent().offsetWidth+24,l=this.getContent().offsetHeight+6,h=window.innerWidth,m=window.innerHeight;n+u>s+h&&(n=s+h-u),a+l>e+m&&(a=e+m-l),this.#s={x:n,y:a},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",{passive:!0});let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend",{passive:!0}),this.triggerListener(t,"touchcancel",{passive:!0}),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 b=class extends f{constructor(){super()}mount(){this.triggerListener(async()=>await this.copy())}};var y=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 A=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())}),this.hasAttribute("click-outside-close")&&this.dialog.addEventListener("click",t=>{let e=this.dialog.getBoundingClientRect();(t.clientX<e.left||t.clientX>e.right||t.clientY<e.top||t.clientY>e.bottom)&&this.close()})}};var x=class extends c{#t=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#s)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#s(){let t=[];for(let e of this.getTrigger())t.push(this.#l(e));return t}get#n(){let t=this.text.split("```"),e=0;for(let[s,i]of t.entries())if(e+=i.length+3,this.#i<e)return s;return 0}get#e(){return this.textArea.selectionEnd}get#i(){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=B(this.text,t.value,e),this.text=B(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:r}=this.#a(),n=t.value.at(0);n&&i[r]?.startsWith(n)?i[r]=t.value.trim()+i[r]:i[r]=t.value+i[r],this.text=i.join(`
|
|
2
|
+
`)}}async#h(t,e,s){let i=0,r=0;if(/[a-z]/i.test(t)){for(let n=s;n<this.text.length;n++)if(this.text[n]?.match(/[a-z]/i))i?r=n+1:i=n;else if(i)break}else i=e+t.length,r=s+t.length;this.#r(i,r),this.textArea.focus()}async#o(t){let e=this.#e,s=this.#i;await this.#c(t,s,e),this.#h(t.value,s,e)}#p(t){if(t){let e=[];this.#s.forEach(i=>{i.type==="block"&&e.push(i.value)});for(let i=0;i<e.length;i++){let r=e[i];if(r&&t.startsWith(r))return r}let s=P(t);if(s)return`${s}. `}return""}#a(){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.#a();for(let i=t+1;i<s.length;i++){let r=s[i];if(r){let n=P(r);if(n){let a;if(e)if(n>1)a=n-1;else break;else a=n+1;s[i]=r.slice(String(n).length),s[i]=String(a)+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.#i-1];if(i&&i in this.keyPairs&&s===this.keyPairs[i]){t.preventDefault();let r=this.#i-1,n=this.#e-1;this.text=k(this.text,r),this.text=k(this.text,n),setTimeout(()=>{this.#r(r,n)},0),this.#t.pop()}if(i===`
|
|
5
|
+
`&&this.#i===this.#e){t.preventDefault();let r=this.#i-1,{lineNumber:n}=this.#a();this.#u(n,!0),this.text=k(this.text,r),setTimeout(async()=>{this.#r(r,r)},0)}}else if(t.key==="Tab")this.#n%2!==0&&(t.preventDefault(),await this.#o({type:"inline",value:" "}));else if(t.key==="Enter"){let{lines:i,lineNumber:r,columnNumber:n}=this.#a(),a=i.at(r),u=this.#p(a),l=u,h=P(u);if(h&&(u=`${h+1}. `),u&&l.length<n)t.preventDefault(),h&&this.#u(r),await this.#o({type:"inline",value:`
|
|
6
|
+
${u}`});else if(u&&l.length===n){t.preventDefault();let m=this.#e,N=m-l.length;for(let D=0;D<l.length;D++)this.text=k(this.text,m-(D+1));setTimeout(async()=>{this.#r(N,N),this.textArea.focus(),await this.#o({type:"inline",value:`
|
|
7
|
+
`})},0)}}else{let i=Object.values(this.keyPairs).includes(s),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:a,columnNumber:u}=this.#a();if(await navigator.clipboard.writeText(`${a===0&&t.key==="x"?"":`
|
|
8
|
+
`}${n[a]}`),t.key==="x"){let l=this.#i-u;n.splice(a,1),this.text=n.join(`
|
|
9
|
+
`),setTimeout(()=>{this.#r(l,l)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let n=this.#s.find(a=>a.key===t.key);n&&this.#o(n)}else i&&(s===t.key||t.key==="ArrowRight")&&this.#t.length&&!r?(t.preventDefault(),this.#r(this.#i+1,this.#e+1),this.#t.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#o({type:"wrap",value:t.key}),this.#t.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#i!==this.#e&&(this.text[this.#i]===" "&&this.#r(this.#i+1,this.#e),this.text[this.#e-1]===" "&&this.#r(this.#i,this.#e-1))}),this.textArea.addEventListener("click",()=>this.#t=[]);for(let t of this.getTrigger())t.addEventListener(this.event,()=>{this.#o(this.#l(t))})}},P=o=>{let t=o.match(/^(\d+)\./);return t?Number(t[1]):null},B=(o,t,e)=>o.slice(0,e)+t+o.slice(e),k=(o,t)=>o.slice(0,t)+o.slice(t+1);var v=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 w=class extends c{#t=[];#s=[];constructor(){super()}get#n(){return Number(this.getAttribute("threshold")??0)}onIntersect(t){this.#t.push(t)}onExit(t){this.#s.push(t)}mount(){let t=new IntersectionObserver(e=>{let s="data-intersect";for(let i of e)if(i.isIntersecting){this.getContent().setAttribute(s,"");for(let r of this.#t)r()}else{this.getContent().removeAttribute(s);for(let r of this.#s)r()}},{threshold:this.#n});for(let e of this.getTrigger())t.observe(e)}};var E=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 T=class extends c{#t=[];constructor(){super()}get#s(){return this.getAttribute("strategy")??"hover"}get#n(){return this.hasAttribute("prerender")}get#e(){return this.getAttribute("url")}appendTag(t){let{url:e,prerender:s}=t;if(e!==window.location.href){let i="speculationrules";if(!this.#t.includes(e)){if(HTMLScriptElement.supports&&HTMLScriptElement.supports(i)){let r=document.createElement("script");r.type=i,r.textContent=JSON.stringify({[s?"prerender":"prefetch"]:[{source:"list",urls:[e]}]}),document.head.append(r)}else fetch(e,{priority:"low"}).catch(r=>console.error(r));this.#t.push(e)}}}prefetch(t={anchors:this.getTrigger(),prerender:this.#n,strategy:this.#s}){let{anchors:e=this.getTrigger(),prerender:s=this.#n,strategy:i=this.#s}=t,r,n=(l=200)=>h=>{let{href:m}=h.currentTarget;r=setTimeout(()=>this.appendTag({url:m,prerender:s}),l)},a=()=>clearTimeout(r),u=new IntersectionObserver(l=>{for(let h of l)h.isIntersecting&&this.appendTag({url:h.target.href,prerender:s})});for(let l of e)i==="load"?this.appendTag({url:l.href,prerender:s}):i==="visible"?u.observe(l):(l.addEventListener("mouseover",n()),l.addEventListener("mouseout",a),l.addEventListener("focus",n()),l.addEventListener("focusout",a),l.addEventListener("touchstart",n(0),{passive:!0}))}mount(){this.#e&&this.appendTag({url:this.#e,prerender:this.#n}),this.prefetch()}};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 C=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(K(e,this.#t(e))).forEach(s=>t.appendChild(s))})}},K=(o,t)=>(s,i)=>{let r=Array.from(o.parentNode?.children??[]).indexOf(o);return((a,u)=>{let l=o.dataset.type??"string";if(l==="string")return new Intl.Collator().compare(a,u);if(l==="boolean"){let h=m=>["0","false","null","undefined"].includes(m)?!1:!!m;return h(a)===h(u)?0:h(a)?-1:1}else return Number(a)-Number(u)})(j(t?s:i,r),j(t?i:s,r))},j=(o,t)=>{let e=o.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};var M=class extends c{wakeLock=null;constructor(){super()}#t(){return"wakeLock"in navigator}get#s(){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.#s||(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.#s&&this.safeListener("visibilitychange",()=>{this.wakeLock&&this.request()},document)}destroy(){this.release()}};var S=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":""}`})}};for(let o in H)customElements.define(`drab-${o.toLowerCase()}`,H[o]);})();
|
package/dialog/define.iife.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var
|
|
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 n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof t)return n;throw new Error("Content not found")}swapContent(t=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let i=Array.from(this.getContent().childNodes),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...i)):(s.push(...e.childNodes),e.replaceChildren(...i)),this.getContent().replaceChildren(...s),t&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(t,n,e=document.body,i={}){i.signal=this.#t.signal,e.addEventListener(t,n,i)}triggerListener(t,n=this.event,e){for(let i of this.getTrigger())i.addEventListener(n,t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var m=class extends c{constructor(){super()}get animationOptions(){let t={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,i]=n.split("-");e&&(i==="duration"||i==="delay"?t[i]=Number(e):i==="easing"&&(t[i]=e))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=t,i=this.keyframes;if(i.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let s=i.at(0),o=i.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let l of a)delete s[l],delete o[l]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(i,e).finished,Object.assign(n.style,o)}}get keyframes(){let t=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,i,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(i&&o){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let r=Number(i),a=t.find(l=>l.offset===r);a?a[o]=e:t.push({[o]:e,offset:r})}}}return t.sort((n,e)=>Number(n.offset)-Number(e.offset)),t}};var f=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())}),this.hasAttribute("click-outside-close")&&this.dialog.addEventListener("click",t=>{let n=this.dialog.getBoundingClientRect();(t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom)&&this.close()})}};customElements.define("drab-dialog",f);})();
|
package/dialog/index.d.ts
CHANGED
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import { Animate, type AnimateAttributes } from "../animate/index.js";
|
|
2
2
|
import type { Attributes } from "../types/index.js";
|
|
3
|
-
export type DialogAttributes = Attributes<Dialog> & AnimateAttributes
|
|
3
|
+
export type DialogAttributes = Attributes<Dialog> & AnimateAttributes & Partial<{
|
|
4
|
+
"click-outside-close": boolean;
|
|
5
|
+
}>;
|
|
4
6
|
/**
|
|
5
7
|
* Provides triggers and animations for the `HTMLDialogElement`.
|
|
8
|
+
*
|
|
9
|
+
* `click-outside-close`
|
|
10
|
+
*
|
|
11
|
+
* By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
|
|
12
|
+
* Add a `click-outside-close` attribute to close when the user clicks outside.
|
|
6
13
|
*/
|
|
7
14
|
export declare class Dialog extends Animate {
|
|
8
15
|
constructor();
|
package/dialog/index.iife.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var
|
|
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 n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof t)return n;throw new Error("Content not found")}swapContent(t=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let i=Array.from(this.getContent().childNodes),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...i)):(s.push(...e.childNodes),e.replaceChildren(...i)),this.getContent().replaceChildren(...s),t&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(t,n,e=document.body,i={}){i.signal=this.#t.signal,e.addEventListener(t,n,i)}triggerListener(t,n=this.event,e){for(let i of this.getTrigger())i.addEventListener(n,t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var m=class extends c{constructor(){super()}get animationOptions(){let t={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,i]=n.split("-");e&&(i==="duration"||i==="delay"?t[i]=Number(e):i==="easing"&&(t[i]=e))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=t,i=this.keyframes;if(i.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let s=i.at(0),o=i.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let l of a)delete s[l],delete o[l]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(i,e).finished,Object.assign(n.style,o)}}get keyframes(){let t=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,i,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(i&&o){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let r=Number(i),a=t.find(l=>l.offset===r);a?a[o]=e:t.push({[o]:e,offset:r})}}}return t.sort((n,e)=>Number(n.offset)-Number(e.offset)),t}};var d=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())}),this.hasAttribute("click-outside-close")&&this.dialog.addEventListener("click",t=>{let n=this.dialog.getBoundingClientRect();(t.clientX<n.left||t.clientX>n.right||t.clientY<n.top||t.clientY>n.bottom)&&this.close()})}};})();
|
package/dialog/index.js
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { Animate } from "../animate/index.js";
|
|
2
2
|
/**
|
|
3
3
|
* Provides triggers and animations for the `HTMLDialogElement`.
|
|
4
|
+
*
|
|
5
|
+
* `click-outside-close`
|
|
6
|
+
*
|
|
7
|
+
* By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
|
|
8
|
+
* Add a `click-outside-close` attribute to close when the user clicks outside.
|
|
4
9
|
*/
|
|
5
10
|
export class Dialog extends Animate {
|
|
6
11
|
constructor() {
|
|
@@ -40,5 +45,17 @@ export class Dialog extends Animate {
|
|
|
40
45
|
this.close();
|
|
41
46
|
}
|
|
42
47
|
});
|
|
48
|
+
if (this.hasAttribute("click-outside-close")) {
|
|
49
|
+
// https://blog.webdevsimplified.com/2023-04/html-dialog/#close-on-outside-click
|
|
50
|
+
this.dialog.addEventListener("click", (e) => {
|
|
51
|
+
const rect = this.dialog.getBoundingClientRect();
|
|
52
|
+
if (e.clientX < rect.left ||
|
|
53
|
+
e.clientX > rect.right ||
|
|
54
|
+
e.clientY < rect.top ||
|
|
55
|
+
e.clientY > rect.bottom) {
|
|
56
|
+
this.close();
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
}
|
|
43
60
|
}
|
|
44
61
|
}
|
package/index.iife.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
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),
|
|
2
|
-
`)}}async#h(t,e,s){let i=0,
|
|
3
|
-
`),e=0;for(let s=0;s<t.length;s++){let i=t.at(s)?.length??0;if(e++,e+=i,e>this.#
|
|
4
|
-
`)}mount(){this.textArea.addEventListener("keydown",async t=>{let e=["ArrowUp","ArrowDown","Delete"],s=this.text[this.#
|
|
5
|
-
`&&this.#i===this.#
|
|
6
|
-
${u}`});else if(u&&
|
|
7
|
-
`})},0)}}else{let i=Object.values(this.keyPairs).includes(s),
|
|
8
|
-
`}${
|
|
9
|
-
`),setTimeout(()=>{this.#r(
|
|
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),r=[];s instanceof HTMLTemplateElement?(r.push(s.content.cloneNode(!0)),s.content.replaceChildren(...i)):(r.push(...s.childNodes),s.replaceChildren(...i)),this.getContent().replaceChildren(...r),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,s){for(let i of this.getTrigger())i.addEventListener(e,t,s)}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 r=i.at(0),n=i.at(-1);if(r&&n){let u=["composite","easing","offset"];for(let l of u)delete r[l],delete n[l]}s.direction?.includes("reverse")&&([r,n]=[n,r]),Object.assign(e.style,r),await e.animate(i,s).finished,Object.assign(e.style,n)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let s=this.getAttribute(e),[,,i,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let n=r.map((o,u)=>u<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(i&&n){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let o=Number(i),u=t.find(l=>l.offset===o);u?u[n]=s:t.push({[n]:s,offset:o})}}}return t.sort((e,s)=>Number(e.offset)-Number(s.offset)),t}};var y=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#s(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,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,n=i+s,o=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let u=this.getContent().offsetWidth+24,l=this.getContent().offsetHeight+6,h=window.innerWidth,m=window.innerHeight;n+u>s+h&&(n=s+h-u),o+l>e+m&&(o=e+m-l),this.#s={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",{passive:!0});let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend",{passive:!0}),this.triggerListener(t,"touchcancel",{passive:!0}),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())}),this.hasAttribute("click-outside-close")&&this.dialog.addEventListener("click",t=>{let e=this.dialog.getBoundingClientRect();(t.clientX<e.left||t.clientX>e.right||t.clientY<e.top||t.clientY>e.bottom)&&this.close()})}};var E=class extends c{#t=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#s)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#s(){let t=[];for(let e of this.getTrigger())t.push(this.#l(e));return t}get#n(){let t=this.text.split("```"),e=0;for(let[s,i]of t.entries())if(e+=i.length+3,this.#i<e)return s;return 0}get#e(){return this.textArea.selectionEnd}get#i(){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=P(this.text,t.value,e),this.text=P(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:r}=this.#a(),n=t.value.at(0);n&&i[r]?.startsWith(n)?i[r]=t.value.trim()+i[r]:i[r]=t.value+i[r],this.text=i.join(`
|
|
2
|
+
`)}}async#h(t,e,s){let i=0,r=0;if(/[a-z]/i.test(t)){for(let n=s;n<this.text.length;n++)if(this.text[n]?.match(/[a-z]/i))i?r=n+1:i=n;else if(i)break}else i=e+t.length,r=s+t.length;this.#r(i,r),this.textArea.focus()}async#o(t){let e=this.#e,s=this.#i;await this.#c(t,s,e),this.#h(t.value,s,e)}#p(t){if(t){let e=[];this.#s.forEach(i=>{i.type==="block"&&e.push(i.value)});for(let i=0;i<e.length;i++){let r=e[i];if(r&&t.startsWith(r))return r}let s=w(t);if(s)return`${s}. `}return""}#a(){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.#a();for(let i=t+1;i<s.length;i++){let r=s[i];if(r){let n=w(r);if(n){let o;if(e)if(n>1)o=n-1;else break;else o=n+1;s[i]=r.slice(String(n).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.#i-1];if(i&&i in this.keyPairs&&s===this.keyPairs[i]){t.preventDefault();let r=this.#i-1,n=this.#e-1;this.text=d(this.text,r),this.text=d(this.text,n),setTimeout(()=>{this.#r(r,n)},0),this.#t.pop()}if(i===`
|
|
5
|
+
`&&this.#i===this.#e){t.preventDefault();let r=this.#i-1,{lineNumber:n}=this.#a();this.#u(n,!0),this.text=d(this.text,r),setTimeout(async()=>{this.#r(r,r)},0)}}else if(t.key==="Tab")this.#n%2!==0&&(t.preventDefault(),await this.#o({type:"inline",value:" "}));else if(t.key==="Enter"){let{lines:i,lineNumber:r,columnNumber:n}=this.#a(),o=i.at(r),u=this.#p(o),l=u,h=w(u);if(h&&(u=`${h+1}. `),u&&l.length<n)t.preventDefault(),h&&this.#u(r),await this.#o({type:"inline",value:`
|
|
6
|
+
${u}`});else if(u&&l.length===n){t.preventDefault();let m=this.#e,g=m-l.length;for(let b=0;b<l.length;b++)this.text=d(this.text,m-(b+1));setTimeout(async()=>{this.#r(g,g),this.textArea.focus(),await this.#o({type:"inline",value:`
|
|
7
|
+
`})},0)}}else{let i=Object.values(this.keyPairs).includes(s),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:u}=this.#a();if(await navigator.clipboard.writeText(`${o===0&&t.key==="x"?"":`
|
|
8
|
+
`}${n[o]}`),t.key==="x"){let l=this.#i-u;n.splice(o,1),this.text=n.join(`
|
|
9
|
+
`),setTimeout(()=>{this.#r(l,l)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let n=this.#s.find(o=>o.key===t.key);n&&this.#o(n)}else i&&(s===t.key||t.key==="ArrowRight")&&this.#t.length&&!r?(t.preventDefault(),this.#r(this.#i+1,this.#e+1),this.#t.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#o({type:"wrap",value:t.key}),this.#t.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#i!==this.#e&&(this.text[this.#i]===" "&&this.#r(this.#i+1,this.#e),this.text[this.#e-1]===" "&&this.#r(this.#i,this.#e-1))}),this.textArea.addEventListener("click",()=>this.#t=[]);for(let t of this.getTrigger())t.addEventListener(this.event,()=>{this.#o(this.#l(t))})}},w=a=>{let t=a.match(/^(\d+)\./);return t?Number(t[1]):null},P=(a,t,e)=>a.slice(0,e)+t+a.slice(e),d=(a,t)=>a.slice(0,t)+a.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 c{#t=[];#s=[];constructor(){super()}get#n(){return Number(this.getAttribute("threshold")??0)}onIntersect(t){this.#t.push(t)}onExit(t){this.#s.push(t)}mount(){let t=new IntersectionObserver(e=>{let s="data-intersect";for(let i of e)if(i.isIntersecting){this.getContent().setAttribute(s,"");for(let r of this.#t)r()}else{this.getContent().removeAttribute(s);for(let r of this.#s)r()}},{threshold:this.#n});for(let e of this.getTrigger())t.observe(e)}};var C=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 M=class extends c{#t=[];constructor(){super()}get#s(){return this.getAttribute("strategy")??"hover"}get#n(){return this.hasAttribute("prerender")}get#e(){return this.getAttribute("url")}appendTag(t){let{url:e,prerender:s}=t;if(e!==window.location.href){let i="speculationrules";if(!this.#t.includes(e)){if(HTMLScriptElement.supports&&HTMLScriptElement.supports(i)){let r=document.createElement("script");r.type=i,r.textContent=JSON.stringify({[s?"prerender":"prefetch"]:[{source:"list",urls:[e]}]}),document.head.append(r)}else fetch(e,{priority:"low"}).catch(r=>console.error(r));this.#t.push(e)}}}prefetch(t={anchors:this.getTrigger(),prerender:this.#n,strategy:this.#s}){let{anchors:e=this.getTrigger(),prerender:s=this.#n,strategy:i=this.#s}=t,r,n=(l=200)=>h=>{let{href:m}=h.currentTarget;r=setTimeout(()=>this.appendTag({url:m,prerender:s}),l)},o=()=>clearTimeout(r),u=new IntersectionObserver(l=>{for(let h of l)h.isIntersecting&&this.appendTag({url:h.target.href,prerender:s})});for(let l of e)i==="load"?this.appendTag({url:l.href,prerender:s}):i==="visible"?u.observe(l):(l.addEventListener("mouseover",n()),l.addEventListener("mouseout",o),l.addEventListener("focus",n()),l.addEventListener("focusout",o),l.addEventListener("touchstart",n(0),{passive:!0}))}mount(){this.#e&&this.appendTag({url:this.#e,prerender:this.#n}),this.prefetch()}};var S=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 H=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=(a,t)=>(s,i)=>{let r=Array.from(a.parentNode?.children??[]).indexOf(a);return((o,u)=>{let l=a.dataset.type??"string";if(l==="string")return new Intl.Collator().compare(o,u);if(l==="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)})(B(t?s:i,r),B(t?i:s,r))},B=(a,t)=>{let e=a.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};var N=class extends c{wakeLock=null;constructor(){super()}#t(){return"wakeLock"in navigator}get#s(){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.#s||(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.#s&&this.safeListener("visibilitychange",()=>{this.wakeLock&&this.request()},document)}destroy(){this.release()}};var D=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/package.json
CHANGED
package/prefetch/define.iife.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var
|
|
1
|
+
"use strict";(()=>{var a=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(r){this.setAttribute("event",r)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(r=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof r)return e;throw new Error("Content not found")}swapContent(r=!0,e=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),r&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(r,e,t=document.body,n={}){n.signal=this.#e.signal,t.addEventListener(r,e,n)}triggerListener(r,e=this.event,t){for(let n of this.getTrigger())n.addEventListener(e,r,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var c=class extends a{#e=[];constructor(){super()}get#r(){return this.getAttribute("strategy")??"hover"}get#t(){return this.hasAttribute("prerender")}get#n(){return this.getAttribute("url")}appendTag(r){let{url:e,prerender:t}=r;if(e!==window.location.href){let n="speculationrules";if(!this.#e.includes(e)){if(HTMLScriptElement.supports&&HTMLScriptElement.supports(n)){let s=document.createElement("script");s.type=n,s.textContent=JSON.stringify({[t?"prerender":"prefetch"]:[{source:"list",urls:[e]}]}),document.head.append(s)}else fetch(e,{priority:"low"}).catch(s=>console.error(s));this.#e.push(e)}}}prefetch(r={anchors:this.getTrigger(),prerender:this.#t,strategy:this.#r}){let{anchors:e=this.getTrigger(),prerender:t=this.#t,strategy:n=this.#r}=r,s,l=(o=200)=>i=>{let{href:p}=i.currentTarget;s=setTimeout(()=>this.appendTag({url:p,prerender:t}),o)},u=()=>clearTimeout(s),h=new IntersectionObserver(o=>{for(let i of o)i.isIntersecting&&this.appendTag({url:i.target.href,prerender:t})});for(let o of e)n==="load"?this.appendTag({url:o.href,prerender:t}):n==="visible"?h.observe(o):(o.addEventListener("mouseover",l()),o.addEventListener("mouseout",u),o.addEventListener("focus",l()),o.addEventListener("focusout",u),o.addEventListener("touchstart",l(0),{passive:!0}))}mount(){this.#n&&this.appendTag({url:this.#n,prerender:this.#t}),this.prefetch()}};customElements.define("drab-prefetch",c);})();
|
package/prefetch/index.d.ts
CHANGED
|
@@ -7,13 +7,9 @@ export type PrefetchAttributes = Attributes<Prefetch> & Partial<{
|
|
|
7
7
|
url: string;
|
|
8
8
|
}>;
|
|
9
9
|
/**
|
|
10
|
-
* The `Prefetch` element can prefetch a url, or enhance the `HTMLAnchorElement` by loading
|
|
11
|
-
* the HTML for a page before it is navigated to. This element speeds up the navigation for
|
|
12
|
-
* multi-page applications (MPAs).
|
|
10
|
+
* The `Prefetch` element can prefetch a url, or enhance the `HTMLAnchorElement` by loading the HTML for a page before it is navigated to. This element speeds up the navigation for multi-page applications (MPAs).
|
|
13
11
|
*
|
|
14
|
-
* If you are using a framework that already has a prefetch feature or uses a client side router,
|
|
15
|
-
* it is best to use the framework's feature instead of this element to ensure
|
|
16
|
-
* prefetching is working in accordance with the router.
|
|
12
|
+
* If you are using a framework that already has a prefetch feature or uses a client side router, it is best to use the framework's feature instead of this element to ensure prefetching is working in accordance with the router.
|
|
17
13
|
*
|
|
18
14
|
* `strategy`
|
|
19
15
|
*
|
|
@@ -25,11 +21,9 @@ export type PrefetchAttributes = Attributes<Prefetch> & Partial<{
|
|
|
25
21
|
*
|
|
26
22
|
* `prerender`
|
|
27
23
|
*
|
|
28
|
-
* Use the `prerender` attribute to use the
|
|
29
|
-
* prerender on the client. This allows you to run client side JavaScript in advance instead of
|
|
30
|
-
* only fetching the HTML.
|
|
24
|
+
* Use the `prerender` attribute to use the Speculation Rules API when supported to prerender on the client. This allows you to run client side JavaScript in advance instead of only fetching the HTML.
|
|
31
25
|
*
|
|
32
|
-
* Browsers that do not support will still use
|
|
26
|
+
* Browsers that do not support will still use `fetch` with low priority instead.
|
|
33
27
|
*
|
|
34
28
|
* [Speculation Rules Reference](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API)
|
|
35
29
|
*
|
|
@@ -38,16 +32,13 @@ export type PrefetchAttributes = Attributes<Prefetch> & Partial<{
|
|
|
38
32
|
* Add a `url` attribute to immediately prefetch a url without having to provide
|
|
39
33
|
* (or in addition to) `trigger` anchor elements.
|
|
40
34
|
*
|
|
41
|
-
* This element can be deprecated once the Speculation Rules API is supported across browsers.
|
|
42
|
-
* The API will be able to prefetch links in a similar way with the `source: "document"`
|
|
43
|
-
* and `eagerness` features, and will work without JavaScript.
|
|
35
|
+
* This element can be deprecated once the Speculation Rules API is supported across browsers. The API will be able to prefetch assets in a similar way with the `source: "document"` and `eagerness` features, and will work without JavaScript.
|
|
44
36
|
*/
|
|
45
37
|
export declare class Prefetch extends Base {
|
|
46
38
|
#private;
|
|
47
39
|
constructor();
|
|
48
40
|
/**
|
|
49
|
-
*
|
|
50
|
-
* head of the document.
|
|
41
|
+
* Fetches the `url`, or appends `<script type="speculationrules">` to the head of the document.
|
|
51
42
|
*
|
|
52
43
|
* @param options Configuration options.
|
|
53
44
|
*/
|
|
@@ -55,8 +46,7 @@ export declare class Prefetch extends Base {
|
|
|
55
46
|
/** `url` to prefetch. */
|
|
56
47
|
url: string;
|
|
57
48
|
/**
|
|
58
|
-
* Uses the
|
|
59
|
-
* to prerender on the client, defaults to `false`.
|
|
49
|
+
* Uses the Speculation Rules API when supported to prerender on the client.
|
|
60
50
|
*/
|
|
61
51
|
prerender?: boolean;
|
|
62
52
|
}): void;
|
|
@@ -71,12 +61,13 @@ export declare class Prefetch extends Base {
|
|
|
71
61
|
/** The anchors to prefetch. Defaults to `trigger` elements. */
|
|
72
62
|
anchors?: NodeListOf<HTMLAnchorElement>;
|
|
73
63
|
/**
|
|
74
|
-
* Uses the
|
|
75
|
-
* to prerender on the client, defaults to `false`.
|
|
64
|
+
* Uses the Speculation Rules API when supported to prerender on the client.
|
|
76
65
|
*/
|
|
77
66
|
prerender?: boolean;
|
|
78
67
|
/**
|
|
79
|
-
* Determines when the prefetch takes place
|
|
68
|
+
* Determines when the prefetch takes place.
|
|
69
|
+
*
|
|
70
|
+
* @default "hover"
|
|
80
71
|
*/
|
|
81
72
|
strategy?: "hover" | "load" | "visible";
|
|
82
73
|
}): void;
|
package/prefetch/index.iife.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var
|
|
1
|
+
"use strict";(()=>{var a=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(r){this.setAttribute("event",r)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(r=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof r)return e;throw new Error("Content not found")}swapContent(r=!0,e=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),r&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(r,e,t=document.body,n={}){n.signal=this.#e.signal,t.addEventListener(r,e,n)}triggerListener(r,e=this.event,t){for(let n of this.getTrigger())n.addEventListener(e,r,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var u=class extends a{#e=[];constructor(){super()}get#r(){return this.getAttribute("strategy")??"hover"}get#t(){return this.hasAttribute("prerender")}get#n(){return this.getAttribute("url")}appendTag(r){let{url:e,prerender:t}=r;if(e!==window.location.href){let n="speculationrules";if(!this.#e.includes(e)){if(HTMLScriptElement.supports&&HTMLScriptElement.supports(n)){let s=document.createElement("script");s.type=n,s.textContent=JSON.stringify({[t?"prerender":"prefetch"]:[{source:"list",urls:[e]}]}),document.head.append(s)}else fetch(e,{priority:"low"}).catch(s=>console.error(s));this.#e.push(e)}}}prefetch(r={anchors:this.getTrigger(),prerender:this.#t,strategy:this.#r}){let{anchors:e=this.getTrigger(),prerender:t=this.#t,strategy:n=this.#r}=r,s,l=(o=200)=>i=>{let{href:p}=i.currentTarget;s=setTimeout(()=>this.appendTag({url:p,prerender:t}),o)},c=()=>clearTimeout(s),h=new IntersectionObserver(o=>{for(let i of o)i.isIntersecting&&this.appendTag({url:i.target.href,prerender:t})});for(let o of e)n==="load"?this.appendTag({url:o.href,prerender:t}):n==="visible"?h.observe(o):(o.addEventListener("mouseover",l()),o.addEventListener("mouseout",c),o.addEventListener("focus",l()),o.addEventListener("focusout",c),o.addEventListener("touchstart",l(0),{passive:!0}))}mount(){this.#n&&this.appendTag({url:this.#n,prerender:this.#t}),this.prefetch()}};})();
|
package/prefetch/index.js
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import { Base } from "../base/index.js";
|
|
2
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).
|
|
3
|
+
* The `Prefetch` element can prefetch a url, or enhance the `HTMLAnchorElement` by loading the HTML for a page before it is navigated to. This element speeds up the navigation for multi-page applications (MPAs).
|
|
6
4
|
*
|
|
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 ensure
|
|
9
|
-
* prefetching is working in accordance with the router.
|
|
5
|
+
* If you are using a framework that already has a prefetch feature or uses a client side router, it is best to use the framework's feature instead of this element to ensure prefetching is working in accordance with the router.
|
|
10
6
|
*
|
|
11
7
|
* `strategy`
|
|
12
8
|
*
|
|
@@ -18,11 +14,9 @@ import { Base } from "../base/index.js";
|
|
|
18
14
|
*
|
|
19
15
|
* `prerender`
|
|
20
16
|
*
|
|
21
|
-
* Use the `prerender` attribute to use the
|
|
22
|
-
* prerender on the client. This allows you to run client side JavaScript in advance instead of
|
|
23
|
-
* only fetching the HTML.
|
|
17
|
+
* Use the `prerender` attribute to use the Speculation Rules API when supported to prerender on the client. This allows you to run client side JavaScript in advance instead of only fetching the HTML.
|
|
24
18
|
*
|
|
25
|
-
* Browsers that do not support will still use
|
|
19
|
+
* Browsers that do not support will still use `fetch` with low priority instead.
|
|
26
20
|
*
|
|
27
21
|
* [Speculation Rules Reference](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API)
|
|
28
22
|
*
|
|
@@ -31,11 +25,10 @@ import { Base } from "../base/index.js";
|
|
|
31
25
|
* Add a `url` attribute to immediately prefetch a url without having to provide
|
|
32
26
|
* (or in addition to) `trigger` anchor elements.
|
|
33
27
|
*
|
|
34
|
-
* This element can be deprecated once the Speculation Rules API is supported across browsers.
|
|
35
|
-
* The API will be able to prefetch links in a similar way with the `source: "document"`
|
|
36
|
-
* and `eagerness` features, and will work without JavaScript.
|
|
28
|
+
* This element can be deprecated once the Speculation Rules API is supported across browsers. The API will be able to prefetch assets in a similar way with the `source: "document"` and `eagerness` features, and will work without JavaScript.
|
|
37
29
|
*/
|
|
38
30
|
export class Prefetch extends Base {
|
|
31
|
+
#prefetchedUrls = [];
|
|
39
32
|
constructor() {
|
|
40
33
|
super();
|
|
41
34
|
}
|
|
@@ -43,17 +36,16 @@ export class Prefetch extends Base {
|
|
|
43
36
|
get #strategy() {
|
|
44
37
|
return (this.getAttribute("strategy") ?? "hover");
|
|
45
38
|
}
|
|
46
|
-
/**
|
|
39
|
+
/** Prerender with the Speculation Rules API. */
|
|
47
40
|
get #prerender() {
|
|
48
41
|
return this.hasAttribute("prerender");
|
|
49
42
|
}
|
|
50
|
-
/** `url` to
|
|
43
|
+
/** `url` to prefetch on `mount`. */
|
|
51
44
|
get #url() {
|
|
52
45
|
return this.getAttribute("url");
|
|
53
46
|
}
|
|
54
47
|
/**
|
|
55
|
-
*
|
|
56
|
-
* head of the document.
|
|
48
|
+
* Fetches the `url`, or appends `<script type="speculationrules">` to the head of the document.
|
|
57
49
|
*
|
|
58
50
|
* @param options Configuration options.
|
|
59
51
|
*/
|
|
@@ -63,32 +55,13 @@ export class Prefetch extends Base {
|
|
|
63
55
|
if (!(url === window.location.href)) {
|
|
64
56
|
// minifies
|
|
65
57
|
const speculationrules = "speculationrules";
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
// is there a link?
|
|
69
|
-
if (document.querySelector(`link[href='${url}']`)) {
|
|
70
|
-
return true;
|
|
71
|
-
}
|
|
72
|
-
// is there a speculationrules script?
|
|
73
|
-
const existing = document.querySelectorAll(`script[type='${speculationrules}']`);
|
|
74
|
-
for (const s of existing) {
|
|
75
|
-
const parsedRules = JSON.parse(s.textContent ?? "{}");
|
|
76
|
-
if (
|
|
77
|
-
// check all rules
|
|
78
|
-
parsedRules.prerender?.some((rule) => "urls" in rule && rule.urls?.includes(url))) {
|
|
79
|
-
return true;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
return false;
|
|
83
|
-
};
|
|
84
|
-
if (!alreadyAdded(url)) {
|
|
85
|
-
if (prerender &&
|
|
86
|
-
HTMLScriptElement.supports &&
|
|
58
|
+
if (!this.#prefetchedUrls.includes(url)) {
|
|
59
|
+
if (HTMLScriptElement.supports &&
|
|
87
60
|
HTMLScriptElement.supports(speculationrules)) {
|
|
88
61
|
const script = document.createElement("script");
|
|
89
62
|
script.type = speculationrules;
|
|
90
63
|
script.textContent = JSON.stringify({
|
|
91
|
-
prerender: [
|
|
64
|
+
[prerender ? "prerender" : "prefetch"]: [
|
|
92
65
|
{
|
|
93
66
|
source: "list",
|
|
94
67
|
urls: [url],
|
|
@@ -98,13 +71,12 @@ export class Prefetch extends Base {
|
|
|
98
71
|
document.head.append(script);
|
|
99
72
|
}
|
|
100
73
|
else {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
link.href = url;
|
|
106
|
-
document.head.append(link);
|
|
74
|
+
fetch(url, {
|
|
75
|
+
//@ts-ignore - typedoc error with priority
|
|
76
|
+
priority: "low",
|
|
77
|
+
}).catch((e) => console.error(e));
|
|
107
78
|
}
|
|
79
|
+
this.#prefetchedUrls.push(url);
|
|
108
80
|
}
|
|
109
81
|
}
|
|
110
82
|
}
|