u2ui 1.0.1 → 1.4.6

package/u2/old-stuff/el/ai-texter/README.md

@@ -1,23 +0,0 @@
-## Install
-
-```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/ai-texter/ai-texter.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/ai-texter/ai-texter.min.js" type=module async></script>
-```
-
-## Install
-
-```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/ai-texter/ai-texter.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/ai-texter/ai-texter.min.js" type=module async></script>
-```
-
-## Demos
-
-[test.html](http://gcdn.li/u2ui/u2@main/el/ai-texter/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/u2/old-stuff/el/ai-texter/ai-texter.css

@@ -1,12 +0,0 @@
-u2-ai-texter {
-    border: 1px solid currentColor;
-    position: absolute;     
-    padding:0;
-    margin:0;
-    xmin-width: 12rem;
-
-}
-
-u2-ai-texter:not(:defined) {
-    display: none;
-}

package/u2/old-stuff/el/ai-texter/ai-texter.js

@@ -1,153 +0,0 @@
-/* this is a input for ai prompts or a menu for pre-selected prompts, to help write in a textarea, or contenteditable */
-/* usage:
-<label>
-    <textarea></textarea>
-    <u2-ai-texter endpoint="/api"></u2-ai-texter> <!-- this will create an input where the user can insert ist prompts -->
-</label>
-
-// for a specific textarea, save prompts using localStorage
-<textarea id=test></textarea>
-<u2-ai-texter endpoint="/api" for="#test" safe></u2-ai-texter> <!-- this will create an combobox where saved prompts can be selected, they are saved using the id as identifier -->
-
-<u2-ai-texter endpoint="/api" for="#test" safe="my-global-prompts"></u2-ai-texter> <!-- this will create an combobox where saved prompts can be selected, they are saved using the save-attribute-value as identifier -->
-
-or for every textarea, using predefined prompts
-<u2-ai-texter endpoint="/api" for="textarea">
-    <menu>
-        <button value="prompt1">prompt 1</button>
-        <button value="prompt1">prompt 2</button>
-    </menu>
-</u2-ai-texter>
-*/
-
-import {Placer} from '../../../../js/Placer/Placer.js';
-
-class Texter extends HTMLElement {
-    constructor() {
-        super();  // Ruft den Konstruktor der Basisklasse auf
-        this.attachShadow({mode: 'open'}); // Erstellt ein Shadow DOM
-        this.placer = new Placer(this, { x:'center', y:'after', margin:-5 });
-    }
-
-    connectedCallback() {
-        this.shadowRoot.innerHTML = `
-            <style>
-                :host {
-                    border: 1px solid currentColor;
-                    position: absolute;
-                    padding:0;
-                    border-radius: .5em;
-                }
-                :host(:focus-within) {
-                    outline: .4em solid blue;
-                }
-                form {
-                    display:flex;
-                }
-                input {
-                    outline:none;
-                    flex: 1 1 auto;
-                    border:0;
-                    padding: .5em;
-                }
-                button {
-                    all: unset;
-                    display:flex;
-                    align-items:center;
-                    padding: .4em;
-                }
-            </style>
-            <form>
-                <slot>
-                    <input placeholder="Make the text more unique...">
-                </slot>
-                <button>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z"></path></svg>
-                </button>
-            </form>
-        `;
-        this.setAttribute('popover', 'manual');
-        this.shadowRoot.querySelector('form').addEventListener('submit', (event) => {
-            event.preventDefault();
-            this.request(this.shadowRoot.querySelector('input').value);
-        });
-    }
-    showFor(element) {
-        this.currentTarget = element;
-        this.showPopover();
-        this.placer.toElement(element);
-        this.placer.followElement(element);
-    }
-    hide() {
-        this.hidePopover();
-    }
-
-    async request(prompt) {
-        const target = this.currentTarget;
-
-        const text = target.value != null ? target.value : target.innerHTML;
-
-        const body = {
-            //model: "llama3-8b-8192",
-            model: "llama3-70b-8192",
-            stream: false,
-            messages: [{
-                    role: "system",
-                    content: `You are a text editor. Return only the full(!) edited text without any explanations!
-
-                    Example 1:\n
-                    Prompt: You're a stupid bloke.\n
-                    Text: friendlier\n
-                    Answer: We seem to have different perspectives.\n
-
-                    Example 2:\n
-                    Prompt: Es war einmal ein\n
-                    Text: schreib weiter\n
-                    Answer: Es war einmal ein kleines Mädchen.\n
-                    `,
-                },{
-                    role: "user",
-                    content: `Prompt: ${prompt}\nText: ${text}`,
-                }],
-        };
-
-        const endpoint = this.getAttribute('api');
-        const apiKey = this.getAttribute('api-key');
-
-        const result = await fetch(endpoint, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${apiKey}`
-            },
-            body: JSON.stringify(body),
-        }).then(response => response.json());
-
-        console.log(result);
-
-        const value = result.choices[0].message.content;
-
-        target[target.value != null ? 'value' : 'innerHTML'] = value;
-    }
-}
-
-customElements.define('u2-ai-texter', Texter);
-
-
-
-addEventListener('focusin', ({target}) => {
-
-    if (target.matches('u2-ai-texter')) return;
-
-    document.querySelectorAll('u2-ai-texter').forEach(texter => {
-        if (!target.matches) return;
-        if (target.matches(texter.getAttribute('for'))) {
-            texter.showFor(target);
-        } else {
-            const texter = target.parentNode.querySelector(':scope > u2-ai-texter');
-            if (texter) {
-                texter.showFor(target);
-            }
-        }
-    });
-});

package/u2/old-stuff/el/ai-texter/tests/minimal.html

@@ -1,47 +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 src="../../u2/auto.js" type=module async></script> -->
-    <title>Test</title>
-
-    <link rel=stylesheet href="../../../css/classless/full.css">
-    <link rel=stylesheet href="../../../css/classless/simple.css">
-
-    <link href="../../../el/code/code.css" rel=stylesheet>
-    <script src="../../../el/code/code.js" type=module async></script>
-    
-    
-
-    <!--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;
-        }
-    </style>
-
-    <link href="../ai-texter.css" rel=stylesheet>
-    <script src="../ai-texter.js" type=module async></script>
-
-<body>
-
-<section class="main">
-
-    <label>
-        <textarea></textarea>
-        <u2-ai-texter api="https://api.groq.com/openai/v1/chat/completions" api-key="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"></u2-ai-texter>
-    </label>
-
-</section>
-
-<style class="main">
-    u2-ai-texter {
-        background: #f8f8f8;
-    }
-</style>

package/u2/old-stuff/el/ai-texter/tests/test.html

@@ -1,71 +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 src="../../u2/auto.js" type=module async></script> -->
-    <title>Test</title>
-
-    <link rel=stylesheet href="../../../css/classless/full.css">
-    <link rel=stylesheet href="../../../css/classless/simple.css">
-
-    <link href="../../../el/code/code.css" rel=stylesheet>
-    <script src="../../../el/code/code.js" type=module async></script>
-    
-    <!--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;
-        }
-    </style>
-
-    <link href="../ai-texter.css" rel=stylesheet>
-    <script src="../ai-texter.js" type=module async></script>
-
-<body>
-
-<section>
-
-    <h2>u2-ai-texter</h2>
-    <label>
-        same container
-        <textarea></textarea>
-        <u2-ai-texter api="https://api.groq.com/openai/v1/chat/completions" api-key="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"></u2-ai-texter>
-    </label>
-
-    
-    <h2>Using "for" attribute</h2>
-    <label>
-        Textarea 1
-        <textarea class="forTest"></textarea>
-    </label>
-    <label>
-        Textarea 1
-        <textarea class="forTest"></textarea>
-    </label>
-    <u2-ai-texter for=".forTest" api="https://api.groq.com/openai/v1/chat/completions" api-key="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"></u2-ai-texter>
-
-    <h2>Using custom buttons</h2>
-
-    <label>
-        Using custom buttons
-        <textarea></textarea>
-        <u2-ai-texter api="https://api.groq.com/openai/v1/chat/completions" api-key="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">
-            <button>korrektur</button>
-            <button>ausführlicher</button>
-        </u2-ai-texter>
-    </label>
-
-    <h2>Using contenteditable</h2>
-
-    <div contenteditable>
-        <p>Contenteditable</p>
-    </div>
-    <u2-ai-texter for="[contenteditable]" api="https://api.groq.com/openai/v1/chat/completions" api-key="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"></u2-ai-texter>
-
-</section>

package/u2/old-stuff/init.js

@@ -1,38 +0,0 @@
-
-/* prevent double-click selection */
-addEventListener('mousedown', e => {
-    if (e.detail < 2) return; // // check event.ctrlKey/event.shiftKey/event.altKey?
-    let target = e.composedPath()[0]; // shadow dom
-    if (!target.closest('summary,label')) return;
-    e.preventDefault();
-});
-
-
-/*
-
-Copy styles to the shadow-dom
-- add functionality to a custom Element Class we can inherit?
-
-new SelectorObserver({
-    on: el => {
-        for (let ss of document.styleSheets) el.shadowRoot.append(ss.ownerNode.cloneNode());
-    } ,
-}).observe('[deep-css]');
-
-*/
-
-
-
-/*
-
-Add classes on running transitions
-- does this take up too much performance?
-
-addEventListener('transitionstart',e=>{
-    e.target.classList.add('u2-animating')
-})
-addEventListener('transitionend',e=>{
-    e.target.classList.remove('u2-animating')
-})
-
-*/

package/u2/old-stuff/markHashLinks.js

@@ -1,51 +0,0 @@
-
-
-console.warn('todo!');
-
-/* mark link, todo: loop nav elements, for now it only works with one nav */
-var links = null;
-var getLinks = function(){
-	if (links) return links;
-	var els = document.querySelectorAll('a[href]');
-	links = [];
-	for (var i=0,a; a=els[i++];) {
-		var matches = a.href.match(/#(.*)/);
-		if (!matches) continue;
-		var id = matches[1];
-		if (!id) continue;
-		var target = document.getElementById(id);
-		if (!target) continue;
-		links.push({a, target, id});
-	}
-	setTimeout(()=> links = null, 3000);
-	return links;
-};
-
-var listen = function(e){
-	var links = getLinks(), winner, i=0, link;
-	while (link=links[i++]) {
-		var pos = link.target.getBoundingClientRect();
-		if (pos.top > 140) break; // first target below viewport
-		winner = link;
-	}
-	winner && markLinksActivated(winner.id);
-};
-
-document.addEventListener('DOMContentLoaded',listen);
-addEventListener('scroll',listen);
-addEventListener('resize',listen);
-
-var latestWinner;
-function markLinksActivated(id){
-	if (latestWinner === id) return;
-	latestWinner = id;
-	var actives = document.querySelectorAll('.hashLinkActive');
-	for (var i=0,item; item=actives[i++];) item.classList.remove('hashLinkActive');
-	var links = getLinks();
-	for (i=0; item=links[i++];) {
-		item.id === id && item.a.classList.add('hashLinkActive');
-	}
-}
-
-addEventListener('pushstate',e=>markLinksActivated(location.hash));
-//addEventListener('cms.navigator-navigated', e=>markLinksActivated(location.hash)); // todo: make onpopstate-polyfill

package/u2/old-stuff/onElement/mod.js

@@ -1,73 +0,0 @@
-/* Copyright (c) 2016 Tobias Buschor https://goo.gl/gl0mbf | MIT License https://goo.gl/HgajeK */
-
-console.warn('deprecated!');
-
-var listeners = [],
-    //root = document.documentElement,
-    root = document,
-    Observer;
-
-export function onElement (selector, options/*, disconnectedCallback*/) {
-	if (typeof options === 'function') {
-		options = { parsed:options }
-	}
-    var listener = {
-        selector: selector,
-		immediate: options.immediate,
-        elements: new WeakSet(),
-    };
-	if (options.parsed) {
-    	listener.parsed = function(el){
-			requestAnimationFrame(()=>options.parsed(el));
-		}
-	}
-	try {
-	    var els = root.querySelectorAll(listener.selector), i=0, el;
-	} catch(e) {
-		console.error('invalid selector: "'+listener.selector+'"');
-		return;
-	}
-    while (el = els[i++]) {
-        listener.elements.add(el);
-        listener.parsed    && listener.parsed.call(el, el);
-        listener.immediate && listener.immediate.call(el, el);
-    }
-
-    listeners.push(listener);
-    if (!Observer) {
-        Observer = new MutationObserver(checkMutations);
-        Observer.observe(root, {
-            childList: true,
-            subtree: true
-        });
-    }
-    checkListener(listener);
-};
-function checkListener(listener, target) {
-    var i=0, el, els = [];
-    target && target.matches(listener.selector) && els.push(target);
-    if (loaded) { // ok? check inside node on innerHTML - only when loaded
-        Array.prototype.push.apply(els, (target||root).querySelectorAll(listener.selector));
-        // els.push(...found)?
-    }
-    while (el = els[i++]) {
-        if (listener.elements.has(el)) continue;
-        listener.elements.add(el);
-        listener.parsed    && listener.parsed.call(el, el);
-        listener.immediate && listener.immediate.call(el, el);
-    }
-}
-function checkListeners(inside) {
-    var i=0, listener;
-    while (listener = listeners[i++]) checkListener(listener, inside);
-}
-function checkMutations(mutations) {
-    var j=0, i, mutation, nodes, target;
-    while (mutation = mutations[j++]) {
-        nodes = mutation.addedNodes, i=0;
-        while (target=nodes[i++]) target.nodeType === 1 && checkListeners(target);
-    }
-}
-
-let loaded = false;
-document.addEventListener('DOMContentLoaded',()=> loaded = true );

package/u2/old-stuff/test-helpers/mod.js

@@ -1,36 +0,0 @@
-/**
- * @description create a big test-dom structure
- * @returns HTMLElement, the created root
- * @usage
- * var root = createBigDom({ depth=40, num=5000, maxChildren=100,
- *   createElement:()=>{
- *     var el = document.createElement('article');
- *     el.innerHTML = 'test';
- *     return el;
- *   }
- * });
- */
-export function createBigDom({ createElement, root, depth = 40, num = 5000, maxChildren = 100 } = {}) {
-    // https://web.dev/dom-size/#how-the-lighthouse-dom-size-audit-fails
-    if (!root) {
-        var root = document.createElement('div');
-        document.body.append(root);
-    }
-    root.className = 'bigDom';
-    let aDepth = 0;
-    let aNum = 0;
-    function addChildren(parent) {
-        aDepth++;
-        for (let i = 0; i < maxChildren; i++) {
-            if (aNum >= num) break;
-            const el = createElement ? createElement() : document.createElement('span');
-            parent.append(el);
-            aNum++;
-            if (aNum >= num) return;
-            if (aDepth < depth) addChildren(el);
-        }
-        aDepth--;
-    }
-    addChildren(root);
-    return root;
-}

package/u2/old-stuff/test-helpers/test.html

@@ -1,4 +0,0 @@
-
-<body>
-    <script src="test.js" type=module async></script>
-</body>

package/u2/old-stuff/tests/init.js.html

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Level.css TEST</title>
-  <meta name="viewport" content="width=device-width">
-
-
-  <script src="../init.js" type=module async></script>
-  <link rel=stylesheet href="../../../css/base/full.css" crossorigin>
-
-
-<body>
-
-<section>
-
-    <h2>Doubleclick on label and on summary should not select the text, but it is still selectable</h2>
-    <div id=dblClickTest>
-        <label>
-            A label for:
-            <input>
-        </label>
-
-        <details>
-            <summary>Summary</summary>
-            <div>
-                Details Content
-            </div>
-        </details>
-    </div>
-
-
-    <div id=dblClickTest_shadow style="border:1px solid">
-        The same inside Shadow-Dom<br>
-
-
-    </div>
-    <script>
-
-    /*
-    shadowDeepCss = function(shadow){
-        for (let ss of document.styleSheets) shadow.append(ss.ownerNode.cloneNode());
-    }
-    */
-
-    let shadow = dblClickTest_shadow.attachShadow({mode: 'open'});
-    //shadowDeepCss(shadow);
-    shadow.innerHTML += '<slot></slot>' + dblClickTest.innerHTML;
-
-    </script>
-</section>

package/u2/old-stuff/viewport.js

@@ -1,64 +0,0 @@
-
-const docEl = document.documentElement
-let lastY = 0;
-const onScroll = function(){
-    const upScroll = lastY >= scrollY;
-    docEl.classList[upScroll?'add':'remove']('u2-scroll-up');
-    lastY = scrollY;
-    const isTop = lastY <= 20; // 0 is not enough on iOS
-    docEl.classList[isTop?'remove':'add']('u2-scroll-not-top');
-};
-onScroll();
-addEventListener('scroll',onScroll);
-
-
-
-
-let lastHMin = null;
-function check(){
-    let hMin = window.innerHeight;
-    if (lastHMin !== null) {
-        hMin = Math.abs(hMin - lastHMin) > 150 ? hMin : lastHMin; // tested: 114px
-    }
-    document.documentElement.style.setProperty('--u2-vh-min', hMin +'px');
-    lastHMin = hMin;
-};
-check();
-addEventListener('resize',check);
-
-
-
-
-
-/*
-// https://github.com/joppuyo/large-small-dynamic-viewport-units-polyfill/blob/master/src/index.js
-const docEl = document.documentElement;
-
-if (CSS.supports('height:1svh')) {
-    docEl.style.setProperty('--1svh', "1svh");
-    docEl.style.setProperty('--1dvh', "1dvh");
-    docEl.style.setProperty('--1lvh', "1lvh");
-} else {
-    recalc();
-    document.addEventListener('DOMContentLoaded', recalc)
-    window.addEventListener('resize', recalc);
-}
-
-function recalc() {
-    const svh = docEl.clientHeight * 0.01;
-    docEl.style.setProperty('--1svh', (svh + "px"));
-    const dvh = window.innerHeight * 0.01;
-    docEl.style.setProperty('--1dvh', (dvh + "px"));
-
-    //const parent = docEl;
-    const parent = document.body;
-    if (parent) {
-        const fixed = document.createElement("div");
-        fixed.style.cssText = 'width:1px;height:100vh;position:fixed;left:0;top:0;bottom:0;visibility:hidden';
-        parent.append(fixed);
-        const lvh = fixed.clientHeight * 0.01;
-        docEl.style.setProperty('--1lvh', (lvh + "px"));
-        fixed.remove();
-    }
-};
-*/

package/u2/tests/boilerplate.html

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang=en>
-    <head>
-        <meta charset=utf-8>
-        <title>Todo: Title</title>
-        <meta name=viewport content="width=device-width, viewport-fit=cover">
-        <meta name=theme-color content="#ff0">
-        <meta name=apple-mobile-web-app-capable content="yes">
-        <meta name=apple-mobile-web-app-status-bar-style content="black-translucent">
-
-        <script src="https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/mod.js" type=module crossorigin></script>
-        <script src="https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/htmlfills.js" type=module crossorigin></script>
-
-        <script src="../../../u2/auto.min.js?debug=1" type=module crossorigin></script>
-
-        <!--
-        Inspiration:
-        https://www.matuzo.at/blog/html-boilerplate/
-        -->
-
-<body>
-
-    <header role=banner>
-        <div class=u2-width>
-            Header
-        </div>
-    </header>
-
-    <main>
-        <section>
-            <div class=u2-width>
-                Section 1
-            </div>
-        </section>
-        <section>
-            <div class=u2-width>
-                Section 2
-            </div>
-        </section>
-    </main>
-
-    <footer role=contentinfo>
-        <div class=u2-width>
-            Footer
-        </div>
-    </footer>