u2ui 1.0.0 → 1.4.5

package/el/tree1/tree1.css

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

@@ -1,265 +0,0 @@
-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/tests/minimal.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang=en>
-<head>
-    <meta charset=utf-8>
-    <meta name=viewport content="width=device-width">
-
-    <link rel=stylesheet href="../typewriter.css">
-    <script src="../typewriter.js" type=module async></script>
-
-<body>
-
-<section class="main">
-    <h2>
-        <u2-typewriter autoplay loop>Typewriter</h2></u2-typewriter>
-    </h2>
-</section>
-
-<style class="main">
-    u2-typewriter {
-        --u2-typewriter-speed:100;
-    }
-    u2-typewriter h2 .-Caret {
-        color:hotpink;
-    }
-</style>

package/el/typewriter/tests/test.html

@@ -1,78 +0,0 @@
-<!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="../typewriter.css">
-    <script src="../typewriter.js" type=module async></script>
-
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
-
-</head>
-
-<body style="display:block">
-
-    <section>
-        <h2>Test Simple text (attribute autoplay, loop)</h2>
-        <u2-typewriter autoplay loop>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</u2-typewriter>
-
-        <h2>Attribute autoplay</h2>
-        <p>start / stops when visible / hidden</p>
-        <div style="overflow:auto; height:100px;">
-            <div style="margin-bottom:100px">scroll down!</div>
-            <u2-typewriter autoplay loop>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</u2-typewriter>
-        </div>
-
-        <h2>API</h2>
-        <button onclick="tw1.play()">play()</button>
-        <button onclick="tw1.pause()">pause()</button>
-        <button onclick="tw1.reset()">reset()</button>
-        <br>
-        <u2-typewriter id=tw1 audio style="font-family:'Special Elite'">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</u2-typewriter>
-        <script>
-            tw1.addEventListener('u2-typewriter-end', () => {
-                alert('event "u2-typewriter-end" fired');
-            });
-        </script>
-
-        <h2>Test formated Text and CSS</h2>
-        style.setProperty('--u2-typewriter-speed', this.value): <input value=30 type=range onchange="tw2.style.setProperty('--u2-typewriter-speed', this.value)" min=10 max=500>
-        <br>
-        <u2-typewriter autoplay loop id=tw2 style="--u2-typewriter-speed:30">
-            Non visible chars on this pre-element are display:none
-            <pre style="overflow:visible">Lorem <b>ips<i>um</i></b> dolor<br>sit <i>amet</i>, consectetur <a href="#">adipiscing</a></pre>
-            The end.
-        </u2-typewriter>
-        <style contenteditable style="display:block">
-#tw2 {
-    display:block;
-    margin:2rem 0;
-    text-align: center;
-}
-#tw2 pre :not(.-Active) > .-Char {
-    display:none;
-}
-#tw2 .-Char {
-    display:inline-block;
-    min-width:.3rem;
-    transition:transform .4s;
-}
-#tw2 .-Symbol:not(.-Active) .-Char {
-    transform:scale(1.4);
-}
-#tw2 .-Symbol .-Caret {
-    color:hotpink;
-}
-        </style>
-
-    </section>

package/js/Placer/tests/minimal.html

@@ -1,34 +0,0 @@
-<!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 type=module>
-    </script>
-
-<body>
-
-<section class="main">
-    <div id=moverEl style="position:absolute">move to</div>
-    <button id=target>
-        move to me
-    </button>
-</section>
-
-<script type=module class="main">
-
-import {Placer} from "../Placer.js";
-
-let placer = new Placer(moverEl, {
-    x:'after',
-    y:'after',
-    margin: 0,
-    stayInWindow: true,
-    switchSide: true,
-});
-
-placer.toElement(target);
-
-</script>

package/js/Placer/tests/test.html

@@ -1,49 +0,0 @@
-<!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">
-
-<body>
-
-<section>
-
-    <div id=placeMe style="position:absolute; top:0; left:0; padding:1rem; background:#eee; box-shadow: 0 0 10px #0007; z-index:9">
-        I go there
-    </div>
-
-
-    <script type=module style="display:block">
-import {Placer} from "../Placer.js";
-window.placer = new Placer(placeMe);
-    </script>
-
-    <button onclick="placer.toElement(this)">To this buttons bottom</button>
-
-    <div style="display:grid; place-items: center; height:50vh; border:1px solid;">
-        <button id=button onclick="placer.followElement(this)" style="position:relative">Follow me</button>
-    </div>
-
-    <select id="selectX">
-        <option>before
-        <option>prepend
-        <option>center
-        <option>append
-        <option>after
-    </select>
-    <select id="selectY">
-        <option>before
-        <option>prepend
-        <option>center
-        <option>append
-        <option>after
-    </select>
-    <br>
-    <button onclick="placer.setOptions({x:selectX.value, y:selectY.value})">Set Options</button>
-
-</section>

package/js/PointerObserver/tests/minimal.html

@@ -1,29 +0,0 @@
-<!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">
-
-
-
-<body>
-
-<section class="main">
-
-    <div id=el style="position:absolute;">
-        StartObserving
-    </div>
-
-</section>
-
-<script type=module class="main">
-import {PointerObserver} from "../PointerObserver.js";
-new PointerObserver(el).onmove = function(e){
-    console.log(this.pos);
-}
-</script>

package/js/PointerObserver/tests/test.html

@@ -1,35 +0,0 @@
-<!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">
-
-<body>
-
-<section>
-
-    <div id=el style="user-select:none; -webkit-user-select:none; position:absolute; padding:2rem; background:#eee; box-shadow: 0 0 10px #0007; z-index:9">
-        StartObserving
-        <span id=hover style="border:1px solid; font-size:12px">hover to start</span>
-    </div>
-
-    <script type=module style="display:block">
-        import {PointerObserver} from "../PointerObserver.js";
-
-        const observer = new PointerObserver(el);
-        observer.onmove = function(e){
-            el.style.left = this.pos.x + "px";
-            el.style.top = this.pos.y + "px";
-        }
-        hover.addEventListener("mouseover", function(e){
-            observer.start(e);
-        });
-    </script>
-
-
-</section>

package/js/SelectorObserver/tests/minimal.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang=en>
-<head>
-    <meta charset=utf-8>
-    <meta name=viewport content="width=device-width">
-
-<body>
-
-<section class="main">
-    <div class=container id=SOTargets contenteditable>
-        Find all bold divs (press enter)
-    </div>
-</section>
-
-<script type=module class="main">
-    import {SelectorObserver} from '../SelectorObserver.js';
-    new SelectorObserver({
-        on: el => el.innerHTML = 'found!' ,
-        off: el => el.innerHTML = 'lost!' ,
-    }).observe('#SOTargets div');
-</script>

package/js/SelectorObserver/tests/test.html

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang=en>
-<head>
-    <meta charset=utf-8>
-    <meta name=viewport content="width=device-width">
-    <title>u2-ico Test</title>
-    <link rel=stylesheet href="../../../css/base/full.css">
-    <link rel=stylesheet href="../../../css/classless/variables.css">
-    <link rel=stylesheet href="../../../css/classless/classless.css">
-    <link rel=stylesheet href="../../../css/classless/simple.css">
-<body>
-
-<section>
-    <button onclick="targets.append(document.createElement('div'))">add item</button>
-    <button onclick="nonTargets.append(targets.lastElementChild )">remove item</button>
-    <h3>Targets</h3>
-    <div class=container id=targets>
-        <div></div>
-    </div>
-    <h3>Non targets</h3>
-    <div class=container id=nonTargets>
-    </div>
-</section>
-
-
-<script type=module style="display:block;">
-import {SelectorObserver} from '../SelectorObserver.js';
-let o = new SelectorObserver({
-    on: el => el.innerHTML = 'found!' ,
-    off: el => el.innerHTML = 'lost!' ,
-});
-o.observe('#targets > div');
-</script>
-
-<style>
-    .container {
-        display:flex;
-        flex-wrap:wrap;
-        background:#f5f5f5;
-    }
-    .container div {
-        background-color:var(--color-light);
-        margin:.5rem;
-        padding:.5rem;
-    }
-    #nonTargets div {
-        background-color: red;
-    }
-    button {
-        text-align: left;
-    }
-    button::after {
-        content: " " attr(onclick);
-        display: block;
-        font-size:.7rem;
-    }
-</style>