u2ui 1.0.0

package/attr/href/href.js

@@ -0,0 +1,42 @@
+/* Copyright (c) 2016 Tobias Buschor https://goo.gl/gl0mbf | MIT License https://goo.gl/HgajeK */
+
+document.addEventListener('click', e => {
+	if (e.button !== 0) return; // only left-click
+	if (e.defaultPrevented) return; // not if prevented
+	const sel = getSelection();
+	if (!sel.isCollapsed) { // only if the selection is collapsed.
+		const textSelected = sel.anchorNode.nodeType === 3 || sel.focusNode.nodeType === 3;
+		const shadowElSelected = sel.focusNode.nodeType === 11; // svg-use-element, firefox
+		if (textSelected && !shadowElSelected) return;
+	}
+	if (!e.target.closest) return; // some targets have no closest method?
+	const A = e.target.closest('[u2-href]');
+	if (!A) return;
+	if (e.target.closest('a,input,textarea,select,button,label')) return;
+	//if (e.target.closest('[onclick]')) return; //
+	//if (e.target.closest(c1.href.ignoreSelector)) return;
+	if (e.target.isContentEditable) return; // not if contenteditable
+	const href = A.getAttribute('u2-href'); // get the url
+	if (!href) return;
+
+	const url = new URL(href, location.href); // security check, as its not a standard attribute, puryfiers will probably not remove it
+	if (url.protocol === 'javascript:') return;
+
+	let target = A.getAttribute('u2-href-target'); // get the target
+	if (e.ctrlKey) target = '_blank'; // better random-string?
+	// var event = new CustomEvent('u2-href-navigate', { // trigger custom event with the ability to prevent Navigation
+	// 	cancelable: true,
+	// 	detail: {
+	// 		url: href,
+	// 		target: target,
+	// 	}
+	// });
+	// window.dispatchEvent(event);
+	// if (event.defaultPrevented) return;
+	if (target) {
+		window.open(href, target, 'noopener'); //!e.ctrlKey && win.focus(); // not needed in chrome, not working in ff
+	} else {
+		location.href = href;
+	}
+});
+document.head.insertAdjacentHTML('afterbegin', '<style>:where([u2-href]){cursor:pointer}</style>');

package/attr/href/manifest.json

@@ -0,0 +1,43 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+    {
+        "kind": "javascript-module",
+        "path": "href.js",
+        "declarations": [
+          {
+            "summary": "Turn every element in a link",
+            "description": "This attribute allows you to turn any element into a link by simply adding the `u2-href` 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-href",
+            "members": [],
+            "events": [],
+            "attributes": [
+                {
+                    "name": "u2-href",
+                    "description": "The URL that the hyperlink points to.",
+                    "u2Examples": ["", "https://www.google.com", "./test.html", "#section1"]
+                },{
+                    "name": "u2-href-target",
+                    "description": "The target attribute specifies where to open the linked document.",
+                    "u2Examples": ["_blank", "myFrame"]
+                }
+            ],
+            "cssProperties": [],
+            "attributeName": "u2-href"
+          }
+        ],
+        "exports": [
+          {
+            "kind": "custom-attribute-definition",
+            "name": "u2-href",
+            "declaration": {
+              "name": "u2-href",
+              "module": "href.js"
+            }
+          }
+        ]
+      }
+    ]
+  }
+  

package/attr/href/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="../../../u2/tests/test-init.js" type=module async></script>
+
+    <script src="../href.js" type=module async></script>
+
+<body>
+
+    <section class=main>
+        <div u2-href="http://schwups.ch" u2-href-target=_blank>
+            Pseudo link
+        </div>
+    </section>
+

package/attr/href/tests/test.html

@@ -0,0 +1,70 @@
+<!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>
+        <title>Attribute u2-href tests</title>
+
+        <link rel=stylesheet href="../../../css/classless/full.css">
+        <link rel=stylesheet href="../../../css/classless/simple.css">
+    
+        <script src="../href.js"></script>
+
+    <body>
+
+<div u2-href="https://github.com/u2ui" class=pseudoLink>
+    <h1>I am a DIV and i act like a link</h1>
+    <ul>
+        <li>Elements using the u2-href-attribute have a cursor:pointer</li>
+        <li>Try <mark>ctrl-click</mark>, the link shoul open in a new tab</li>
+        <li>Try <mark>right or middle mouse button</mark> the link does not work</li>
+        <li>If you <mark>Select some text</mark> the link does not work</li>
+        <li>
+            <button> if you click the button, the u2-href does not work</button>
+        </li>
+        <li>
+            <label>
+                Label
+                <input value="and inputs also prevents navigation" style="width:200px">
+            </label>
+        </li>
+        <li contenteditable>
+            I am contenteditable, h1-href does not navigate
+        </li>
+        <li onclick="event.preventDefault()">I am a li that prevents the click-default, it also prevents c1-href from navigate (<code>onclick="event.preventDefault()"</code>)</li>
+    </ul>
+</div>
+
+<div u2-href="https://github.com/u2ui" u2-href-target=_blank class=pseudoLink>
+    A u2-href link with the attribute <code>u2-href-target="_blank"</code><br>
+    Opens in a new window
+</div>
+
+
+<div u2-href="https://github.com/u2ui" class=pseudoLink tabindex="0">
+    This u2-href link is keyboard-accessible through it has "tabindex"-attribute<br>
+    It will not trigger navigation if it is focused and you press enter, should it?<br>
+    If you have usecase, please let me know.
+</div>
+
+
+<div u2-href="./" class=pseudoLink>
+    relative links "./"
+</div>
+
+<div u2-href=" &#14; jAvascript:alert('xss')" class=pseudoLink>
+    security, should not execute u2-href=" &amp;#14; jAvascript:alert('xss')"
+</div>
+
+<style>
+li {
+    padding:1rem;
+}
+.pseudoLink {
+    margin:1rem;
+    border:1px solid red;
+    background:#ffe;
+    padding:1rem;
+}
+</style>

package/attr/intersect/README.md

@@ -0,0 +1,42 @@
+# [u2-intersect] - attribute
+declarativ intersection-observer
+
+## Usage
+
+```html
+<div u2-intersect>intersect</div>
+<div u2-intersect>item 2</div>
+<div u2-intersect>item 3</div>
+```
+
+```css
+[u2-intersect] {
+    --u2-intersect-margin:-10%;
+    --u2-intersect-threshold:1;
+    background:#fbb;
+}
+[u2-intersect].u2-intersected { background:#bfb; }
+[u2-intersect]::after {
+    display:block;
+    content:'below';
+}
+[u2-intersect].u2-intersected::after { content:'intersected'; }
+[u2-intersect~="above"]::after { content:'above' }
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/intersect/intersect.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/intersect/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/attr/intersect/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/intersect/intersect.js

@@ -0,0 +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);
+        },
+    }
+);
+*/

package/attr/intersect/manifest.json

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

package/attr/intersect/tests/minimal.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+
+    <script src="../intersect.js" type=module async></script>
+
+<body>
+
+    <section class="main">
+        <div u2-intersect>intersect</div>
+        <div u2-intersect>item 2</div>
+        <div u2-intersect>item 3</div>
+    </section>
+
+    <style class="main">
+    [u2-intersect] {
+        --u2-intersect-margin:-10%;
+        --u2-intersect-threshold:1;
+        background:#fbb;
+    }
+    [u2-intersect].u2-intersected { background:#bfb; }
+    [u2-intersect]::after {
+        display:block;
+        content:'below';
+    }
+    [u2-intersect].u2-intersected::after { content:'intersected'; }
+    [u2-intersect~="above"]::after { content:'above' }
+    </style>

package/attr/intersect/tests/test.html

@@ -0,0 +1,64 @@
+<!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 src="../intersect.js" type=module async></script>
+
+    <body>
+
+<style>
+[u2-intersect] {
+    border:2px solid;
+    padding:2rem;
+    margin:5rem auto;
+    background:red;
+    width:50%;
+}
+[u2-intersect].u2-intersected {
+    background:green;
+}
+[u2-intersect~="above"] {
+    background:orange;
+}
+
+</style>
+
+
+<div style="position:fixed; top:0; left:0; right:0; bottom:0; opacity:0.2; z-index:-1; border:20vh solid #A49CE1; border-width:20vh 20vw"></div>
+
+<div>
+    <div u2-intersect style="height:20vh; --u2-intersect-margin:0%;  --u2-intersect-threshold:0;" >
+        --u2-intersect-margin:0;<br>
+        --u2-intersect-threshold:0;
+    </div>
+    <div u2-intersect style="height:20vh; --u2-intersect-margin:-20%;  --u2-intersect-threshold:0;" >
+        --u2-intersect-margin:-20%;<br>
+        --u2-intersect-threshold:0;
+    </div>
+    <div u2-intersect style="height:20vh; --u2-intersect-margin:-20%;  --u2-intersect-threshold:1;" >
+        --u2-intersect-margin:-20%;<br>
+        --u2-intersect-threshold:1;
+    </div>
+    <div u2-intersect style="height:20vh; --u2-intersect-margin:-20%;  --u2-intersect-threshold:0.25;" >
+        --u2-intersect-margin:-20%;<br>
+        --u2-intersect-threshold:0.25;
+    </div>
+    <div u2-intersect style="height:20vh;" class=selector1>
+<style style="display:block; font-size:.9rem">
+.selector1:not([u2-intersect~="0.5"]) {
+    background:red;
+}
+.selector1:not([u2-intersect~="0.5"])[u2-intersect~="above"] {
+    background:orange;
+}
+</style>
+    </div>
+
+    <div style="height:100vh"></div>
+</div>

package/attr/navigable/README.md

@@ -0,0 +1,31 @@
+# [u2-navigable] - attribute
+Make elements navigatable
+
+## Usage
+
+```html
+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>
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/navigable/navigable.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/navigable/tests/minimal.html)  
+[targetObserver.html](http://gcdn.li/u2ui/u2@main/attr/navigable/tests/targetObserver.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/attr/navigable/tests/test.html)  
+[U1TargetObserver.html](http://gcdn.li/u2ui/u2@main/attr/navigable/tests/U1TargetObserver.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/navigable/TargetObserver.js

@@ -0,0 +1,91 @@
+// checks for hashchange and element matches
+
+const observers = new Set();
+
+export class TargetObserver {
+
+    /**
+     * @param {Object} opts
+     * @param {Function} opts.on - called when a element is the target
+     * @param {Function} opts.off - called when a element lost the target
+     * @param {Function} opts.in - called when a element or a descendant is the target
+     * @param {Function} opts.out - called when a element lost the target including descendants
+     * @param {String} opts.matches - CSS selector for elements we listen to
+     */
+    constructor(opts) {
+        this.opts = opts;
+        observers.add(this);
+        this.parentTargets = new Set();
+        this._testOn(active);
+    }
+
+    /**
+     * @description stops listening
+     */
+    disconnect() {
+        observers.delete(this);
+    }
+
+    /**
+     * @param {Element} el
+     * @private
+     */
+    _matches(el){
+        if (!el) return false;
+        return this.opts.matches==null || el.matches(this.opts.matches);
+    }
+
+    /**
+     * @param {Element} el
+     * @private
+     */
+    _testOn(el){
+        this.opts.on && this._matches(el) && this.opts.on(el);
+        if (this.opts.in && el) { // todo: && this.opts.matches ??
+            let closest = el.closest(this.opts.matches);
+            while (closest) {
+                this.opts.in(closest);
+                this.parentTargets.add(closest);
+                closest = closest.parentNode.closest(this.opts.matches);
+            }
+        }
+        for (const pTarget of this.parentTargets) {
+            if (el && pTarget.contains(el)) continue;
+            this.opts?.out(pTarget);
+            this.parentTargets.delete(pTarget);
+        }
+    }
+
+    /**
+     * @param {Element} el
+     * @private
+     */
+    _testOff(el){
+        this.opts.off && this._matches(el) && this.opts.off(el);
+        this.opts.out && this._matches(el) && this.opts.out(el);
+    }
+}
+
+let active = null;
+
+function checkTarget(e) {
+    const target = location.hash ? document.getElementById(location.hash.substring(1)) : false;
+    const changed = e ? e.oldURL !== e.newURL : target !== active; // test url vs old-url because it can have lost a trigger when changed using replaceState
+    if (!changed) return;
+    for (const observer of observers) {
+        observer._testOff(active);
+        observer._testOn(target);
+    }
+    active = target;
+}
+checkTarget();
+addEventListener('hashchange', checkTarget);
+
+
+// Usage:
+// const observer = new TargetObserver({
+//     in: (target) => console.log(target),
+//     out: (target) => console.log(target),
+//     matches: '.element', // optional
+// })
+// observer.disconnect();

package/attr/navigable/U2TargetObserver.js

@@ -0,0 +1,75 @@
+// checks for the "u2-target" query parameter and calls the on/off functions
+// e.g. ?u2-target=details1+checkbox3+dialog1
+
+const observers = new Set();
+
+export class U2TargetObserver {
+	constructor(opts) {
+		this.opts = opts;
+		observers.add(this);
+
+        this._testOns(actives);
+	}
+	disconnect() {
+		observers.delete(this);
+	}
+    _matches(el){
+        if (!el) return false;
+        return el!==false && this.opts.matches==null || el.matches(this.opts.matches);
+    }
+    _testOn(el){
+        this.opts.on && this._matches(el) && this.opts.on(el);
+    }
+    _testOff(el){
+        this.opts.off && this._matches(el) && this.opts.off(el);
+    }
+    _testOns(els){
+        for (const el of els) this._testOn(el);
+    }
+    _testOffs(els){
+        for (const el of els) this._testOff(el);
+    }
+}
+
+let actives = new Set();
+
+function checkTargets(){
+	const newest = new Set();
+	const param = new URL(location).searchParams.get('u2-target');
+	if (param) {
+        for (const item of param.split(' ')) {
+            const el = item && document.getElementById(item);
+            el && newest.add(el);
+        }
+    }
+
+	const added = new Set();
+	const removed = new Set();
+	for (let item of actives) if (!newest.has(item)) removed.add(item);
+	for (let item of newest)  if (!actives.has(item)) added.add(item);
+    for (const obs of observers) {
+        obs._testOffs(removed);
+        obs._testOns(added);
+    }
+	actives = newest;
+}
+addEventListener('popstate', checkTargets);
+checkTargets();
+
+
+// Possible improvement:
+// Initial TargetObserver tiggers if in url, then toggle-event triggers, resulting in toggleParam without a need.
+// Can we solve this?
+
+// togglelParam
+export function toggleParam(id, force, replace){
+	const url = new URL(location);
+	const targets = new Set((url.searchParams.get('u2-target')||'').split(' '));
+    const isPresent = targets.has(id);
+    const shouldAdd = force ?? !isPresent;
+    if (shouldAdd === isPresent) return;
+    shouldAdd ? targets.add(id) : targets.delete(id);
+    url.searchParams.set('u2-target', [...targets].join(' '));
+    history[replace?'replaceState':'pushState'](null, '', url.href);
+    checkTargets();
+}