u2ui 1.0.0

package/el/parallax-bg/parallax-bg.js

@@ -0,0 +1,186 @@
+// todo resizeObserver?
+
+const pool = new Set();
+
+const paraxBg = {
+    add(element){
+        pool.add(element)
+        pool.size === 1 && addListeners();
+        //element.connect();
+    },
+    remove(element){
+        pool.delete(element);
+        //pool.size === 0 && removeListeners(); // todo
+    },
+    positionize(){
+        //requestAnimationFrame(()=>{
+            pool.forEach(item=>item.positionize());
+        //});
+    },
+    layout(){
+        pool.forEach(item=>item.layout());
+    }
+}
+
+// cache dimensions. Is it worth it?
+let pageY;
+let winHeight;
+let scrollHeight;
+function setVPDimensions(){
+    pageY = scrollY;
+    winHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0); // was innerHeight, better this?: https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions
+    scrollHeight = document.documentElement.scrollHeight;
+}
+setVPDimensions();
+
+function addListeners(){
+	addEventListener('DOMContentLoaded', paraxBg.layout);
+	addEventListener('load', ()=>{
+        paraxBg.layout();
+        paraxBg.positionize();
+    });
+	document.addEventListener('scroll', ()=>{
+        pageY = scrollY;
+        requestAnimationFrame(()=>paraxBg.positionize()) // better!
+    });
+	addEventListener('wheel', ()=>{ // for firefox
+        pageY = scrollY;
+        requestAnimationFrame(()=>paraxBg.positionize())
+    });
+
+	addEventListener('resize', ()=>{
+        setVPDimensions();
+        paraxBg.layout();
+        paraxBg.positionize();
+    });
+    const rs = new ResizeObserver(entries => {
+        setVPDimensions();
+        paraxBg.layout();
+        paraxBg.positionize();
+    })
+    rs.observe(document.body);
+}
+
+
+class ParallaxBg extends HTMLElement {
+    constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode:'open'});
+
+        shadowRoot.innerHTML = `
+        <style>
+        :host {
+            position:absolute;
+            inset:.-.4px;
+            overflow:clip;
+        }
+        .mover {
+            position:absolute;
+            inset:0;
+            z-index:-1;
+            will-change:transform;
+            background: inherit;
+        }
+        .visible {
+            display:flex;
+            flex-direction:row;
+            align-items:stretch;
+            justify-content:center;
+            position:absolute;
+            inset:0;
+        }
+        </style>
+        <div class=mover><slot class=visible></slot></div>
+        `;
+        // .mover {will-change:transform} brings a lot, but the budget is easily exceeded... we should only do this if in the visible area.
+
+        this.mover   = this.shadowRoot.querySelector('.mover');
+        this.visible = this.shadowRoot.querySelector('.visible');
+
+        const style = getComputedStyle(this);
+        const speed = style.getPropertyValue('--parallax-bg-speed');
+        this.speed = speed === '' ? .5 : parseFloat(speed);
+    }
+	connectedCallback() {
+        /*
+        let stage = this.closest('.u2-parallax-bg-stage');
+        if (!stage) {
+            stage = this.parentNode;
+            stage.setAttribute('parallax-bg-stage','');
+        }
+        */
+        this.stage = this.offsetParent;
+        if (this.stage.tagName === 'BODY') this.stage.style.position = 'relative'; // what can go wrong?
+
+        scrollHeight = document.documentElement.scrollHeight; // todo: little slow
+
+        this.layout();
+        this.positionize();
+
+        paraxBg.add(this);
+    }
+    disconnectedCallback(){
+        paraxBg.remove(this);
+    }
+    layout(){
+        const rect = this.stage.getBoundingClientRect();
+        this.stageRect = { // todo: add border-width
+            top:    pageY + rect.top,
+            bottom: pageY + rect.bottom,
+            height: rect.height,
+            yCenter: (rect.top + pageY) + rect.height/2,
+        };
+
+        // calculate offset if stage is on top
+        let relevantTop = this.stageRect.top;
+
+        // if its faster then normal, calculate offset on bottom of stage
+        if (this.speed > 1) relevantTop += this.stageRect.height;
+
+        let offset = this.offsetAtPageY(relevantTop);
+        offset = Math.abs(offset);
+
+        // if it moves the opposite, add the stage height to the offset
+        if (this.speed < 0) offset += (-this.speed * this.stageRect.height);
+
+        this.mover.style.top    = -offset + 'px';
+        this.mover.style.bottom = -offset + 'px';
+
+        // if the element cannot go further down or up
+        // the [parallax-bg-visible] element
+        // the most complicated part of the lib, seems to work well, but it was born by trial and error
+        if (this.speed < 0) {
+            console.warn('parallax-bg: parallax-bg-visible attribute is not implemented for speed < 0');
+            return;
+        }
+        //const visibleEl = this.querySelector('[parallax-bg-visible]');
+        const visibleEl = this.visible;
+        if (visibleEl) {
+            let top = 0;
+            let bottom = 0;
+            const offsetAtElTop    = this.offsetAtPageY(this.stageRect.top);
+            const offsetAtTop      = this.offsetAtPageY(0);
+            const offsetAtElBottom = this.offsetAtPageY(this.stageRect.bottom - winHeight);
+            const offsetAtBottom   = this.offsetAtPageY(scrollHeight - winHeight);
+            if (this.speed < 1) {
+                top    = Math.min(offsetAtElTop, offsetAtBottom);
+                bottom = Math.max(offsetAtTop, offsetAtElBottom);
+            }
+            if (this.speed > 1) {
+                top    = Math.max(offsetAtTop, -offsetAtElBottom);
+                bottom = Math.min(-offsetAtElTop, offsetAtBottom);
+            }
+            visibleEl.style.top    = offset - top  + 'px';
+            visibleEl.style.bottom = offset + bottom + 'px';
+        }
+    }
+    offsetAtPageY(pageY){
+        const moved = this.stageRect.yCenter - (pageY + winHeight/2);
+        return moved*(this.speed-1);
+    }
+    positionize(){
+        this.mover.style.transform = 'translate3d(0, '+ this.offsetAtPageY(pageY) +'px, 0)';
+    }
+}
+
+customElements.define('u2-parallax-bg', ParallaxBg)

package/el/parallax-bg/tests/demo.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <link rel=stylesheet href="../parallax-bg.css">
+    <script src="../parallax-bg.js" type=module async></script> <!---->
+    <style>
+        body, html {
+            margin:0;
+            font-family:arial;
+        }
+        h1 {
+            color:#fff;
+            margin:5em 0;
+            text-align:center;
+            font-size:calc(20px + 2vmax);
+        }
+    </style>
+</head>
+<body>
+
+<div class=u2-parallax-bg-stage>
+    <u2-parallax-bg style="background-image: url(bg.jpg); background-position:50% 100%"></u2-parallax-bg>
+    <h1>PARAX BG</h1>
+</div>
+
+
+<div style="max-width:800px; margin:4em auto; padding:2em; border:1px solid; box-shadow:0 0 10px" class=u2-parallax-bg-stage>
+    <u2-parallax-bg style="filter:blur(3px); color:rgba(200,100,0,0.1); font-weight:bold; font-size:110px; --parallax-bg-speed:.2">
+        <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center">HOW TO</div>
+    </u2-parallax-bg>
+    <u2-parallax-bg style="filter:blur(3px); color:rgba(0,0,0,0.05); font-weight:bold; font-size:140px; --parallax-bg-speed:.4">
+        <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center">HOW TO</div>
+    </u2-parallax-bg>
+
+    <h2>How to use</h2>
+    <p>
+        Include the script
+        and the stylesheet
+    </p>
+    <p>Add the attribute "parallax-bg" to the element that should be the background of its parent. It will be absolute positionized</p>
+    <pre>
+&lt;div class=u2-parallax-bg-stage&gt;
+    &lt;parallax-bg style="background-image:url(bg.jpg)"&gt;&lt;/u2-parallax-bg&gt;
+    other content
+&lt;/div&gt;
+    </pre>
+    <p>The stylesheet and the "parallax-bg-stage" attribute on the parent are optional but recommended</p>
+
+</div>
+
+
+<div class=u2-parallax-bg-stage>
+    <u2-parallax-bg style="background-image: url(bg.jpg); background-position:50% 100%"></u2-parallax-bg>
+    <h1>PARAX BG</h1>
+</div>
+<div class=u2-parallax-bg-stage>
+    <u2-parallax-bg style="background-image: url(bg.jpg); background-position:50% 100%"></u2-parallax-bg>
+    <h1>PARAX BG</h1>
+</div>
+<div class=u2-parallax-bg-stage>
+    <u2-parallax-bg style="background-image: url(bg.jpg); background-position:50% 100%"></u2-parallax-bg>
+    <h1>PARAX BG</h1>
+</div>
+<div class=u2-parallax-bg-stage>
+    <u2-parallax-bg style="background-image: url(bg.jpg); background-position:50% 100%"></u2-parallax-bg>
+    <h1>PARAX BG</h1>
+</div>
+<div class=u2-parallax-bg-stage>
+    <u2-parallax-bg style="background-image: url(bg.jpg); background-position:50% 100%"></u2-parallax-bg>
+    <h1>PARAX BG</h1>
+</div>
+<div class=u2-parallax-bg-stage>
+    <u2-parallax-bg style="background-image: url(bg.jpg); background-position:50% 100%"></u2-parallax-bg>
+    <h1>PARAX BG</h1>
+</div>
+<div class=u2-parallax-bg-stage>
+    <u2-parallax-bg style="background-image: url(bg.jpg); background-position:50% 100%"></u2-parallax-bg>
+    <h1>PARAX BG</h1>
+</div>
+<div class=u2-parallax-bg-stage>
+    <u2-parallax-bg style="background-image: url(bg.jpg); background-position:50% 100%"></u2-parallax-bg>
+    <h1>PARAX BG</h1>
+</div>
+<div class=u2-parallax-bg-stage>
+    <u2-parallax-bg style="background-image: url(bg.jpg); background-position:50% 100%"></u2-parallax-bg>
+    <h1>PARAX BG</h1>
+</div>

package/el/parallax-bg/tests/minimal.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+
+    <link href="../parallax-bg.css" rel=stylesheet>
+    <script src="../parallax-bg.js" type=module async></script>
+
+<body style="padding:1px">
+
+<section class="main" style="margin:80vh 0; height:30vh; background:var(--color)">
+    <div class=u2-parallax-bg-stage style="height:100%">
+        <u2-parallax-bg>
+            <img src="https://raw.githubusercontent.com/u2ui/u2/main/el/parallax-bg/tests/bg.jpg" alt="parallax-bg demo">
+        </u2-parallax-bg>
+    </div>
+</section>
+
+<style class="main">
+u2-parallax-bg {
+    --parallax-bg-speed:.7
+}
+u2-parallax-bg div {
+    display:grid;
+    place-items: center;
+}
+</style>

package/el/parallax-bg/tests/test.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <link rel=stylesheet href="../parallax-bg.css">
+    <script src="../parallax-bg.js" type=module async></script> <!---->
+    <style>
+        body, html {
+            margin:0;
+            font-family:arial;
+        }
+        h1 {
+            color:#fff;
+            margin:5em 0;
+            text-align:center;
+            font-size:calc(16px + 1.1vmax);
+        }
+        .u2-parallax-bg-stage {
+            flex:1 1 100px;
+            margin:110vh 0;
+            margin:50vh 0;
+            outline:10px solid black;
+        }
+        u2-parallax-bg {
+            xoverflow:visible;
+            background-image:url(bg.jpg);
+            background-position:50% 50%;
+            background-size:cover;
+            opacity:.9;
+        }
+    </style>
+</head>
+<body>
+
+<div style="display:flex; gap:3rem">
+    <div class=u2-parallax-bg-stage>
+        <u2-parallax-bg style="--parallax-bg-speed:3"></u2-parallax-bg>
+        <h1>speed 3 <br> faktor 2</h1>
+    </div>
+    <div class=u2-parallax-bg-stage>
+        <u2-parallax-bg style="--parallax-bg-speed:2"></u2-parallax-bg>
+        <h1>speed 2 <br> faktor 1 </h1>
+    </div>
+    <div class=u2-parallax-bg-stage>
+        <u2-parallax-bg style="--parallax-bg-speed:1"></u2-parallax-bg>
+        <h1>speed 1 <br> faktor 0</h1>
+    </div>
+    <div class=u2-parallax-bg-stage>
+        <u2-parallax-bg style="--parallax-bg-speed:.5"></u2-parallax-bg>
+        <h1>speed 0.5 <br> faktor -0.5</h1>
+    </div>
+    <div class=u2-parallax-bg-stage>
+        <u2-parallax-bg style="--parallax-bg-speed:0"></u2-parallax-bg>
+        <h1>speed 0 <br> faktor -1</h1>
+    </div>
+    <div class=u2-parallax-bg-stage>
+        <u2-parallax-bg style="--parallax-bg-speed:-.5"></u2-parallax-bg>
+        <h1>speed -0.5 <br> faktor -1.5</h1>
+    </div>
+    <div class=u2-parallax-bg-stage>
+        <u2-parallax-bg style="--parallax-bg-speed:-1"></u2-parallax-bg>
+        <h1>speed -1 <br> faktor -2</h1>
+    </div>
+</div>

package/el/parallax-bg/tests/visible.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <link rel=stylesheet href="../parallax-bg.css">
+    <script src="../parallax-bg.js" type=module async></script> <!---->
+    <style>
+        body, html {
+            margin:0;
+            font-family:arial;
+        }
+        h1 {
+            color:#fff;
+            margin:5em 0;
+            text-align:center;
+            font-size:calc(16px + 1.1vmax);
+        }
+        .u2-parallax-bg-stage {
+            flex:1 1 100px;
+            overflow:visible;
+            margin:110vh 0;
+            outline:10px solid black;
+        }
+        u2-parallax-bg {
+            background-image:url(bg.jpg);
+            background-position:50% 50%;
+            background-size:cover;
+            opacity:.9;
+            overflow:visible;
+        }
+        u2-parallax-bg > div {
+            padding:1rem;
+            background-color:#ff0a;
+        }
+    </style>
+</head>
+<body>
+<p>Only the yellow part can ever be reached</p>
+<div style="display:flex; gap:3rem; overflow:hidden; padding:30px; padding-bottom:100px">
+    <div class=u2-parallax-bg-stage style="margin:0 0 auto 0; height:300px">
+        <u2-parallax-bg style="--parallax-bg-speed:.5">
+            <div></div>
+        </u2-parallax-bg>
+        <h1> on top </h1>
+    </div>
+    <div class=u2-parallax-bg-stage style="margin:auto 0 0 0; height:300px">
+        <u2-parallax-bg style="--parallax-bg-speed:.5">
+            <div></div>
+        </u2-parallax-bg>
+        <h1> on bottom </h1>
+    </div>
+    <div class=u2-parallax-bg-stage style="margin:80vh 0">
+        <u2-parallax-bg style="--parallax-bg-speed:2">
+            <div></div>
+        </u2-parallax-bg>
+        <h1>speed 2 <br> faktor 1 </h1>
+    </div>
+    <div class=u2-parallax-bg-stage style="margin:60vh 0">
+        <u2-parallax-bg style="--parallax-bg-speed:1">
+            <div></div>
+        </u2-parallax-bg>
+        <h1>speed 1 <br> faktor 0</h1>
+    </div>
+    <div class=u2-parallax-bg-stage style="margin:60vh 0">
+        <u2-parallax-bg style="--parallax-bg-speed:.5">
+            <div></div>
+        </u2-parallax-bg>
+        <h1>speed 0.5 <br> faktor -0.5</h1>
+    </div>
+    <div class=u2-parallax-bg-stage>
+        <u2-parallax-bg style="--parallax-bg-speed:0">
+            <div></div>
+        </u2-parallax-bg>
+        <h1>speed 0 <br> faktor -1</h1>
+    </div>
+    <div class=u2-parallax-bg-stage style="margin:60vh 0">
+        <u2-parallax-bg style="--parallax-bg-speed:-1">
+            <div></div>
+        </u2-parallax-bg>
+        <h1>
+            speed -1 <br> faktor -2
+            <div style="color:red">not implemented for speed < 0</div>
+        </h1>
+    </div>
+<script>
+onclick=function (){
+   document.requestFullscreen()
+}
+</script>
+</div>

package/el/qrcode/README.md

@@ -0,0 +1,38 @@
+# <u2-qrcode> - element
+QR-Code element
+
+## Usage
+
+```html
+<u2-qrcode>Hello world</u2-qrcode>
+```
+
+```css
+u2-qrcode {
+    color:#555;
+    max-width:10rem;
+    margin:auto;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/qrcode/qrcode.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/qrcode/qrcode.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/qrcode/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/qrcode/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. ♥
+
+## Thanks
+
+https://github.com/nayuki/QR-Code-generator
+

package/el/qrcode/manifest.json

@@ -0,0 +1,43 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+      {
+        "kind": "javascript-module",
+        "path": "qrcode.js",
+        "declarations": [
+          {
+            "kind": "class",
+            "description": "A custom HTML element for displaying QR codes.",
+            "name": "u2Qrcode",
+            "members": [],
+            "events": [],
+            "attributes": [],
+            "cssProperties": [
+                {
+                    "name": "color",
+                    "syntax": "<color>",
+                    "description": "The color of the QR code."
+                }
+            ],
+            "superclass": {
+              "name": "HTMLElement"
+            },
+            "tagName": "u2-qrcode",
+            "customElement": true
+          }
+        ],
+        "exports": [
+          {
+            "kind": "custom-element-definition",
+            "name": "u2-qrcode",
+            "declaration": {
+              "name": "u2Qrcode",
+              "module": "qrcode.js"
+            }
+          }
+        ]
+      }
+    ]
+  }
+  

package/el/qrcode/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "u2-qrcode.el",
+  "version": "2.0.2",
+  "description": "qr-code element",
+  "main": "qrcode.js",
+  "author": "Tobias Buschor",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/u2ui/qrcode.el.git"
+  },
+  "keywords": [
+    "ui",
+  ],
+  "bugs": {
+    "url": "https://github.com/u2ui/qrcode.el/issues"
+  },
+  "homepage": "https://github.com/u2ui/qrcode.el#readme",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/el/qrcode/qrcode.css

@@ -0,0 +1,13 @@
+u2-qrcode {
+    color:var(--color-text, '#000');
+    display:flex;
+    flex-direction:column;
+    justify-content: center;
+    align-items: center;
+    aspect-ratio: 1;
+
+    /* should fit in viewport *
+    max-height: 90vh; or better? clamp(200px, 100%, 90vh) * /
+    max-width: 90vw;
+    /**/
+}

package/el/qrcode/qrcode.js

@@ -0,0 +1,46 @@
+
+customElements.define('u2-qrcode', class extends HTMLElement {
+
+    constructor() {
+        super();
+        let shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+        <style>
+        #container { display:contents; }
+        #container > * { display:block; }
+        svg { fill:currentColor; }
+        </style>
+        <div id=container></div>
+        `;
+    }
+
+    connectedCallback() {
+        this._redraw();
+    }
+
+    async _redraw() {
+        const container = this.shadowRoot.getElementById('container');
+        const text = this.textContent; // todo: trim() ? can it be harmful?
+        container.setAttribute('aria-label', 'QR-Code: '+text);
+        const {default:{QrCode}} = await import('https://cdn.jsdelivr.net/npm/nayuki-qr-code-generator@1.8.0/index.min.js');
+        const qr0 = QrCode.encodeText(text, QrCode.Ecc.MEDIUM);
+        container.innerHTML = toSvgString(qr0, 4);
+    }
+
+});
+
+function toSvgString(qr) {
+    const border = 0;
+    let parts = [];
+    for (let y = 0; y < qr.size; y++) {
+        for (let x = 0; x < qr.size; x++) {
+            if (qr.getModule(x, y))
+                parts.push(`M${x + border},${y + border}h1v1h-1z`);
+        }
+    }
+    return `
+    <svg viewBox="0 0 ${qr.size + border * 2} ${qr.size + border * 2}">
+        <path d="${parts.join(" ")}"/>
+    </svg>
+    `
+}

package/el/qrcode/tests/minimal.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <title>test</title>
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+    <link href="../qrcode.css" rel=stylesheet>
+    <script src="../qrcode.js" type=module async></script>
+
+<body>
+
+<section class="main">
+    <u2-qrcode>Hello world</u2-qrcode>
+</section>
+
+<style class="main">
+    u2-qrcode {
+        color:#555;
+        max-width:10rem;
+        margin:auto;
+    }
+</style>