u2ui 1.0.1 → 1.4.6

package/attr/navigable/README.md

@@ -1,28 +1,28 @@
 # [u2-navigable] - attribute
-Make elements navigatable
+Turns dialogs, details, etc. into link-navigable elements with history support.
 
 ## 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
+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>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/navigable/navigable.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)  
+[test.html](http://gcdn.li/u2ui/u2@main/attr/navigable/tests/test.html)  
+[targetObserver.html](http://gcdn.li/u2ui/u2@main/attr/navigable/tests/targetObserver.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/navigable/tests/minimal.html)  
 
 ## About
 

package/attr/navigable/TargetObserver.js

@@ -1,91 +1,90 @@
-// 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();
+// 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){
+        return !!el && (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

@@ -1,75 +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();
-}
+// 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){
+        return !!el && (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(' '));
+    //console.log('u2targetobserver navigates:', {replace, url:url.href})
+    history[replace?'replaceState':'pushState']({source:'u2-target'}, '', url.href);
+    checkTargets();
+}

package/attr/navigable/manifest.json

@@ -1,42 +1,34 @@
-{
-    "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"
-            }
-          }
-        ]
-      }
-    ]
-  }
-  
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "navigable.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Make elements navigable",
+            "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.",
+                "u2Examples": ["true", "false"]
+            },{
+                "name": "id",
+                "description": "An id is required to navigate to the element.",
+                "u2Examples": ["element-id"]
+            }],
+            "cssProperties": [],
+            "attributeName": "u2-navigable"
+        }],
+        "exports": [{
+            "kind": "custom-attribute-definition",
+            "name": "u2-navigable",
+            "declaration": {
+                "name": "u2-navigable",
+                "module": "navigable.js"
+            }
+        }]
+    }]
+}

package/attr/navigable/navigable.js

@@ -1,87 +1,85 @@
-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;
-});
+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;
+	toggleParam(el.id, el.open);
+},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?
+	}
+
+	toggleParam(el.id, el.checked);
+});
+
+
+/* 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;
+});