u2ui 1.0.0

package/el/textfit/textfit.js

@@ -0,0 +1,80 @@
+const throttle = (func, ms) => {
+    let timeOut;
+    return (...args) => {
+        if (timeOut) return;
+        timeOut = setTimeout(()=>{
+            requestAnimationFrame(()=>{
+                func(...args);
+                timeOut = null;
+            });
+        }, ms);
+    }
+}
+
+class textfit extends HTMLElement {
+    constructor() {
+        super();
+        let shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+        <style>
+        :host {
+            isolation:isolate;
+            contain: inline-size;
+            display:block;
+            max-width: 100%;
+        }
+        slot {
+            display:block;
+        }
+        </style>
+        <slot></slot>
+        `;
+        this.slotEl = shadowRoot.querySelector('slot');
+
+        this.render = throttle(this.render.bind(this), 20);
+        //this.render = this.render.bind(this);
+
+        this.addEventListener('input',this.render); // contenteditable
+        addEventListener('load',this.render); // e.g. font switch
+        this._rObserver = new ResizeObserver(this.render);  // todo? render can in turn trigger the observer, should we intercept that?
+    }
+
+    connectedCallback() {
+        this.render();
+        this._rObserver && this._rObserver.observe(this);
+    }
+    disconnectedCallback() {
+        removeEventListener('load',this.render); // e.g. font switch
+        this._rObserver.disconnect(this);
+    }
+
+    render(e){
+        const style = getComputedStyle(this);
+        const font   = style.getPropertyValue('font-family');
+        const weight = style.getPropertyValue('font-weight');
+        const fStyle = style.getPropertyValue('font-style');
+        const canvas = document.createElement('canvas');
+        const c2d = canvas.getContext('2d');
+        c2d.direction = 'ltr';
+        c2d.font = fStyle + ' ' + weight + ' 100px ' + font;
+        const text = this.innerText;
+        const measure = c2d.measureText(text);
+        const left  = measure.actualBoundingBoxLeft;
+        const right = measure.actualBoundingBoxRight;
+        //const ascent = measure.actualBoundingBoxAscent;
+        //const descent = measure.actualBoundingBoxDescent;
+
+//this.style.fontSize = '1px';
+        const space = this.clientWidth; // how wide is the content, with the smallest font-size possible
+//this.style.fontSize = '';
+
+        this.slotEl.style.marginLeft = left/100 + 'em';
+
+        const widthAt100px = right + left;
+        let fs = (space / widthAt100px) * 100;
+
+        this.style.setProperty('--js-font-size', fs+'px');
+    }
+}
+
+customElements.define('u2-textfit', textfit);

package/el/time/README.md

@@ -0,0 +1,72 @@
+# <u2-time> - element
+The better time-element, e.g. live changing relative dates
+
+## Features
+
+- live changing relative dates 
+- generates a title attribute with the absolute date
+
+## Usage
+
+```html
+<u2-time datetime="2013-04-01T18:02" type=relative lang=de>1. April 2013 18:02</u2-time>.
+```
+
+```css
+u2-time {
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/time/time.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/time/time.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/time/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/time/tests/test.html)  
+
+## Attributes
+
+Attribute        | Options                      | Default         | Description
+---              | ---                          | ---             | ---
+`datetime`       | ISO 8601 date                | required        | e.g. `2011-10-10T14:48:00`
+`lang`           | language                     | parent lang     | If not present navigator.language is used
+`type`           | date, relative               | relative        | The way the date should be displayed
+
+
+### If type=date
+
+Attribute        | Options                                      | Default       | Description
+---              | ---                                          | ---           | ---
+`weekday`        | narrow, short, long, none                    | short         | Format weekday as `Sun` or `Sunday`
+`year`           | numeric, 2-digit, none                       | numeric       | Format year as `14` or `2014`
+`month`          | numeric, 2-digit, narrow, short, long, none  | numeric       | Format month as `Jun` or `June`
+`day`            | numeric, 2-digit, none                       | numeric       | Format day as `01` or `1`
+`hour`           | numeric, 2-digit, none                       | none          | Format hour as `01` or `1`
+`minute`         | numeric, 2-digit, none                       | none          | Format minute as `05` or `5`
+`second`         | numeric, 2-digit, none                       | none          | Format second as `05` or `5`
+
+### If type=relative
+
+Attribute        | Options                                      | Default       | Description
+---              | ---                                          | ---           | ---
+`mode`           | narrow, short, long                          | short         | `28 minutes ago` , `29 min. ago`
+
+## Todo
+
+- recognise the resolution of the given date (has time or not)
+- optional provide date as innerHTML
+
+## Similar projects
+
+https://github.com/github/relative-time-element
+
+## 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/time/manifest.json

@@ -0,0 +1,118 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+      {
+        "kind": "javascript-module",
+        "path": "time.js",
+        "declarations": [
+          {
+            "kind": "class",
+            "description": "A better time-element, e.g. live changing relative dates",
+            "name": "u2-time",
+            "members": [
+              {
+                "kind": "method",
+                "name": "render",
+                "description": "Render the time element"
+              },
+              {
+                "kind": "method",
+                "name": "reset",
+                "description": "Reset the time element"
+              },
+              {
+                "kind": "method",
+                "name": "attributeChanged",
+                "description": "Handle attribute changes"
+              },
+              {
+                "kind": "method",
+                "name": "connected",
+                "description": "Handle element connection"
+              },
+              {
+                "kind": "method",
+                "name": "disconnected",
+                "description": "Handle element disconnection"
+              }
+            ],
+            "events": [],
+            "attributes": [
+              {
+                "name": "datetime",
+                "description": "The date and time to display, in ISO 8601 format"
+              },
+              {
+                "name": "lang",
+                "description": "The language to use for formatting the date and time",
+                "u2Examples": ["de-CH","de","fr-CA","ja-JP","zh-Hans-CN"]
+              },
+              {
+                "name": "type",
+                "description": "The type of display to use, either 'date' or 'relative'",
+                "u2-type": ["date","relative"]
+              },
+              {
+                "name": "weekday",
+                "description": "The format to use for the weekday, either 'narrow', 'short', 'long', or 'none'",
+                "u2-type": ["narrow","short","long","none"]
+              },
+              {
+                "name": "year",
+                "description": "The format to use for the year, either 'numeric', '2-digit', or 'none'",
+                "u2-type": ["numeric","2-digit","none"]
+              },
+              {
+                "name": "month",
+                "description": "The format to use for the month, either 'numeric', '2-digit', 'narrow', 'short', 'long', or 'none'",
+                "u2-type": ["numeric","2-digit","narrow","short","long","none"]
+              },
+              {
+                "name": "day",
+                "description": "The format to use for the day, either 'numeric', '2-digit', or 'none'",
+                "u2-type": ["numeric","2-digit","none"]
+              },
+              {
+                "name": "hour",
+                "description": "The format to use for the hour, either 'numeric', '2-digit', or 'none'",
+                "u2-type": ["numeric","2-digit","none"]
+              },
+              {
+                "name": "minute",
+                "description": "The format to use for the minute, either 'numeric', '2-digit', or 'none'",
+                "u2-type": ["numeric","2-digit","none"]
+              },
+              {
+                "name": "second",
+                "description": "The format to use for the second, either 'numeric', '2-digit', or 'none'",
+                "u2-type": ["numeric","2-digit","none"]
+              },
+              {
+                "name": "mode",
+                "description": "The mode to use for the relative type, either 'narrow', 'short', or 'long'",
+                "u2-type": ["narrow","short","long"]
+              }
+            ],
+            "cssProperties": [],
+            "superclass": {
+              "name": "HTMLElement"
+            },
+            "tagName": "u2-time",
+            "customElement": true
+          }
+        ],
+        "exports": [
+          {
+            "kind": "custom-element-definition",
+            "name": "u2-time",
+            "declaration": {
+              "name": "u2-time",
+              "module": "time.js"
+            }
+          }
+        ]
+      }
+    ]
+  }
+  

package/el/time/tests/minimal.html

@@ -0,0 +1,19 @@
+<!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>
+
+    <script src="../time.js" type=module async></script>
+
+<body>
+
+    <section class="main">
+        <u2-time datetime="2013-04-01T18:02" type=relative lang=de>1. April 2013 18:02</u2-time>.
+    </section>
+
+    <style>
+        u2-time {
+        }
+    </style>

package/el/time/tests/test.html

@@ -0,0 +1,160 @@
+<!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>
+    
+
+    <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="../time.js" type=module async></script>
+    <!--link rel=stylesheet href="./tabs.css"-->
+
+<body>
+
+<h3>Set datetime attribute</h3>
+<section lang=de>
+    Zurückgestellt: <u2-time datetime="" id=testSet></u2-time><br>
+    <button onclick="testSet.setAttribute('datetime', Date.now());">reset</button>
+    <script>
+        testSet.setAttribute('datetime', Date.now());
+    </script>
+
+    <form onchange="Array.from(this.elements).forEach(e=>testSet.setAttribute(e.name, e.value))">
+        <label>
+            datetime
+            <select name=datetime>
+                <option value="2031-10-10T14:48:50">2031-10-10T14:48:50
+                <option value="1999-11-10T11:38:10">1999-11-10T11:38:10
+            </select>
+        </label>
+        <label>
+            lang
+            <select name=lang>
+                <option value="de">de
+                <option value="en">en
+                <option value="es">es
+                <option value="it">it
+                <option value="fr">fr
+            </select>
+        </label>
+        <label>
+        type
+            <select name=type>
+                <option value="relative">relative (default)
+                <option value="date">date
+            </select>
+        </label>
+        <label>
+            weekday
+            <select name=weekday>
+                <option value="short">short (default)
+                <option value="narrow">narrow
+                <option value="long">long
+                <option value="none">none
+            </select>
+        </label>
+        <label>
+            year
+            <select name=year>
+                <option value="numeric">numeric (default)
+                <option value="2-digit">2-digit
+                <option value="none">none
+            </select>
+        </label>
+        <label>
+            month
+            <select name=month>
+                <option value="numeric">numeric (default)
+                <option value="2-digit">2-digit
+                <option value="narrow">narrow
+                <option value="short">short
+                <option value="long">long
+                <option value="none">none
+            </select>
+        </label>
+        <label>
+            day
+            <select name=day>
+                <option value="numeric">numeric (default)
+                <option value="2-digit">2-digit
+                <option value="none">none
+            </select>
+        </label>
+        <label>
+            hour
+            <select name=hour>
+                <option value="none">none (default)
+                <option value="numeric">numeric
+                <option value="2-digit">2-digit
+            </select>
+        </label>
+        <label>
+            minute
+            <select name=minute>
+                <option value="none">none (default)
+                <option value="numeric">numeric
+                <option value="2-digit">2-digit
+            </select>
+        </label>
+        <label>
+            second
+            <select name=second>
+                <option value="none">none (default)
+                <option value="numeric">numeric
+                <option value="2-digit">2-digit
+            </select>
+        </label>
+        <label>
+            mode
+            <select name=mode>
+                <option value="short">short (default)
+                <option value="narrow">narrow
+                <option value="long">long        
+            </select>
+        </label>
+    </form>
+    <style>
+    label {
+        display:flex;
+        gap:1rem;
+    }
+    </style>
+</section>
+
+<h3>English; type=relative</h3>
+<div lang=en>
+    A cold winter month <u2-time datetime="2011-11" type=relative>many years ago</u2-time>
+</div>
+
+<h3>English from &lt;head&gt; type=relative</h3>
+<div>
+    Google released Gmail Blue <u2-time datetime="2013-04-01" type=relative>on 2013-04-01</u2-time>.
+</div>
+
+<h3>Deutsch, type=relative</h3>
+<div lang=de>
+    Weltuntergang <u2-time datetime="2050-01-01" type=relative>am 2050-01-01</u2-time>.
+</div>
+
+
+
+<h3>no type and no innerHTML => relative</h3>
+<div>
+    Google released Gmail Blue <u2-time datetime="2013-04-01"></u2-time>.
+</div>
+
+<h3>type=date</h3>
+<div>
+    <u2-time datetime="2013-04-01T18:00" type=date>on 2013-04-01</u2-time>.
+</div>
+
+<h3>type=date weekday=none hour minute month=long</h3>
+<div>
+    <u2-time datetime="2013-04-01T18:00" type=date weekday="none" month=long hour minute></u2-time>.
+</div>

package/el/time/time copy.js

@@ -0,0 +1,141 @@
+
+class Time extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+        this.outEl = this.shadowRoot;
+    }
+    connectedCallback() {
+        this.reset();
+    }
+    disconnectedCallback() {
+        clearInterval(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;
+
+        let date = this.getAttribute('datetime');
+        date = date.match(/^-?[0-9.]+$/) ? Number(date) : Date.parse(date);
+        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) {
+            let fn = types[this.__type];
+            if (!fn) { console.warn('type ' + this.__type + ' is not supported'); return; }
+            let {show} = fn(this, date);
+            content = show;
+            if (this.__type === 'relative') {
+                title = types['date'](this, date).show;// provide a title-attribute if it is relative
+                clearInterval(this.__timer);
+                this.__timer = setTimeout(() => this.render(), 1000); // todo: evaluate exact next tic, challange!
+            }
+        }
+        this.outEl.innerHTML = `<time datetime="${this.getAttribute('datetime')}" title="${title}">${content}<slot hidden="${valid}"/></time>`;
+    }
+}
+
+
+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 } = elapsedToUnit(elapsed);
+        return {
+            show:rtf.format(rounded, unit),
+        }
+    },
+    date(el, date) {
+        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 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) {
+            return {
+                unit,
+                rounded: Math.round(elapsed / units[unit]),
+            };
+        }
+}
+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);