u2ui 1.0.1 → 1.4.6

package/attr/intersect/intersect.js

@@ -1,99 +1,99 @@
-/* Copyright (c) 2016 Tobias Buschor https://goo.gl/gl0mbf | MIT License https://goo.gl/HgajeK */
-
-import {SelectorObserver} from '../../js/SelectorObserver/SelectorObserver.js'
-
-new SelectorObserver({
-    on: (el) => {
-        //const el = this.element;
-        const style = getComputedStyle(el);
-        const threshold = parseFloat(style.getPropertyValue('--u2-intersect-threshold').trim()) || 0;
-        const margin = style.getPropertyValue('--u2-intersect-margin') || '0px';
-
-        const thresholds = new Set([threshold, 0, 1, 0.5]);
-
-        el.u2IntersectionObserver = new IntersectionObserver(entries=>{
-            let attrValue = '';
-            const entry = entries[0];
-            let ratio = entry.intersectionRatio;
-            let onTarget = false;
-            if (entry.isIntersecting) {
-                for (const val of thresholds) {
-                    if (ratio >= val) attrValue += ' '+val;
-                }
-                if (ratio >= threshold) onTarget = true;
-            }
-
-
-            if (entry.boundingClientRect.top + entry.boundingClientRect.height / 2 < innerHeight / 2) {
-                attrValue += ' above';
-            }
-
-            attrValue = attrValue.trim();
-            el.setAttribute('u2-intersect', attrValue);
-            el.classList[onTarget?'add':'remove']('u2-intersected');
-
-            const event = new CustomEvent('u2-intersect.'+(onTarget?'enter':'leave'), {bubbles:true} );
-            el.dispatchEvent(event);
-        }, {
-            //root: document.scrollingElement,
-            rootMargin: margin,
-            threshold: thresholds,
-        });
-        el.u2IntersectionObserver.observe(el);
-
-    },
-    off: (el) => {
-        if (el.u2IntersectionObserver) el.u2IntersectionObserver.unobserve(el);
-    }
-}).observe('[u2-intersect]');
-
-/*
-old code:
-import 'https://cdn.jsdelivr.net/npm/wicked-elements@3.1.2/min.js';
-wickedElements.define(
-    '[u2-intersect]', {
-        init() {},
-        connected() {
-            const el = this.element;
-            const style = getComputedStyle(el);
-            const threshold = parseFloat(style.getPropertyValue('--u2-intersect-threshold').trim()) || 0;
-            const margin = style.getPropertyValue('--u2-intersect-margin') || '0px';
-
-            const thresholds = new Set([threshold, 0, 1, 0.5]);
-
-            this.u2IntersectionObserver = new IntersectionObserver(entries=>{
-                let attrValue = '';
-                const entry = entries[0];
-                let ratio = entry.intersectionRatio;
-                let onTarget = false;
-                if (entry.isIntersecting) {
-                    for (const val of thresholds) {
-                        if (ratio >= val) attrValue += ' '+val;
-                    }
-                    if (ratio >= threshold) onTarget = true;
-                }
-
-
-                if (entry.boundingClientRect.top + entry.boundingClientRect.height / 2 < innerHeight / 2) {
-                    attrValue += ' above';
-                }
-
-                attrValue = attrValue.trim();
-				el.setAttribute('u2-intersect', attrValue);
-                el.classList[onTarget?'add':'remove']('u2-intersected');
-
-                //var event = new CustomEvent('u2-intersected-'+(onTarget?'in':'out'), /*{bubbles:true}* / );
-                //el.dispatchEvent(event);
-			}, {
-				//root: document.scrollingElement,
-				rootMargin: margin,
-				threshold: thresholds,
-			});
-            this.u2IntersectionObserver.observe(el);
-        },
-        disconnected() {
-            this.u2IntersectionObserver.unobserve(el);
-        },
-    }
-);
+/* Copyright (c) 2016 Tobias Buschor https://goo.gl/gl0mbf | MIT License https://goo.gl/HgajeK */
+
+import {SelectorObserver} from '../../js/SelectorObserver/SelectorObserver.js'
+
+new SelectorObserver({
+    on: (el) => {
+        //const el = this.element;
+        const style = getComputedStyle(el);
+        const threshold = parseFloat(style.getPropertyValue('--u2-intersect-threshold').trim()) || 0;
+        const margin = style.getPropertyValue('--u2-intersect-margin') || '0px';
+
+        const thresholds = new Set([threshold, 0, 1, 0.5]);
+
+        el.u2IntersectionObserver = new IntersectionObserver(entries=>{
+            let attrValue = '';
+            const entry = entries[0];
+            let ratio = entry.intersectionRatio;
+            let onTarget = false;
+            if (entry.isIntersecting) {
+                for (const val of thresholds) {
+                    if (ratio >= val) attrValue += ' '+val;
+                }
+                if (ratio >= threshold) onTarget = true;
+            }
+
+
+            if (entry.boundingClientRect.top + entry.boundingClientRect.height / 2 < innerHeight / 2) {
+                attrValue += ' above';
+            }
+
+            attrValue = attrValue.trim();
+            el.setAttribute('u2-intersect', attrValue);
+            el.classList[onTarget?'add':'remove']('u2-intersected');
+
+            const event = new CustomEvent('u2-intersect.'+(onTarget?'enter':'leave'), {bubbles:true} );
+            el.dispatchEvent(event);
+        }, {
+            //root: document.scrollingElement,
+            rootMargin: margin,
+            threshold: thresholds,
+        });
+        el.u2IntersectionObserver.observe(el);
+
+    },
+    off: (el) => {
+        if (el.u2IntersectionObserver) el.u2IntersectionObserver.unobserve(el);
+    }
+}).observe('[u2-intersect]');
+
+/*
+old code:
+import 'https://cdn.jsdelivr.net/npm/wicked-elements@3.1.2/min.js';
+wickedElements.define(
+    '[u2-intersect]', {
+        init() {},
+        connected() {
+            const el = this.element;
+            const style = getComputedStyle(el);
+            const threshold = parseFloat(style.getPropertyValue('--u2-intersect-threshold').trim()) || 0;
+            const margin = style.getPropertyValue('--u2-intersect-margin') || '0px';
+
+            const thresholds = new Set([threshold, 0, 1, 0.5]);
+
+            this.u2IntersectionObserver = new IntersectionObserver(entries=>{
+                let attrValue = '';
+                const entry = entries[0];
+                let ratio = entry.intersectionRatio;
+                let onTarget = false;
+                if (entry.isIntersecting) {
+                    for (const val of thresholds) {
+                        if (ratio >= val) attrValue += ' '+val;
+                    }
+                    if (ratio >= threshold) onTarget = true;
+                }
+
+
+                if (entry.boundingClientRect.top + entry.boundingClientRect.height / 2 < innerHeight / 2) {
+                    attrValue += ' above';
+                }
+
+                attrValue = attrValue.trim();
+				el.setAttribute('u2-intersect', attrValue);
+                el.classList[onTarget?'add':'remove']('u2-intersected');
+
+                //var event = new CustomEvent('u2-intersected-'+(onTarget?'in':'out'), /*{bubbles:true}* / );
+                //el.dispatchEvent(event);
+			}, {
+				//root: document.scrollingElement,
+				rootMargin: margin,
+				threshold: thresholds,
+			});
+            this.u2IntersectionObserver.observe(el);
+        },
+        disconnected() {
+            this.u2IntersectionObserver.unobserve(el);
+        },
+    }
+);
 */

package/attr/intersect/manifest.json

@@ -1,57 +1,44 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-    {
-        "kind": "javascript-module",
-        "path": "intersect.js",
-        "declarations": [
-          {
-            "summary": "Declarativ intersection-observer",
-            "description": "This attribute allows you to turn any element into a link by simply adding the `u2-intersect` attribute to it.\n`Ctrl + click` will open the link in a new tab.\nClicks on interactive elements inside the pseudo-link element prevent the link from being opened.\nXSS attacks are prevented by disallowing the `javascript:` protocol.",
-            "name": "u2-intersect",
-            "members": [],
-            "events": [
-                {
-                    "name": "u2-intersect.enter",
-                    "description": "Fired when the element intersects with the viewport."
-                },{
-                    "name": "u2-intersect.leave",
-                    "description": "Fired when the element leaves the viewport."
-                }
-            ],
-            "attributes": [
-                {
-                    "name": "u2-intersect",
-                    "description": "Enables the intersection observer on the element.",
-                    "u2Examples": ["", "https://www.google.com", "./test.html", "#section1"]
-                }
-            ],
-            "cssProperties": [
-                {
-                    "name": "--u2-intersect-margin",
-                    "description": "The margin around the element that will trigger the intersection observer.",
-                    "syntax": "<length>"
-                },{
-                    "name": "--u2-intersect-threshold",
-                    "description": "The threshold at which the intersection observer will trigger.",
-                    "syntax": "<number>"
-                }
-            ],
-            "attributeName": "u2-intersect"
-          }
-        ],
-        "exports": [
-          {
-            "kind": "custom-attribute-definition",
-            "name": "u2-intersect",
-            "declaration": {
-              "name": "u2-intersect",
-              "module": "intersect.js"
-            }
-          }
-        ]
-      }
-    ]
-  }
-  
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "intersect.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Declarative intersection observer",
+            "name": "u2-intersect",
+            "members": [],
+            "events": [{
+                "name": "u2-intersect.enter",
+                "description": "Fired when the element intersects with the viewport."
+            },{
+                "name": "u2-intersect.leave",
+                "description": "Fired when the element leaves the viewport."
+            }],
+            "attributes": [{
+                "name": "u2-intersect",
+                "description": "Enables the intersection observer on the element.",
+                "u2Examples": ["", "https://www.google.com", "./test.html", "#section1"]
+            }],
+            "cssProperties": [{
+                "name": "--u2-intersect-margin",
+                "description": "The margin around the element that will trigger the intersection observer.",
+                "syntax": "<length>"
+            },{
+                "name": "--u2-intersect-threshold",
+                "description": "The threshold at which the intersection observer will trigger.",
+                "syntax": "<number>"
+            }],
+            "attributeName": "u2-intersect"
+        }],
+        "exports": [{
+            "kind": "custom-attribute-definition",
+            "name": "u2-intersect",
+            "declaration": {
+                "name": "u2-intersect",
+                "module": "intersect.js"
+            }
+        }]
+    }]
+}

package/attr/lightbox/README.md

@@ -0,0 +1,27 @@
+# [u2-lightbox] - attribute
+Link an image to a lightbox. `<a u2-lightbox=group1 src="image.jpg">`
+
+## Usage
+
+```html
+<a u2-lightbox=group1 href="https://picsum.photos/seed/10/1000/800">
+    <img src="https://picsum.photos/seed/10/100/100" alt="Alt Text" width="100" height="100">
+</a>
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/lightbox/lightbox.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/attr/lightbox/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/lightbox/tests/minimal.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/lightbox/lightbox.js

@@ -0,0 +1,120 @@
+// lightbox.js
+import "../../u2/u2.js";
+
+const overlay = document.createElement('div');
+overlay.popover = 'auto'; // Close on ESC
+overlay.classList.add('u2LightboxContainer');
+
+overlay.innerHTML = `
+    <style>
+        .u2LightboxContainer {
+            margin: 0;
+            padding: 0;
+            border: none;
+            inset: 0;
+            width: 100vw;
+            height: 100vh;
+            align-items: center;
+            justify-content: center;
+            color: var(--color-lightest, #fff);
+            background: color-mix(in srgb, var(--color-darkest, #000), transparent 10%);
+            transition-duration: .4s;
+            --u2-ico-dir: var(--u2-ico-dir-material);
+
+            &:popover-open { display: flex; }
+            & u2-carousel {
+                width:100%;
+                height:93%;
+            }
+            & u2-carousel > img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
+            & .-toolbar {
+                position: absolute;
+                inset: var(--gap, 1rem);
+                bottom: auto;
+                display: flex;
+                gap: var(--gap, 1rem);
+                justify-content: end;
+                z-index: 1;
+                & button {
+                    background: #0000;
+                    border: none;
+                    padding:0;
+                    margin:0;
+                    color: inherit;
+                }
+            }
+        }
+    </style>
+    <div class=-toolbar>
+        <button class=-close aria-label="Close">
+            <u2-ico icon=close>×</u2-ico>
+        </button>
+    </div>
+    <u2-carousel mode=fade></u2-carousel>
+`;
+
+document.body.append(overlay);
+
+
+const carousel = overlay.querySelector('u2-carousel');
+
+overlay.addEventListener('click', e => e.target === overlay && overlay.hidePopover() );
+overlay.querySelector('.-close').addEventListener('click', ()=>overlay.hidePopover());
+
+document.addEventListener('click', e => {
+    const el = e.target.closest('a[u2-lightbox]');
+    if (!el) return;
+    
+    const groupName = el.getAttribute('u2-lightbox');
+    const src = el.href;
+    const group = groupName 
+        ? [...document.querySelectorAll(`a[u2-lightbox="${groupName}"]`)].map(a => a.href)
+        : [src];
+    
+    carousel.innerHTML = `
+        <svg slot=prev fill="currentColor" viewBox="0 0 48 48" width=40 style="transform:rotate(180deg)">
+            <path d="M4 24c0-.69.56-1.25 1.25-1.25H37.7l-12.83-12.6a1.25 1.25 0 1 1 1.76-1.8L41.6 23.1l.03.02a1.25 1.25 0 0 1-.04 1.8L26.63 39.64a1.25 1.25 0 1 1-1.76-1.78L37.7 25.25H5.25C4.56 25.25 4 24.69 4 24z"></path>
+        </svg>
+        <svg slot=next fill="currentColor" viewBox="0 0 48 48" width=40>
+            <path d="M4 24c0-.69.56-1.25 1.25-1.25H37.7l-12.83-12.6a1.25 1.25 0 1 1 1.76-1.8L41.6 23.1l.03.02a1.25 1.25 0 0 1-.04 1.8L26.63 39.64a1.25 1.25 0 1 1-1.76-1.78L37.7 25.25H5.25C4.56 25.25 4 24.69 4 24z"></path>
+        </svg>`;
+
+    group.forEach(imgSrc => {
+        const img = document.createElement('img');
+        img.dataset.src = imgSrc;
+        img.alt = '';
+        carousel.append(img);
+    });
+  
+    overlay.showPopover();
+
+    Promise.all([
+        u2.js('loading'),
+        u2.el('carousel')
+    ]).then(([loading])=>{ 
+
+        const load = (el)=>{
+            if (!el || el.slot || el.src) return;
+            loading.mark(el);
+            el.src = el.dataset.src;
+        }
+
+        carousel.addEventListener('u2-carousel.slide', ({detail})=>{
+            load(detail.slide);
+            setTimeout(()=>{ // requestIdleCallback??
+                load(detail.slide.nextElementSibling);
+                load(detail.slide.previousElementSibling);
+            },200)
+        });
+        carousel.slideTo(group.indexOf(src));
+        carousel.tabIndex = -1;
+        carousel.focus();
+        u2.el('ico');
+    });
+  
+  e.preventDefault();
+});

package/attr/lightbox/manifest.json

@@ -0,0 +1,29 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "lightbox.js",
+        "declarations": [{
+            "description": "Link an image to a lightbox",
+            "name": "u2-lightbox",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "u2-lightbox",
+                "description": "Group name; links sharing a group form one gallery",
+                "u2Examples": ["", "group1"]
+            }],
+            "cssProperties": [],
+            "attributeName": "u2-lightbox"
+        }],
+        "exports": [{
+            "kind": "custom-attribute-definition",
+            "name": "u2-lightbox",
+            "declaration": {
+                "name": "u2-lightbox",
+                "module": "lightbox.js"
+            }
+        }]
+    }]
+}

package/attr/movable/README.md

@@ -0,0 +1,27 @@
+# [u2-movable] - attribute
+Make an element movable. Optionally define a [u2-movable-handler] element.
+
+## Usage
+
+```html
+<div u2-movable>
+    <div u2-movable-handler>movable handle</div>
+</div>
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/movable/movable.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/attr/movable/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/movable/tests/minimal.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/movable/manifest.json

@@ -0,0 +1,47 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "movable.js",
+        "declarations": [{
+            "description": "Make an element movable, optionally via a [u2-movable-handler] child",
+            "name": "u2-movable",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "u2-movable",
+                "description": "Makes the element movable"
+            },{
+                "name": "u2-movable-handler",
+                "description": "Marks a child element as the drag handle"
+            }],
+            "cssProperties": [{
+                "name": "--u2-movable-method",
+                "description": "How the movement is applied",
+                "syntax": "*"
+            },{
+                "name": "--u2-movable-threshold",
+                "description": "Drag threshold in px (default 10)",
+                "syntax": "<number>"
+            },{
+                "name": "--u2-movable-x",
+                "description": "Set to false to disable horizontal movement",
+                "syntax": "*"
+            },{
+                "name": "--u2-movable-y",
+                "description": "Set to false to disable vertical movement",
+                "syntax": "*"
+            }],
+            "attributeName": "u2-movable"
+        }],
+        "exports": [{
+            "kind": "custom-attribute-definition",
+            "name": "u2-movable",
+            "declaration": {
+                "name": "u2-movable",
+                "module": "movable.js"
+            }
+        }]
+    }]
+}

package/attr/movable/movable.js

@@ -0,0 +1,111 @@
+import { PointerObserver } from '../../js/PointerObserver/PointerObserver.js';
+
+
+function getInitialState(element, method) {
+    if (method === 'transform') {
+        const transform = getComputedStyle(element).transform;
+        if (transform && transform !== 'none') {
+            const matrix = new DOMMatrix(transform);
+            return { x: matrix.m41, y: matrix.m42 };
+        }
+        return { x: 0, y: 0 };
+    }
+    return {
+        x: parseFloat(element.style.left) || 0,
+        y: parseFloat(element.style.top) || 0
+    };
+}
+
+function applyPosition(element, method, initialState, deltaX, deltaY) {
+    const newX = initialState.x + deltaX;
+    const newY = initialState.y + deltaY;
+
+    if (method === 'transform') {
+        element.style.transform = `translate(${newX}px, ${newY}px)`;
+    } else {
+        if (!element.style.position || element.style.position === 'static') {
+            element.style.position = 'relative';
+        }
+        element.style.left = `${newX}px`;
+        element.style.top = `${newY}px`;
+    }
+}
+
+function handleStart(e) {
+    const path = e.composedPath();
+    const target = path.find(el => el.hasAttribute?.('u2-movable'));
+    if (!target) return;
+
+    let handler = path.find(el => el.hasAttribute?.('u2-movable-handler'));
+
+    if (handler) {
+        //if (handler.closest('[u2-movable]') !== target) return;
+        const handlerIndex = path.indexOf(handler);
+        const targetIndex = path.indexOf(target);
+        if (handlerIndex > targetIndex) return;
+    } else {
+        //if (target.querySelector('[u2-movable-handler]')) return;
+        if (findOwnHandler(target)) return;
+        handler = target;
+    }
+
+    const styles = getComputedStyle(target);
+    const threshold = parseFloat(styles.getPropertyValue('--u2-movable-threshold').trim()) || 10;
+    const method = styles.getPropertyValue('--u2-movable-method').trim() || 'transform';
+    const xEnabled = styles.getPropertyValue('--u2-movable-x').trim() !== 'false';
+    const yEnabled = styles.getPropertyValue('--u2-movable-y').trim() !== 'false';
+
+    const initialState = getInitialState(target, method);
+
+    // todo: jedesmal wird ein neuer observer erstellt der mouse und touch beobachtet.
+    // das ist überhaupt nicht gut, PointerObserver sollte eventuell kein element erhalten
+    const observer = new PointerObserver(handler, {
+        mouse: true,
+        touch: true,
+        passive: false
+    });
+    // hack:
+    handler.removeEventListener('mousedown', observer.start);
+    handler.removeEventListener('touchstart', observer.start, { passive: true });
+
+    observer.onstart = (e) => e.preventDefault();
+
+    observer.onmove = (e) => {
+        const diff = observer.startDiff;
+        const distance = Math.sqrt(diff.x * diff.x + diff.y * diff.y);
+        if (distance < threshold) return;
+
+        const deltaX = xEnabled ? diff.x : 0;
+        const deltaY = yEnabled ? diff.y : 0;
+
+        applyPosition(target, method, initialState, deltaX, deltaY);
+    };
+
+    observer.onstop = () => {
+        console.log('stop');
+    };
+
+    observer.start(e);
+}
+
+document.addEventListener('mousedown', handleStart);
+document.addEventListener('touchstart', handleStart, { passive: true });
+
+
+
+
+function findOwnHandler(root) {
+    let found = null;
+    function walk(node) {
+        if (found) return;
+        if (node !== root && node.hasAttribute?.('u2-movable')) return;
+        if (node.hasAttribute?.('u2-movable-handler')) found = node;
+        for (const child of node.children) {
+            walk(child);
+            if (found) return;
+        }
+        if (node.shadowRoot) walk(node.shadowRoot);
+    }
+    walk(root);
+    return found;
+}