u2ui 1.0.1 → 1.4.5

package/u2/tools/eventsExplorer.js

@@ -1,101 +1,102 @@
-
-import {dump, domRender} from 'https://cdn.jsdelivr.net/gh/nuxodin/dump.js@main/mod.min.js';
-import {alert} from '../../js/dialog/dialog.js';
-
-function alertInit(el) { el.classList.add('backdropClose'); }
-
-export class EventsExplorer {
-    constructor(into, el, events) {
-        this.into = into;
-        this.el = el;
-        this.events = events;
-        this.into.innerHTML =
-            `<div style="display:flex; justify-content:end"><button class=-clearbtn>clear</button></div>
-            <div class=-listWrapper style="overflow:auto;max-height:18rem">
-                <table style="border-collapse:collapse">
-                    <thead>
-                        <tr>
-                            <th>Event
-                            <th>Target
-                            <th>Phase
-                    <tbody>
-                </table>
-            </div>`;
-        this.tbody = this.into.querySelector('tbody');
-
-        this.into.querySelector('.-clearbtn').addEventListener('click', () => this.clear() );
-    }
-    clear(){
-        this.tbody.innerHTML = '';
-    }
-    scrollToEnd(minPadding=230) {
-        const div = this.into.querySelector('.-listWrapper');
-        if (div.scrollTop + div.clientHeight < div.scrollHeight - minPadding) return;
-        div.scrollTop = div.scrollHeight;
-    }
-    start() {
-        this.clear();
-        let grow = 1;
-        let activeTr = null;
-        setInterval(() => {
-            if (!activeTr || grow > 10) return;
-            grow = Math.max(1, grow);
-            activeTr.style.borderBottomWidth = (grow+=0.01)+'px';
-            this.scrollToEnd(10);
-        },10);
-        let renderEvent = (event)=>{
-            let tr = document.createElement('tr');
-            activeTr = tr;
-            grow = 0;
-            tr.style.borderBottom = '0px solid black';
-
-            const tag = event.target.tagName?.toLowerCase() ?? (event.target.nodeType === 3 ? '[text]' : '[unknown]');
-            const klass = event.target.className?.trim().replace(/\s+/g, '.').replace(/^(.)/, '.$1') || null;
-            const id = event.target.id ? '#'+event.target.id : null;
-
-            const typeDot = `<span style="color:${stringToColor(event.type)}">⬤</span>`;
-            const targetDot = `<span style="color:${stringToColor(tag+id+klass)}">⬤</span>`;
-
-            tr.innerHTML = 
-                `<td>${typeDot} ${event.type}
-                 <td>${targetDot} ${id??klass??tag}
-                 <td>${event.eventPhase}<td class=-dump><button style="font-size:12px; margin:0">inspect</button>`;
-            tr.querySelector('.-dump').addEventListener('click', () => {
-                alert({body:dump(event, {depth:2, customRender:domRender, inherited:true}), init:alertInit});
-            });
-
-            this.tbody.append(tr);
-            this.scrollToEnd();
-        }
-        for (const ev of this.events) {
-            this.el.addEventListener(ev, renderEvent, true);
-        }
-    }
-}
-
-
-
-function fnv1aHash(str) {
-    let hash = 2166136261;
-    for (let i = 0; i < str.length; i++) {
-        hash = (hash ^ str.charCodeAt(i)) * 16777619;
-    }
-    return hash >>> 0; // Convert to unsigned 32-bit integer
-}
-
-function stringToColor(str) {
-    let hash = fnv1aHash(str);
-
-    let h = (hash >> 16) & 0xFF; // Extrahiere die höchsten 8 Bits für Hue
-    let s = (hash >> 8) & 0xFF; // Extrahiere die mittleren 8 Bits für Saturation
-    let l = hash & 0xFF; // Extrahiere die niedrigsten 8 Bits für Lightness
-
-    // Normalisiere die Werte in ihre jeweiligen Bereiche
-    h = (h % 360); // Hue zwischen 0 und 359
-    // Sättigung zwischen 60% und 100%
-    s = 60 + (s % 41);
-    // Helligkeit zwischen 30% und 50%, um extreme Dunkelheit/Helligkeit zu vermeiden
-    l = 30 + (l % 21);
-
-    return `hsl(${h}, ${s}%, ${l}%)`;
-}
+
+import {dump, domRender} from 'https://cdn.jsdelivr.net/gh/nuxodin/dump.js@main/mod.min.js';
+import {alert} from '../../js/dialog/dialog.js';
+
+function alertInit(el) { el.classList.add('backdropClose'); }
+
+export class EventsExplorer {
+    constructor(into, el, events) {
+        this.into = into;
+        this.el = el;
+        this.events = events;
+        this.into.innerHTML =
+            `<div style="display:flex; justify-content:end"><button class=-clearbtn>clear</button></div>
+            <div class=-listWrapper style="overflow:auto;max-height:18rem">
+                <table style="border-collapse:collapse">
+                    <thead>
+                        <tr>
+                            <th>Event
+                            <th>Target
+                            <th>Phase
+                            <th width=10>
+                    <tbody>
+                </table>
+            </div>`;
+        this.tbody = this.into.querySelector('tbody');
+
+        this.into.querySelector('.-clearbtn').addEventListener('click', () => this.clear() );
+    }
+    clear(){
+        this.tbody.innerHTML = '';
+    }
+    scrollToEnd(minPadding=230) {
+        const div = this.into.querySelector('.-listWrapper');
+        if (div.scrollTop + div.clientHeight < div.scrollHeight - minPadding) return;
+        div.scrollTop = div.scrollHeight;
+    }
+    start() {
+        this.clear();
+        let grow = 1;
+        let activeTr = null;
+        setInterval(() => {
+            if (!activeTr || grow > 10) return;
+            grow = Math.max(1, grow);
+            activeTr.style.borderBottomWidth = (grow+=0.01)+'px';
+            this.scrollToEnd(10);
+        },10);
+        let renderEvent = (event)=>{
+            let tr = document.createElement('tr');
+            activeTr = tr;
+            grow = 0;
+            tr.style.borderBottom = '0px solid black';
+
+            const tag = event.target.tagName?.toLowerCase() ?? (event.target.nodeType === 3 ? '[text]' : '[unknown]');
+            const klass = event.target.className?.trim().replace(/\s+/g, '.').replace(/^(.)/, '.$1') || null;
+            const id = event.target.id ? '#'+event.target.id : null;
+
+            const typeDot = `<span style="color:${stringToColor(event.type)}">⬤</span>`;
+            const targetDot = `<span style="color:${stringToColor(tag+id+klass)}">⬤</span>`;
+
+            tr.innerHTML = 
+                `<td>${typeDot} ${event.type}
+                 <td>${targetDot} ${id??klass??tag}
+                 <td>${event.eventPhase}<td class=-dump><button style="font-size:12px; margin:0">inspect</button>`;
+            tr.querySelector('.-dump').addEventListener('click', () => {
+                alert({body:dump(event, {depth:2, customRender:domRender, inherited:true}), init:alertInit});
+            });
+
+            this.tbody.append(tr);
+            this.scrollToEnd();
+        }
+        for (const ev of this.events) {
+            this.el.addEventListener(ev, renderEvent, true);
+        }
+    }
+}
+
+
+
+function fnv1aHash(str) {
+    let hash = 2166136261;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash ^ str.charCodeAt(i)) * 16777619;
+    }
+    return hash >>> 0; // Convert to unsigned 32-bit integer
+}
+
+function stringToColor(str) {
+    let hash = fnv1aHash(str);
+
+    let h = (hash >> 16) & 0xFF; // Extrahiere die höchsten 8 Bits für Hue
+    let s = (hash >> 8) & 0xFF; // Extrahiere die mittleren 8 Bits für Saturation
+    let l = hash & 0xFF; // Extrahiere die niedrigsten 8 Bits für Lightness
+
+    // Normalisiere die Werte in ihre jeweiligen Bereiche
+    h = (h % 360); // Hue zwischen 0 und 359
+    // Sättigung zwischen 60% und 100%
+    s = 60 + (s % 41);
+    // Helligkeit zwischen 30% und 50%, um extreme Dunkelheit/Helligkeit zu vermeiden
+    l = 30 + (l % 21);
+
+    return `hsl(${h}, ${s}%, ${l}%)`;
+}

package/u2/tools/logo/u1.svg

@@ -1,9 +1,9 @@
-<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 259 114" width="259" height="114">
-	<title>u2-ui-logo-svg</title>
-	<style>
-		.s0 { fill: #532b6e } 
-		.s1 { fill: #7e40a9 } 
-	</style>
-	<path id="&lt;u2&gt; UI " class="s0" d="m35.5 77.4l-10.8 10.5-24.4-24.5 24.4-24.4 10.8 10.5-12.4 13.9zm223.3-13.9l-24.5 24.4-10.8-10.5 12.5-13.9-12.5-14 10.8-10.5z"/>
-	<path id="&lt;u2&gt; UI " class="s1" d="m141.7 108.3v0.2q0 1.6-1.9 3-1.9 1.2-4.5 1.2l-29 0.1q-3.3-0.1-4.9-2-1.7-1.8-2.1-4.6-3.5 3.5-9.2 5.6-5.6 1.9-12.1 1.9-8.1 0-14.9-2.9-6.6-3-8.5-7.8-0.5-1.2-0.9-2.3-0.3-1.2-0.5-2.6-0.1-0.8-0.3-1.6 0-1 0-1.7v-65.3l-1.6-0.9q-2.7 0-4.7-1.2-1.8-1.3-1.8-3.3 0-1.8 1.8-3 2-1.3 4.7-1.3h26.2q5.3 0 6.9 2.7 1.8 2.5 1.8 7v67q0 0.3 0.2 0.7 0.1 0.3 0.4 0.8 0.7 1.2 2.6 2.2 1.9 1.1 4 1 0.5 0 0.9 0 0.5-0.1 0.9-0.2 1.4-0.5 2.6-1.7 1.2-1.2 1.2-3.1v-66.7l-1.8-0.7q-2.5 0-4.4-1.4-1.9-1.3-1.9-3 0-1.9 1.9-3.3 1.9-1.3 4.4-1.3h27.9q5.5 0 7 2.2 1.5 2.1 1.7 4.7 0 0.4 0 0.9 0 0.4 0 0.9 0 0.3 0 0.6 0 0.1 0 0.4v73.5l1.5 1q2.7 0 4.5 1.3 1.9 1.2 1.9 3zm72.6-0.1v0.1q0 1.8-1.9 3.2-2 1.3-4.5 1.3l-40.5 0.2q-2.9-0.2-4.7-1.5-1.8-1.4-1.8-3.3 0-1.5 1.8-2.9 1.8-1.3 4.7-1.3l1.3-1v-74.5h-17.4q-2.7 0-4.6-1.2-1.9-1.3-1.8-3.3-0.1-1 1-1.8 1.1-0.8 2.4-1.3 0.9-0.5 1.7-0.6 0.9-0.3 1.3-0.5l43.8-18.6q1.2-0.4 2.3-0.6 1-0.3 1.9-0.3 3.2 0 5 2 1.9 1.9 1.9 4.9v95.8l1.7 1q2.5 0 4.5 1.3 1.9 1.4 1.9 2.9z"/>
-</svg>
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 259 114" width="259" height="114">
+	<title>u2-ui-logo-svg</title>
+	<style>
+		.s0 { fill: #532b6e } 
+		.s1 { fill: #7e40a9 } 
+	</style>
+	<path id="&lt;u2&gt; UI " class="s0" d="m35.5 77.4l-10.8 10.5-24.4-24.5 24.4-24.4 10.8 10.5-12.4 13.9zm223.3-13.9l-24.5 24.4-10.8-10.5 12.5-13.9-12.5-14 10.8-10.5z"/>
+	<path id="&lt;u2&gt; UI " class="s1" d="m141.7 108.3v0.2q0 1.6-1.9 3-1.9 1.2-4.5 1.2l-29 0.1q-3.3-0.1-4.9-2-1.7-1.8-2.1-4.6-3.5 3.5-9.2 5.6-5.6 1.9-12.1 1.9-8.1 0-14.9-2.9-6.6-3-8.5-7.8-0.5-1.2-0.9-2.3-0.3-1.2-0.5-2.6-0.1-0.8-0.3-1.6 0-1 0-1.7v-65.3l-1.6-0.9q-2.7 0-4.7-1.2-1.8-1.3-1.8-3.3 0-1.8 1.8-3 2-1.3 4.7-1.3h26.2q5.3 0 6.9 2.7 1.8 2.5 1.8 7v67q0 0.3 0.2 0.7 0.1 0.3 0.4 0.8 0.7 1.2 2.6 2.2 1.9 1.1 4 1 0.5 0 0.9 0 0.5-0.1 0.9-0.2 1.4-0.5 2.6-1.7 1.2-1.2 1.2-3.1v-66.7l-1.8-0.7q-2.5 0-4.4-1.4-1.9-1.3-1.9-3 0-1.9 1.9-3.3 1.9-1.3 4.4-1.3h27.9q5.5 0 7 2.2 1.5 2.1 1.7 4.7 0 0.4 0 0.9 0 0.4 0 0.9 0 0.3 0 0.6 0 0.1 0 0.4v73.5l1.5 1q2.7 0 4.5 1.3 1.9 1.2 1.9 3zm72.6-0.1v0.1q0 1.8-1.9 3.2-2 1.3-4.5 1.3l-40.5 0.2q-2.9-0.2-4.7-1.5-1.8-1.4-1.8-3.3 0-1.5 1.8-2.9 1.8-1.3 4.7-1.3l1.3-1v-74.5h-17.4q-2.7 0-4.6-1.2-1.9-1.3-1.8-3.3-0.1-1 1-1.8 1.1-0.8 2.4-1.3 0.9-0.5 1.7-0.6 0.9-0.3 1.3-0.5l43.8-18.6q1.2-0.4 2.3-0.6 1-0.3 1.9-0.3 3.2 0 5 2 1.9 1.9 1.9 4.9v95.8l1.7 1q2.5 0 4.5 1.3 1.9 1.4 1.9 2.9z"/>
+</svg>

package/u2/tools/promiseElementById.js

@@ -0,0 +1,14 @@
+
+export const promiseElementById = function(id) {
+    let { promise, resolve } = Promise.withResolvers();
+    const weakRef = new WeakRef(resolve);
+    const check = () => {
+        const resolve = weakRef.deref();
+        if (!resolve) return;
+        //console.log('wait for element');
+        const element = document.getElementById(id);
+        element ? resolve(element) : requestAnimationFrame(check);
+    };
+    check();
+    return promise;
+}