u2ui 1.0.1 → 1.4.5

package/el/copy/copy.js

@@ -1,118 +1,90 @@
-// function getElementByIdPromise(id) {
-//     return new Promise((resolve) => {
-//         const check = () => {
-//             const element = document.getElementById(id);
-//             element ? resolve(element) : requestAnimationFrame(check);
-//         };
-//         check();
-//     });
-// }
-
-function getElementByIdPromise(id) {
-    let { promise, resolve } = Promise.withResolvers();
-    const weakRef = new WeakRef(resolve);
-    const check = () => {
-        const resolve = weakRef.deref();
-        if (!resolve) return;
-        const element = document.getElementById(id);
-        element ? resolve(element) : requestAnimationFrame(check);
-    };
-    check();
-    return promise;
-}
-
-
-class U2Copy extends HTMLElement {
-    constructor() {
-        super();
-        this.mutationObserver = new MutationObserver(() => {
-            this.updateContent();
-        });
-        //this.attachShadow({ mode: 'open' });
-    }
-
-    static get observedAttributes() {
-        return ['for', 'isolate', 'sync'];
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue === newValue) return;
-        if (name === 'for') {
-            this._targetElement = null;
-            this._targetElementPromise = getElementByIdPromise(newValue);
-            this.innerHTML = '';
-            this._targetElementPromise.then(target => {
-                this._targetElement = target;
-                if (!this._targetElement) return;
-                if (this.sync) this.sync = true;
-                this.updateContent();
-            });
-        }
-        if (name === 'sync') {
-            this.sync = newValue!==null;
-        }
-    }
-    set sync(value) {
-        if (!value) {
-            this.mutationObserver.disconnect();
-        } else {
-            if (this._targetElement) {
-                this.mutationObserver.observe(this._targetElement, { childList: true, subtree: true, characterData: true });
-            }
-        }
-        this._sync = value;
-    }
-    get sync() {
-        return this._sync;
-    }
-
-    connectedCallback() {
-        //this.updateContent(); 
-    }
-    disconnectedCallback() {
-        this.mutationObserver.disconnect();
-    }
-
-    updateContent() {
-        this.innerHTML = '';
-        if (this._targetElement) {
-            let content = this._targetElement.innerHTML;
-            // replace all ids with unique ids and if references are made (label[for]) to the original id, replace them with the new id
-            const fragment = document.createRange().createContextualFragment(content);
-            const elements = fragment.querySelectorAll('[id]');
-
-            // todo:
-            // aria-Attribute (z.B. aria-labelledby, aria-describedby, aria-controls, aria-owns, aria-activedescendant, aria-flowto)
-            // svg: use xlink:href, clip-path, mask, fill, stroke, filter, marker, pattern, gradient
-            // headers attribute in table cells
-            // usemap attribute in img
-            // form attribute in input, button, select, textarea, label
-            // href-Attribute in a, area
-            // list-Attribute in input-elements
-
-            const idMap = new Map();
-            elements.forEach(element => {
-                const id = element.id;
-                const newId = id + '-' + Math.random().toString(36).substring(2);
-                idMap.set(id, newId);
-                element.id = newId;
-            });
-            const references = fragment.querySelectorAll('[for]');
-            references.forEach(element => {
-                const id = element.getAttribute('for');
-                if (idMap.has(id)) {
-                    element.setAttribute('for', idMap.get(id));
-                }
-            });
-
-            this.appendChild(fragment);
-            // if (this.hasAttribute('isolate')) {
-            //     this.shadowRoot.innerHTML = content;
-            // } else {
-            //    this.innerHTML = content;
-            // }
-        }
-    }
-}
-
+import { promiseElementById } from "../../u2/tools/promiseElementById.js";
+
+
+export default class U2Copy extends HTMLElement {
+    constructor() {
+        super();
+        this.mutationObserver = new MutationObserver(() => {
+            this.updateContent();
+        });
+    }
+
+    static observedAttributes = ['for', 'sync'];
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name === 'for') {
+            this._targetElement = null;
+            this._targetElementPromise = promiseElementById(newValue);
+            this.innerHTML = '';
+            this._targetElementPromise.then(target => {
+                this._targetElement = target;
+                if (!this._targetElement) return;
+                if (this.sync) this.sync = true;
+                this.updateContent();
+            });
+        }
+        if (name === 'sync') {
+            this.sync = newValue!==null;
+        }
+    }
+    set sync(value) {
+        if (!value) {
+            this.mutationObserver.disconnect();
+        } else {
+            if (this._targetElement) {
+                this.mutationObserver.observe(this._targetElement, { childList: true, subtree: true, characterData: true });
+            }
+        }
+        this._sync = value;
+    }
+    get sync() {
+        return this._sync;
+    }
+
+    connectedCallback() {
+        //this.updateContent(); 
+    }
+    disconnectedCallback() {
+        this.mutationObserver.disconnect();
+    }
+
+    updateContent() {
+        this.innerHTML = '';
+        if (this._targetElement) {
+            let content = this._targetElement.innerHTML;
+
+            // replace all ids with unique ids and if references are made (label[for]) to the original id, replace them with the new id
+            const fragment = document.createRange().createContextualFragment(content);
+            const elements = fragment.querySelectorAll('[id]');
+
+            // todo:
+            // aria-Attribute (z.B. aria-labelledby, aria-describedby, aria-controls, aria-owns, aria-activedescendant, aria-flowto)
+            // svg: use xlink:href, clip-path, mask, fill, stroke, filter, marker, pattern, gradient
+            // headers attribute in table cells
+            // usemap attribute in img
+            // form attribute in input, button, select, textarea, label
+            // href-Attribute in a, area
+            // list-Attribute in input-elements
+
+            const idMap = new Map();
+            elements.forEach(element => {
+                const id = element.id;
+                const newId = id + '-' + Math.random().toString(36).substring(2);
+                idMap.set(id, newId);
+                element.id = newId;
+            });
+            const references = fragment.querySelectorAll('[for]');
+            references.forEach(element => {
+                const id = element.getAttribute('for');
+                if (idMap.has(id)) {
+                    element.setAttribute('for', idMap.get(id));
+                }
+            });
+
+            this.appendChild(fragment);
+        }
+    }
+}
+
 customElements.define('u2-copy', U2Copy);

package/el/copy/manifest.json

@@ -1,49 +1,37 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-    {
-        "kind": "javascript-module",
-        "path": "copy.js",
-        "declarations": [
-          {
-            "kind": "class",
-            "description": "copys the content of an other element",
-            "name": "u2-copy",
-            "members": [
-            ],
-            "events": [],
-            "attributes": [
-                {
-                    "name": "for",
-                    "description": "The id of the element to copy",
-                    "type": "string"
-                },{
-                    "name": "sync",
-                    "description": "If true, the copy will be updated when the original element changes",
-                    "type": "boolean"
-                }
-            ],
-            "cssProperties": [],
-            "cssParts": [],
-            "superclass": {
-              "name": "HTMLElement"
-            },
-            "tagName": "u2-copy",
-            "customElement": true
-          }
-        ],
-        "exports": [
-          {
-            "kind": "custom-element-definition",
-            "name": "u2-copy",
-            "declaration": {
-              "name": "u2-copy",
-              "module": "copy.js"
-            }
-          }
-        ]
-      }
-    ]
-  }
-  
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "copy.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "copys the content of an other element",
+            "name": "U2Copy",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "for",
+                "description": "The id of the element to copy",
+                "type": "string"
+            },{
+                "name": "sync",
+                "description": "If true, the copy will be updated when the original element changes",
+                "type": "boolean"
+            }],
+            "cssProperties": [],
+            "cssParts": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-copy",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-copy",
+            "declaration": {
+                "name": "U2Copy",
+                "module": "copy.js"
+            }
+        }]
+    }]
+}

package/el/counter/README.md

@@ -16,29 +16,32 @@ Animated Number Counter
 ## Usage
 
 ```html
-Counter: <u2-counter from=-11.0 value=200.0>200.0</u2-counter>
+Counter:
+<u2-counter from=-11.0 value=200.0>
+    200.0
+</u2-counter>
 ```
 
 ```css
-u2-counter {
-    font-size:3rem;
-    text-align:right;
-    padding:.3em;
-    background:#eee;
+u2-counter {
+    font-size:3rem;
+    text-align:right;
+    padding:.3em;
+    background:#eee;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/counter/counter.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/counter/counter.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/counter/counter.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/counter/counter.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/counter/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/counter/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/counter/tests/minimal.html)  
 
 ## About
 

package/el/counter/counter.css

@@ -1,8 +1,8 @@
-u2-counter {
-    text-align:center;
-    display:inline-block;
-    min-inline-size:var(--js-final-inline-size);
-    font-variant: tabular-nums;
-    font-feature-settings: "tnum";
-    box-sizing:border-box;
-}
+u2-counter {
+    text-align:center;
+    display:inline-block;
+    min-inline-size:var(--js-final-inline-size);
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+    box-sizing:border-box;
+}

package/el/counter/counter.js

@@ -1,95 +1,96 @@
-class counter extends HTMLElement {
-    constructor() {
-        super();
-
-        this._start = 0;
-        this._end = Number(this.innerHTML.replace("'",''));
-
-        this.animatedValue = 0;
-
-        this._observer = new IntersectionObserver((entries)=>{
-            if (entries[0].isIntersecting) {
-                this._animate(this._start, this._end)
-                if (this.hasAttribute('once')) this._observer.disconnect(this);
-            } else {
-                this._reset();
-            }
-        });
-    }
-    static observedAttributes = ['value', 'from', 'no-grouping', 'once'];
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'value') this.value = newValue;
-        if (name === 'from') this._start = parseFloat(newValue);
-        if (name === 'no-grouping') this.noGrouping = newValue!==null;
-    }
-    set value(value){
-        let [ integer, digits='' ] = value.trim().split('.');
-        this._minDigits = digits.length;
-
-        this._end = Number(value);
-        // todo: recalculate finalWidth
-        this._animate(this.animatedValue, this._end);
-    }
-
-    connectedCallback() {
-        // measure final-width
-        this.innerHTML = format(this, this._end);
-        const writingMode = getComputedStyle(this).getPropertyValue('writing-mode');
-        const vertical = writingMode.includes('vertical');
-        const inlineSizePx = vertical ? this.offsetHeight : this.offsetWidth;
-        const fontSizePx = Number(getComputedStyle(this).getPropertyValue('font-size').slice(0,-2));
-        const em = inlineSizePx / fontSizePx;
-        this.style.setProperty('--js-final-inline-size', em+'em');
-
-        this._reset();
-        this._observer.observe(this);
-    }
-    disconnectedCallback() {
-        this._observer.disconnect(this)
-    }
-    _animate(from, to) {
-        const duration = 2000;
-        let diff = to - from;
-        this._stop();
-        this.animatedValue = from;
-        let start = performance.now();
-        this._interval = setInterval(()=>{
-            let now = performance.now();
-            let progress = (now - start) / duration;
-            if (progress>1) progress = 1;
-            this.animatedValue = from + diff * easeOutCubic(progress);
-            if (progress >= 1) {
-                this.animatedValue = to;
-                this._stop();
-            }
-            this._draw()
-        },15)
-    }
-    _stop() {
-        clearInterval(this._interval);
-    }
-    _reset() {
-        this._stop();
-        this.animatedValue = this._end;
-        this._draw();
-    }
-    _draw(){
-        requestAnimationFrame(()=> this.innerHTML = format(this, this.animatedValue) );
-    }
-}
-
-// https://easings.net/de
-function easeOutCubic(x) {
-    return 1 - Math.pow(1 - x, 3);
-}
-
-function format(el, val){
-    return new Intl.NumberFormat(undefined, {
-        style: 'decimal',
-        minimumFractionDigits: el._minDigits || 0,
-        maximumFractionDigits: el._minDigits || 0,
-        useGrouping: !el.noGrouping
-    }).format(val);
-}
-
-customElements.define('u2-counter', counter)
+export default class U2Counter extends HTMLElement {
+    constructor() {
+        super();
+
+        this._start = 0;
+        this._end = Number(this.innerHTML.replaceAll("'",''));
+
+        this.animatedValue = 0;
+
+        this._observer = new IntersectionObserver((entries)=>{
+            if (entries[0].isIntersecting) {
+                this._animate(this._start, this._end)
+                if (this.hasAttribute('once')) this._observer.disconnect(this);
+            } else {
+                this._reset();
+            }
+        });
+    }
+    static observedAttributes = ['value', 'from', 'no-grouping', 'once'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'value') this.value = newValue;
+        if (name === 'from') this._start = parseFloat(newValue);
+        if (name === 'no-grouping') this.noGrouping = newValue!==null;
+    }
+    set value(value){
+        value = String(value).trim();
+        let [ integer, digits='' ] = value.trim().split('.');
+        this._minDigits = digits.length;
+
+        this._end = Number(value);
+        // todo: recalculate finalWidth
+        this._animate(this.animatedValue, this._end);
+    }
+
+    connectedCallback() {
+        // measure final-width
+        this.innerHTML = format(this, this._end);
+        const writingMode = getComputedStyle(this).getPropertyValue('writing-mode');
+        const vertical = writingMode.includes('vertical');
+        const inlineSizePx = vertical ? this.offsetHeight : this.offsetWidth;
+        const fontSizePx = Number(getComputedStyle(this).getPropertyValue('font-size').slice(0,-2));
+        const em = inlineSizePx / fontSizePx;
+        this.style.setProperty('--js-final-inline-size', em+'em');
+
+        this._reset();
+        this._observer.observe(this);
+    }
+    disconnectedCallback() {
+        this._observer.disconnect(this)
+        this._stop();
+    }
+    _animate(from, to) {
+        const duration = 2000;
+        let diff = to - from;
+        this._stop();
+        this.animatedValue = from;
+        let start = performance.now();
+        this._interval = setInterval(()=>{
+            let now = performance.now();
+            let progress = Math.min((now - start) / duration, 1);
+            this.animatedValue = from + diff * easeOutCubic(progress);
+            if (progress >= 1) {
+                this.animatedValue = to;
+                this._stop();
+            }
+            this._draw()
+        },15)
+    }
+    _stop() {
+        clearInterval(this._interval);
+    }
+    _reset() {
+        this._stop();
+        this.animatedValue = this._end;
+        this._draw();
+    }
+    _draw(){
+        requestAnimationFrame(()=> this.innerHTML = format(this, this.animatedValue) );
+    }
+}
+
+// https://easings.net/de
+function easeOutCubic(x) {
+    return 1 - Math.pow(1 - x, 3);
+}
+
+function format(el, val){
+    return new Intl.NumberFormat(undefined, {
+        style: 'decimal',
+        minimumFractionDigits: el._minDigits || 0,
+        maximumFractionDigits: el._minDigits || 0,
+        useGrouping: !el.noGrouping
+    }).format(val);
+}
+
+customElements.define('u2-counter', U2Counter)