drab 5.0.2 → 5.2.0

package/wakelock/index.js

@@ -0,0 +1,88 @@
+import { Base } from "../base/index.js";
+/**
+ * `WakeLock` uses the [WakeLock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) to ensure the screen does not turn off when viewing the page on supported devices. Use your best judgement for when this is necessary, for example, if you have a timer that needs to stay on, or you are displaying a QR code.
+ *
+ * - WakeLock can be toggled with a `trigger`, or will be requested if the element has a `locked` attribute when connected.
+ * - Use `content` and `swap` elements to adjust the UI based on the current state.
+ * - `request` and `release` methods are provided to set the WakeLock with JavaScript.
+ * - `trigger` is disabled if not supported.
+ * - WakeLock is released when the element is removed from the DOM.
+ *
+ * `auto-lock`
+ *
+ * - By default, the WakeLock will be released when the tab is not active. Use the `auto-lock` attribute to automatically request the WakeLock when the user views the tab again.
+ *
+ *
+ */
+export class WakeLock extends Base {
+    wakeLock = null;
+    constructor() {
+        super();
+    }
+    /** If the WakeLock API is supported on the user's device. */
+    #wakeLockSupported() {
+        return "wakeLock" in navigator;
+    }
+    /**
+     * the `auto-lock` attribute controls whether an active WakeLock should be restored when navigating back to the page.
+     */
+    get #autoLock() {
+        return this.hasAttribute("auto-lock");
+    }
+    /** Requests WakeLock on the current page. */
+    async request() {
+        if (this.#wakeLockSupported() && document.visibilityState === "visible") {
+            this.wakeLock = await navigator.wakeLock.request("screen");
+            this.setAttribute("locked", "");
+            this.swapContent(false);
+            this.wakeLock.addEventListener("release", () => {
+                this.removeAttribute("locked");
+                this.swapContent(false);
+                if (!this.#autoLock) {
+                    // set to null is required, used to determine if screen should be
+                    // locked again, see visibilitychange listener
+                    this.wakeLock = null;
+                }
+            });
+        }
+    }
+    /** Releases the WakeLock, sets `this.wakeLock` to null. */
+    async release() {
+        await this.wakeLock?.release();
+        this.wakeLock = null;
+    }
+    mount() {
+        // lock on mount if the `locked` attribute is present
+        if (this.hasAttribute("locked")) {
+            this.request();
+        }
+        this.triggerListener(() => {
+            // toggle
+            if (this.wakeLock) {
+                this.release();
+            }
+            else {
+                this.request();
+            }
+        });
+        for (const trigger of this.getTrigger()) {
+            if (!this.#wakeLockSupported() && "disabled" in trigger) {
+                // disable `trigger` if not supported
+                trigger.disabled = true;
+            }
+        }
+        if (this.#autoLock) {
+            this.safeListener("visibilitychange", () => {
+                // When the tab is not visible, the wakeLock is automatically released.
+                // This requests it back if it exists, if it is `null`, that
+                // means it was removed. In which case, it shouldn't be requested again.
+                if (this.wakeLock) {
+                    this.request();
+                }
+            }, document);
+        }
+    }
+    destroy() {
+        this.release();
+    }
+}

package/youtube/define.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var s=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 r=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(r){let n=Array.from(this.getContent().childNodes);r instanceof HTMLTemplateElement?this.getContent().replaceChildren(r.content.cloneNode(!0)):this.getContent().replaceChildren(...r.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...n),e)}}safeListener(t,e,r=document.body,n={}){n.signal=this.#t.signal,r.addEventListener(t,e,n)}triggerListener(t,e=this.event){for(let r of this.getTrigger())r.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var i=class extends s{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":""}`})}};customElements.define("drab-youtube",i);})();
+"use strict";(()=>{var s=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 r=this.querySelector(this.getAttribute("content")??"[data-content]");if(r instanceof t)return r;throw new Error("Content not found")}swapContent(t=!0,r=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let n=Array.from(this.getContent().childNodes),o=[];e instanceof HTMLTemplateElement?(o.push(e.content.cloneNode(!0)),e.content.replaceChildren(...n)):(o.push(...e.childNodes),e.replaceChildren(...n)),this.getContent().replaceChildren(...o),t&&setTimeout(()=>this.swapContent(!1),r)}}safeListener(t,r,e=document.body,n={}){n.signal=this.#t.signal,e.addEventListener(t,r,n)}triggerListener(t,r=this.event){for(let e of this.getTrigger())e.addEventListener(r,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var i=class extends s{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":""}`})}};customElements.define("drab-youtube",i);})();

package/youtube/index.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var s=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 r=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(r){let n=Array.from(this.getContent().childNodes);r instanceof HTMLTemplateElement?this.getContent().replaceChildren(r.content.cloneNode(!0)):this.getContent().replaceChildren(...r.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...n),e)}}safeListener(t,e,r=document.body,n={}){n.signal=this.#t.signal,r.addEventListener(t,e,n)}triggerListener(t,e=this.event){for(let r of this.getTrigger())r.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var i=class extends s{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":""}`})}};})();
+"use strict";(()=>{var s=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 r=this.querySelector(this.getAttribute("content")??"[data-content]");if(r instanceof t)return r;throw new Error("Content not found")}swapContent(t=!0,r=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let n=Array.from(this.getContent().childNodes),i=[];e instanceof HTMLTemplateElement?(i.push(e.content.cloneNode(!0)),e.content.replaceChildren(...n)):(i.push(...e.childNodes),e.replaceChildren(...n)),this.getContent().replaceChildren(...i),t&&setTimeout(()=>this.swapContent(!1),r)}}safeListener(t,r,e=document.body,n={}){n.signal=this.#t.signal,e.addEventListener(t,r,n)}triggerListener(t,r=this.event){for(let e of this.getTrigger())e.addEventListener(r,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var o=class extends s{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":""}`})}};})();