u2ui 1.0.1 → 1.4.6

package/el/time/time.js

@@ -1,168 +1,179 @@
-
-class Time extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({mode: 'open'});
-        this.shadowRoot.innerHTML = `<time><span id=out></span><slot id=fallback></slot></time>`;
-        this._timeEl = this.shadowRoot.querySelector('time');
-        this._outEl = this.shadowRoot.getElementById('out');
-        this._fallbackEl = this.shadowRoot.getElementById('fallback');
-    }
-    connectedCallback() {
-        this.reset();
-    }
-    disconnectedCallback() {
-        clearTimeout(this.__timer);
-    }
-    static  observedAttributes = ['datetime', 'lang', 'type', 'weekday', 'year', 'month', 'day', 'hour', 'minute', 'second', 'mode'];
-    attributeChangedCallback(name, old, value) {
-        if (old === value) return;
-        this.reset();
-    }
-    reset() {
-        this.__type = this.getAttribute('type') || 'relative';
-        let show = this.getAttribute('type') || this.innerHTML === '';
-        if (!show) return;
-
-
-        
-        const string = this.getAttribute('datetime');
-
-        // const datetimeRegex = /^(\d{4})(?:-(\d{2})(?:-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?(Z|([-+]\d{2}:?\d{2}))?)?)?)?$/;
-        // const match = string.match(datetimeRegex);
-        // if (match) {
-        //     this._representation = 'datetime';
-        // } else if (string.match(/^\d{2}:\d{2}(:\d{2}(\.\d{1,3})?)?$/)) {
-        //     this._representation = 'time';
-        //     this._
-        // } else if (string.match(/^\d{4}-\d{2}$/)) {
-        //     this._representation = 'yearless-date';
-        // } else if (string.match(/^P/)) {
-        //     this._representation = 'duration'; // eg PT4H18M3S
-        // }
-
-
-        let date = string.match(/^-?\d{5,}$/) ? Number(string) : Date.parse(string);
-
-        date = new Date(date);
-        this.__date = date;
-        this.__lang = langFromElement(this) || 'default';
-        this.render();
-    }
-    render() {
-        let content = '';
-        let title = '';
-
-        let date = this.__date;
-        const valid = !isNaN(date);
-        if (valid) {
-            const relativeData = types['relative'](this, date);
-            const absoluteData = types['date'](this, date);
-            content = this.__type === 'relative' ? relativeData.show : absoluteData.show;
-            title = this.__type === 'relative' ? absoluteData.show : relativeData.show;
-            clearTimeout(this.__timer);
-            if (relativeData.nextUpdateIn < 2 * 60 * 60 * 1000) {
-                this.__timer = setTimeout(() => this.render(), relativeData.nextUpdateIn + 100);
-            }
-        }
-        this._timeEl.setAttribute('datetime', this.getAttribute('datetime'));
-        this._timeEl.setAttribute('title', title);
-        if (content !== this._outEl.innerHTML) this._outEl.innerHTML = content;
-        this._fallbackEl.hidden = valid;
-    }
-}
-
-
-const types = {
-    relative(el, date) {
-        const mode = el.getAttribute('mode') || 'long';
-        const rtf = new Intl.RelativeTimeFormat(el.__lang, {
-            //localeMatcher: , // 'best fit', 'lookup'
-            numeric: 'auto', // always, auto
-            style: mode // long, narrow, short
-        });
-        const now = Date.now();
-        const elapsed = date - now;
-        const { unit, rounded, nextUpdateIn } = elapsedToUnit(elapsed);
-        return {
-            show:rtf.format(rounded, unit),
-            nextUpdateIn
-        };
-    },
-    date(el, date) {
-        const options = {};
-        for (let [key, opts] of Object.entries(defaults)) {
-            const val = el.getAttribute(key);
-            if (val === null) {
-                if (opts.showAnyway) options[key] = opts.default;
-                continue;
-            }
-            else if (val === '' || val === 'true') options[key] = opts.default;
-            else if (val === 'none') options[key] = undefined;
-            else options[key] = val;
-        }
-        if (options.second && !options.minute) options.minute = options.second;
-        if (options.minute && !options.hour) options.hour = options.minute;
-        
-        const formatter = new Intl.DateTimeFormat(el.__lang, options);
-        // let html = '';
-        // for (const part of formatter.formatToParts(date)) {
-        //     html += `<span part="${part.type}">${part.value}</span>`;
-        // }
-
-        return {
-            //html: formatter.formatToParts(date).map(part => `<span part="${part.type}">${part.value}</span>`).join(''),
-            show: formatter.format(date),
-        }
-    },
-}
-
-function langFromElement(el) {
-    let langEl = el.closest('[lang]')||document.documentElement;
-    // todo: for tables i should check col and colgroup
-    // https://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#alignment-inheritance
-
-    // let list = navigator.languages;
-    // try {
-    //     list = Intl.getCanonicalLocales(lang);
-    // } catch (e) {}
-    // Intl.NumberFormat(list).format();
-    return langEl.lang || navigator.language;
-}
-
-function elapsedToUnit(elapsed, min = 'second') {
-    for (let unit in units)
-        if (Math.abs(elapsed) > units[unit] || unit === min) {
-            const rounded = Math.round(elapsed / units[unit]);
-            const nextUpdateIn = units[unit] - (elapsed % units[unit]);
-            return {
-                unit,
-                rounded,
-                nextUpdateIn
-            };
-        }
-}
-
-const defaults = {
-    weekday: { default: 'short', showAnyway: 1 },      // "narrow", "short", "long".
-    //era:                                             // "narrow", "short", "long".
-    year: { default: 'numeric', showAnyway: 1 },       // "numeric", "2-digit".
-    month: { default: 'short', showAnyway: 1 },        // "numeric", "2-digit", "narrow", "short", "long".
-    day: { default: 'numeric', showAnyway: 1 },        // "numeric", "2-digit".
-    hour: { default: 'numeric', showAnyway: 0 },       // "numeric", "2-digit".
-    minute: { default: 'numeric', showAnyway: 0 },     // "numeric", "2-digit".
-    second: { default: 'numeric', showAnyway: 0 },     // "numeric", "2-digit".
-    timeZoneName: { default: 'short', showAnyway: 0 }, // "short", "long".
-};
-
-const units = {
-    year: 24 * 60 * 60 * 1000 * 365,
-    month: 24 * 60 * 60 * 1000 * 365 / 12,
-    day: 24 * 60 * 60 * 1000,
-    hour: 60 * 60 * 1000,
-    minute: 60 * 1000,
-    second: 1000
-}
-
-
-customElements.define('u2-time', Time);
+
+export default class U2Time extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+        this.shadowRoot.innerHTML = `<time><span id=out></span><slot id=fallback></slot></time>`;
+        this._timeEl = this.shadowRoot.querySelector('time');
+        this._outEl = this.shadowRoot.getElementById('out');
+        this._fallbackEl = this.shadowRoot.getElementById('fallback');
+    }
+    connectedCallback() {
+        this.reset();
+    }
+    disconnectedCallback() {
+        clearTimeout(this.__timer);
+    }
+    static  observedAttributes = ['datetime', 'lang', 'type', 'weekday', 'year', 'month', 'day', 'hour', 'minute', 'second', 'mode'];
+    attributeChangedCallback(name, old, value) {
+        if (old === value) return;
+        this.reset();
+    }
+    reset() {
+        this.__type = this.getAttribute('type') || 'relative';
+        let show = this.getAttribute('type') || this.innerHTML === '';
+        if (!show) return;
+
+        const string = this.getAttribute('datetime');
+
+        // const datetimeRegex = /^(\d{4})(?:-(\d{2})(?:-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?(Z|([-+]\d{2}:?\d{2}))?)?)?)?$/;
+        // const match = string.match(datetimeRegex);
+        // if (match) {
+        //     this._representation = 'datetime';
+        // } else if (string.match(/^\d{2}:\d{2}(:\d{2}(\.\d{1,3})?)?$/)) {
+        //     this._representation = 'time';
+        //     this._
+        // } else if (string.match(/^\d{4}-\d{2}$/)) {
+        //     this._representation = 'yearless-date';
+        // } else if (string.match(/^P/)) {
+        //     this._representation = 'duration'; // eg PT4H18M3S
+        // }
+
+
+        let date = string.match(/^-?\d{5,}$/) ? Number(string) : Date.parse(string);
+
+        date = new Date(date);
+        this.__date = date;
+        this.__lang = localeFromElement(this) || 'default';
+        this.render();
+    }
+    render() {
+        let content = '';
+        let title = '';
+
+        let date = this.__date;
+        const valid = !isNaN(date);
+        if (valid) {
+            const relativeData = types['relative'](this, date);
+            const absoluteData = types['date'](this, date);
+            content = this.__type === 'relative' ? relativeData.show : absoluteData.show;
+            title = this.__type === 'relative' ? absoluteData.show : relativeData.show;
+            clearTimeout(this.__timer);
+            if (relativeData.nextUpdateIn < 2 * 60 * 60 * 1000) {
+                this.__timer = setTimeout(() => this.render(), relativeData.nextUpdateIn + 100);
+            }
+        }
+        this._timeEl.setAttribute('datetime', this.getAttribute('datetime'));
+        this._timeEl.setAttribute('title', title);
+        if (content !== this._outEl.innerHTML) this._outEl.innerHTML = content;
+        this._fallbackEl.hidden = valid;
+    }
+}
+
+
+const types = {
+    relative(el, date) {
+        const mode = ensureOption(el.getAttribute('mode'), 'long', 'narrow', 'short');
+        const rtf = new Intl.RelativeTimeFormat(el.__lang, {
+            //localeMatcher: , // 'best fit', 'lookup'
+            numeric: 'auto', // always, auto
+            style: mode // long, narrow, short // lang:de no effect
+        });
+        const now = Date.now();
+        const elapsed = date - now;
+        const {unit, rounded, nextUpdateIn} = elapsedToUnit(elapsed);
+        return {
+            show:rtf.format(rounded, unit),
+            nextUpdateIn
+        };
+    },
+    date(el, date) {
+        const options = {};
+        for (let [key, opts] of Object.entries(defaults)) {
+            const val = el.getAttribute(key);
+            const fallback = opts.allowed[0];
+            if (val === null) {
+                if (opts.showAnyway) options[key] = fallback;
+                continue;
+            }
+            else if (val === '' || val === 'true') options[key] = fallback;
+            else if (val === 'none') options[key] = undefined;
+            else {
+                if (opts.allowed.includes(val)) {
+                    options[key] = val;
+                } else {
+                    console.warn(`value ${val} for attribute ${key} not allowed`);
+                    options[key] = fallback;
+                }
+                options[key] = opts.allowed.includes(val) ? val : fallback;
+            }
+        }
+        if (options.second && !options.minute) options.minute = options.second;
+        if (options.minute && !options.hour) options.hour = options.minute;
+        
+        const formatter = new Intl.DateTimeFormat(el.__lang, options);
+        // let html = '';
+        // for (const part of formatter.formatToParts(date)) {
+        //     html += `<span part="${part.type}">${part.value}</span>`;
+        // }
+
+        return {
+            //html: formatter.formatToParts(date).map(part => `<span part="${part.type}">${part.value}</span>`).join(''),
+            show: formatter.format(date),
+        }
+    },
+}
+
+// todo? for tables i should check col and colgroup
+// https://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#alignment-inheritance
+function localeFromElement(el) {
+    let lang = el.closest('[lang]')?.lang || navigator.language;
+    try {
+        lang = Intl.getCanonicalLocales(lang)[0];
+    } catch { lang = 'en'; }
+    return lang;
+}
+
+function elapsedToUnit(elapsed, min = 'second') {
+    for (let unit in units)
+        if (Math.abs(elapsed) > units[unit] || unit === min) {
+            const rounded = Math.round(elapsed / units[unit]);
+            const nextUpdateIn = units[unit] - (elapsed % units[unit]);
+            return {
+                unit,
+                rounded,
+                nextUpdateIn
+            };
+        }
+}
+
+const defaults = {
+    // allowed first is default
+    weekday: { showAnyway: 1, allowed:["short", "narrow", "long"] },
+    //era:                                             // "narrow", "short", "long".
+    year:   { showAnyway: 1, allowed:["numeric", "2-digit"] },
+    month:  { showAnyway: 1, allowed:["short", "numeric", "2-digit", "narrow", "long"] },
+    day:    { showAnyway: 1, allowed:["numeric", "2-digit"] },
+    hour:   { showAnyway: 0, allowed:["numeric", "2-digit"] },
+    minute: { showAnyway: 0, allowed:["numeric", "2-digit"] },
+    second: { showAnyway: 0, allowed:["numeric", "2-digit"] },
+    timeZoneName: { showAnyway: 0, allowed:["short", "long"] },
+};
+
+const units = {
+    year: 24 * 60 * 60 * 1000 * 365,
+    month: 24 * 60 * 60 * 1000 * 365 / 12,
+    day: 24 * 60 * 60 * 1000,
+    hour: 60 * 60 * 1000,
+    minute: 60 * 1000,
+    second: 1000
+}
+
+const ensureOption = (val, ...options) => {
+    if (val==null) return options[0];
+    if (options.includes(val)) return val;
+    console.warn(`value "${val}" not allowed used ${options[0]}`);
+    return options[0];
+}
+
+customElements.define('u2-time', U2Time);

package/el/toc/README.md

@@ -0,0 +1,27 @@
+# <u2-toc> - element
+Automatically generate a Navigation by using the headings of the document.
+
+## Usage
+
+```html
+<u2-toc></u2-toc>
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/toc/toc.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/toc/toc.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/toc/tests/test.html)  
+[attributes.html](http://gcdn.li/u2ui/u2@main/el/toc/tests/attributes.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/toc/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. ♥
+

package/el/toc/manifest.json

@@ -0,0 +1,36 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "toc.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Automatically generates a navigation from the document's headings",
+            "name": "U2Toc",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "from",
+                "description": "Lowest heading level to include",
+                "u2Examples": ["h2", "2"]
+            },{
+                "name": "to",
+                "description": "Highest heading level to include",
+                "u2Examples": ["h4", "4"]
+            },{
+                "name": "for",
+                "description": "Selector of the container whose headings are used"
+            }],
+            "cssProperties": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-toc",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-toc",
+            "declaration": { "name": "U2Toc", "module": "toc.js" }
+        }]
+    }]
+}

package/el/toc/toc.css

@@ -0,0 +1,3 @@
+u2-toc {
+    display:block;
+}

package/el/toc/toc.js

@@ -0,0 +1,87 @@
+import '../../js/navigator/url-change-event.js';
+
+// possible todo: taking headingoffset into account https://w3c.github.io/hackathon-tpac-2024/submissions/bkardell.html
+
+export default class U2Toc extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.abortCtrl = new AbortController();
+        const signal = this.abortCtrl.signal;
+        requestAnimationFrame(() => this._build());
+        addEventListener('load', () => this._build(), {signal});
+        addEventListener('u2-url-change', ({detail})=>{
+            !detail.sameDocument && setTimeout(()=>this._build(),20); // wait for navigator :(
+        }, {signal});
+    }
+
+    disconnectedCallback() {
+        this.abortCtrl.abort();
+    }
+
+    static observedAttributes = ['from', 'to', 'for'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (newValue === oldValue) return;
+        this._build();        
+    }
+
+    _build() {
+        const nav = document.createElement('nav');
+
+        const to = parseInt(this.getAttribute('to') || 6);
+        const scopeId = this.getAttribute('for');
+        const fromAttr = this.getAttribute('from') || 'auto';
+
+        let from = parseInt(fromAttr) || 1;
+
+        const root = scopeId ? document.getElementById(scopeId) : document;
+
+        const counts = [0,0,0,0,0,0,0];
+
+        let headings = [...root.querySelectorAll('h1,h2,h3,h4,h5,h6')]
+            .filter(h => {
+                const lvl = parseInt(h.tagName[1]);
+                counts[lvl]++;
+                return lvl >= from && lvl <= to;
+            });
+
+        // auto: from is the first level where there are at least 2 headings
+        if (fromAttr === 'auto') {
+            from = counts.findIndex(count => count > 1);
+            headings = headings.filter(h => h.tagName[1] >= from );
+        }
+
+        let lastLevel = 0;
+        let currentUl = nav;
+        let currentLi = null;
+
+        for (let heading of headings) {
+            heading.id ||= 'u2-toc-' + heading.textContent.trim().replace(/\s+/g, '-').toLowerCase();
+
+            const level = parseInt(heading.tagName[1]);
+
+            if (level > lastLevel) {
+                const ul = document.createElement('ul');
+                currentLi ? currentLi.append(ul) : currentUl.append(ul);
+                currentUl = ul;
+            } else if (level < lastLevel) {
+                for (let i = level; i < lastLevel; i++) {
+                    currentUl = currentUl.parentElement.closest('ul') || nav;
+                }
+            }
+
+            currentLi = document.createElement('li');
+            currentLi.innerHTML = `<a href="#${heading.id}">${heading.textContent}</a>`;
+            currentUl.append(currentLi);
+
+            lastLevel = level;
+        }
+        if (this.innerHTML.trim() === nav.outerHTML) return;
+        this.innerHTML = '';
+        this.appendChild(nav);
+    }
+}
+
+customElements.define('u2-toc', U2Toc);

package/el/tooltip/README.md

@@ -1,5 +1,5 @@
 # <u2-tooltip> - element
-Tooltips
+Bind to target as child or via aria-labelledby
 
 ## Features
 
@@ -12,30 +12,33 @@ Tooltips
 ## Usage
 
 ```html
-<button>
-    Tooltip
-    <u2-tooltip>now you see me</u2-tooltip>
+<button>
+    Tooltip
+    <u2-tooltip>
+        now you see me
+    </u2-tooltip>
 </button>
 ```
 
 ```css
-u2-tooltip {
-    pointer-events:auto;
-    background:#a09;
+u2-tooltip {
+    pointer-events:auto;
+    background:#a09;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/tooltip/tooltip.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/tooltip/tooltip.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/tooltip/tooltip.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/tooltip/tooltip.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/tooltip/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/tooltip/tests/test.html)  
+[position-anchor.experiments.html](http://gcdn.li/u2ui/u2@main/el/tooltip/tests/position-anchor.experiments.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/tooltip/tests/minimal.html)  
 
 ## Todo