u2ui 1.0.0 → 1.4.5

package/el/parallax-bg/manifest.json

@@ -0,0 +1,32 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "parallax-bg.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Scroll-driven parallax background layer with dynamic container sizing",
+            "name": "U2ParallaxBg",
+            "members": [],
+            "events": [],
+            "attributes": [],
+            "cssProperties": [{
+                "name": "--parallax-bg-speed",
+                "description": "Parallax speed factor (1 = normal scroll speed)",
+                "syntax": "<number>"
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-parallax-bg",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-parallax-bg",
+            "declaration": {
+                "name": "U2ParallaxBg",
+                "module": "parallax-bg.js"
+            }
+        }]
+    }]
+}

package/el/parallax-bg/parallax-bg.css

@@ -1,13 +1,13 @@
-.u2-parallax-bg-stage {
-    position:relative;
-    display: flow-root; /* prevent margin collapse on inner element */
-    z-index:0; /* needed? else the parallax-element will go behinde everithing with a stackingcontext? */
-}
-
-u2-parallax-bg {
-    position:absolute;
-    inset: -.4px; /* ugly strange 1px space see demo */
-    z-index:-1;
-    will-change:transform;
-    background-size:cover;
-}
+.u2-parallax-bg-stage {
+    position:relative;
+    display: flow-root; /* prevent margin collapse on inner element */
+    z-index:0; /* needed? else the parallax-element will go behinde everithing with a stackingcontext? */
+}
+
+u2-parallax-bg {
+    position:absolute;
+    inset: -.4px; /* ugly strange 1px space see demo */
+    z-index:-1;
+    will-change:transform;
+    background-size:cover;
+}

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

@@ -1,186 +1,197 @@
-// 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)
+// 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();
+    },
+    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();
+
+let ctrl, resizeObserver;
+function addListeners(){
+    ctrl = new AbortController();
+    const passive = {passive:true, signal:ctrl.signal};
+	addEventListener('DOMContentLoaded', paraxBg.layout, passive);
+	addEventListener('load', ()=>{
+        paraxBg.layout();
+        paraxBg.positionize();
+    },passive);
+	document.addEventListener('scroll', ()=>{
+        pageY = scrollY;
+        requestAnimationFrame(()=>paraxBg.positionize()) // better!
+    },passive);
+
+	addEventListener('wheel', ()=>{ // for firefox
+        pageY = scrollY;
+        requestAnimationFrame(()=>paraxBg.positionize())
+    },passive);
+
+	addEventListener('resize', ()=>{
+        setVPDimensions();
+        paraxBg.layout();
+        paraxBg.positionize();
+    },passive);
+
+    resizeObserver = new ResizeObserver(entries => {
+        setVPDimensions();
+        paraxBg.layout();
+        paraxBg.positionize();
+    })
+    resizeObserver.observe(document.body);
+}
+function removeListeners(){
+    ctrl.abort();
+    resizeObserver.disconnect();
+}
+
+
+export default class U2ParallaxBg 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() {
+        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);
+    }
+
+    positionizing = false; // todo: never set to true, so the guard below never holds
+    positionize(){
+        if (this.positionizing) return;
+        requestAnimationFrame(()=>{
+            this._positionize()
+            this.positionizing = false;
+        });
+    }
+    _positionize(){
+        this.mover.style.transform = 'translate3d(0, '+ this.offsetAtPageY(pageY) +'px, 0)';
+    }
+}
+
+customElements.define('u2-parallax-bg', U2ParallaxBg)

package/el/qrcode/README.md

@@ -8,24 +8,24 @@ QR-Code element
 ```
 
 ```css
-u2-qrcode {
-    color:#555;
-    max-width:10rem;
-    margin:auto;
+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>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/qrcode/qrcode.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/qrcode/qrcode.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)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/qrcode/tests/minimal.html)  
 
 ## About
 

package/el/qrcode/manifest.json

@@ -1,43 +1,32 @@
-{
-    "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"
-            }
-          }
-        ]
-      }
-    ]
-  }
-  
+{
+    "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

@@ -1,22 +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"
-  }
-}
+{
+  "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

@@ -1,13 +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;
-    /**/
-}
+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;
+    /**/
+}