u2ui 1.0.0

package/el/tree1/tests/test.html

@@ -0,0 +1,260 @@
+<!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="../../../el/code/code.js" type=module async></script>
+    <link  href="../../../el/code/code.css" rel=stylesheet>
+    <script src="../../../el/tooltip/tooltip.js" type=module async></script>
+    <link  href="../../../el/tooltip/tooltip.css" rel=stylesheet>
+    <script src="../../../el/ico/ico.js" type=module async></script>
+    <link  href="../../../el/ico/ico.css" rel=stylesheet>
+
+    <style>
+        body {
+            place-content: initial;
+            --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
+        }
+    </style>
+
+    <script src="../tree1.js" type=module async></script>
+    <link href="../tree1.css" rel=stylesheet>
+
+<body>
+
+<section id=demo class=main>
+    
+    <u2-tree1 aria-expanded=true>root
+        <u2-tree1 aria-expanded=true>Folder 2
+
+            <u2-tree1>File 2.1</u2-tree1>
+            <u2-tree1>Folder 2.2
+                <u2-tree1>
+                    <u2-ico slot=icon icon=home>x</u2-ico>
+                    Home
+                </u2-tree1>
+                <u2-tree1>
+                    <u2-ico slot=icon icon=star>x</u2-ico>
+                    Star
+                </u2-tree1>
+                <u2-tree1>
+                    <u2-ico slot=icon icon=search>x</u2-ico>
+                    Search
+                </u2-tree1>
+                <u2-tree1>
+                    <u2-ico slot=icon icon=accessible>x</u2-ico>
+                    Accessible
+                </u2-tree1>
+                <u2-tree1>
+                    <u2-ico slot=icon icon=alarm>x</u2-ico>
+                    <u2-tooltip tabindex=-1 style="padding:0">
+                        <table>
+                            <tr>
+                                <td>ID:
+                                <td>22
+                            <tr>
+                                <td>Module:
+                                <td>cms.cont.text
+                            <tr>
+                                <td>Name:
+                                <td>Text
+                        </table>
+                    </u2-tooltip>
+                    Alarm
+                </u2-tree1>
+            </u2-tree1>
+            <u2-tree1 draggable="true">
+                <u2-ico slot=icon icon=drag_indicator>x</u2-ico>
+                <label>
+                    Draggable
+                    <input placeholder="same baseline">
+                </label>
+                <button>clickable</button>
+            </u2-tree1>
+
+            <u2-tree1>
+                <input type=checkbox slot=icon id="check1">
+                Checkbox
+                <u2-tree1>
+                    <input type=checkbox slot=icon id="check2">
+                    Checkbox
+                </u2-tree1>
+                <u2-tree1>
+                    <input type=checkbox slot=icon id="check3">
+                    Checkbox
+                </u2-tree1>
+            </u2-tree1>
+
+        </u2-tree1>
+        <u2-tree1 aria-expanded=false aria-live=off>
+            Folder 3 (dynamic)
+        </u2-tree1>
+    </u2-tree1>
+
+</section>
+
+<section>
+
+    <u2-code element=demo editable trim> </u2-code>
+
+    <u2-code trim editable>
+    <style class=main>
+    u2-tree1::part(row) {
+        border-radius:.3rem;
+    }
+    u2-tree1:focus::part(row) {
+        outline:.1rem solid var(--color);
+        background:transparent;
+    }
+    u2-tree1[aria-selected=true]::part(row) {
+        background:#00000008;
+    }
+    u2-tree1::part(row):hover {
+        background:#00000004;
+    }
+    u2-tree1[aria-grabbed=true] {
+        transition:.2s .2s;
+        opacity:.4;
+        outline-width:0 !important;
+    }
+    </style>
+    </u2-code>
+
+    <u2-code trim>
+    <script type=module class=main>
+    /* load dynamic items */
+    document.addEventListener('u2-tree1-expand', event => {
+        const treeItem = event.target;
+        
+        // if load is present, it requires a (async) function that loads the items
+        // (indicated by `aria-expanded=false` and `aria-live=off`)
+        //event.load?.(loadItems(treeItem)); zzz
+        event.load?.(loadItems);
+    });
+    const loadItems = async (item) => {
+        await delay(600);
+        item.innerHTML += '<u2-tree1><span slot=icon>🖼</span>Dynamic File 1</u2-tree1>';
+        item.innerHTML += '<u2-tree1><span slot=icon>📄</span>Document</u2-tree1>';
+        item.innerHTML += '<u2-tree1 aria-expanded=false aria-live=off>Folder</u2-tree1>';
+    }
+    </script>
+    </u2-code>
+
+    <script>
+        delay = function(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
+        }
+    </script>
+
+</section>
+
+
+
+<script type=module>
+/* drag & drop experiment */
+
+const dropPositionIndicator = document.createElement('div');
+dropPositionIndicator.innerHTML = '➔';
+dropPositionIndicator.style.display = 'none';
+dropPositionIndicator.style.position = 'absolute';
+dropPositionIndicator.style.pointerEvents = 'none';
+dropPositionIndicator.style.zIndex = 1000;
+dropPositionIndicator.style.fontSize = '1.2rem';
+dropPositionIndicator.style.transform = 'translate(0, -50%)';
+document.body.appendChild(dropPositionIndicator);
+
+let dragSrcEl = null;
+
+const dragAndDropHandler = {
+    handleEvent(event) {
+        if (event.type !== 'dragstart' && !dragSrcEl) return;
+        if (!this['on' + event.type]) return
+        const target = event.target;
+        const closest = target.closest('u2-tree1');
+        if (!closest) return;
+        this['on' + event.type]({closest, target, event});
+    },
+    ondragstart({target, event}) {
+        if (target.tagName !== 'U2-TREE1') return;
+        dragSrcEl = target;
+        dragSrcEl.setAttribute('aria-grabbed', 'true'); // deprecated, but currently the best markup?
+        event.dataTransfer.effectAllowed = 'move'; // needed?
+    },
+    ondragover({closest, event}) {
+        event.preventDefault();
+
+        this.currentParent = closest;
+        this.currentNext = null;
+
+        const oHeight = closest.offsetHeight;
+        if (event.offsetY < oHeight * .2) {
+            this.currentParent = closest.parentNode;
+            this.currentNext = closest;
+        }
+        if (event.offsetY > oHeight * .7) {
+            this.currentParent = closest.parentNode;
+            this.currentNext = closest.nextElementSibling;
+        }
+        if (this.currentParent === closest && !this.expandTimer) {
+            this.resetExpandTimer(this.currentParent);
+        }
+
+        // indicator
+        let x = closest.shadowRoot.querySelector('[name=icon]').getBoundingClientRect().left - 50;
+        let y;
+        if (this.currentNext) {
+            y = this.currentNext.offsetTop;
+        } else {
+            y = closest.offsetTop + closest.offsetHeight / 2;
+        }
+        dropPositionIndicator.style.display = 'block';
+        dropPositionIndicator.style.top = y + 'px';
+        dropPositionIndicator.style.left = x + 'px';
+    },
+    ondragleave({closest}) {
+        this.resetExpandTimer();
+        closest.style.borderColor = 'transparent';
+    },
+    ondrop({closest, event}) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (dragSrcEl !== closest) {
+            if (this.currentParent && dragSrcEl !== this.currentNext) {
+                if (this.currentNext) {
+                    this.currentParent.insertBefore(dragSrcEl, this.currentNext);
+                } else {
+                    this.currentParent.appendChild(dragSrcEl);
+                }
+            }
+            closest.toggleExpand(true);
+        }
+        closest.style.border = '';
+    },
+    ondragend() {
+        dropPositionIndicator.style.display = 'none';
+        dragSrcEl.removeAttribute('aria-grabbed');
+        dragSrcEl = null;
+    },
+    resetExpandTimer(item) {
+        clearTimeout(this.expandTimer);
+        this.expandTimer = null;
+        if (item) {
+            this.expandTimer = setTimeout(()=>{
+                this.expandTimer = null;
+                this.currentParent.toggleExpand(true);
+            }, 500);
+        }
+    },
+};
+['dragstart', 'dragover', 'dragenter','dragleave', 'drop', 'dragend'].forEach(eventType => {
+    document.addEventListener(eventType, dragAndDropHandler, false);
+});
+</script>
+    

package/el/tree1/tree1.css

@@ -0,0 +1,26 @@
+u2-tree1 {
+    display:block;
+}
+u2-tree1::part(row) {
+    white-space: nowrap;
+    cursor:pointer;
+}
+u2-tree1::part(row):focus {
+    outline:1px dotted black;
+}
+u2-tree1[aria-selected=true]::part(row) {
+    background:#00000008;
+}
+u2-tree1[draggable]::part(row) {
+    cursor:grab;
+}
+
+
+u2-tree1:not(:defined) {
+    padding-block-start:.2em;
+    display:list-item;
+    list-style-position: inside;
+    > u2-tree1 {
+        padding-inline-start:1.2em;
+    }
+}

package/el/tree1/tree1.js

@@ -0,0 +1,265 @@
+let css = `
+:host {
+    display:block;
+}
+:host([role=tree]) {
+    --indent:1rem;
+}
+:host(:not([aria-expanded=true])) [part=children] {
+    display:none;
+}
+:host([aria-expanded=true]) .arrow::after { content:'▾' }
+:host(:not([aria-expanded])) .arrow { opacity:0; }
+:host([aria-expanded=true][aria-busy=true]) .arrow::after {
+    content:'◠'; /* ◝↻⭮⍉🔾◠◡◕◖◝ */
+    font-weight:bold;
+    animation: spinner .5s linear infinite;
+    line-height:1;
+    font-size:.8em;
+}
+
+[part=row] {
+    display:flex;
+    align-items:baseline;
+    padding-block: .15em;
+    padding-inline-start:calc( var(--indent) * (var(--level) - 1) );
+    gap:.3em;
+}
+
+.arrow {
+    font-weight:normal !important;
+    min-width:1.1em;
+    text-align:center;
+}
+.arrow::after { content:'▸'; }
+.arrow::after { display:inline-block;  }
+@keyframes spinner { to { transform:rotate(360deg) } }
+
+[name=icon] {
+    display:flex;
+    align-items: center;
+    justify-content:center;
+    min-inline-size:1.7em;
+    font-weight:400;
+    align-self:stretch;
+}
+`;
+
+
+export class tree extends HTMLElement {
+    //#internals;
+    constructor() {
+        super();
+        const shadow = this.attachShadow({mode: 'open', delegatesFocus: true});
+        //this.#internals = this.attachInternals();
+        shadow.innerHTML = `
+        <style>${css}</style>
+        <div part=row tabindex=-1>
+            <span class=arrow></span>
+            <slot name=icon>📁</slot>
+            <slot part=content></slot>
+        </div>
+        <slot part=children name=children role=group part=group></slot>`
+
+        this.row = shadow.querySelector('[part=row]');
+
+        this.addEventListener('click',e=>{
+            if (e.target !== this) return;
+            if (!getSelection()?.isCollapsed) return;
+            this.toggleExpand();
+            this.activeElement = this;
+            this._select();
+        });
+        this.addEventListener('keydown',e=>{
+            if (e.target !== this) return;
+            let fn = {
+                ArrowUp:    ()=> this.prevFocusable()?.setFocus(),
+                ArrowDown:  ()=> this.nextFocusable()?.setFocus(),
+                ArrowRight: ()=> !this.isExpanded() ? this.toggleExpand(true) : this.nextFocusable()?.setFocus(),
+                ArrowLeft:  ()=> this.isExpanded() ? this.toggleExpand(false) : this.parentNode.setFocus?.(),
+                Enter:      ()=> {this._select(); this.toggleExpand(); }, // todo toggle?
+                ' ':        ()=> this._select(),
+                Home:       ()=> this.root().setFocus(),
+            }[e.key];
+            // focus next where text starts with the key pressed
+            const isChar = /^.$/u.test(e.key);
+            if (isChar) {
+                let current = this.nextFocusable() || this.root();
+                while (current && current !== this) {
+                    let text = current.shadowRoot.querySelector('[part=content]').assignedNodes().map(item=>item.textContent).join(' ').trim().toLowerCase();
+                    if (text.startsWith(e.key)) {
+                        current.setFocus();
+                        break;
+                    }
+                    current = current.nextFocusable() || this.root();
+                }
+            }
+            if (fn) {
+                fn();
+                e.preventDefault();
+            }
+        });
+
+        this.addEventListener('mousedown',e=>{ // prevent dbl-click selection
+            if (e.detail >= 2) e.preventDefault();
+        });
+
+        this.childrenObserver = new MutationObserver(mutations=>{
+            this._markup();
+        }).observe(this, {childList: true});
+
+
+    }
+    connectedCallback() {
+        this._markup();
+    }
+    _markup(){
+        // own level
+        const root = this.root();
+        const myLevel = root === this ? 1 : parseInt(this.parentNode.getAttribute('aria-level')) + 1;
+        this.setAttribute('aria-level', myLevel); // todo: internals?
+        this.style.setProperty('--level', myLevel);
+
+        // slot subnodes
+        for (const child of this.children) {
+            child.tagName === this.tagName && child.setAttribute('slot', 'children');
+        }
+        this.setAttribute('role', root === this ? 'tree' : 'treeitem');
+        //this.#internals.role = root === this ? 'tree' : 'treeitem';
+
+        // make it selectable if its the root and no other is selected
+        if (root === this && !root._activeElement) {
+            this.row.setAttribute('tabindex', '0');
+        }
+
+        // if has children, its expandable
+        if (!this.hasAttribute('aria-expanded')) {
+            if (this.items().length) {
+                this.setAttribute('aria-expanded', 'false');
+            } else {
+                this.removeAttribute('aria-expanded');
+            }
+        }
+    }
+    items(){
+        return this.shadowRoot.querySelector('[part=children]').assignedElements();
+    }
+    nextFocusable(){
+        let item = this;
+        while (item) {
+            let next = null;
+            if (item.isExpanded()) {
+                next = item.items().at(0);
+            }
+            if (!next) next = item.nextElementSibling; // todo: only next treeitem
+
+            if (!next) {
+                while (item.parentNode) {
+                    item = item.parentNode;
+                    if (item.nextElementSibling) {
+                        next = item.nextElementSibling;
+                        break;
+                    }
+                }
+            }
+
+            if (next.tagName !== this.tagName) return null;
+            if (next) return next;
+            item = next;
+        }
+    }
+    prevFocusable(){
+        let item = this;
+        while (item) {
+            let next = item.previousElementSibling; // todo: only next treeitem
+            if (next) {
+                if (next.isExpanded()) {
+                    next = next.items().at(-1);
+                }
+            }
+            if (!next) next = item.parentNode;
+            if (next) return next;
+            item = next;
+        }
+    }
+    isExpanded() {
+        return this.getAttribute('aria-expanded') === 'true';
+    }
+    isExpandable() {
+        const attr = this.getAttribute('aria-expanded');
+        return attr === 'true' || attr === 'false' || this.items().length;
+    }
+    toggleExpand(doit) {
+        if (!this.isExpandable()) return;
+        if (doit == null) doit = !this.isExpanded();
+
+        const event = new CustomEvent(doit?'u2-tree1-expand':'u2-tree1-collapse', {bubbles: true});
+        if (this.getAttribute('aria-live') && this.getAttribute('aria-busy') !== 'true') {
+
+            event.load = fn=>{
+                
+                let promise;
+                if (typeof fn.then === 'function') {
+                    console.warn('event.load(promise) is deprecated, use event.load(fn)');
+                    promise = fn;
+                } else {
+                    promise = fn(this);
+                }
+
+                this.setAttribute('aria-busy','true');
+                promise.then(data => {
+                    this.removeAttribute('aria-live');
+                    this.removeAttribute('aria-busy');
+                    setTimeout(()=>{ // make unexpandable if no children
+                        !this.items().length && this.removeAttribute('aria-expanded');
+                    },100);
+                }).catch(data=>{
+                    console.warn('todo: u2-tree: failed to load', data);
+                });
+            }
+
+        }
+        this.dispatchEvent(event);
+        this.setAttribute('aria-expanded', doit?'true':'false');
+    }
+    root(){
+        return this.isRoot() ? this : this.parentNode.root();
+    }
+
+    select(){
+        let old = this.root()._selected;
+        if (old) old.setAttribute('aria-selected', 'false');
+        this.setAttribute('aria-selected', 'true');
+        this.root()._selected = this;
+    }
+    _select(){ // like selected but also fires event
+        const event = new CustomEvent('u2-tree1-select', {bubbles: true});
+        this.dispatchEvent(event);
+        this.select();
+    }
+
+    get activeElement(){
+        return this.root()._activeElement;
+    }
+    set activeElement(el){
+        const old = this.root()._activeElement;
+        if (old) old.row.setAttribute('tabindex', '-1');
+        el.row.setAttribute('tabindex', '0');
+        el.row.focus();
+        this.root()._activeElement = el;
+    }
+    setFocus() {
+        this.activeElement = this;
+    }
+    isRoot(){
+        return this.parentNode.tagName !== this.tagName;
+    }
+
+    path(){
+        if (this.isRoot()) return [this];
+        return this.parentNode.path().concat(this);
+        // return this.isRoot() ? [this] : [...this.parentNode.path(), this];  // as we dont cache, we dont have to make a copy
+    }
+}
+
+customElements.define('u2-tree1', tree);

package/el/typewriter/README.md

@@ -0,0 +1,62 @@
+# <u2-typewriter> - element
+Simple typewriter element
+
+## Usage
+
+```html
+<h2>
+    <u2-typewriter autoplay loop>Typewriter</h2></u2-typewriter>
+</h2>
+```
+
+```css
+u2-typewriter {
+    --u2-typewriter-speed:100;
+}
+u2-typewriter h2 .-Caret {
+    color:hotpink;
+}
+```
+
+## API
+
+### Attributes
+
+- `autostart`: starts if in viewport, stops if out of viewport  
+- `loop`: restarts if at end
+- `audio`: plays audio="writer.mp3". If not attribute-value, a default audio is used.
+
+### Javascript
+
+- element.play()
+- element.pause()
+- element.reset()
+- event "u2-typewriter-end"
+
+### CSS
+
+There no default CSS that will affect your styles.
+
+```css
+u2-typewriter .-Char { ... } /* the char */
+u2-typewriter .-Active .-Char { ... } /* the active char */
+u2-typewriter .-Caret { ... } /* the caret (It moves and is in the active char element) */
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/typewriter/typewriter.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/typewriter/typewriter.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/typewriter/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/typewriter/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/typewriter/manifest.json

@@ -0,0 +1,66 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+        {
+            "kind": "javascript-module",
+            "path": "typewriter.js",
+            "declarations": [
+                {
+                    "kind": "class",
+                    "description": "",
+                    "name": "carousel",
+                    "members": [
+                        {
+                            "kind": "method",
+                            "name": "play"
+                        }
+                    ],
+                    "events": [
+                        {
+                            "name": "u2-typewriter-play",
+                            "type": {
+                                "text": "Event"
+                            }
+                        },
+                        {
+                            "name": "u2-typewriter-end",
+                            "type": {
+                                "text": "Event"
+                            }
+                        },
+                        {
+                            "name": "u2-typewriter-pause",
+                            "type": {
+                                "text": "Event"
+                            }
+                        }
+                    ],
+                    "attributes": [
+                        {
+                            "name": "autoplay",
+                            "u2-type": "boolean"
+                        },
+                        {
+                            "name": "loop",
+                            "u2-type": "boolean"
+                        }
+                    ],
+                    "superclass": { "name": "HTMLElement" },
+                    "tagName": "u2-typewriter",
+                    "customElement": true
+                }
+            ],
+            "exports": [
+                {
+                    "kind": "custom-element-definition",
+                    "name": "u2-typewriter",
+                    "declaration": {
+                        "name": "MyElement",
+                        "module": "typewriter.js"
+                    }
+                }
+            ]
+        }
+    ]
+}