u2ui 1.0.0

package/attr/navigable/manifest.json

@@ -0,0 +1,42 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+    {
+        "kind": "javascript-module",
+        "path": "navigable.js",
+        "declarations": [
+          {
+            "summary": "Make elements navigatable",
+            "description": "Links to Elements that can have a active-state (dialog, details, popover, etc.) can be activated by simply linking to its id. This is done by adding the custom attribute u2-navigable to the element.",
+            "name": "u2-navigable",
+            "members": [],
+            "events": [],
+            "attributes": [
+                {
+                    "name": "u2-navigable",
+                    "description": "By adding the custom attribute u2-navigable to an element, the element becomes navigatable. Opens by hash-link even on loading the page, changes the url by closing the element.",
+                    "type": "boolean"
+                },{
+                    "name": "id",
+                    "description": "An id is required to navigate to the element."
+                }
+            ],
+            "cssProperties": [],
+            "attributeName": "u2-navigable"
+          }
+        ],
+        "exports": [
+          {
+            "kind": "custom-attribute-definition",
+            "name": "u2-navigable",
+            "declaration": {
+              "name": "u2-navigable",
+              "module": "navigable.js"
+            }
+          }
+        ]
+      }
+    ]
+  }
+  

package/attr/navigable/navigable.js

@@ -0,0 +1,87 @@
+import {TargetObserver} from './TargetObserver.js';
+import {U2TargetObserver, toggleParam} from './U2TargetObserver.js';
+
+
+// translate hash-links to "u2-navigable"-elements into "u2-target"-params
+new TargetObserver({
+	on: (el) => {
+		toggleParam(el.id, true, true);
+		const url = new URL(location);
+		url.hash = '';
+		history.replaceState(null, '', url.href);
+	},
+	matches: '[u2-navigable]'
+})
+
+
+/* dialog element */
+// TODO: there is no open-event, so we can not change the url if its opened by .showModal() mybe "invoke-event" some day?
+new U2TargetObserver({
+    on:  el => !el.open && el.showModal(),
+    off: el => el.close(),
+    matches: 'dialog[u2-navigable]',
+});
+addEventListener('close',e=>{
+	const el = e.target;
+	if (!el.matches('dialog[u2-navigable]')) return;
+	toggleParam(el.id, false);
+},true);
+
+
+/* details */
+new U2TargetObserver({
+	on:  el => el.open = true,
+	off: el => el.open = false,
+	matches: 'details[u2-navigable]',
+});
+addEventListener('toggle',e=>{
+	const el = e.target;
+	if (!el.matches('details[u2-navigable][id]')) return;
+	if (el.open) toggleParam(el.id, true);
+	else toggleParam(el.id, false);
+},true);
+
+
+/* checkbox and radio */
+new U2TargetObserver({
+	on:  el => el.checked = true,
+	off: el => el.checked = false,
+	matches: 'input:is([type=checkbox],[type=radio])[u2-navigable]',
+});
+addEventListener('change',e=>{
+	const el = e.target;
+	if (!el.matches('input:is([type=checkbox],[type=radio])[u2-navigable][id]')) return;
+
+	if (el.type === 'radio') {
+		const elements = el.form ? el.form.elements[el.name] : document.getElementsByName(el.name);
+		elements.forEach(e => toggleParam(e.id, false)); // toggleParam(e.id, false, TRUE) does not work as expected, why?
+	}
+
+	if (el.checked) toggleParam(el.id, true);
+	else toggleParam(el.id, false);
+});
+
+
+/* popover */
+new U2TargetObserver({
+    on: el => el.showPopover(),
+    off: el => el.hidePopover(),
+    matches: '[popover][u2-navigable]',
+});
+addEventListener('toggle', e => {
+    const el = e.target;
+    if (!el.matches('[popover][u2-navigable][id]')) return;
+	const newState = e.newState;
+	toggleParam(el.id, newState === 'open');
+}, true);
+
+
+
+// beta
+// u2 unified api
+addEventListener('u2-activate', e => {
+    if (!e.target.hasAttribute('u2-navigable')) return;
+	if (!e.target.hasAttribute('id')) { console.warn('element with a u2-navigable attribute must have an id'); return; }
+	//e.preventDefault(); // needed?
+	location.href = '#' + e.target.id;
+});

package/attr/navigable/tests/U1TargetObserver.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title></title>
+
+        <link rel=stylesheet href="../../../css/classless/full.css">
+        <link rel=stylesheet href="../../../css/classless/simple.css">
+        <script type=module async src="../../../u2/tests/test-init.js"></script>
+
+<body>
+
+<section>
+    <h1>Details</h1>
+
+    <button onclick="toggleParam('details1', true)">open</button>
+    <button onclick="toggleParam('details1', false)">close</button>
+    <button onclick="toggleParam('details1', null)">toggle</button>
+    <button onclick="toggleParam('details1', null, true)">toggle, no browser-back-history</button>
+
+    <details u2-navigable id=details1>
+        <summary>summary 1</summary>
+        More rext
+    </details>
+    <details u2-navigable id=details2>
+        <summary>summary 2</summary>
+        More rext
+    </details>
+
+
+</section>
+
+<script type=module>
+
+import {U2TargetObserver, toggleParam} from "../U2TargetObserver.js";
+window.toggleParam = toggleParam;
+
+
+new U2TargetObserver({
+    on:  el => el.open = true,
+    off: el => el.open = false,
+    matches:'details[u2-navigable]',
+});
+
+addEventListener('toggle',e=>{
+	const el = e.target;
+	if (!el.matches('details[u2-navigable][id]')) return;
+	if (el.open) {
+        toggleParam(el.id, true);
+	} else {
+        toggleParam(el.id, false);
+	}
+},true);
+
+</script>

package/attr/navigable/tests/minimal.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+
+    <script src="../navigable.js" type=module async></script>
+
+<body>
+
+    <section class="main">
+        Link to navigable dialog:<br>
+        <a href="#navigable">open</a>
+        <dialog u2-navigable id=navigable>
+            go back using esc or your browser's back button
+        </dialog>
+    </section>

package/attr/navigable/tests/targetObserver.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title></title>
+
+        <link rel=stylesheet href="../../../css/classless/full.css">
+        <link rel=stylesheet href="../../../css/classless/simple.css">
+
+        <script src="../TargetObserver.js" type=module async></script>
+
+    <body>
+
+<section>
+    <h1>Dialog</h1>
+    <a href="#dialog1">navigate to #dialog1</a>
+    <!--todo: button onclick="dialog1.showModal()">open by javascript</button-->
+
+    <dialog id="dialog1" u2-navigable>
+        dialog 1 is open
+        <br>
+        <a href="#dialog2">navigate to #dialog2</a>
+    </dialog>
+
+    <dialog id="dialog2" u2-navigable>
+        dialog 2 is open
+    </dialog>
+
+</section>
+
+<script type=module>
+import {TargetObserver} from "../TargetObserver.js";
+
+/* dialog element */
+new TargetObserver({
+    in:  el => {
+        !el.open && el.showModal()
+    },
+    out: el => {
+        el.close()
+    },
+    matches: 'dialog[u2-navigable]',
+});
+
+addEventListener('close',e=>{
+	const target = e.target;
+	if (!target.id) return;
+	if (e.target.id !== location.hash.substring(1)) return;
+	if (!target.matches('dialog[u2-navigable]')) return;
+
+	history.back();
+	e.preventDefault();
+},true);
+
+
+/* divs */
+new TargetObserver({
+    out: el => {
+        el.hidden = true;
+    },
+    in:  el => {
+        el.hidden = false;
+    },
+    matches: '.div',
+});
+
+/* all */
+setTimeout(function(){ // test if it trigger after target changed
+    let obs = new TargetObserver({
+        on: el => console.log('on',el),
+        off: el => console.log('off',el)
+    });
+
+},1000)
+</script>
+
+<section>
+    <h1>Details</h1>
+
+    <a href="#div1">open div1</a><br>
+    <a href="#div2">open div2 (should also open div1)</a>
+
+    <div id="div1" hidden class="div">
+        div 1
+        <div id="div2" hidden class="div">
+            div 2
+            now open div 3
+        </div>
+    </div>
+
+    <br>
+
+    <a href="#div3">open div3</a><br>
+
+    <div id="div3" hidden class="div">div 3</div>
+
+    <style>
+    .div {
+        background:yellow;
+        border: 1px solid;
+        padding: 10px;
+        margin: 10px;
+    }
+    </style>
+</section>

package/attr/navigable/tests/test.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Attribute u2-href tests</title>
+
+        <link rel=stylesheet href="../../../css/classless/full.css">
+        <link rel=stylesheet href="../../../css/classless/simple.css">
+        <script type=module async src="../../../u2/tests/test-init.js"></script>
+
+        <script src="../navigable.js" type=module async></script>
+
+    <body>
+
+<section>
+    <h1>Dialog</h1>
+    <a href="#dialog1">navigate to #dialog1</a>
+    <!-- <br>
+    <button onclick="dialog1.showModal()">open by javascript</button>
+    <br>
+    <a href="#dialog2">navigate to #dialog2 (nested)</a> -->
+
+    <dialog id="dialog1" u2-navigable>
+        dialog 1 is open
+        <br>
+        <a href="#dialog2">navigate to #dialog2</a>
+
+        <dialog id="dialog2" u2-navigable>
+            dialog 2 is open
+        </dialog>
+
+        <section>
+            <h1>Checkbox</h1>
+            <input type=checkbox u2-navigable id=checkbox1>
+            <input type=checkbox u2-navigable id=checkbox2>
+            <input type=checkbox u2-navigable id=checkbox3>
+        </section>
+
+        <section>
+            <h1>Radiobutton</h1>
+            <input type=radio u2-navigable name=radio1 id=radio1>
+            <input type=radio u2-navigable name=radio1 id=radio2>
+            <input type=radio u2-navigable name=radio1 id=radio3>
+        </section>
+
+
+        <button onclick="this.parentNode.close()">close</button>
+    </dialog>
+
+
+</section>
+
+
+
+<section>
+    <h1>Details</h1>
+
+    <a href="#details1">navigate to #details1</a>
+    <!-- todo: <button onclick="dialog1.showModal()">open by javascript</button> -->
+    <details u2-navigable id=details1>
+        <summary>summary 1</summary>
+        More text
+    </details>
+    <details u2-navigable id=details2>
+        <summary>summary 2</summary>
+        More text
+    </details>
+    <div>search the word "more" in browser search. Details should open and url should be changed (chromium for now)</div>
+
+</section>
+
+<!-- Ergänzung für Popover-Element -->
+<section>
+    <h1>Popover</h1>
+    <a href="#popover1">Toggle Popover (href)</a>
+    <br>
+    <button popovertarget="popover1">Toggle Popover (popovertarget)</button>
+    <div id=popover1 popover u2-navigable>
+        <p>Popover content</p>
+        <button popovertarget="popover1" popovertargetaction="hide">Close</button>
+    </div>
+</section>
+

package/attr/parallax/README.md

@@ -0,0 +1,48 @@
+# [u2-parallax] - attribute
+Make every element scrolling at different speed
+
+## Features
+
+- fast!
+- easy API
+- works for dynamic added elements
+- lightweight < 4k minified
+
+## Usage
+
+```html
+<div u2-parallax style="--u2-parallax-speed:1.1;">faster</div>
+<div u2-parallax style="--u2-parallax-speed:1;">parallax</div>
+<div u2-parallax style="--u2-parallax-speed:0.9;">slower</div>
+```
+
+```css
+[u2-parallax] {
+    background:var(--color-light);
+    display:inline-block;
+    padding:.5rem;
+}
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/parallax/parallax.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/parallax/tests/minimal.html)  
+[performance.html](http://gcdn.li/u2ui/u2@main/attr/parallax/tests/performance.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/attr/parallax/tests/test.html)  
+
+## Also interesting
+
+Parallax scrolling Backgrounds
+https://github.com/nuxodin/parax-bg
+
+## 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/parallax/parallax.js

@@ -0,0 +1,119 @@
+/* Copyright (c) 2016 Tobias Buschor https://goo.gl/gl0mbf | MIT License https://goo.gl/HgajeK */
+
+
+const pool = new Map();
+function add(el){
+    let obj = new parallax(el);
+    pool.set(el, obj);
+    if (pool.size === 1) addGlobalListeners();
+    return obj;
+}
+function remove(el){
+    pool.delete(el);
+    if (pool.size === 0) removeGlobalListeners();
+}
+
+var styEl = document.createElement('style');
+styEl.innerHTML = '[u2-parallax]{z-index:1; will-change:transform;}';
+document.head.prepend(styEl);
+
+const parallax = class {
+    constructor(el){
+        this.el = el;
+    }
+    connect(){
+        this.positionChange();
+        let style = getComputedStyle(this.el);
+        //let direction = parseFloat(style.getPropertyValue('--u2-parallax-direction'));
+        //if (isNaN(direction)) direction = 180;
+        //this.angle = (direction + 90) / 180 * Math.PI;
+        this.speed = parseFloat(style.getPropertyValue('--u2-parallax-speed'));
+        if (isNaN(this.speed)) this.speed = .8;
+        onScroll() // todo: better solution?
+    }
+    positionChange(){
+        this.oRect = vpRectWithoutTransform(this.el);
+        if (!this.oRect) return; // hidden
+        this.oRect.centerY = this.oRect.top + this.oRect.height/2;
+    }
+    onScroll(pageCenterY, pageCenterX){ // this has to be very fast, can it be improved?
+        if (!this.oRect) return; // hidden
+        const centerDiff = pageCenterY - this.oRect.centerY;
+        const yRoute = (this.speed-1) * -centerDiff;
+        //const y = yRoute * Math.sin(this.angle);
+        //const x = yRoute * Math.cos(this.angle);
+        // todo, only transform if visible?
+        this.el.style.transform = 'translate3d('+0+'px,'+yRoute+'px,0)';
+        // this.el.attributeStyleMap.set('transform', new CSSTransformValue([
+        //     new CSSTranslate(CSS.px(0),CSS.px(yRoute),CSS.px(0))
+        // ]));
+    }
+};
+
+function calcViewportRects(e){
+    pool.forEach(obj => obj.positionChange());
+}
+function onScroll(e){
+    const pageCenterY = document.scrollingElement.scrollTop + winHeight/2;
+    const pageCenterX = document.scrollingElement.scrollLeft + winWidth/2;
+    requestAnimationFrame(()=>{
+        pool.forEach(obj => obj.onScroll(pageCenterY, pageCenterX));
+    });
+}
+
+function addGlobalListeners(){
+    addEventListener('resize',calcViewportRects);
+    addEventListener('DOMContentLoaded',calcViewportRects);
+    addEventListener('load',calcViewportRects);
+    addEventListener('resize', onScroll);
+    addEventListener('load', onScroll);
+    document.addEventListener('scroll', onScroll);
+    addEventListener('wheel', onScroll); // firefox, scroll is async so wheel is faster
+}
+function removeGlobalListeners(){
+    removeEventListener('resize',calcViewportRects);
+    removeEventListener('DOMContentLoaded',calcViewportRects);
+    removeEventListener('load',calcViewportRects);
+    removeEventListener('resize', onScroll);
+    removeEventListener('load', onScroll);
+    document.removeEventListener('scroll', onScroll);
+    removeEventListener('wheel', onScroll); // firefox
+}
+
+// cache innerHeight, Is that of any use?
+let winHeight = document.documentElement.clientHeight; // was innerHeight // better this?: https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions
+let winWidth = document.documentElement.clientWidth;
+addEventListener('resize',(e)=>{
+    winHeight = document.documentElement.clientHeight;
+    winWidth = document.documentElement.clientWidth;
+});
+
+
+
+/* helpers */
+function vpRectWithoutTransform(el){
+    if (!el.offsetParent) return null;
+    let rect = {
+        left  : 0,
+        top   : 0,
+        width : el.offsetWidth,
+        height: el.offsetHeight,
+    }
+    do {
+        rect.left += el.offsetLeft;
+        rect.top  += el.offsetTop;
+        el = el.offsetParent;
+    } while (el);
+    return rect;
+}
+
+import {SelectorObserver} from '../../js/SelectorObserver/SelectorObserver.js';
+new SelectorObserver({
+    on: (el) => {
+        const parallaxObj = add(el);
+        parallaxObj.connect();
+    },
+    off: (el) => {
+        remove(el)
+    }
+}).observe('[u2-parallax]');

package/attr/parallax/tests/minimal.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <title>counter element test | U2-design-system</title>
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+
+    <script src="../parallax.js" type=module async></script>
+
+<body>
+
+    <section class=main>
+        <div u2-parallax style="--u2-parallax-speed:1.1;">faster</div>
+        <div u2-parallax style="--u2-parallax-speed:1;">parallax</div>
+        <div u2-parallax style="--u2-parallax-speed:0.9;">slower</div>
+    </section>
+
+    <style class=main>
+        [u2-parallax] {
+            background:var(--color-light);
+            display:inline-block;
+            padding:.5rem;
+        }
+    </style>

package/attr/parallax/tests/performance.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<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="../parallax.js" type=module async></script>
+    <style>
+        body, html {
+            margin:0;
+            height:100%;
+            font-size: calc(12px + 1vmax);
+            font-family:arial;
+        }
+        h1 {
+            margin:0;
+        }
+        #bg {
+            height:100%;
+        }
+        #bg > span {
+            z-index:-1;
+            position:absolute;
+            background:red;
+            width:2em;
+            height:2em;
+            box-shadow:0 0 10px black;
+            border-radius:20px;
+            contain:strict;
+        }
+        #bg > span::after {
+            content:'gix';
+        }
+        #logo {
+            height:100vh;
+            display:flex;
+            justify-content: center;
+            align-items: center;
+            gap:.5em;
+            font-size:calc(16px + 1vw);
+        }
+        #logo > span {
+            flex-basis:3em;
+            height:3em;
+            display:flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            color:black;
+            border:1px solid black;
+
+        }
+        #logo :nth-child(1) { --u2-parallax-speed:1.3; background-color:#79BBE8; }
+        #logo :nth-child(2) { --u2-parallax-speed:1.2; background-color:#7EE2F2; }
+        #logo :nth-child(3) { --u2-parallax-speed:1.1; background-color:#7CDBCF; }
+        #logo :nth-child(4) { --u2-parallax-speed:1.0; background-color:#7EF2C2; }
+        #logo :nth-child(5) { --u2-parallax-speed:0.9; background-color:#79E89A; }
+
+    </style>
+    <script type=module>
+        for (let i=400; i>0; i--) {
+            var span = document.createElement('span')
+            span.setAttribute('u2-parallax', true);
+            let speed = Math.random();
+            span.style.setProperty('--u2-parallax-speed', speed);
+            span.style.setProperty('opacity', speed+.1);
+            span.style.setProperty('left', Math.random()*100+'%');
+            span.style.setProperty('top', Math.random()*100+'%');
+            span.style.width = (5 + (speed * 50)) + 'px';
+            span.style.height = (5 + (speed * 50)) + 'px';
+            span.style.zIndex = -Math.floor((1-speed) * 100);
+            const colors = ['#79BBE8','#7EE2F2','#7CDBCF','#7EF2C2','#79E89A'];
+            const index = Math.floor(Math.random() * colors.length)
+            span.style.backgroundColor = colors[index];
+            bg.append(span)
+        }
+    </script>
+</head>
+<body>
+
+<div id=bg>
+    <h1 id=logo>
+        <span u2-parallax>P</span>
+        <span u2-parallax>A</span>
+        <span u2-parallax>R</span>
+        <span u2-parallax>A</span>
+        <span u2-parallax>X</span>
+    </h1>
+</div>
+
+
+<div style="max-width:800px; margin:4em auto; padding:2em; background:rgba(255,255,255,.8); border:1px solid">
+    <h2>How to use</h2>
+    <p>Include the script from...</p>
+    <p>Add the attribute "u2-parallax" to each element you like to change the speed.</p>
+    <pre>&lt;span u2-parallax style="--u2-parallax-speed:2"&gt;
+  I am twice as fast
+&lt;/span&gt;</pre>
+</div>
+
+
+<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>