@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-cursor-follower.js

@@ -1 +1,173 @@
-import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-cursor-follower",s="designbase-wc-cursor-follower--hide-native";class DbCursorFollower extends HTMLElement{constructor(){super(...arguments),this.target={x:-9999,y:-9999},this.current={x:-9999,y:-9999},this.raf=0,this.enabled=!1,this.isScoped=!1}static get observedAttributes(){return["default-label","selector","smoothness","offset","hide-native-cursor","show-icon"]}connectedCallback(){this.style.display="contents",this.setupDesktopGate()}disconnectedCallback(){this.teardown()}attributeChangedCallback(){this.isConnected&&this.enabled&&this.mountLayer()}setupDesktopGate(){"undefined"!=typeof window&&(this.desktopMq=window.matchMedia("(pointer: fine) and (hover: hover) and (min-width: 769px)"),this.onDesktopChange=()=>{const t=this.desktopMq?.matches??!1;t!==this.enabled&&(this.enabled=t,t?this.mountLayer():this.teardownLayer())},this.onDesktopChange(),this.desktopMq.addEventListener("change",this.onDesktopChange))}updateScope(){this.isScoped=this.childElementCount>0||!!this.textContent?.trim()}isInScope(t){return!!t&&(!this.isScoped||this.contains(t))}mountLayer(){this.teardownLayer(),this.updateScope();const i=this.getAttribute("default-label")||"See the project",o=this.getAttribute("selector")||'a[href], button:not(:disabled), [role="button"]:not([aria-disabled="true"]), [data-cursor], [data-cursor-label], input[type="submit"], input[type="button"]',n=Math.min(1,Math.max(.05,Number(this.getAttribute("smoothness")||.14))),r=function parseOffset(t){if(!t)return{x:18,y:18};try{const e=JSON.parse(t);return{x:Number(e.x??18),y:Number(e.y??18)}}catch{const[e,s]=t.split(",").map(t=>Number(t.trim()));return{x:Number.isFinite(e)?e:18,y:Number.isFinite(s)?s:18}}}(this.getAttribute("offset")),a=this.hasAttribute("hide-native-cursor")&&"false"!==this.getAttribute("hide-native-cursor"),l=!this.hasAttribute("show-icon")||"false"!==this.getAttribute("show-icon");a&&document.documentElement.classList.add(s),this.portalRoot=document.createElement("div"),this.portalRoot.className=e,this.portalRoot.setAttribute("aria-hidden","true"),this.pillEl=document.createElement("div"),this.pillEl.className=`${e}__pill`,this.labelEl=document.createElement("span"),this.labelEl.textContent=i,this.pillEl.appendChild(this.labelEl),l&&(this.iconEl=document.createElement("span"),this.iconEl.className=`${e}__icon`,this.iconEl.appendChild(t("arrow-right",14)),this.pillEl.appendChild(this.iconEl)),this.portalRoot.appendChild(this.pillEl),document.body.appendChild(this.portalRoot),this.onMouseMove=t=>{this.target={x:t.clientX+r.x,y:t.clientY+r.y};const s=document.elementFromPoint(t.clientX,t.clientY),n=s?.closest(o)??null;this.isInScope(n)&&n?(this.labelEl&&(this.labelEl.textContent=function getLabelFromElement(t,e){return t.getAttribute("data-cursor-label")||t.getAttribute("data-cursor")||t.getAttribute("aria-label")||e}(n,i)),this.pillEl?.classList.add(`${e}__pill--visible`)):this.pillEl?.classList.remove(`${e}__pill--visible`)},window.addEventListener("mousemove",this.onMouseMove,{passive:!0});const tick=()=>{this.current.x+=(this.target.x-this.current.x)*n,this.current.y+=(this.target.y-this.current.y)*n,this.portalRoot&&(this.portalRoot.style.transform=`translate3d(${this.current.x}px, ${this.current.y}px, 0)`),this.raf=requestAnimationFrame(tick)};this.raf=requestAnimationFrame(tick)}teardownLayer(){cancelAnimationFrame(this.raf),this.onMouseMove&&(window.removeEventListener("mousemove",this.onMouseMove),this.onMouseMove=void 0),document.documentElement.classList.remove(s),this.portalRoot?.remove(),this.portalRoot=void 0,this.pillEl=void 0,this.labelEl=void 0,this.iconEl=void 0}teardown(){this.teardownLayer(),this.desktopMq&&this.onDesktopChange&&this.desktopMq.removeEventListener("change",this.onDesktopChange),this.isScoped=!1,this.enabled=!1}}customElements.get("db-cursor-follower")||customElements.define("db-cursor-follower",DbCursorFollower);export{DbCursorFollower};
+import { createDbIcon } from './db-icons.js';
+
+const CLASS = 'designbase-wc-cursor-follower';
+const HIDE_CLASS = 'designbase-wc-cursor-follower--hide-native';
+const DESKTOP_MEDIA = '(pointer: fine) and (hover: hover) and (min-width: 769px)';
+const DEFAULT_SELECTOR = 'a[href], button:not(:disabled), [role="button"]:not([aria-disabled="true"]), [data-cursor], [data-cursor-label], input[type="submit"], input[type="button"]';
+function getLabelFromElement(el, defaultLabel) {
+    return (el.getAttribute('data-cursor-label') ||
+        el.getAttribute('data-cursor') ||
+        el.getAttribute('aria-label') ||
+        defaultLabel);
+}
+function parseOffset(raw) {
+    if (!raw)
+        return { x: 18, y: 18 };
+    try {
+        const parsed = JSON.parse(raw);
+        return {
+            x: Number(parsed.x ?? 18),
+            y: Number(parsed.y ?? 18),
+        };
+    }
+    catch {
+        const [x, y] = raw.split(',').map((v) => Number(v.trim()));
+        return {
+            x: Number.isFinite(x) ? x : 18,
+            y: Number.isFinite(y) ? y : 18,
+        };
+    }
+}
+class DbCursorFollower extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.target = { x: -9999, y: -9999 };
+        this.current = { x: -9999, y: -9999 };
+        this.raf = 0;
+        this.enabled = false;
+        this.isScoped = false;
+    }
+    static get observedAttributes() {
+        return [
+            'default-label',
+            'selector',
+            'smoothness',
+            'offset',
+            'hide-native-cursor',
+            'show-icon',
+        ];
+    }
+    connectedCallback() {
+        this.style.display = 'contents';
+        this.setupDesktopGate();
+    }
+    disconnectedCallback() {
+        this.teardown();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected && this.enabled)
+            this.mountLayer();
+    }
+    setupDesktopGate() {
+        if (typeof window === 'undefined')
+            return;
+        this.desktopMq = window.matchMedia(DESKTOP_MEDIA);
+        this.onDesktopChange = () => {
+            const next = this.desktopMq?.matches ?? false;
+            if (next === this.enabled)
+                return;
+            this.enabled = next;
+            if (next) {
+                this.mountLayer();
+            }
+            else {
+                this.teardownLayer();
+            }
+        };
+        this.onDesktopChange();
+        this.desktopMq.addEventListener('change', this.onDesktopChange);
+    }
+    updateScope() {
+        // 이 커스텀 엘리먼트는 Shadow DOM을 쓰지 않으므로, light DOM 자식이
+        // 있으면 엘리먼트 자신(this)이 곧 스코프가 된다. 자식이 없으면 전역 모드.
+        this.isScoped = this.childElementCount > 0 || !!this.textContent?.trim();
+    }
+    isInScope(el) {
+        if (!el)
+            return false;
+        if (!this.isScoped)
+            return true;
+        return this.contains(el);
+    }
+    mountLayer() {
+        this.teardownLayer();
+        this.updateScope();
+        const defaultLabel = this.getAttribute('default-label') || 'See the project';
+        const selector = this.getAttribute('selector') || DEFAULT_SELECTOR;
+        const smoothness = Math.min(1, Math.max(0.05, Number(this.getAttribute('smoothness') || 0.14)));
+        const offset = parseOffset(this.getAttribute('offset'));
+        const hideNativeCursor = this.hasAttribute('hide-native-cursor') && this.getAttribute('hide-native-cursor') !== 'false';
+        const showIcon = !this.hasAttribute('show-icon') || this.getAttribute('show-icon') !== 'false';
+        if (hideNativeCursor) {
+            document.documentElement.classList.add(HIDE_CLASS);
+        }
+        this.portalRoot = document.createElement('div');
+        this.portalRoot.className = CLASS;
+        this.portalRoot.setAttribute('aria-hidden', 'true');
+        this.pillEl = document.createElement('div');
+        this.pillEl.className = `${CLASS}__pill`;
+        this.labelEl = document.createElement('span');
+        this.labelEl.textContent = defaultLabel;
+        this.pillEl.appendChild(this.labelEl);
+        if (showIcon) {
+            this.iconEl = document.createElement('span');
+            this.iconEl.className = `${CLASS}__icon`;
+            this.iconEl.appendChild(createDbIcon('arrow-right', 14));
+            this.pillEl.appendChild(this.iconEl);
+        }
+        this.portalRoot.appendChild(this.pillEl);
+        document.body.appendChild(this.portalRoot);
+        this.onMouseMove = (event) => {
+            this.target = {
+                x: event.clientX + offset.x,
+                y: event.clientY + offset.y,
+            };
+            const hit = document.elementFromPoint(event.clientX, event.clientY);
+            const interactive = hit?.closest(selector) ?? null;
+            if (this.isInScope(interactive) && interactive) {
+                if (this.labelEl)
+                    this.labelEl.textContent = getLabelFromElement(interactive, defaultLabel);
+                this.pillEl?.classList.add(`${CLASS}__pill--visible`);
+            }
+            else {
+                this.pillEl?.classList.remove(`${CLASS}__pill--visible`);
+            }
+        };
+        window.addEventListener('mousemove', this.onMouseMove, { passive: true });
+        const tick = () => {
+            this.current.x += (this.target.x - this.current.x) * smoothness;
+            this.current.y += (this.target.y - this.current.y) * smoothness;
+            if (this.portalRoot) {
+                this.portalRoot.style.transform = `translate3d(${this.current.x}px, ${this.current.y}px, 0)`;
+            }
+            this.raf = requestAnimationFrame(tick);
+        };
+        this.raf = requestAnimationFrame(tick);
+    }
+    teardownLayer() {
+        cancelAnimationFrame(this.raf);
+        if (this.onMouseMove) {
+            window.removeEventListener('mousemove', this.onMouseMove);
+            this.onMouseMove = undefined;
+        }
+        document.documentElement.classList.remove(HIDE_CLASS);
+        this.portalRoot?.remove();
+        this.portalRoot = undefined;
+        this.pillEl = undefined;
+        this.labelEl = undefined;
+        this.iconEl = undefined;
+    }
+    teardown() {
+        this.teardownLayer();
+        if (this.desktopMq && this.onDesktopChange) {
+            this.desktopMq.removeEventListener('change', this.onDesktopChange);
+        }
+        this.isScoped = false;
+        this.enabled = false;
+    }
+}
+if (!customElements.get('db-cursor-follower')) {
+    customElements.define('db-cursor-follower', DbCursorFollower);
+}
+
+export { DbCursorFollower };