u2ui 1.0.0

package/el/copy/copy.js

@@ -0,0 +1,118 @@
+// 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;
+            // }
+        }
+    }
+}
+
+customElements.define('u2-copy', U2Copy);

package/el/copy/manifest.json

@@ -0,0 +1,49 @@
+{
+    "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"
+            }
+          }
+        ]
+      }
+    ]
+  }
+  

package/el/copy/tests/minimal.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/aria.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+    <script src="../copy.js" type=module async></script>
+    <link href="../copy.css" rel=stylesheet>
+
+<body>
+
+<section class="main">
+    original: <span id=source contenteditable>Hello <b>World</b></span>
+    <br>
+    copy: <u2-copy for=source sync></u2-copy>
+</section>

package/el/copy/tests/test.html

@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <title>Test</title>
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+    <script src="../../../u2/auto.js" type=module async></script>
+    
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+
+    <script src="../copy.js" type=module async></script>
+    <link href="../copy.css" rel=stylesheet>
+
+    <style>
+        body {
+            --u2-ico-dir: 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/';
+        }
+        [contenteditable] {
+            background-color: #fee;
+            padding: 1em;
+            margin: 1em 0;
+        }
+        u2-copy {
+            display: block;
+            margin: 1em 0;
+            padding: 1em;
+            background-color: var(--color-light);
+        }
+
+    </style>
+
+<body>
+
+<section>
+
+    <h2>Source</h2>
+
+    <h4>This is "source 1", a contenteditable element thats contents will be copied:</h4>
+    <ul>
+        <li>IDs will be renamed
+        <li>For attributes will be referenced
+    </ul>
+    <div id="source1" contenteditable>
+        Text <label for="input1">label</label>
+        <input id="input1" type="text" value="value">
+    </div>
+
+
+    <h4>Copy synced</h4>
+    <u2-copy for="source1" sync></u2-copy>
+
+    <h4>Copy not synced</h4>
+    <u2-copy for="source1"></u2-copy>
+
+    <h2>Source Element appears delayed</h2>
+
+    <h4>This is source 2:</h4>
+    <div contenteditable id="source2">Content 2</div>
+
+    <h4>This is will_be_source_3:</h4>
+    <div id="will_be_source3" contenteditable>Content 3</div>
+    
+    Select the source dynamically:<br>
+    <button onclick="copy2.setAttribute('for', 'source1')">Set source 1</button><br>
+    <button onclick="copy2.setAttribute('for', 'source2')">Set source 2</button><br>
+    <button onclick="copy2.setAttribute('for', 'source3'); setTimeout(()=> will_be_source3.id = 'source3', 1000)">Set source 3</button><br>
+
+
+
+    <u2-copy sync id="copy2"></u2-copy>
+

package/el/counter/README.md

@@ -0,0 +1,47 @@
+# <u2-counter> - element
+Animated Number Counter
+
+## Features
+
+- The counter starts when the element comes into the viewport
+- Attribute `once` to count only once
+- It counts using a easeOutCubic timing function
+- Attribute `value="12.30"` defines target value 
+- ...and decimal places to be displayed!
+- Optional attribute `from="-10"` defines start value. Without it, it will start at 0
+- You can set the property `element.value` to start counting.
+- Counter elements get a css variable `--js-final-inline-size` which is set to their `min-width` by default.
+- Use the inner HTML as fallback.
+
+## Usage
+
+```html
+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;
+}
+```
+
+## 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>
+```
+
+## 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)  
+
+## 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. ♥
+

package/el/counter/counter.css

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

package/el/counter/counter.js

@@ -0,0 +1,95 @@
+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)

package/el/counter/manifest.json

@@ -0,0 +1,59 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+    {
+        "kind": "javascript-module",
+        "path": "counter.js",
+        "declarations": [
+        {
+            "kind": "class",
+            "description": "Animated Number Counter",
+            "name": "counter",
+            "members": [],
+            "events": [],
+            "attributes": [
+                {
+                    "name": "value",
+                    "description": "The value to count to, if not set, the innerHTML will be used as the value",
+                    "u2-type": "number",
+                    "u2Examples": ["10", "100", "-999", "71934"]
+                },{
+                    "name": "from",
+                    "description": "The value to start counting from, if not set, 0 will be used",
+                    "u2-type": "number",
+                    "u2Examples": ["0", "100", "-999", "71934"]
+                },{
+                    "name": "once",
+                    "description": "If set, the counter will only count once, else it will count every time it is in view",
+                    "u2-type": "boolean"
+                },{
+                    "name": "no-grouping",
+                    "description": "If set, the counter will not use grouping separators",
+                    "u2-type": "boolean"
+                }
+            ],
+            "cssProperties": [
+                {
+                    "name": "--js-final-inline-size",
+                    "description": "Read only! The final width of the counter"
+                }
+            ],
+            "superclass": {"name": "HTMLElement"},
+            "tagName": "u2-counter",
+            "customElement": true
+        }
+        ],
+        "exports": [
+            {
+                "kind": "custom-element-definition",
+                "name": "u2-counter",
+                "declaration": {
+                    "name": "counter",
+                    "module": "counter.js"
+                }
+            }
+        ]
+      }
+    ]
+  }

package/el/counter/tests/minimal.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+    <link rel=stylesheet href="../counter.css">
+    <script src="../counter.js" type=module async></script>
+
+<body>
+
+    <section class="main">
+        Counter: <u2-counter from=-11.0 value=200.0>200.0</u2-counter>
+    </section>
+
+    <style class="main">
+        u2-counter {
+            font-size:3rem;
+            text-align:right;
+            padding:.3em;
+            background:#eee;
+        }
+    </style>

package/el/counter/tests/test.html

@@ -0,0 +1,106 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/aria.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+    <link rel=stylesheet href="../counter.css">
+    <script src="../counter.js" type=module async></script>
+
+</head>
+
+<body>
+
+    <header>
+        <h1>u2-counter</h1>
+    </header>
+
+    <section>
+        <h2>Test</h2>
+        <table>
+            <tr>
+                <td> Use "value"-Attribute:
+                <td align=right> <u2-counter value="5000"></u2-counter>
+            <tr>
+                <td> Use "value"-Attribute with digits "1.00" (not working when using innerHTML)
+                <td align=right> <u2-counter value="1.00"></u2-counter>
+            <tr>
+                <td> Attribute "from"
+                <td align=right> <u2-counter no-grouping from=1000 value="-1000"></u2-counter>
+            <tr>
+                <td> Attribute "no-grouping"
+                <td align=right> <u2-counter no-grouping>5000</u2-counter>
+            <tr>
+                <td> Use innerHTML:
+                <td align=right> <u2-counter>5000</u2-counter>
+        </table>
+    </section>
+
+    <section>
+        <h2>API tests</h2>
+        <u2-counter id=counter1>100000</u2-counter>
+        <label>
+            Set value: <input placeholder onchange="counter1.setAttribute('value', this.value)" style="width:5em">
+        </label>
+    </section>
+
+
+    <section>
+        <h2>Scroll test</h2>
+        <div style="overflow:auto; height:200px">
+            Scroll down to start the counter
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <u2-counter style="font-size:2em; margin:auto; padding:1rem; background:#999; border-radius:2rem">1386</u2-counter>
+            <u2-counter style="font-size:2em; margin:auto; padding:1rem; background:#999; border-radius:2rem">-10</u2-counter>
+            once-attribute: <u2-counter once style="font-size:2em; margin:auto; padding:1rem; background:#999; border-radius:2rem" value=876.0></u2-counter>
+        </div>
+    </section>
+
+
+
+    <section>
+        <h2>remove from dom and reattache</h2>
+
+        <div id=container3>
+            <u2-counter id=counter3 style="font-size:2em; margin:auto; padding:1rem; background:#999; border-radius:2rem">345</u2-counter>
+            <button id=button3>remove / attache</button>
+        </div>
+        <script>
+        let counter3 = window.counter3;
+        let to = null;
+        button3.onclick = ()=>{
+            counter3.remove();
+            clearTimeout(to);
+            to = setTimeout(()=>container3.append(counter3), 2000);
+        }
+        </script>
+
+    </section>