u2ui 1.0.0 → 1.4.5

package/attr/parallax/README.md

@@ -1,40 +1,40 @@
 # [u2-parallax] - attribute
-Make every element scrolling at different speed
+Makes elements scroll at different speeds for a parallax effect.
 
 ## Features
 
 - fast!
 - easy API
-- works for dynamic added elements
+- works for dynamically added elements
 - lightweight < 4k minified
 
 ## Usage
 
 ```html
-<div u2-parallax style="--u2-parallax-speed:1.1;">faster</div>
-<div u2-parallax style="--u2-parallax-speed:1;">parallax</div>
+<div u2-parallax style="--u2-parallax-speed:1.1;">faster</div>
+<div u2-parallax style="--u2-parallax-speed:1;">parallax</div>
 <div u2-parallax style="--u2-parallax-speed:0.9;">slower</div>
 ```
 
 ```css
-[u2-parallax] {
-    background:var(--color-light);
-    display:inline-block;
-    padding:.5rem;
+[u2-parallax] {
+    background:var(--color-light);
+    display:inline-block;
+    padding:.5rem;
 }
 ```
 
 ## Install
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/parallax/parallax.min.js" type=module async></script>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/parallax/parallax.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/attr/parallax/tests/minimal.html)  
 [performance.html](http://gcdn.li/u2ui/u2@main/attr/parallax/tests/performance.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/attr/parallax/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/parallax/tests/minimal.html)  
 
 ## Also interesting
 

package/attr/parallax/manifest.json

@@ -0,0 +1,36 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "parallax.js",
+        "declarations": [{
+            "description": "Makes elements scroll at different speeds for a parallax effect",
+            "name": "u2-parallax",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "u2-parallax",
+                "description": "Enables the parallax effect on the element"
+            }],
+            "cssProperties": [{
+                "name": "--u2-parallax-speed",
+                "description": "Scroll speed factor (1 = normal)",
+                "syntax": "<number>"
+            },{
+                "name": "--u2-parallax-direction",
+                "description": "Direction of the parallax movement",
+                "syntax": "*"
+            }],
+            "attributeName": "u2-parallax"
+        }],
+        "exports": [{
+            "kind": "custom-attribute-definition",
+            "name": "u2-parallax",
+            "declaration": {
+                "name": "u2-parallax",
+                "module": "parallax.js"
+            }
+        }]
+    }]
+}

package/attr/parallax/parallax.js

@@ -1,119 +1,119 @@
-/* Copyright (c) 2016 Tobias Buschor https://goo.gl/gl0mbf | MIT License https://goo.gl/HgajeK */
-
-
-const pool = new Map();
-function add(el){
-    let obj = new parallax(el);
-    pool.set(el, obj);
-    if (pool.size === 1) addGlobalListeners();
-    return obj;
-}
-function remove(el){
-    pool.delete(el);
-    if (pool.size === 0) removeGlobalListeners();
-}
-
-var styEl = document.createElement('style');
-styEl.innerHTML = '[u2-parallax]{z-index:1; will-change:transform;}';
-document.head.prepend(styEl);
-
-const parallax = class {
-    constructor(el){
-        this.el = el;
-    }
-    connect(){
-        this.positionChange();
-        let style = getComputedStyle(this.el);
-        //let direction = parseFloat(style.getPropertyValue('--u2-parallax-direction'));
-        //if (isNaN(direction)) direction = 180;
-        //this.angle = (direction + 90) / 180 * Math.PI;
-        this.speed = parseFloat(style.getPropertyValue('--u2-parallax-speed'));
-        if (isNaN(this.speed)) this.speed = .8;
-        onScroll() // todo: better solution?
-    }
-    positionChange(){
-        this.oRect = vpRectWithoutTransform(this.el);
-        if (!this.oRect) return; // hidden
-        this.oRect.centerY = this.oRect.top + this.oRect.height/2;
-    }
-    onScroll(pageCenterY, pageCenterX){ // this has to be very fast, can it be improved?
-        if (!this.oRect) return; // hidden
-        const centerDiff = pageCenterY - this.oRect.centerY;
-        const yRoute = (this.speed-1) * -centerDiff;
-        //const y = yRoute * Math.sin(this.angle);
-        //const x = yRoute * Math.cos(this.angle);
-        // todo, only transform if visible?
-        this.el.style.transform = 'translate3d('+0+'px,'+yRoute+'px,0)';
-        // this.el.attributeStyleMap.set('transform', new CSSTransformValue([
-        //     new CSSTranslate(CSS.px(0),CSS.px(yRoute),CSS.px(0))
-        // ]));
-    }
-};
-
-function calcViewportRects(e){
-    pool.forEach(obj => obj.positionChange());
-}
-function onScroll(e){
-    const pageCenterY = document.scrollingElement.scrollTop + winHeight/2;
-    const pageCenterX = document.scrollingElement.scrollLeft + winWidth/2;
-    requestAnimationFrame(()=>{
-        pool.forEach(obj => obj.onScroll(pageCenterY, pageCenterX));
-    });
-}
-
-function addGlobalListeners(){
-    addEventListener('resize',calcViewportRects);
-    addEventListener('DOMContentLoaded',calcViewportRects);
-    addEventListener('load',calcViewportRects);
-    addEventListener('resize', onScroll);
-    addEventListener('load', onScroll);
-    document.addEventListener('scroll', onScroll);
-    addEventListener('wheel', onScroll); // firefox, scroll is async so wheel is faster
-}
-function removeGlobalListeners(){
-    removeEventListener('resize',calcViewportRects);
-    removeEventListener('DOMContentLoaded',calcViewportRects);
-    removeEventListener('load',calcViewportRects);
-    removeEventListener('resize', onScroll);
-    removeEventListener('load', onScroll);
-    document.removeEventListener('scroll', onScroll);
-    removeEventListener('wheel', onScroll); // firefox
-}
-
-// cache innerHeight, Is that of any use?
-let winHeight = document.documentElement.clientHeight; // was innerHeight // better this?: https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions
-let winWidth = document.documentElement.clientWidth;
-addEventListener('resize',(e)=>{
-    winHeight = document.documentElement.clientHeight;
-    winWidth = document.documentElement.clientWidth;
-});
-
-
-
-/* helpers */
-function vpRectWithoutTransform(el){
-    if (!el.offsetParent) return null;
-    let rect = {
-        left  : 0,
-        top   : 0,
-        width : el.offsetWidth,
-        height: el.offsetHeight,
-    }
-    do {
-        rect.left += el.offsetLeft;
-        rect.top  += el.offsetTop;
-        el = el.offsetParent;
-    } while (el);
-    return rect;
-}
-
-import {SelectorObserver} from '../../js/SelectorObserver/SelectorObserver.js';
-new SelectorObserver({
-    on: (el) => {
-        const parallaxObj = add(el);
-        parallaxObj.connect();
-    },
-    off: (el) => {
-        remove(el)
-    }
-}).observe('[u2-parallax]');
+/* Copyright (c) 2016 Tobias Buschor https://goo.gl/gl0mbf | MIT License https://goo.gl/HgajeK */
+
+
+const pool = new Map();
+function add(el){
+    let obj = new parallax(el);
+    pool.set(el, obj);
+    if (pool.size === 1) addGlobalListeners();
+    return obj;
+}
+function remove(el){
+    pool.delete(el);
+    if (pool.size === 0) removeGlobalListeners();
+}
+
+var styEl = document.createElement('style');
+styEl.innerHTML = '[u2-parallax]{z-index:1; will-change:transform;}';
+document.head.prepend(styEl);
+
+const parallax = class {
+    constructor(el){
+        this.el = el;
+    }
+    connect(){
+        this.positionChange();
+        let style = getComputedStyle(this.el);
+        //let direction = parseFloat(style.getPropertyValue('--u2-parallax-direction'));
+        //if (isNaN(direction)) direction = 180;
+        //this.angle = (direction + 90) / 180 * Math.PI;
+        this.speed = parseFloat(style.getPropertyValue('--u2-parallax-speed'));
+        if (isNaN(this.speed)) this.speed = .8;
+        onScroll() // todo: better solution?
+    }
+    positionChange(){
+        this.oRect = vpRectWithoutTransform(this.el);
+        if (!this.oRect) return; // hidden
+        this.oRect.centerY = this.oRect.top + this.oRect.height/2;
+    }
+    onScroll(pageCenterY, pageCenterX){ // this has to be very fast, can it be improved?
+        if (!this.oRect) return; // hidden
+        const centerDiff = pageCenterY - this.oRect.centerY;
+        const yRoute = (this.speed-1) * -centerDiff;
+        //const y = yRoute * Math.sin(this.angle);
+        //const x = yRoute * Math.cos(this.angle);
+        // todo, only transform if visible?
+        this.el.style.transform = 'translate3d('+0+'px,'+yRoute+'px,0)';
+        // this.el.attributeStyleMap.set('transform', new CSSTransformValue([
+        //     new CSSTranslate(CSS.px(0),CSS.px(yRoute),CSS.px(0))
+        // ]));
+    }
+};
+
+function calcViewportRects(e){
+    pool.forEach(obj => obj.positionChange());
+}
+function onScroll(e){
+    const pageCenterY = document.scrollingElement.scrollTop + winHeight/2;
+    const pageCenterX = document.scrollingElement.scrollLeft + winWidth/2;
+    requestAnimationFrame(()=>{
+        pool.forEach(obj => obj.onScroll(pageCenterY, pageCenterX));
+    });
+}
+
+function addGlobalListeners(){
+    addEventListener('resize',calcViewportRects);
+    addEventListener('DOMContentLoaded',calcViewportRects);
+    addEventListener('load',calcViewportRects);
+    addEventListener('resize', onScroll);
+    addEventListener('load', onScroll);
+    document.addEventListener('scroll', onScroll);
+    addEventListener('wheel', onScroll); // firefox, scroll is async so wheel is faster
+}
+function removeGlobalListeners(){
+    removeEventListener('resize',calcViewportRects);
+    removeEventListener('DOMContentLoaded',calcViewportRects);
+    removeEventListener('load',calcViewportRects);
+    removeEventListener('resize', onScroll);
+    removeEventListener('load', onScroll);
+    document.removeEventListener('scroll', onScroll);
+    removeEventListener('wheel', onScroll); // firefox
+}
+
+// cache innerHeight, Is that of any use?
+let winHeight = document.documentElement.clientHeight; // was innerHeight // better this?: https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions
+let winWidth = document.documentElement.clientWidth;
+addEventListener('resize',(e)=>{
+    winHeight = document.documentElement.clientHeight;
+    winWidth = document.documentElement.clientWidth;
+});
+
+
+
+/* helpers */
+function vpRectWithoutTransform(el){
+    if (!el.offsetParent) return null;
+    let rect = {
+        left  : 0,
+        top   : 0,
+        width : el.offsetWidth,
+        height: el.offsetHeight,
+    }
+    do {
+        rect.left += el.offsetLeft;
+        rect.top  += el.offsetTop;
+        el = el.offsetParent;
+    } while (el);
+    return rect;
+}
+
+import {SelectorObserver} from '../../js/SelectorObserver/SelectorObserver.js';
+new SelectorObserver({
+    on: (el) => {
+        const parallaxObj = add(el);
+        parallaxObj.connect();
+    },
+    off: (el) => {
+        remove(el)
+    }
+}).observe('[u2-parallax]');

package/attr/scrollspy/README.md

@@ -0,0 +1,43 @@
+# [u2-scrollspy] - attribute
+Make a navigation that changes the `active` class based on the scroll position.
+
+## Usage
+
+```html
+<nav u2-scrollspy style="position:absolute; top:0; display:grid">
+    <a href="#article1">article 1</a> 
+    <a href="#article2">article 2</a> 
+    <a href="#article3">article 3</a> 
+</nav>
+```
+
+```css
+a.active {
+    color:var(--color, pink);
+}
+section {
+    height:5rem;
+    border:1px solid;
+}
+section {
+    min-height:5rem;
+    border:1px solid;
+}
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/scrollspy/scrollspy.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/attr/scrollspy/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/scrollspy/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/scrollspy/manifest.json

@@ -0,0 +1,28 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "scrollspy.js",
+        "declarations": [{
+            "description": "Navigation that sets the active class based on scroll position",
+            "name": "u2-scrollspy",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "u2-scrollspy",
+                "description": "Enables scrollspy on a navigation container"
+            }],
+            "cssProperties": [],
+            "attributeName": "u2-scrollspy"
+        }],
+        "exports": [{
+            "kind": "custom-attribute-definition",
+            "name": "u2-scrollspy",
+            "declaration": {
+                "name": "u2-scrollspy",
+                "module": "scrollspy.js"
+            }
+        }]
+    }]
+}

package/attr/scrollspy/scrollspy.js

@@ -0,0 +1,85 @@
+
+class DynamicScrollSpy {
+    constructor(navElement) {
+        this.navElement = navElement;
+        this.observer = null;
+        this.mutationObserver = null;
+        this.ACTIVE_CLASS = 'active'; 
+        //this.ROOT_MARGIN = '-30px'; 
+        //this.ROOT_MARGIN = '0px 0px 0px 0px'; 
+        this.ROOT_MARGIN = '2px 0px 20px 0px';
+        this.init();
+    }
+
+    markId(id) {
+        this.menuLinks.forEach(link => link.classList.remove(this.ACTIVE_CLASS));
+        this.idLinkMap.get(id)?.classList.add(this.ACTIVE_CLASS);
+    }
+    recalibrate() {
+        if (this.observer) this.observer.disconnect();
+        
+        this.menuLinks = [...this.navElement.querySelectorAll('a[href*="#"]')];
+
+        this.idLinkMap = new Map();
+        
+        const currentURL = location.href.split('#')[0];
+        const sections = this.menuLinks.map(link => {
+            const linkURL = link.href.split('#')[0];
+            const hash = decodeURIComponent(link.href.split('#')[1]);
+            if (linkURL === currentURL && hash) {
+                const section = document.getElementById(hash);
+                this.idLinkMap.set(hash, link);
+                return section;
+            }
+        }).filter(Boolean);
+
+        if (sections.length === 0) return;
+        const options = {root:null, rootMargin:this.ROOT_MARGIN, threshold: 0.05 };
+        const intersections = new Set();
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.markId(entry.target.id);
+                    intersections.add(entry.target.id);
+                } else {
+                    intersections.delete(entry.target.id);
+                    const last = [...intersections].at(-1);
+                    this.markId(last);
+                }
+            });
+        }, options);
+        sections.forEach(section => this.observer.observe(section));
+    }
+    
+    init() {
+        this.recalibrate();
+        this.mutationObserver = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    window.requestAnimationFrame(() => this.recalibrate());
+                    break;
+                }
+            }
+        });
+        this.mutationObserver.observe(this.navElement, { childList: true, subtree: true });
+    }
+
+    disconnect() {
+        if (this.observer) this.observer.disconnect();
+        if (this.mutationObserver) this.mutationObserver.disconnect();
+    }
+}
+
+
+import {SelectorObserver} from '../../js/SelectorObserver/SelectorObserver.js';
+new SelectorObserver({
+    on: (navElement) => {
+        navElement._scrollspyInstance = new DynamicScrollSpy(navElement);
+    },
+    off: (navElement) => {
+        if (navElement._scrollspyInstance) {
+            navElement._scrollspyInstance.disconnect();
+            delete navElement._scrollspyInstance;
+        }
+    }
+}).observe('[u2-scrollspy]');

package/attr/selectable/README.md

@@ -0,0 +1,42 @@
+# [u2-selectable] - attribute
+Makes a container with selectable items. <div u2-selectable=".selector">
+
+## Usage
+
+```html
+<div u2-selectable aria-multiselectable=true>
+    <div>item 1</div>
+    <div>item 2</div>
+    <div>item 3</div>
+</div>
+```
+
+```css
+[u2-selectable] > * {
+    padding: .5rem;
+    margin-block: 1rem;
+    background-color: var(--color-lighter);
+}
+[u2-selectable] > [aria-selected="true"] {
+    background-color: var(--color);
+    color: white;
+}
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/selectable/selectable.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/attr/selectable/tests/test.html)  
+[SelectionManager.html](http://gcdn.li/u2ui/u2@main/attr/selectable/tests/SelectionManager.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/selectable/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. ♥
+