u2ui 1.0.1 → 1.4.5

package/attr/focusgroup/focusgroup.js

@@ -1,100 +1,97 @@
-
-addEventListener('keydown', e => {
-	if (e.defaultPrevented) return;
-    if (e.altKey) return; // alt is reserved for browser back/forward
-    if (e.ctrlKey || e.metaKey || e.shiftKey) return; // we only want to handle arrow keys without modifiers, in the future we could add a setting for this (focus last element with arrow left + shift)
-
-	const isVertical = (e.code === 'ArrowUp' || e.code === 'ArrowDown');
-	const isHorizontal = (e.code === 'ArrowLeft' || e.code === 'ArrowRight');
-	if (!isVertical && !isHorizontal) return;
-
-	const {target, container} = eventTargets(e);
-	if (!container) return;
-
-	if (isHorizontal) {
-		if (target.tagName === 'INPUT' && (target.type !== 'checkbox' && target.type !== 'radio')) return;
-		if (target.tagName === 'TEXTAREA') return;
-	}
-	if (isVertical) {
-		if (target.tagName === 'SELECT') return;
-		if (target.tagName === 'TEXTAREA') return;
-	}
-
-	const tmp = container.getAttribute('u2-focusgroup').split(' ');
-	const options = Object.fromEntries(tmp.map(o => [o, true]));
-	if (!options.horizontal && !options.vertical) {
-		options.horizontal = true;
-		options.vertical = true;
-	}
-
-	if (!options.horizontal && isHorizontal) return;
-	if (!options.vertical && isVertical) return;
-
-	let direction = 0;
-	if (e.code === 'ArrowLeft' || e.code === 'ArrowUp') direction = -1;
-	if (e.code === 'ArrowRight' || e.code === 'ArrowDown') direction = 1;
-	if (direction === 0) return;
-
-	const items = groupItems(container);
-	if (items.length < 2) return;
-
-	const index = items.indexOf(target);
-
-	if (index === -1) {
-		console.warn('should not happen, got a focusgroup-key-event, but the target is not focusable!');
-		return;
-	}
-
-	let next = items[index + direction];
-	if (!next && options.wrap) next = direction === 1 ? items.at(0) : items.at(-1);
-	if (!next) return;
-
-	next.focus();
-
-    // remember
-    if (options.remember) {
-        items.forEach(el => el.setAttribute('tabindex', el === next ? '0' : '-1'));
-    }
-
-	e.preventDefault();
-});
-
-
-// addEventListener('focusin', e => {
-// 	const {target, container} = eventTargets(e);
-// 	if (!container) return;
-// 	const remember = container.getAttribute('u2-focusgroup').split(' ').includes('remember');
-// 	if (!remember) return;
-// 	groupItems(container).forEach(el => el.setAttribute('tabindex', el === target ? '0' : '-1'));
-// });
-
-
-
-function groupItems(container) {
-	const selector = ' :not(u2-focusgroup) a[href], button, input, select, textarea, [contenteditable], [tabindex]';
-	const elements = [...container.querySelectorAll(selector)];
-
-	// handle slotted elements, beta
-	const slots = container.matches('slot') ? [container] : container.querySelectorAll('slot'); // TODO: handle slotted elements
-	slots.forEach(slot => {
-		const slotted = slot.assignedElements({flatten: true}).filter(el => el.matches(selector));
-		elements.push(...slotted);
-	});
-
-	return elements.filter(el => !el.disabled);
-}
-
-function eventTargets(event){
-	let target = event.target;
-	let container = target.closest('[u2-focusgroup]');
-	if (!container) { // inside shadow dom
-		target = event.originalTarget; // only for firefox?
-		if (!target) return {};
-		container = target.closest('[u2-focusgroup]');
-	}
-	if (!container) container = target.assignedSlot?.closest('[u2-focusgroup]'); // if slotted, ok?
-	return {
-		target,
-		container
-	};
-}
+
+addEventListener('keydown', e => {
+	if (e.defaultPrevented) return;
+    if (e.altKey) return; // alt is reserved for browser back/forward
+    if (e.ctrlKey || e.metaKey || e.shiftKey) return; // we only want to handle arrow keys without modifiers, in the future we could add a setting for this (focus last element with arrow left + shift)
+
+	const isVertical = (e.code === 'ArrowUp' || e.code === 'ArrowDown');
+	const isHorizontal = (e.code === 'ArrowLeft' || e.code === 'ArrowRight');
+	if (!isVertical && !isHorizontal) return;
+
+	const {target, container} = eventTargets(e);
+	if (!container) return;
+
+	if (isHorizontal) {
+		if (target.tagName === 'INPUT' && (target.type !== 'checkbox' && target.type !== 'radio')) return;
+		if (target.tagName === 'TEXTAREA') return;
+	}
+	if (isVertical) {
+		if (target.tagName === 'SELECT') return;
+		if (target.tagName === 'TEXTAREA') return;
+	}
+
+	const tmp = container.getAttribute('u2-focusgroup').split(' ');
+	const options = Object.fromEntries(tmp.map(o => [o, true]));
+	if (!options.horizontal && !options.vertical) {
+		options.horizontal = true;
+		options.vertical = true;
+	}
+
+	if (!options.horizontal && isHorizontal) return;
+	if (!options.vertical && isVertical) return;
+
+	const direction = e.code === 'ArrowLeft' || e.code === 'ArrowUp' ? -1 : e.code === 'ArrowRight' || e.code === 'ArrowDown' ? 1 : 0;
+	if (direction === 0) return;
+
+	const items = groupItems(container);
+	if (items.length < 2) return;
+
+	const index = items.indexOf(target);
+
+	if (index === -1) {
+		console.warn('should not happen, got a focusgroup-key-event, but the target is not focusable!');
+		return;
+	}
+
+	let next = items[index + direction] || (options.wrap ? direction === 1 ? items.at(0) : items.at(-1) : null);
+	if (!next) return;
+
+	next.focus();
+
+    // remember
+    if (options.remember) {
+        items.forEach(el => el.setAttribute('tabindex', el === next ? '0' : '-1'));
+    }
+
+	e.preventDefault();
+});
+
+
+// addEventListener('focusin', e => {
+// 	const {target, container} = eventTargets(e);
+// 	if (!container) return;
+// 	const remember = container.getAttribute('u2-focusgroup').split(' ').includes('remember');
+// 	if (!remember) return;
+// 	groupItems(container).forEach(el => el.setAttribute('tabindex', el === target ? '0' : '-1'));
+// });
+
+
+
+function groupItems(container) {
+	const selector = ' :not(u2-focusgroup) a[href], button, input, select, textarea, [contenteditable], [tabindex]';
+	const elements = [...container.querySelectorAll(selector)];
+
+	// handle slotted elements, beta
+	const slots = container.matches('slot') ? [container] : container.querySelectorAll('slot'); // TODO: handle slotted elements
+	slots.forEach(slot => {
+		const slotted = slot.assignedElements({flatten: true}).filter(el => el.matches(selector));
+		elements.push(...slotted);
+	});
+
+	return elements.filter(el => !el.disabled);
+}
+
+function eventTargets(event){
+	let target = event.target;
+	let container = target.closest('[u2-focusgroup]');
+	if (!container) { // inside shadow dom
+		target = event.originalTarget; // only for firefox?
+		if (!target) return {};
+		container = target.closest('[u2-focusgroup]');
+	}
+	container ||= target.assignedSlot?.closest('[u2-focusgroup]'); // if slotted, ok?
+	return {
+		target,
+		container
+	};
+}

package/attr/focusgroup/manifest.json

@@ -1,38 +1,30 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-    {
-        "kind": "javascript-module",
-        "path": "focusgroup.js",
-        "declarations": [
-          {
-            "description": "Focus movement by arrow keys",
-            "name": "u2-focusgroup",
-            "members": [],
-            "events": [],
-            "attributes": [
-                {
-                    "name": "u2-focusgroup",
-                    "description": "It allows you to focus elements with arrow keys inside a container.",
-                    "u2Examples": ["", "wrap", "wrap vertical remember", "remember"]
-                }
-            ],
-            "cssProperties": [],
-            "attributeName": "u2-focusgroup"
-          }
-        ],
-        "exports": [
-          {
-            "kind": "custom-attribute-definition",
-            "name": "u2-focusgroup",
-            "declaration": {
-              "name": "u2-focusgroup",
-              "module": "focusgroup.js"
-            }
-          }
-        ]
-      }
-    ]
-  }
-  
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "focusgroup.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Focus movement by arrow keys",
+            "name": "u2-focusgroup",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "u2-focusgroup",
+                "description": "It allows you to focus elements with arrow keys inside a container.",
+                "u2Examples": ["", "wrap", "wrap vertical remember", "remember"]
+            }],
+            "cssProperties": [],
+            "attributeName": "u2-focusgroup"
+        }],
+        "exports": [{
+            "kind": "custom-attribute-definition",
+            "name": "u2-focusgroup",
+            "declaration": {
+                "name": "u2-focusgroup",
+                "module": "focusgroup.js"
+            }
+        }]
+    }]
+}

package/attr/href/README.md

@@ -1,24 +1,24 @@
 # [u2-href] - attribute
-Every element can be a link
+Makes any element act as a link. `u2-href="url"`
 
 ## Usage
 
 ```html
-<div u2-href="http://schwups.ch" u2-href-target=_blank>
-    Pseudo link
+<div u2-href="http://schwups.ch" u2-href-target=_blank>
+    Pseudo link
 </div>
 ```
 
 ## Install
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/href/href.min.js" type=module async></script>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/href/href.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/attr/href/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/attr/href/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/href/tests/minimal.html)  
 
 ## Description
 

package/attr/href/href.js

@@ -1,42 +1,50 @@
-/* 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>');
+document.addEventListener('click', e => {
+	if (e.button !== 0) return; // only left-click
+	if (e.defaultPrevented) return; // not if prevented
+    if (!e.target.closest) return; // some targets have no closest method?
+	const A = e.target.closest('[u2-href]');
+	if (!A) return;
+	let href = A.getAttribute('u2-href'); // get the url
+
+	if (href === '') {
+		const realA = A.querySelector('a[href]');
+		if (!realA) return;
+		href = realA.href;
+	}
+
+	if (e.target.isContentEditable) 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;
+
+	const sel = getSelection();
+    for (let i = 0; i < sel.rangeCount; i++) {
+        if (sel.getRangeAt(i).toString().trim() !== '') return;
+    }
+	// if (!sel.isCollapsed) { // only if the selection is collapsed. // deprecated
+	// 	const textSelected = sel.anchorNode.nodeType === 3 || sel.focusNode.nodeType === 3;
+	// 	const shadowElSelected = sel.focusNode.nodeType === 11; // svg-use-element, firefox
+	// 	if (textSelected && !shadowElSelected) 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 || e.metaKey) target = '_blank';
+	// 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,noreferrer'); //!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

@@ -1,43 +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"
-            }
-          }
-        ]
-      }
-    ]
-  }
+{
+    "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/intersect/README.md

@@ -4,36 +4,36 @@ declarativ intersection-observer
 ## Usage
 
 ```html
-<div u2-intersect>intersect</div>
-<div u2-intersect>item 2</div>
+<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] {
+    --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>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/intersect/intersect.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)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/intersect/tests/minimal.html)  
 
 ## About