u2ui 1.0.0 → 1.4.5

package/js/drag/indicateDrop.js

@@ -0,0 +1,80 @@
+
+// HINWEIS: In attr/dropzone/dropzone.js gibt es eine eigene, reichere indicateDrop-Variante
+// (horizontal/vertikal, Gap-Zentrierung, leerer Container). Bewusst noch nicht zusammengeführt —
+// diese hier kann dafür into-Rahmen + content-Box-Inset. Bei Änderungen ggf. dort mitdenken.
+
+/**
+ * Zeigt einen Drop-Indicator relativ zu einem Element
+ * @param {'before'|'after'|'into'|null} position - Position des Indicators oder null zum Verstecken
+ * @param {HTMLElement|null} element - Referenz-Element
+ * @param {object} [options]
+ * @param {'border'|'content'} [options.box='border'] - Bezugsbox des Elements, auf allen Seiten gleich.
+ *        'content' = innerhalb des Paddings (macht z.B. Einrückungen sichtbar).
+ */
+export function indicateDrop(position, element, { box = 'border' } = {}) {
+    let indicator = document.getElementById('drop-indicator');
+
+    if (!indicator) {
+        indicator = document.createElement('div');
+        indicator.id = 'drop-indicator';
+        indicator.popover = 'manual';
+        indicator.innerHTML = `
+            <style>
+            #drop-indicator {
+                --color: var(--blue, #2563eb);
+                position: fixed;
+                margin: 0;
+                padding: 0;
+                border: none;
+                border:0 solid var(--color);
+                height: 2px;
+                background: var(--color);
+                pointer-events: none;
+                overflow:visible;
+                transition: .07s ease-out;
+                &::before, &::after {
+                    content: "";
+                    width: 9px;
+                    height: 9px;
+                    border-radius: 99px;
+                    background: inherit;
+                    position: absolute;
+                    top: -4px;
+                    left: -5px;
+                }
+                &::after {
+                    right:-5px; left:auto;
+                }
+                &[data-into] {  /* Rahmen statt Linie */
+                    height:auto;
+                    background:none;
+                    background: color-mix(in srgb, var(--color) 10%, transparent);
+                    border-width:2px;
+                    &::before, &::after { xdisplay:none }
+                }
+            }
+            </style>
+        `;
+        document.body.appendChild(indicator);
+    }
+
+    if (!position || !element) {
+        indicator.hidePopover();
+        return;
+    }
+
+    const rect = element.getBoundingClientRect();
+    const s = indicator.style;
+    let top = rect.top, bottom = rect.bottom, left = rect.left, width = rect.width, height = rect.height;
+    if (box === 'content') {  // echte Content-Box, alle Seiten gleich behandelt
+        const cs = getComputedStyle(element);
+        const [pt, pr, pb, pl] = ['Top', 'Right', 'Bottom', 'Left'].map(k => parseFloat(cs['padding' + k]) || 0);
+        top += pt; bottom -= pb; left += pl; width -= pl + pr; height -= pt + pb;
+    }
+    s.left = `${left}px`;
+    s.width = `${width}px`;
+    indicator.toggleAttribute('data-into', position === 'into');
+    if (position === 'into') { s.top = `${top}px`; s.height = `${height}px`; }
+    else { s.top = `${(position === 'before' ? top : bottom) - 1}px`; s.height = ''; }
+    indicator.showPopover();
+}

package/js/loading/README.md

@@ -0,0 +1,24 @@
+## loading.js
+
+## Usage
+
+```html
+<button id="btn1" onclick="setTimeout(u2_loading.mark(this),2000)">load</button>
+```
+
+## Install
+
+```js
+import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@main/js/loading/loading.js"
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/js/loading/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/js/loading/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/js/loading/loading.js

@@ -0,0 +1,139 @@
+
+export function mark(el, opt) {
+    if (!el.length) return _markElement(el, opt);
+    const dones = Array.from(el, el=>_markElement(el, opt));
+    return ()=>{ for (let done of dones) done(); }
+}
+
+export function done(el) {
+    el.loadingTasks--;
+    clearTimeout(el.u2ShowLoadingTO);
+    if (el.loadingTasks <= 0) {
+        el.classList.remove('u2Loading');
+        el.removeAttribute('aria-busy');
+        //el.removeAttribute('inert');
+        el.style.cssText = el.u2Loading_oldCssText;
+        el.u2Loading_oldCssText = undefined;
+    }
+}
+
+function _markElement(el, {delay = 0} = {}) {
+
+    el.loadingTasks ??= 0;
+    el.loadingTasks++;
+    if (el.loadingTasks === 1) { // new, already loading
+
+        const mutationObserver = new MutationObserver(()=>{
+            done(el);
+            if (el.loadingTasks <= 0) mutationObserver.disconnect();
+        });
+        mutationObserver.observe(el,{childList:true});
+        if (el.tagName === 'IMG') {
+            const onload = e=>{
+                el.loadingTasks = 1;
+                done(el);
+            }
+            el.addEventListener('load', onload, {once:true});
+            el.addEventListener('error', onload, {once:true});
+        }
+
+
+        const root = el.getRootNode();
+        if (root.adoptedStyleSheets.indexOf(sheet) === -1) root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+
+        el.u2Loading_oldCssText = el.style.cssText;
+        el.ariaBusy = 'true';
+        //el.inert = true;
+
+        clearTimeout(el.u2ShowLoadingTO);
+        el.u2ShowLoadingTO = setTimeout(()=>{
+            el.classList.add('u2Loading');
+            //if (el.hasAttribute('aria-life')) el.ariaBusy = 'true';
+            
+            // this is bad:
+            //if (!el.offsetHeight) el.style.minHeight = '36px';
+            //if (!el.offsetWidth)  el.style.minWidth = '36px';
+            
+            let svg = getComputedStyle(el).getPropertyValue('--loading-svg');
+            svg = svg.replace('currentColor', getComputedStyle(el).color);
+            el.style.setProperty('background-image', svg, 'important');
+        },delay);
+    }
+    return ()=>done(el);
+}
+
+
+const xsvg = `
+<svg fill="currentColor" width="64px" height="64px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xpreserveAspectRatio="xMidYMid">
+    <style>
+    @keyframes x {
+    	from { opacity: 1; scale:1.5; }
+    	100%   { opacity: 0; scale:1; }
+    }
+    g > g {
+        transform: rotate(calc(var(--i) * 45deg)) translate(34px, 0);
+    }
+    circle {
+        animation: x 1.4s infinite;
+        will-change:opacity,transform;
+        animation-delay: calc(var(--i) * .17s);
+    }
+    </style>
+    <g transform="translate(50 50)">
+        <g style="--i:0"><circle cx="0" cy="0" r="8"></circle></g>
+        <g style="--i:1"><circle cx="0" cy="0" r="8"></circle></g>
+        <g style="--i:2"><circle cx="0" cy="0" r="8"></circle></g>
+        <g style="--i:3"><circle cx="0" cy="0" r="8"></circle></g>
+        <g style="--i:4"><circle cx="0" cy="0" r="8"></circle></g>
+        <g style="--i:5"><circle cx="0" cy="0" r="8"></circle></g>
+        <g style="--i:6"><circle cx="0" cy="0" r="8"></circle></g>
+        <g style="--i:7"><circle cx="0" cy="0" r="8"></circle></g>
+    </g>
+</svg>`;
+
+const svg = '<svg width="24" height="24" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner_V8m1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>';
+
+
+const css = `
+.u2Loading {
+    --loading-svg: url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}");
+    background-image: var(--loading-svg) !important;
+    background-repeat: no-repeat !important;
+    background-position: 50% !important;
+    background-position-y: min(50%, 10rem) !important;
+    background-size: 32px !important;
+    cursor: wait !important;
+    opacity:1;
+    pointer-events:none;
+    & > * {
+        opacity:.1;
+        cursor: wait !important;
+    }
+    &:is(button, span) {
+        background-size: 2px !important;
+        background-position:-100% !important;
+        &::after {
+            content:"";
+            display:inline-block;
+
+            line-height:inherit;
+            height:.8lh;
+            width:.8lh;
+            margin-bottom:.1lh;
+            vertical-align: bottom;
+
+            margin-left:.3em;
+            background-image:inherit; 
+            background-size:contain; 
+            background-repeat:no-repeat; 
+        }          
+    }
+    &:is(img) {
+        object-position: -10000px -10000px !important;
+        background-position-y: 50% !important;
+    }
+}
+`;
+
+const sheet = new CSSStyleSheet();
+sheet.replaceSync(css);

package/js/navigator/README.md

@@ -0,0 +1,26 @@
+## navigator.js
+
+## Usage
+
+```html
+
+```
+
+## Install
+
+```js
+import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@main/js/navigator/navigator.js"
+```
+
+## Demos
+
+[about.html](http://gcdn.li/u2ui/u2@main/js/navigator/tests/about.html)  
+[contact.html](http://gcdn.li/u2ui/u2@main/js/navigator/tests/contact.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/js/navigator/tests/minimal.html)  
+[index.html](http://gcdn.li/u2ui/u2@main/js/navigator/tests/index.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/js/navigator/navigator.js

@@ -0,0 +1,430 @@
+import './url-change-event.js';
+
+// ==================== CONFIG ====================
+const CONFIG = {
+  cacheSize: 50,
+  prefetchDelay: 100,
+  mouseProximity: 200,
+  cacheDuration: 3 * 60 * 60 * 1000, // 3 Stunden
+  cacheVersion: 'v1',
+};
+
+// ==================== STATE ====================
+const state = {
+  pageCache: new Map(),
+  prefetchQueue: new Set(),
+  failedUrls: new Set(),
+  mouse: { x: 0, y: 0 },
+  isIdle: false,
+  idleTimer: null,
+  persistentCache: null,
+};
+
+// ==================== PERSISTENT STORAGE ====================
+class PersistentStorage {
+  static async init() {
+    if ('caches' in globalThis) {
+      state.persistentCache = await caches.open(`router-cache-${CONFIG.cacheVersion}`);
+      return 'Cache API';
+    }
+    state.persistentCache = 'localStorage';
+    return 'localStorage';
+  }
+  
+  static async get(url) {
+    const now = performance.now() + performance.timeOrigin;
+    
+    if (state.persistentCache === 'localStorage') {
+      try {
+        const item = localStorage.getItem(`router:${url}`);
+        if (!item) return null;
+        
+        const data = JSON.parse(item);
+        if (now - data.timestamp > CONFIG.cacheDuration) {
+          localStorage.removeItem(`router:${url}`);
+          return null;
+        }
+        return data.html;
+      } catch {
+        return null;
+      }
+    }
+    
+    // Cache API
+    try {
+      const response = await state.persistentCache.match(url);
+      if (!response) return null;
+      
+      const timestamp = Number(response.headers.get('X-Cached-Time') ?? '0');
+      if (now - timestamp > CONFIG.cacheDuration) {
+        await state.persistentCache.delete(url);
+        return null;
+      }
+      
+      return await response.text();
+    } catch {
+      return null;
+    }
+  }
+  
+  static async set(url, html) {
+    const now = performance.now() + performance.timeOrigin;
+    
+    if (state.persistentCache === 'localStorage') {
+      try {
+        const data = { html, timestamp: now };
+        localStorage.setItem(`router:${url}`, JSON.stringify(data));
+        this.cleanup();
+      } catch (error) {
+        if (error.name === 'QuotaExceededError') {
+          this.cleanup(true);
+        }
+      }
+      return;
+    }
+    
+    // Cache API
+    try {
+      const response = new Response(html, {
+        headers: {
+          'Content-Type': 'text/html; charset=utf-8',
+          'X-Cached-Time': String(now),
+        },
+      });
+      await state.persistentCache.put(url, response);
+    } catch (error) {
+      console.warn('Cache write failed:', error);
+    }
+  }
+  
+  static cleanup(force = false) {
+    if (state.persistentCache !== 'localStorage') return;
+    
+    const now = performance.now() + performance.timeOrigin;
+    const keys = Object.keys(localStorage).filter(k => k.startsWith('router:'));
+    
+    for (const key of keys) {
+      try {
+        const item = JSON.parse(localStorage.getItem(key));
+        if (force || now - item.timestamp > CONFIG.cacheDuration) {
+          localStorage.removeItem(key);
+        }
+      } catch {
+        localStorage.removeItem(key);
+      }
+    }
+  }
+}
+
+// ==================== DOM MORPHING (IdleCallback optimiert) ====================
+class Morph {
+  static morph(oldNode, newNode) {
+    if (oldNode.nodeType === Node.TEXT_NODE) {
+      if (oldNode.nodeValue !== newNode.nodeValue) {
+        oldNode.nodeValue = newNode.nodeValue;
+      }
+      return;
+    }
+    this.#morphAttributes(oldNode, newNode);
+    this.#morphChildren(oldNode, newNode);
+  }
+  
+  static #morphAttributes(oldNode, newNode) {
+    const oldAttrs = oldNode.attributes;
+    const newAttrs = newNode.attributes;
+    if (newAttrs) { // Update/Add attributes
+      for (const attr of newAttrs) {
+        if (oldNode.getAttribute(attr.name) !== attr.value) oldNode.setAttribute(attr.name, attr.value);
+      }
+    }
+    if (oldAttrs) { // Remove old attributes
+      for (let i = oldAttrs.length - 1; i >= 0; i--) {
+        const attr = oldAttrs[i];
+        if (!newNode.hasAttribute(attr.name)) oldNode.removeAttribute(attr.name);
+      }
+    }
+  }
+  static #morphChildren(oldNode, newNode) {
+    const oldChildren = [...oldNode.childNodes];
+    const newChildren = [...newNode.childNodes];
+    const maxLen = Math.max(oldChildren.length, newChildren.length);
+
+    for (let i = 0; i < maxLen; i++) {
+      const oldChild = oldChildren[i];
+      const newChild = newChildren[i];
+      
+      if (!oldChild && newChild) {
+        oldNode.append(newChild);
+      } else if (oldChild && !newChild) {
+        oldNode.removeChild(oldChild);
+      } else if (oldChild && newChild) {
+        if (this.#shouldReplace(oldChild, newChild)) {
+          oldNode.replaceChild(newChild, oldChild);
+        } else {
+          this.morph(oldChild, newChild);
+        }
+      }
+    }
+  }
+  static #shouldReplace(oldNode, newNode) {
+    if (oldNode.nodeType !== newNode.nodeType) return true;
+    if (oldNode.nodeType === Node.TEXT_NODE) return oldNode.textContent !== newNode.textContent;
+    return oldNode.tagName !== newNode.tagName || oldNode.id !== newNode.id;
+  }
+}
+
+// import morphdom from 'https://esm.sh/morphdom@2.7.4';
+// morphdom(oldNode, newNode);
+// import nanomorph from 'https://esm.sh/nanomorph@5.4.3';
+// nanomorph(oldNode, newNode);
+// import Idiomorph from 'https://esm.sh/idiomorph@0.3.0';
+// Idiomorph.morph(oldNode, newNode);
+
+import morphdom from 'https://esm.sh/morphdom@2.7.4';
+function morphDocument(newDoc) {
+  // am liebsten würde ich ganzes dokument inklusive header morphen, aber dann kann generiertes css verloren gehen... :(
+  //morphdom(document.body, newDoc.body);
+  //morphdom(document.documentElement, newDoc.documentElement);
+  document.title = newDoc.title;
+  Morph.morph(document.body, newDoc.body);
+}
+
+
+// ==================== UTILITIES ====================
+const Utils = {
+    isInternalLink(url) {
+        try {
+            const link = new URL(url, location.origin);
+            return link.origin === location.origin;
+        } catch {
+            return false;
+        }
+    },
+    getDistance(x1, y1, x2, y2) {
+        return Math.hypot(x2 - x1, y2 - y1);
+    },
+    idlePromise(options) {
+        return new Promise(resolve => {
+            if ('requestIdleCallback' in globalThis) {
+                requestIdleCallback(resolve, options);
+            } else {
+                setTimeout(resolve, 1);
+            }
+        });
+    },
+};
+
+// ==================== CACHE MANAGEMENT ====================
+class CacheManager {
+  static addToCache(url, html) {
+    if (state.pageCache.size >= CONFIG.cacheSize) {
+      const firstKey = state.pageCache.keys().next().value;
+      state.pageCache.delete(firstKey);
+    }
+    
+    state.pageCache.set(url, html);
+    PersistentStorage.set(url, html);
+  }
+  
+  static async fetchPage(url) {
+    // Blacklist-Check
+    if (state.failedUrls.has(url)) return null;
+
+    // 1. Memory Cache
+    if (state.pageCache.has(url)) return state.pageCache.get(url);
+    
+    // 2. Persistent Storage
+    const cachedHtml = await PersistentStorage.get(url);
+    if (cachedHtml) {
+      state.pageCache.set(url, cachedHtml);
+      return cachedHtml;
+    }
+    
+    // 3. Network
+    try {
+      const response = await fetch(url, {
+        headers: { 'X-Requested-With': 'SmartRouter' },
+      });
+      
+      
+      if (!response.ok) {
+        state.failedUrls.add(url); // In Blacklist eintragen
+        return null;
+      }
+      
+      const html = await response.text();
+      this.addToCache(url, html);
+      return html;
+    } catch (error) {
+        console.error('Fetch failed:', url, error);
+        return null;
+    }
+  }
+}
+
+
+// ==================== PAGE NAVIGATION ====================
+async function loadPage(url, shouldUpdateHistory = true) {
+    const html = await CacheManager.fetchPage(url);
+    if (!html) {
+        location.href = url;
+        return;
+    }
+    
+    // Parse mit DOMParser
+    const parser = new DOMParser();
+    const newDoc = parser.parseFromString(html, 'text/html');
+    
+    if ('startViewTransition' in document) {
+        document.startViewTransition(() => morphDocument(newDoc));
+    } else morphDocument(newDoc);
+    
+    if (shouldUpdateHistory) history.pushState({ url }, '', url);
+
+    scrollTo({ top: 0, behavior: 'instant' });
+    
+    Prefetch.scheduleIdlePrefetch();
+}
+
+// ==================== PREFETCHING ====================
+class Prefetch {
+    static getAllInternalLinks() {
+        const links = [];
+
+        for (const link of document.querySelectorAll('a[href]')) {
+            const href = link.href;
+            if (!href || !Utils.isInternalLink(href)) continue;
+
+            const url = new URL(href, location.origin).href;
+            if (state.pageCache.has(url)) continue;
+
+            const rect = link.getBoundingClientRect();
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+            const distance = Utils.getDistance(state.mouse.x, state.mouse.y, centerX, centerY);
+
+            links.push({ url, distance, element: link });
+        }
+
+        return links;
+    }
+
+    static async prefetchLinks() {
+        if (!state.isIdle) return;
+
+        const links = this.getAllInternalLinks();
+        links.sort((a, b) => a.distance - b.distance);
+
+        // Priority: Links nahe der Maus
+        const nearbyLinks = links.filter(l => l.distance < CONFIG.mouseProximity);
+        const otherLinks = links.filter(l => l.distance >= CONFIG.mouseProximity);
+
+        // Prefetch
+        for (const link of nearbyLinks.slice(0, 3)) {
+            if (!state.isIdle || state.prefetchQueue.has(link.url)) continue;
+            await Utils.idlePromise({ timeout: 2000 });
+            state.prefetchQueue.add(link.url);
+            await CacheManager.fetchPage(link.url);
+            state.prefetchQueue.delete(link.url);
+        }
+
+        // Rest der Links (rate-limited)
+        for (const link of otherLinks.slice(0, 10)) {
+            if (!state.isIdle || state.prefetchQueue.has(link.url)) break;
+            await Utils.idlePromise({ timeout: 2000 });
+            state.prefetchQueue.add(link.url);
+            await CacheManager.fetchPage(link.url);
+            state.prefetchQueue.delete(link.url);
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+    }
+
+    static scheduleIdlePrefetch() {
+        clearTimeout(state.idleTimer);
+        state.isIdle = false;
+
+        state.idleTimer = setTimeout(() => {
+            state.isIdle = true;
+            this.prefetchLinks();
+        }, CONFIG.prefetchDelay);
+    }
+}
+
+// ==================== EVENT HANDLERS ====================
+class EventHandlers {
+    static setupLinkInterception() {
+        document.addEventListener('click', (e) => {
+            if (e.ctrlKey || e.shiftKey) return;
+
+            const link = e.target.closest('a');
+            const href = link?.href;
+
+            if (!href || link.target || !Utils.isInternalLink(href)) return;
+
+            const sameDoc = location.href.replace(/#.*$/, '') === href.replace(/#.*$/, '');
+
+            if (link.hash && sameDoc) return; // same document, but hash-link: don't preventDefault
+            e.preventDefault();
+            if (sameDoc) return; // same document, nothing to load, but prevent reload
+
+            loadPage(link.href);
+
+        }, { passive: false });
+    }
+
+    static setupHistoryNavigation() {
+        addEventListener('popstate', (e) => {
+            if (e.state === null) return; // hash-links only? ok?
+            if (e.state.source === 'u2-target') { // todo, make it generic
+              console.log('new url handled by u2-navigable');
+              return;
+            }
+            const url = e.state?.url ?? location.href;
+            // todo: from hash-link to same document without hash, it is should not load
+            loadPage(url, false);
+        });
+    }
+
+    static setupMouseTracking() {
+        document.addEventListener('mousemove', (e) => {
+            state.mouse.x = e.clientX;
+            state.mouse.y = e.clientY;
+        }, { passive: true });
+    }
+
+    static setupIdleDetection() {
+        for (const event of ['scroll', 'mousemove', 'keydown', 'click', 'touchstart']) {
+            addEventListener(event, () => Prefetch.scheduleIdlePrefetch(), {
+                passive: true
+            });
+        }
+    }
+}
+
+// ==================== INITIALIZATION ====================
+async function init() {
+  // Persistent Storage
+  const storageType = await PersistentStorage.init();
+  //console.log(`🚀 Smart Router initialized (${storageType})`);
+  
+  // Cleanup
+  PersistentStorage.cleanup();
+  
+  // Cache current page
+  CacheManager.addToCache(location.href, document.documentElement.outerHTML);
+  
+  // History state
+  history.replaceState({ url: location.href }, '', location.href);
+  
+  // Event listeners
+  EventHandlers.setupLinkInterception();
+  EventHandlers.setupHistoryNavigation();
+  EventHandlers.setupMouseTracking();
+  EventHandlers.setupIdleDetection();
+  
+  // Start prefetching
+  Prefetch.scheduleIdlePrefetch();
+}
+
+// Auto-init
+init();