u2ui 1.0.0

package/.htaccess

@@ -0,0 +1,7 @@
+RewriteEngine On
+
+RewriteRule ^(.*).min.js$ $1.js [L]
+
+RewriteRule ^(.*).min.css$ $1.css [L]
+
+RewriteRule ^(.*)@[^/]+/(.*)$ $1/$2 [L]

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 u2ui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,36 @@
+# u2 - Design System
+HTML Advanced: More Capabilities, Same Feel, Same Simplicity
+
+<p align="center">
+  <img src="./u2/tools/logo/u1.svg">
+</p>
+
+## Features
+
+u2 is a design system that is intended to fulfill the following goals:
+
+- Minimalistic
+- Based on standards
+- Tooling is optional
+- Minimal styled, style it as you like
+- Works without JS if possible
+
+## Demos
+
+[kacheln.html](http://gcdn.li/u2ui/u2@main/u2/tests/kacheln.html)  
+[showcase2.html](http://gcdn.li/u2ui/u2@main/u2/tests/showcase2.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/u2/tests/test.html)  
+
+## Quick Start
+
+Just add this script to have all the u2-stuff available on demand, without including them separately:  
+```html
+<script type=module async src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/u2/auto.min.js"></script>
+```
+
+
+## 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/attr/behavior/README.md

@@ -0,0 +1,25 @@
+# [u2-behavior] - attribute
+behavior before action
+
+## Usage
+
+```html
+<button u2-behavior=share>behavior=share</button>
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/behavior/behavior.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/behavior/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/attr/behavior/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/attr/behavior/behavior.js

@@ -0,0 +1,261 @@
+import {SelectorObserver} from '../../js/SelectorObserver/SelectorObserver.js';
+
+const observer = new SelectorObserver({
+    on: (el) => {
+
+        const name = el.getAttribute('u2-behavior');
+        const behavior = registry.get(name);
+
+        const active = behavior.init?.(el);
+        setStates(el, {active: active, inactive: !active, success: false, error: false});
+
+
+        if ('hidden' in behavior) {
+            el.hidden = behavior.hidden(el);
+        }
+        
+        if (behavior.text) {
+            let textEl = el;
+            if (!textEl || textEl.innerHTML) textEl = el.querySelector('.-text');
+            if (textEl && !textEl.innerHTML) textEl.innerHTML = behavior.text.en;
+        }
+
+        if (behavior.action) {
+            el.addEventListener('click', async (e)=>{
+                el.inert = true;
+                let active = null;
+                try {
+                    active = await behavior.action(e, el);
+                    setStates(el, {active, inactive: !active});
+                    setStates(el, {success: true, error: false});
+                } catch (e) {
+                    setStates(el, {error: true, success: false});
+                }
+                setTimeout(()=>setStates(el, {success: false, error: false}), 2000);
+                el.inert = false;
+            });
+        }
+        
+    },
+    off: (el) => {
+    }
+});
+
+function setStates(el, states) {
+    for (const state in states) {
+        setAttr(el.querySelector('.-'+state), 'hidden', !states[state]);
+    }
+}
+function setAttr(el, name, value) {
+    if (!el) return;
+    if (value == null || value === false) return el.removeAttribute(name);
+    if (value === true) return el.setAttribute(name, '');
+    el.setAttribute(name, value);
+}
+
+
+const registry = new Map();
+
+export function register(name, fn) {
+    registry.set(name, fn);
+}
+
+
+
+
+/* default behavoirs */
+
+
+register('close',{
+    init: (el) => {
+    },
+    action: (e, el) => {
+        const target = el.closest('dialog,[popover]');
+        target.close?.();
+        target.hidePopover?.();
+    },
+    text: {
+        de: 'Schließen',
+        en: 'Close',
+        fr: 'Fermer',
+        it: 'Chiudi',
+        es: 'Cerrar'
+    }
+});
+
+register('share',{
+    init: (el) => {
+    },
+    action: (e, el) => {
+        const data = {
+            title: el.dataset.title || document.title,
+            text: el.dataset.text || document.title,
+            url: el.dataset.url || location.href
+        };
+        return navigator.share(data);
+    },
+    text: {
+        de: 'Teilen',
+        en: 'Share',
+        fr: 'Partager',
+        it: 'Condividi',
+        es: 'Compartir'
+    }
+});
+
+
+register('once',{
+    init: (el) => {},
+    action: (e, el) => {
+        const id = el.id;
+        localStorage.setItem('u2-behavior-once-'+id, true);
+        el.hidden = true;
+    },
+    hidden(el){
+        const id = el.id;
+        return localStorage.getItem('u2-behavior-once-'+id);
+    }
+});
+
+register('print',{
+    init: (el) => {},
+    action: (e, el) => {
+        window.print();
+    },
+    text: {
+        de: 'Drucken',
+        en: 'Print',
+        fr: 'Imprimer',
+        it: 'Stampa',
+        es: 'Imprimir'
+    }
+});
+
+register('webapp.install',{
+    init: (el) => {
+        addEventListener('beforeinstallprompt', (e) => {
+            e.preventDefault();
+            el.hidden = false;
+            el.addEventListener('click', () => {
+                e.prompt();
+            });
+        });
+    },
+    hidden(){
+        return navigator.standalone;
+    },
+    action: (e, el) => {
+    },
+    text: {
+        de: 'Installieren',
+        en: 'Install',
+        fr: 'Installer',
+        it: 'Installa',
+        es: 'Instalar'
+    }
+});
+
+register('fullscreen.toggle',{
+    init: (el) => {
+        return !!document.fullscreenElement;
+    },
+    async action(e, el){
+        const state = document.fullscreenElement;
+        if (state) {
+            await document.exitFullscreen();
+        } else {
+            await el.parentElement.requestFullscreen();
+        }
+        return !state;
+    },
+    text: {
+        de: 'Vollbild',
+        en: 'Fullscreen',
+        fr: 'Plein écran',
+        it: 'Schermo intero',
+        es: 'Pantalla completa'
+    }
+});
+
+
+
+register('darkmode.toggle',{
+    init: (el) => {
+        const value = localStorage.u2Skin;
+        document.documentElement.setAttribute('u2-skin', value);
+        document.documentElement.setAttribute('data-theme', value); // compatibility
+        const state = value === 'dark';
+        return state;
+    },
+    action: (e, el) => {
+        const newVal = localStorage.u2Skin === 'dark' ? 'light' : 'dark';
+        localStorage.u2Skin = newVal;
+        document.documentElement.setAttribute('u2-skin', newVal);
+        document.documentElement.setAttribute('data-theme', newVal);
+        return newVal === 'dark';
+    },
+    text: {
+        de: 'Dunkelmodus',
+        en: 'Dark mode',
+        fr: 'Mode sombre',
+        it: 'Modalità scura',
+        es: 'Modo oscuro'
+    }
+});
+
+
+
+register('scroll', {
+    init: (el) => {
+        const checkScroll = () => {
+            el.hidden = window.scrollY < innerHeight / 2;
+        };
+        addEventListener('scroll', checkScroll);
+        checkScroll();
+    },
+    action: (e, el) => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    },
+    // disconnect: (el) => {
+    //     removeEventListener('scroll', checkScroll);
+    // }
+});
+
+
+let wakeLock = null;
+register('wakeLock', {
+    init: (el) => {
+        el.disabled = "wakeLock" in navigator ? false : true;
+    },
+    async action(e, el){
+        if (wakeLock) {
+            await wakeLock.release();
+            wakeLock = null;
+            return;
+        }
+        try {
+            wakeLock = await navigator.wakeLock.request("screen");
+            wakeLock.addEventListener('release', () => {
+                setStates(el, {active:false, inactive: true});
+                wakeLock = null;
+            });
+            return true;
+        } catch (err) {
+            console.error(`${err.name}, ${err.message}`);
+        }
+    },
+    text: {
+        de: 'Bildschirm wach halten',
+        en: 'Keep screen awake',
+        fr: 'Garder l\'écran allumé',
+        it: 'Mantieni lo schermo acceso',
+        es: 'Mantener la pantalla encendida'
+    }
+});
+
+
+
+observer.observe('[u2-behavior]');

package/attr/behavior/manifest.json

@@ -0,0 +1,43 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+    {
+        "kind": "javascript-module",
+        "path": "behavior.js",
+        "declarations": [
+          {
+            "// kind": "class",
+            "description": "Change behavior of Elements",
+            "name": "u2-behavior",
+            "members": [],
+            "events": [],
+            "attributes": [
+                {
+                    "name": "u2-behavior",
+                    "description": "Initial only! The behavior to apply to the element",
+                    "u2Examples": ["share","close","print","once","fullscreen","darkmode","scroll"]
+                },{
+                    "name": "lang",
+                    "description": "The language to use for internationalization",
+                    "u2Examples": ["en-US","fr-FR","de-DE","es-ES","it-IT","ja-JP","ko-KR","zh-CN","zh-TW"]
+                }
+            ],
+            "cssProperties": [],
+            "attributeName": "u2-behavior"
+          }
+        ],
+        "exports": [
+          {
+            "kind": "custom-attribute-definition",
+            "name": "u2-behavior",
+            "declaration": {
+              "name": "u2-behavior",
+              "module": "behavior.js"
+            }
+          }
+        ]
+      }
+    ]
+  }
+  

package/attr/behavior/tests/minimal.html

@@ -0,0 +1,19 @@
+<!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/simple.css">
+
+    <script src="../behavior.js" type=module async></script>
+
+<body>
+
+<section class=main>
+
+    <button u2-behavior=share>behavior=share</button>
+
+</section>

package/attr/behavior/tests/test.html

@@ -0,0 +1,98 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <title>tests</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="../behavior.js" type=module async></script>
+    
+    <style>
+    body {
+        --u2-ico-dir: 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/';
+    }
+    </style>
+
+
+<body>
+
+<section>
+
+    <h3>share</h3>
+    <button u2-behavior="share"></button>
+
+    <h3>custom text</h3>
+    <button u2-behavior="share">share this</button>
+
+    <h3>state elements</h3>
+    <button u2-behavior="share" data-url="https://example.com" data-title="Example" data-text="This is an example">
+        <span class="-text"></span>
+        <u2-ico class="-success" inline>check</u2-ico>
+        <u2-ico class="-error" inline>exclamation-triangle</u2-ico>
+    </button>
+
+    <h2>using class "-text" as text-content</h2>
+    <button u2-behavior="share" style="padding:.5rem">
+        <u2-ico>share</u2-ico>
+        <u2-tooltip class="-text"></u2-tooltip>
+    </button>
+
+
+    <h3>close</h3>
+    <button popovertarget="my-popover">Open Popover</button>
+    <div popover id="my-popover">
+        <button u2-behavior="close"></button>
+        Greetings, one and all!
+    </div>
+
+    <h3>print</h3>
+    <button u2-behavior="print"></button>
+
+    <h3>install</h3>
+    <button u2-behavior="webapp.install"></button>
+
+    <h3>once</h3>
+    <button u2-behavior="once" id="once-test">Once</button>
+    <br>
+    <button onclick="localStorage.removeItem('u2-behavior-once-once-test');">reset</button>
+
+    <h3>Fullscreen toggle</h3>
+    <button u2-behavior="fullscreen.toggle" style="padding:.5rem">
+        <u2-tooltip class="-text"></u2-tooltip>
+        <u2-ico class="-active">fullscreen-exit</u2-ico>
+        <u2-ico class="-inactive">fullscreen</u2-ico>
+    </button>
+
+
+    <h3>darkmode.toggle</h3>
+    <button u2-behavior="darkmode.toggle">
+        <span class="-text"></span>:
+        <span class="-active">on</span>
+        <span class="-inactive" hidden>off</span>
+    </button>
+
+    <h3>wakeLock</h3>
+    <button u2-behavior="wakeLock">
+        <span class="-text"></span>:
+        <span class="-active">on</span>
+        <span class="-inactive" hidden>off</span>
+    </button>
+
+    
+
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+
+    <div style="position:fixed; bottom:1rem; right:1rem;">
+        <h3>scroll</h3>
+        <button u2-behavior="scroll">⬆️</button>
+    </div>
+
+</section>

package/attr/confirm/README.md

@@ -0,0 +1,36 @@
+# [u2-confirm] - attribute
+Confirm before action
+
+## Features
+
+- Interupts form submit and requestSubmit
+- Interupts click on button
+- Uses native Dialog-Element (unstyled)
+- Has a translated default confirm text
+- Lightweight
+
+## Usage
+
+```html
+<form u2-confirm="Save name?" target=_blank>
+    <label><input name=name></label>
+    <button>confirm</button>
+</form>
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/confirm/confirm.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/confirm/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/attr/confirm/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/attr/confirm/confirm.js

@@ -0,0 +1,90 @@
+
+let resentConfirmed = false;
+
+// submit
+// todo: test if it works inside shadow dom
+
+document.addEventListener('submit', e=>{
+    if (resentConfirmed) return; // dont check again
+    const form = e.target;
+    const btn = e.submitter;
+    let element = null;
+    if (form.hasAttribute('u2-confirm')) element = form;
+    if (btn && btn.hasAttribute('u2-confirm')) element = btn;
+    if (!element) return;
+    confirmEvent(e, element, ()=> form.requestSubmit(btn) );
+},true);
+
+// click
+document.addEventListener('click', e=>{
+    if (resentConfirmed) return;
+
+    //const target = e.target;
+    const target = e.composedPath()[0];
+    
+    const element = target.closest('button[u2-confirm]');
+    if (!element) return;
+    if (element.form && element.type==='submit') return; // handled by submit event. What about "reset"?
+    confirmEvent(e, element, ()=> element.click() );
+},true);
+
+async function confirmEvent(e, element, then){
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    const {confirm} = await import('../../js/dialog/dialog.js');
+    const lang = langOf(element);
+    const ok = await confirm({
+        body: getMessage(element, lang),
+        lang,
+    });
+    if (ok) {
+        resentConfirmed = true;
+        then();
+        resentConfirmed = false;
+    }
+}
+
+function getMessage(el, lang) {
+    // get lang of el
+    let msg = el.getAttribute('u2-confirm');
+    if (msg) return msg;
+    msg = sure[lang];
+    if (msg) return msg;
+    console.warn('no translation for lang "'+lang+'" in confirm.js. Please report!');
+    return sure.en;
+}
+
+function langOf(el) {
+    return el.closest('[lang]')?.getAttribute('lang') || navigator.language.substring(0,2) || 'en';
+}
+
+const sure = {
+    en: 'Are you sure?',
+    de: 'Sind Sie sicher?',
+    fr: 'Êtes-vous sûr?',
+    es: '¿Estás seguro?',
+    it: 'Sei sicuro?',
+    pt: 'Tem certeza?',
+    ua: 'Ви впевнені?',
+    ru: 'Вы уверены?',
+    ja: '本気ですか？',
+    ko: '확실합니까?',
+    zh: '你确定吗？',
+    nl: 'Weet je het zeker?',
+};
+
+
+/* TODO: button and link confirm?
+document.addEventListener('click', async e=>{
+    if (resentConfirmed) return;
+    let element = e.target.closest('[u2-confirm]');
+    if (!element) return;
+    if (element.form || element.tagName === 'FORM') {
+        console.log('handled by submit event');
+        return;
+    }
+    confirmEvent(e, element, ()=>
+        element.click()
+    );
+},true);
+*/

package/attr/confirm/manifest.json

@@ -0,0 +1,43 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+    {
+        "kind": "javascript-module",
+        "path": "confirm.js",
+        "declarations": [
+          {
+            "// kind": "class",
+            "description": "Show confirm dialog before click triggers or form submission",
+            "name": "u2-confirm",
+            "members": [],
+            "events": [],
+            "attributes": [
+                {
+                    "name": "u2-confirm",
+                    "description": "If set to true, the confirm will be shown before click triggers or the associated form is submitted. Its value may be a string to be used as the message to show in the confirm dialog. The attribute works for buttons and form-elements.",
+                    "u2Examples": ["", "Are you sure you want to delete this item?"]
+                },{
+                    "name": "lang",
+                    "description": "The language to use for internationalization",
+                    "u2Examples": ["en-US","fr-FR","de-DE","es-ES","it-IT","ja-JP","ko-KR","zh-CN","zh-TW"]
+                }
+            ],
+            "cssProperties": [],
+            "attributeName": "u2-confirm"
+          }
+        ],
+        "exports": [
+          {
+            "kind": "custom-attribute-definition",
+            "name": "u2-confirm",
+            "declaration": {
+              "name": "u2-confirm",
+              "module": "confirm.js"
+            }
+          }
+        ]
+      }
+    ]
+  }
+