@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,173 +1 @@
-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 };
+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};