u2ui 1.0.1 → 1.4.6

package/el/spot/manifest.json

@@ -0,0 +1,55 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "spot.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Visual indicator tracking elements by selector",
+            "name": "U2Spot",
+            "members": [{
+                "kind": "method",
+                "name": "moveTo",
+                "description": "Moves the spot to the given element"
+            },{
+                "kind": "method",
+                "name": "reset",
+                "description": "Resets the spot to the fallback or hides it"
+            },{
+                "kind": "method",
+                "name": "updatePosition",
+                "description": "Re-positions the spot on the current target"
+            }],
+            "events": [],
+            "attributes": [{
+                "name": "target",
+                "description": "Selector of the elements to track (default: *)",
+                "u2Examples": ["*", ":scope > h6"]
+            },{
+                "name": "active",
+                "description": "Selector deciding which target is active (default: :hover)",
+                "u2Examples": [":hover", ".active"]
+            },{
+                "name": "fallback",
+                "description": "Selector of the element to track when none is active"
+            }],
+            "cssProperties": [{
+                "name": "--target-border-radius",
+                "description": "Read only! Border radius of the current target",
+                "syntax": "<length>"
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-spot",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-spot",
+            "declaration": {
+                "name": "U2Spot",
+                "module": "spot.js"
+            }
+        }]
+    }]
+}

package/el/spot/spot.css

@@ -0,0 +1,23 @@
+u2-spot {
+  position: absolute;
+  pointer-events: none;
+  z-index: -1;
+  background-color: rgba(0,0,0,0.15);
+  opacity: 0;
+  will-change:transform;
+  transition-duration: .3s;
+  transition-property: width, height, transform, opacity, border-radius;
+  transition-timing-function: ease;
+  border-radius: var(--target-border-radius);
+  inset: 0;
+}
+
+@supports (position-anchor: --test) {
+  u2-spot {
+    inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
+    width: auto;
+    height: auto;
+    transform: none;
+    transition-property: opacity, border-radius, inset;
+  }
+}

package/el/spot/spot.js

@@ -0,0 +1,106 @@
+export default class U2Spot extends HTMLElement {
+    constructor() {
+        super();
+        this.targetSelector = this.getAttribute('target') || '*';
+        this.activeSelector = this.getAttribute('active') || ':hover';
+        this.fallbackSelector = this.getAttribute('fallback') || null;
+        this.currentTarget = null;
+        this.resizeObserver = new ResizeObserver(() => this.updatePosition());
+    }
+
+    connectedCallback() {
+        this.parent = this.parentElement;
+        ['mouseover', 'mouseout', 'focusin', 'focusout', 'click'].forEach(evt =>
+            this.parent.addEventListener(evt, this)
+        );
+        this.reset();
+        this.resizeObserver.observe(this.parent);
+    }
+
+    handleEvent(e) {
+        const el = e.target.closest(this.targetSelector);
+        if (el === this.parentElement) return;
+
+        if (el && el.matches(this.activeSelector)) {
+            this.moveTo(el);
+            return;
+        }
+        // sonst prüfen, ob noch irgendein Element matcht
+        const match = this.parent.querySelector(`${this.targetSelector}${this.activeSelector}`);
+        match ? this.moveTo(match) : this.reset();
+    }
+
+
+    moveTo(el) {
+        clearTimeout(this._currentTimeout);
+        this.style.opacity = 1;
+        if (this.currentTarget === el) return; // Redundante Updates vermeiden
+        this._anchorTo(el) || this._positionTo(el);
+        this.style.setProperty('--target-border-radius', getComputedStyle(el).borderRadius);
+        this.currentTarget = el;
+    }
+    _anchorTo(el) {
+        if (!CSS.supports('position-anchor', '--test')) return false;
+        el.style.anchorName ||= `--${el.id || Math.random().toString(36).slice(2, 5)}`;
+        this._setCss(()=>{
+            this.style.positionAnchor = el.style.anchorName;
+        });
+        return true;
+    }
+    _positionTo(el){
+        const parent = this.offsetParent; // || document.body;
+        const parentRect = parent.getBoundingClientRect();
+        const elRect = el.getBoundingClientRect();
+
+        this.style.width = elRect.width + 'px';
+        this.style.height = elRect.height + 'px';
+        this.style.top = '0px';
+        this.style.left = '0px';
+
+        const parentStyle = getComputedStyle(parent);
+        const marginLeft = parseFloat(parentStyle.marginLeft) || 0;
+        const marginTop = parseFloat(parentStyle.marginTop) || 0;
+
+        const x = elRect.left - parentRect.left + marginLeft;
+        const y = elRect.top - parentRect.top + marginTop;
+
+        this._setCss(()=>{
+            this.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+        });
+    }
+    _setCss(fn){
+        if (this.currentTarget == null) {
+            const prev = this.style.transition;
+            this.style.transition = 'none';
+            fn();
+            this.offsetHeight; // Reflow
+            this.style.transition = prev;
+        } else {
+            fn();
+        }
+    }
+    reset() {
+        clearTimeout(this._currentTimeout);
+
+        const fallbackEl = this.fallbackSelector ? this.parent.querySelector(this.fallbackSelector) : null;
+        if (fallbackEl) this.moveTo(fallbackEl);
+        else {
+            this.style.opacity = 0;
+            this._currentTimeout = setTimeout(()=> this.currentTarget = null, 400);
+        }
+    }
+
+    updatePosition() {
+        if (this.currentTarget) this.moveTo(this.currentTarget);
+    }
+
+    disconnectedCallback() {
+        ['mouseover', 'mouseout', 'focusin', 'focusout', 'click'].forEach(evt =>
+            this.parent.removeEventListener(evt, this)
+        );
+        this.resizeObserver?.disconnect();
+        this.parent = null;
+    }
+}
+
+customElements.define('u2-spot', U2Spot);

package/el/system/README.md

@@ -0,0 +1,29 @@
+# <u2-system> - element
+Manage U2 system: preferences, debug, optimization
+
+## Usage
+
+```html
+<u2-system></u2-system>
+```
+
+```css
+
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/system/system.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/system/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/system/tests/minimal.html)  
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+