drab 5.4.0 → 5.4.1
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/README.md +1 -1
- package/base/index.d.ts +6 -0
- package/base/index.js +6 -0
- package/define.iife.js +8 -8
- package/dialog/define.iife.js +1 -1
- package/dialog/index.d.ts +1 -1
- package/dialog/index.iife.js +1 -1
- package/dialog/index.js +22 -9
- package/index.iife.js +8 -8
- package/package.json +9 -9
- package/popover/index.d.ts +0 -2
- package/popover/index.js +0 -2
package/README.md
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
|
|
31
31
|
Find an bug or have an idea? Feel free to create an issue on [GitHub](https://github.com/rossrobino/drab).
|
|
32
32
|
|
|
33
|
-
Since this is
|
|
33
|
+
Since this is a headless library, simple elements like a badge that can be easily created with HTML and CSS are not included. Elements such as a select, or a date picker are also not included in favor of the native HTML elements.
|
|
34
34
|
|
|
35
35
|
### Local Development
|
|
36
36
|
|
package/base/index.d.ts
CHANGED
|
@@ -62,10 +62,16 @@ export declare class Base extends HTMLElement {
|
|
|
62
62
|
* The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn't necessary, but when client side rendering, the HTML within the custom element isn't available before `connectedCallback` is called. By waiting until the next microtask, the HTML content is available---then for example, listeners can be attached to elements inside.
|
|
63
63
|
*/
|
|
64
64
|
mount(): void;
|
|
65
|
+
/**
|
|
66
|
+
* Called when custom element is added to the page.
|
|
67
|
+
*/
|
|
65
68
|
connectedCallback(): void;
|
|
66
69
|
/**
|
|
67
70
|
* Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallback` as well. It is overridden in each element that needs to run `disconnectedCallback`.
|
|
68
71
|
*/
|
|
69
72
|
destroy(): void;
|
|
73
|
+
/**
|
|
74
|
+
* Called when custom element is removed from the page.
|
|
75
|
+
*/
|
|
70
76
|
disconnectedCallback(): void;
|
|
71
77
|
}
|
package/base/index.js
CHANGED
|
@@ -117,6 +117,9 @@ export class Base extends HTMLElement {
|
|
|
117
117
|
* The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn't necessary, but when client side rendering, the HTML within the custom element isn't available before `connectedCallback` is called. By waiting until the next microtask, the HTML content is available---then for example, listeners can be attached to elements inside.
|
|
118
118
|
*/
|
|
119
119
|
mount() { }
|
|
120
|
+
/**
|
|
121
|
+
* Called when custom element is added to the page.
|
|
122
|
+
*/
|
|
120
123
|
connectedCallback() {
|
|
121
124
|
queueMicrotask(() => this.mount());
|
|
122
125
|
}
|
|
@@ -124,6 +127,9 @@ export class Base extends HTMLElement {
|
|
|
124
127
|
* Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallback` as well. It is overridden in each element that needs to run `disconnectedCallback`.
|
|
125
128
|
*/
|
|
126
129
|
destroy() { }
|
|
130
|
+
/**
|
|
131
|
+
* Called when custom element is removed from the page.
|
|
132
|
+
*/
|
|
127
133
|
disconnectedCallback() {
|
|
128
134
|
this.destroy();
|
|
129
135
|
this.#listenerController.abort();
|
package/define.iife.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";(()=>{var
|
|
2
|
-
`)}}async#h(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.#
|
|
1
|
+
"use strict";(()=>{var R=Object.defineProperty;var j=(o,t)=>{for(var e in t)R(o,e,{get:t[e],enumerable:!0})};var H={};j(H,{Animate:()=>p,Base:()=>c,Breakpoint:()=>d,ContextMenu:()=>g,Copy:()=>b,Details:()=>y,Dialog:()=>A,Editor:()=>v,Fullscreen:()=>x,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 i=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(i){let s=Array.from(this.getContent().childNodes),r=[];i instanceof HTMLTemplateElement?(r.push(i.content.cloneNode(!0)),i.content.replaceChildren(...s)):(r.push(...i.childNodes),i.replaceChildren(...s)),this.getContent().replaceChildren(...r),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,i=document.body,s={}){s.signal=this.#t.signal,i.addEventListener(t,e,s)}triggerListener(t,e=this.event,i){for(let s of this.getTrigger())s.addEventListener(e,t,i)}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 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 u=["composite","easing","offset"];for(let l of u)delete r[l],delete n[l]}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((a,u)=>u<1?a:a.at(0)?.toUpperCase()+a.slice(1)).join("");if(s&&n){s==="from"?s="0":s==="to"?s="1":s=String(parseInt(s)*.01);let a=Number(s),u=t.find(l=>l.offset===a);u?u[n]=i:t.push({[n]:i,offset:a})}}}return t.sort((e,i)=>Number(e.offset)-Number(i.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[,...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 g=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,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,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>i+h&&(n=i+h-u),a+l>e+m&&(a=e+m-l),this.#i={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{#t=parseInt(getComputedStyle(document.body).marginRight);constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}get#i(){return window.innerWidth-document.documentElement.clientWidth}set#r(t){document.body.style.marginRight=`${t}px`}set#e(t){document.body.style.overflow=t}#s(t){this.hasAttribute("remove-body-scroll")&&(this.#r=t?this.#t+this.#i:this.#t,this.#e=t?"hidden":"")}async show(){this.dialog.showModal(),this.#s(!0),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.#s(!1),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 v=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#r(){let t=this.text.split("```"),e=0;for(let[i,s]of t.entries())if(e+=s.length+3,this.#s<e)return i;return 0}get#e(){return this.textArea.selectionEnd}get#s(){return this.textArea.selectionStart}#n(t,e){this.textArea.setSelectionRange(t,e)}#l(t){let e=t.dataset.type,i=t.dataset.value,s=t.dataset.key??void 0;return{type:e,value:i,key:s}}async#c(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=B(this.text,t.value,e),this.text=B(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.#a(),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#h(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.#n(s,r),this.textArea.focus()}async#o(t){let e=this.#e,i=this.#s;await this.#c(t,i,e),this.#h(t.value,i,e)}#p(t){if(t){let e=[];this.#i.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=P(t);if(i)return`${i}. `}return""}#a(){let t=this.text.split(`
|
|
3
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}}#u(t,e=!1){let{lines:i}=this.#a();for(let s=t+1;s<i.length;s++){let r=i[s];if(r){let n=P(r);if(n){let a;if(e)if(n>1)a=n-1;else break;else a=n+1;i[s]=r.slice(String(n).length),i[s]=String(a)+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.#
|
|
5
|
-
`&&this.#
|
|
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.#
|
|
7
|
-
`})},0)}}else{let s=Object.values(this.keyPairs).includes(i),r=this.#
|
|
8
|
-
`}${n[a]}`),t.key==="x"){let l=this.#
|
|
9
|
-
`),setTimeout(()=>{this.#
|
|
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.#s-1];if(s&&s in this.keyPairs&&i===this.keyPairs[s]){t.preventDefault();let r=this.#s-1,n=this.#e-1;this.text=k(this.text,r),this.text=k(this.text,n),setTimeout(()=>{this.#n(r,n)},0),this.#t.pop()}if(s===`
|
|
5
|
+
`&&this.#s===this.#e){t.preventDefault();let r=this.#s-1,{lineNumber:n}=this.#a();this.#u(n,!0),this.text=k(this.text,r),setTimeout(async()=>{this.#n(r,r)},0)}}else if(t.key==="Tab")this.#r%2!==0&&(t.preventDefault(),await this.#o({type:"inline",value:" "}));else if(t.key==="Enter"){let{lines:s,lineNumber:r,columnNumber:n}=this.#a(),a=s.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.#n(N,N),this.textArea.focus(),await this.#o({type:"inline",value:`
|
|
7
|
+
`})},0)}}else{let s=Object.values(this.keyPairs).includes(i),r=this.#s!==this.#e;if((t.ctrlKey||t.metaKey)&&this.#s===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.#s-u;n.splice(a,1),this.text=n.join(`
|
|
9
|
+
`),setTimeout(()=>{this.#n(l,l)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let n=this.#i.find(a=>a.key===t.key);n&&this.#o(n)}else s&&(i===t.key||t.key==="ArrowRight")&&this.#t.length&&!r?(t.preventDefault(),this.#n(this.#s+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.#s!==this.#e&&(this.text[this.#s]===" "&&this.#n(this.#s+1,this.#e),this.text[this.#e-1]===" "&&this.#n(this.#s,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 x=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=[];#i=[];constructor(){super()}get#r(){return Number(this.getAttribute("threshold")??0)}onIntersect(t){this.#t.push(t)}onExit(t){this.#i.push(t)}mount(){let t=new IntersectionObserver(e=>{let i="data-intersect";for(let s of e)if(s.isIntersecting){this.getContent().setAttribute(i,"");for(let r of this.#t)r()}else{this.getContent().removeAttribute(i);for(let r of this.#i)r()}},{threshold:this.#r});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#i(){return this.getAttribute("strategy")??"hover"}get#r(){return this.hasAttribute("prerender")}get#e(){return this.getAttribute("url")}appendTag(t){let{url:e,prerender:i}=t;if(e!==window.location.href&&!this.#t.includes(e))if(this.#t.push(e),HTMLScriptElement.supports&&HTMLScriptElement.supports("speculationrules")){let s={prefetch:[{source:"list",urls:[e]}]};i&&(s.prerender=s.prefetch);let r=document.createElement("script");r.type="speculationrules",r.textContent=JSON.stringify(s),document.head.append(r)}else{let s=document.createElement("link");s.rel="prefetch",s.as="document",s.href=e,document.head.append(s)}}prefetch(t={anchors:this.getTrigger(),prerender:this.#r,strategy:this.#i}){let{anchors:e=this.getTrigger(),prerender:i=this.#r,strategy:s=this.#i}=t,r,n=(l=200)=>h=>{let{href:m}=h.currentTarget;r=setTimeout(()=>this.appendTag({url:m,prerender:i}),l)},a=()=>clearTimeout(r),u=new IntersectionObserver(l=>{for(let h of l)h.isIntersecting&&this.appendTag({url:h.target.href,prerender:i})});for(let l of e)s==="load"?this.appendTag({url:l.href,prerender:i}):s==="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.#r}),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",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(I(e,this.#t(e))).forEach(i=>t.appendChild(i))})}},I=(o,t)=>(i,s)=>{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)})(W(t?i:s,r),W(t?s:i,r))},W=(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#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 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 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
|
|
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{#t=parseInt(getComputedStyle(document.body).marginRight);constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}get#n(){return window.innerWidth-document.documentElement.clientWidth}set#i(t){document.body.style.marginRight=`${t}px`}set#s(t){document.body.style.overflow=t}#e(t){this.hasAttribute("remove-body-scroll")&&(this.#i=t?this.#t+this.#n:this.#t,this.#s=t?"hidden":"")}async show(){this.dialog.showModal(),this.#e(!0),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.#e(!1),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",d);})();
|
package/dialog/index.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export type DialogAttributes = Attributes<Dialog> & AnimateAttributes & Partial<
|
|
|
14
14
|
*
|
|
15
15
|
* `remove-body-scroll`
|
|
16
16
|
*
|
|
17
|
-
* Add the `remove-body-scroll` to remove the scroll from `document.body` when the dialog
|
|
17
|
+
* Add the `remove-body-scroll` attribute to remove the scroll from `document.body` when the dialog
|
|
18
18
|
* is open.
|
|
19
19
|
*/
|
|
20
20
|
export declare class Dialog extends Animate {
|
package/dialog/index.iife.js
CHANGED
|
@@ -1 +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 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
|
|
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{#t=parseInt(getComputedStyle(document.body).marginRight);constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}get#n(){return window.innerWidth-document.documentElement.clientWidth}set#i(t){document.body.style.marginRight=`${t}px`}set#s(t){document.body.style.overflow=t}#e(t){this.hasAttribute("remove-body-scroll")&&(this.#i=t?this.#t+this.#n:this.#t,this.#s=t?"hidden":"")}async show(){this.dialog.showModal(),this.#e(!0),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.#e(!1),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
|
@@ -9,10 +9,12 @@ import { Animate } from "../animate/index.js";
|
|
|
9
9
|
*
|
|
10
10
|
* `remove-body-scroll`
|
|
11
11
|
*
|
|
12
|
-
* Add the `remove-body-scroll` to remove the scroll from `document.body` when the dialog
|
|
12
|
+
* Add the `remove-body-scroll` attribute to remove the scroll from `document.body` when the dialog
|
|
13
13
|
* is open.
|
|
14
14
|
*/
|
|
15
15
|
export class Dialog extends Animate {
|
|
16
|
+
/** The initial margin-right value of the body element. */
|
|
17
|
+
#initialBodyMarginRight = parseInt(getComputedStyle(document.body).marginRight);
|
|
16
18
|
constructor() {
|
|
17
19
|
super();
|
|
18
20
|
}
|
|
@@ -20,16 +22,29 @@ export class Dialog extends Animate {
|
|
|
20
22
|
get dialog() {
|
|
21
23
|
return this.getContent(HTMLDialogElement);
|
|
22
24
|
}
|
|
25
|
+
/** The width of the scrollbar---used for when the scroll is removed. */
|
|
26
|
+
get #scrollbarWidth() {
|
|
27
|
+
return window.innerWidth - document.documentElement.clientWidth;
|
|
28
|
+
}
|
|
29
|
+
set #bodyMarginRight(margin) {
|
|
30
|
+
document.body.style.marginRight = `${margin}px`;
|
|
31
|
+
}
|
|
32
|
+
set #bodyOverflow(overflow) {
|
|
33
|
+
document.body.style.overflow = overflow;
|
|
34
|
+
}
|
|
23
35
|
/** Remove scroll from the body when open with the `remove-body-scroll` attribute. */
|
|
24
|
-
|
|
25
|
-
|
|
36
|
+
#toggleBodyScroll(show) {
|
|
37
|
+
if (this.hasAttribute("remove-body-scroll")) {
|
|
38
|
+
this.#bodyMarginRight = show
|
|
39
|
+
? this.#initialBodyMarginRight + this.#scrollbarWidth
|
|
40
|
+
: this.#initialBodyMarginRight;
|
|
41
|
+
this.#bodyOverflow = show ? "hidden" : "";
|
|
42
|
+
}
|
|
26
43
|
}
|
|
27
44
|
/** `HTMLDialogElement.showModal()` with animation. */
|
|
28
45
|
async show() {
|
|
29
46
|
this.dialog.showModal();
|
|
30
|
-
|
|
31
|
-
document.body.style.overflow = "hidden";
|
|
32
|
-
}
|
|
47
|
+
this.#toggleBodyScroll(true);
|
|
33
48
|
await this.animateElement();
|
|
34
49
|
}
|
|
35
50
|
/** `HTMLDialogElement.close()` with animation. */
|
|
@@ -39,9 +54,7 @@ export class Dialog extends Animate {
|
|
|
39
54
|
direction: "reverse",
|
|
40
55
|
},
|
|
41
56
|
});
|
|
42
|
-
|
|
43
|
-
document.body.style.overflow = "";
|
|
44
|
-
}
|
|
57
|
+
this.#toggleBodyScroll(false);
|
|
45
58
|
this.dialog.close();
|
|
46
59
|
}
|
|
47
60
|
/** `show` or `close` depending on the dialog's `open` attribute. */
|
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 i=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(i){let s=Array.from(this.getContent().childNodes),r=[];i instanceof HTMLTemplateElement?(r.push(i.content.cloneNode(!0)),i.content.replaceChildren(...s)):(r.push(...i.childNodes),i.replaceChildren(...s)),this.getContent().replaceChildren(...r),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,i=document.body,s={}){s.signal=this.#t.signal,i.addEventListener(t,e,s)}triggerListener(t,e=this.event,i){for(let s of this.getTrigger())s.addEventListener(e,t,i)}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 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 u=["composite","easing","offset"];for(let l of u)delete r[l],delete n[l]}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,u)=>u<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),u=t.find(l=>l.offset===o);u?u[n]=i:t.push({[n]:i,offset:o})}}}return t.sort((e,i)=>Number(e.offset)-Number(i.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[,...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 p{#t;constructor(){super()}set#
|
|
2
|
-
`)}}async#h(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.#
|
|
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 i=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(i){let s=Array.from(this.getContent().childNodes),r=[];i instanceof HTMLTemplateElement?(r.push(i.content.cloneNode(!0)),i.content.replaceChildren(...s)):(r.push(...i.childNodes),i.replaceChildren(...s)),this.getContent().replaceChildren(...r),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,i=document.body,s={}){s.signal=this.#t.signal,i.addEventListener(t,e,s)}triggerListener(t,e=this.event,i){for(let s of this.getTrigger())s.addEventListener(e,t,i)}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 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 u=["composite","easing","offset"];for(let l of u)delete r[l],delete n[l]}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,u)=>u<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),u=t.find(l=>l.offset===o);u?u[n]=i:t.push({[n]:i,offset:o})}}}return t.sort((e,i)=>Number(e.offset)-Number(i.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[,...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 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,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 u=this.getContent().offsetWidth+24,l=this.getContent().offsetHeight+6,h=window.innerWidth,m=window.innerHeight;n+u>i+h&&(n=i+h-u),o+l>e+m&&(o=e+m-l),this.#i={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 v=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 x=class extends p{#t=parseInt(getComputedStyle(document.body).marginRight);constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}get#i(){return window.innerWidth-document.documentElement.clientWidth}set#r(t){document.body.style.marginRight=`${t}px`}set#e(t){document.body.style.overflow=t}#s(t){this.hasAttribute("remove-body-scroll")&&(this.#r=t?this.#t+this.#i:this.#t,this.#e=t?"hidden":"")}async show(){this.dialog.showModal(),this.#s(!0),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.#s(!1),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.#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#r(){let t=this.text.split("```"),e=0;for(let[i,s]of t.entries())if(e+=s.length+3,this.#s<e)return i;return 0}get#e(){return this.textArea.selectionEnd}get#s(){return this.textArea.selectionStart}#n(t,e){this.textArea.setSelectionRange(t,e)}#l(t){let e=t.dataset.type,i=t.dataset.value,s=t.dataset.key??void 0;return{type:e,value:i,key:s}}async#c(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=P(this.text,t.value,e),this.text=P(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.#a(),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#h(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.#n(s,r),this.textArea.focus()}async#o(t){let e=this.#e,i=this.#s;await this.#c(t,i,e),this.#h(t.value,i,e)}#p(t){if(t){let e=[];this.#i.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=w(t);if(i)return`${i}. `}return""}#a(){let t=this.text.split(`
|
|
3
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}}#u(t,e=!1){let{lines:i}=this.#a();for(let s=t+1;s<i.length;s++){let r=i[s];if(r){let n=w(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.#
|
|
5
|
-
`&&this.#
|
|
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.#
|
|
7
|
-
`})},0)}}else{let s=Object.values(this.keyPairs).includes(i),r=this.#
|
|
8
|
-
`}${n[o]}`),t.key==="x"){let l=this.#
|
|
9
|
-
`),setTimeout(()=>{this.#
|
|
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.#s-1];if(s&&s in this.keyPairs&&i===this.keyPairs[s]){t.preventDefault();let r=this.#s-1,n=this.#e-1;this.text=d(this.text,r),this.text=d(this.text,n),setTimeout(()=>{this.#n(r,n)},0),this.#t.pop()}if(s===`
|
|
5
|
+
`&&this.#s===this.#e){t.preventDefault();let r=this.#s-1,{lineNumber:n}=this.#a();this.#u(n,!0),this.text=d(this.text,r),setTimeout(async()=>{this.#n(r,r)},0)}}else if(t.key==="Tab")this.#r%2!==0&&(t.preventDefault(),await this.#o({type:"inline",value:" "}));else if(t.key==="Enter"){let{lines:s,lineNumber:r,columnNumber:n}=this.#a(),o=s.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.#n(g,g),this.textArea.focus(),await this.#o({type:"inline",value:`
|
|
7
|
+
`})},0)}}else{let s=Object.values(this.keyPairs).includes(i),r=this.#s!==this.#e;if((t.ctrlKey||t.metaKey)&&this.#s===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.#s-u;n.splice(o,1),this.text=n.join(`
|
|
9
|
+
`),setTimeout(()=>{this.#n(l,l)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let n=this.#i.find(o=>o.key===t.key);n&&this.#o(n)}else s&&(i===t.key||t.key==="ArrowRight")&&this.#t.length&&!r?(t.preventDefault(),this.#n(this.#s+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.#s!==this.#e&&(this.text[this.#s]===" "&&this.#n(this.#s+1,this.#e),this.text[this.#e-1]===" "&&this.#n(this.#s,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=[];#i=[];constructor(){super()}get#r(){return Number(this.getAttribute("threshold")??0)}onIntersect(t){this.#t.push(t)}onExit(t){this.#i.push(t)}mount(){let t=new IntersectionObserver(e=>{let i="data-intersect";for(let s of e)if(s.isIntersecting){this.getContent().setAttribute(i,"");for(let r of this.#t)r()}else{this.getContent().removeAttribute(i);for(let r of this.#i)r()}},{threshold:this.#r});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#i(){return this.getAttribute("strategy")??"hover"}get#r(){return this.hasAttribute("prerender")}get#e(){return this.getAttribute("url")}appendTag(t){let{url:e,prerender:i}=t;if(e!==window.location.href&&!this.#t.includes(e))if(this.#t.push(e),HTMLScriptElement.supports&&HTMLScriptElement.supports("speculationrules")){let s={prefetch:[{source:"list",urls:[e]}]};i&&(s.prerender=s.prefetch);let r=document.createElement("script");r.type="speculationrules",r.textContent=JSON.stringify(s),document.head.append(r)}else{let s=document.createElement("link");s.rel="prefetch",s.as="document",s.href=e,document.head.append(s)}}prefetch(t={anchors:this.getTrigger(),prerender:this.#r,strategy:this.#i}){let{anchors:e=this.getTrigger(),prerender:i=this.#r,strategy:s=this.#i}=t,r,n=(l=200)=>h=>{let{href:m}=h.currentTarget;r=setTimeout(()=>this.appendTag({url:m,prerender:i}),l)},o=()=>clearTimeout(r),u=new IntersectionObserver(l=>{for(let h of l)h.isIntersecting&&this.appendTag({url:h.target.href,prerender:i})});for(let l of e)s==="load"?this.appendTag({url:l.href,prerender:i}):s==="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.#r}),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",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(W(e,this.#t(e))).forEach(i=>t.appendChild(i))})}},W=(a,t)=>(i,s)=>{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?i:s,r),B(t?s:i,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#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 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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "drab",
|
|
3
3
|
"description": "A headless custom element library",
|
|
4
|
-
"version": "5.4.
|
|
4
|
+
"version": "5.4.1",
|
|
5
5
|
"homepage": "https://drab.robino.dev",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"author": {
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
"build": "tsc && vite build",
|
|
176
176
|
"preview": "vite preview",
|
|
177
177
|
"format": "prettier --write .",
|
|
178
|
-
"doc": "typedoc --out src/lib/docs --plugin typedoc-plugin-markdown src/package/index.ts --hideBreadcrumbs --
|
|
178
|
+
"doc": "typedoc --out src/lib/docs --plugin typedoc-plugin-markdown src/package/index.ts --hideBreadcrumbs --githubPages false --publicPath /docs/ && bun src/lib/scripts/doc/index.ts && bun format",
|
|
179
179
|
"package:json": "bun src/lib/scripts/packageJson/index.ts && prettier --write package.json",
|
|
180
180
|
"package:copy": "cp package.json ./package && cp README.md ./package && cp LICENSE.md ./package",
|
|
181
181
|
"package:tsc": "tsc --project tsconfig.package.json",
|
|
@@ -183,20 +183,20 @@
|
|
|
183
183
|
"pub": "bun i && bun doc && bun package && npm publish --access public ./package"
|
|
184
184
|
},
|
|
185
185
|
"devDependencies": {
|
|
186
|
-
"@tailwindcss/typography": "^0.5.
|
|
187
|
-
"@types/node": "^20.12.
|
|
186
|
+
"@tailwindcss/typography": "^0.5.13",
|
|
187
|
+
"@types/node": "^20.12.12",
|
|
188
188
|
"@vercel/analytics": "^1.2.2",
|
|
189
189
|
"autoprefixer": "^10.4.19",
|
|
190
|
-
"domco": "^0.5.
|
|
190
|
+
"domco": "^0.5.19",
|
|
191
191
|
"prettier": "^3.2.5",
|
|
192
|
-
"prettier-plugin-tailwindcss": "^0.5.
|
|
193
|
-
"robino": "^0.
|
|
192
|
+
"prettier-plugin-tailwindcss": "^0.5.14",
|
|
193
|
+
"robino": "^0.2.0",
|
|
194
194
|
"tailwindcss": "^3.4.3",
|
|
195
195
|
"tsup": "^8.0.2",
|
|
196
196
|
"typedoc": "^0.25.13",
|
|
197
|
-
"typedoc-plugin-markdown": "^
|
|
197
|
+
"typedoc-plugin-markdown": "^4.0.2",
|
|
198
198
|
"typescript": "^5.4.5",
|
|
199
199
|
"uico": "^0.2.4",
|
|
200
|
-
"vite": "^5.2.
|
|
200
|
+
"vite": "^5.2.11"
|
|
201
201
|
}
|
|
202
202
|
}
|
package/popover/index.d.ts
CHANGED
|
@@ -4,8 +4,6 @@ export type PopoverAttributes = Attributes<Popover> & AnimateAttributes;
|
|
|
4
4
|
/**
|
|
5
5
|
* Provides animations for the Popover API.
|
|
6
6
|
*
|
|
7
|
-
* The Popover API is not currently support in FireFox. [See the latest browser compatibility on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility).
|
|
8
|
-
*
|
|
9
7
|
* This component can be deprecated once it can be animated with CSS only,
|
|
10
8
|
* currently [only available in Chrome](https://developer.chrome.com/blog/introducing-popover-api#interactive_entry_and_exit).
|
|
11
9
|
*/
|
package/popover/index.js
CHANGED
|
@@ -2,8 +2,6 @@ import { Animate } from "../animate/index.js";
|
|
|
2
2
|
/**
|
|
3
3
|
* Provides animations for the Popover API.
|
|
4
4
|
*
|
|
5
|
-
* The Popover API is not currently support in FireFox. [See the latest browser compatibility on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility).
|
|
6
|
-
*
|
|
7
5
|
* This component can be deprecated once it can be animated with CSS only,
|
|
8
6
|
* currently [only available in Chrome](https://developer.chrome.com/blog/introducing-popover-api#interactive_entry_and_exit).
|
|
9
7
|
*/
|