u2ui 1.0.0

package/js/PointerObserver/PointerObserver.js

@@ -0,0 +1,130 @@
+
+const d = document;
+
+export class PointerObserver {
+    constructor(el, options) {
+
+        this.options = Object.assign({
+            mouse: true,
+            touch: true,
+            passive: true,
+        }, options);
+
+        this.el   = el;
+        this.pos  = {};
+        this.last = {};
+        this.posStart = {};
+
+        this.start = this.start.bind(this);
+        this.move = this.move.bind(this);
+        this.stop = this.stop.bind(this);
+
+
+		el.addEventListener('mousedown', this.start);  // why mousedown when only options.touch? To be able to change options after creating the observer?
+        el.addEventListener('touchstart', this.start, {passive: this.options.passive});
+    }
+	start(e) {
+		if (this.running) return;
+		if (e.type === 'mousedown'  && !this.options.mouse) return;
+		if (e.type === 'touchstart' && !this.options.touch) return;
+		//if (e.type === 'touchstart') this.touching = true;
+		//if (this.touching && e.type === 'mousedown') return;
+
+		let pointer = e;
+		if (e.touches) {
+			pointer = e.touches[0];
+			if (e.touches.length > 1) return; // only the first finger is interesting
+			this.identifier = pointer.identifier;
+		}
+
+
+		this.abortCtrl = new AbortController();
+		let signal = this.abortCtrl.signal;
+
+		this.posStart = this.pos = {
+			x:pointer.pageX,
+			y:pointer.pageY
+		};
+
+		this.onstart && this.onstart(e);
+
+		if (this.options.mouse) {
+            d.addEventListener('mousemove', this.move, {signal});
+            d.addEventListener('mouseup'  , this.stop, {signal});
+			d.addEventListener('dragstart', this.stop, {signal});
+		}
+		if (this.options.touch) {
+			d.addEventListener('touchmove', this.move, {signal, passive: this.options.passive});
+            d.addEventListener('touchend' , this.stop, {signal});
+            //d.addEventListener('touchstart', gstart);
+		}
+		this.running = true;
+	}
+	move(e) {
+
+		let pointer = e;
+
+		if (e.touches) {
+			pointer = e.touches[0];
+
+			// const finger2 = e.touches[1];
+			// if (finger2 && this.ongesture) {
+			// 	const deltaX = pointer.pageX - finger2.pageX;
+			// 	const deltaY = pointer.pageY - finger2.pageY;
+			// 	const deg = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
+			// 	e.rotate = deg -= this.degStart;
+		    //     const dist = Math.sqrt(deltaX*deltaX + deltaY*deltaY);
+			// 	e.scale = dist / this.distStart;
+			// 	this.ongesture && this.ongesture(e);
+			// }
+
+			if (pointer.identifier !== this.identifier) return;
+		}
+
+		this.last = this.pos;
+		this.pos = {
+			x: pointer.pageX,
+			y: pointer.pageY,
+			time: e.timeStamp,
+		};
+        if (this.last.x===this.pos.x && this.last.y === this.pos.y) return;
+
+        this.onmove && this.onmove(e);
+	}
+	stop(e) {
+		if (e.changedTouches && e.changedTouches[0].identifier !== this.identifier) return;
+		this.onstop && this.onstop(e);
+		this.abortCtrl.abort();
+		this.running = false;
+	}
+
+    get diff() { // should we direct calculate this before onmove? i think .startDiff is almost ever used
+        return {
+            x: this.pos.x - this.last.x,
+            y: this.pos.y - this.last.y,
+            time: this.pos.time - this.last.time,
+        };
+    }
+    get startDiff() {
+        return {
+            x: this.pos.x - this.posStart.x,
+            y: this.pos.y - this.posStart.y,
+            time: this.pos.time - this.posStart.time,
+        };
+    }
+
+}
+
+
+// todo?
+// gstart = function(e) {
+// 	var pointer = e.touches[0];
+// 	var finger2 = e.touches[1];
+// 	if (finger2) {
+// 		var deltaX = pointer.pageX - finger2.pageX;
+// 		var deltaY = pointer.pageY - finger2.pageY;
+// 		self.degStart = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
+// 		self.distStart = Math.sqrt(deltaX*deltaX + deltaY*deltaY);
+// 		self.ongesturestart && self.ongesturestart(e);
+// 	}
+// },

package/js/PointerObserver/README.md

@@ -0,0 +1,34 @@
+# PointerObserver.js
+Observe mouse and touches
+
+## Usage
+
+```js
+import {PointerObserver} from "../PointerObserver.js";
+new PointerObserver(el).onmove = function(e){
+    console.log(this.pos);
+}
+```
+
+```html
+<div id=el style="position:absolute;">
+    StartObserving
+</div>
+```
+
+## Install
+
+```js
+import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/js/PointerObserver/PointerObserver.min.js"
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/js/PointerObserver/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/js/PointerObserver/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/js/PointerObserver/tests/minimal.html

@@ -0,0 +1,29 @@
+<!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>
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/aria.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+
+
+<body>
+
+<section class="main">
+
+    <div id=el style="position:absolute;">
+        StartObserving
+    </div>
+
+</section>
+
+<script type=module class="main">
+import {PointerObserver} from "../PointerObserver.js";
+new PointerObserver(el).onmove = function(e){
+    console.log(this.pos);
+}
+</script>

package/js/PointerObserver/tests/test.html

@@ -0,0 +1,35 @@
+<!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>
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/aria.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+<body>
+
+<section>
+
+    <div id=el style="user-select:none; -webkit-user-select:none; position:absolute; padding:2rem; background:#eee; box-shadow: 0 0 10px #0007; z-index:9">
+        StartObserving
+        <span id=hover style="border:1px solid; font-size:12px">hover to start</span>
+    </div>
+
+    <script type=module style="display:block">
+        import {PointerObserver} from "../PointerObserver.js";
+
+        const observer = new PointerObserver(el);
+        observer.onmove = function(e){
+            el.style.left = this.pos.x + "px";
+            el.style.top = this.pos.y + "px";
+        }
+        hover.addEventListener("mouseover", function(e){
+            observer.start(e);
+        });
+    </script>
+
+
+</section>

package/js/SelectorObserver/README.md

@@ -0,0 +1,47 @@
+# SelectorObserver.js
+Monitor elements by CSS selector
+
+## Usage
+
+```js
+import {SelectorObserver} from '../SelectorObserver.js';
+new SelectorObserver({
+    on: el => el.innerHTML = 'found!' ,
+    off: el => el.innerHTML = 'lost!' ,
+}).observe('#SOTargets div');
+```
+
+```html
+<div class=container id=SOTargets contenteditable>
+    Find all bold divs (press enter)
+</div>
+```
+
+## Install
+
+```js
+import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/js/SelectorObserver/SelectorObserver.min.js"
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/js/SelectorObserver/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/js/SelectorObserver/tests/test.html)  
+[tests.html](http://gcdn.li/u2ui/u2@main/js/SelectorObserver/tests/tests.html)  
+
+## Options - "checkAnimation" (beta)
+
+```javascript
+o.observer('.el', {checkAnimation: true});
+    
+```
+
+Like this, you can event watch selectors like `.el:has(img:hover) > tr:nth-child(2)`  
+Trigger only `on` and not `off` right now.
+-->
+
+## 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/js/SelectorObserver/SelectorObserver.js

@@ -0,0 +1,201 @@
+const observers = new Set();
+
+// global mutation observer
+const muObserver = new MutationObserver(checkMutations);
+muObserver.observe(document, {
+    childList: true,
+    subtree: true,
+    attributes: true
+});
+function addTree(el) {
+    for (const observer of observers) observer._addTree(el);
+}
+function removeTree(el) {
+    for (const observer of observers) observer._removeTree(el);
+}
+function treeModified(el) {
+    for (const observer of observers) observer._treeModified(el);
+}
+function checkMutations(mutations) {
+    for (const mutation of mutations) {
+        if (mutation.type==='childList') {
+            for (const target of mutation.addedNodes) {
+                target.nodeType === 1 && addTree(target);
+            }
+            for (const target of mutation.removedNodes) {
+                target.nodeType === 1 && removeTree(target);
+            }
+        }
+        if (mutation.type==='attributes') {
+            treeModified(mutation.target);
+        }
+    }
+}
+
+
+// animation observer (beta), todo:refine and performance tests, problem: can not set multiple animation per selector => can be overwritten
+/*
+let animationCounter = 0;
+let aObservers = new Set();
+class _animationObserver {
+    constructor(selector, on) {
+        this.on = on;
+        // todo?: reuse style element if selector already exists
+        // or better: use same style element for all selectors?
+        // this way we dont overwrite elements targeting by multiple observers,
+        // but we have to match the selector for every observer
+        this.style = document.createElement('style');
+        this.animationName = `u2-selObs-${animationCounter++}`;
+
+        this.style.innerHTML =
+            `@keyframes ${this.animationName}{}\n`+
+            `${selector}{animation:${this.animationName} .1ms}`+
+            `.u2sOTracked:not(${selector}){animation:${this.animationName} .1ms .1ms}`+
+            ``; // todo: :where() when supported
+        document.head.append(this.style);
+        aObservers.add(this);
+    }
+    disconnect(){
+        this.style.remove();
+        aObservers.delete(this);
+    }
+}
+document.addEventListener('animationstart', e => { // todo: remove/add listener by usage
+    for (const observer of aObservers) {
+        if (e.animationName === observer.animationName) {
+            observer.on(e.target);
+            e.target.classList.add('u2sOTracked'); // can be removed if none of the listeners tracking it
+        }
+    }
+});
+*/
+
+
+
+
+
+export class SelectorObserver {
+
+    /**
+     * @param {Object} options
+     * @param {Function} options.on
+     * @param {Function} options.off
+     */
+    constructor({on, off}) {
+        this.targets = new Set(); // was WeakSet, but we clean targets anyway. Better WeakRef-Set? // rename to targets?
+        this._on = on;
+        this._off = off;
+    }
+
+    /**
+     * @param {String} selector
+     */
+    observe(selector, options={}) {
+        this.selector = selector;
+        this.options = options;
+        const els = document.querySelectorAll(this.selector);
+        for (const el of els) this._add(el);
+
+        //if (options.checkMutations!==false) {
+            observers.add(this);
+        //}
+        /*
+        if (options && options.checkAnimation) {
+            this.aniObserver = new _animationObserver(this.selector, el=>{
+                el.matches(this.selector) ? this._add(el) : this._remove(el);
+            });
+        }
+        */
+    }
+
+
+    /**
+     * @description disconnects the observer
+     */
+    disconnect() {
+        this.targets.clear();
+        observers.delete(this);
+        //this.aniObserver && this.aniObserver.disconnect();
+    }
+
+    /**
+     * @private
+     */
+    _add(el) {
+        if (this.targets.has(el)) return;
+        this.targets.add(el);
+        this._on && this._on(el);
+    }
+
+    /**
+     * @private
+     */
+     _remove(el) {
+        if (!this.targets.has(el)) return;
+        this.targets.delete(el);
+        this._off && this._off(el);
+    }
+
+    /**
+     * @private
+     */
+     _addTree(target) {
+        target.matches(this.selector) && this._add(target);
+        if (document.readyState === 'complete') { // Before domready MutationObserver reports every node, ok?
+            for (const el of target.querySelectorAll(this.selector)) this._add(el);
+        }
+    }
+
+    /**
+     * @private
+     */
+     _removeTree(target) {
+        //if (!this._off) return; // performance
+        this._remove(target);
+        for (const el of target.querySelectorAll('*')) this._remove(el);
+    }
+
+    /**
+     * @private
+     */
+     _treeModified(target) {
+        target.matches(this.selector) ? this._add(target) : this._remove(target);
+        // for the moment subtree not checked
+        if (this.options.deep) {
+
+            for (const el of target.querySelectorAll('*')) { // expected to be expensiv
+                el.matches(this.selector) ? this._add(el) : this._remove(el);
+            }
+            //for (const el of this.targets) if (!el.matches(this.selector)) this._remove(el); // not iterable, use WeekRef if supported
+            //for (const el of target.querySelectorAll(this.selector)) this._add(el);
+        }
+    }
+}
+
+
+/* nice shorthands, todo:test *
+
+export function observe(selector, on, off) {
+    const observer = new SelectorObserver({on, off})
+    observer.observe(selector);
+    return observer;
+}
+
+export function on(selector, fn){
+    const observer = new SelectorObserver({on:fn});
+    observer.observe(selector);
+}
+
+export function off(selector, fn){
+    const observer = new SelectorObserver({off:fn});
+    observer.observe(selector);
+}
+
+export function one(selector, fn){
+    const observer = new SelectorObserver({on:el=>{
+        observer.disconnect();
+        fn(el);
+    }});
+    observer.observe(selector);
+}
+/* */

package/js/SelectorObserver/tests/minimal.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+
+<body>
+
+<section class="main">
+    <div class=container id=SOTargets contenteditable>
+        Find all bold divs (press enter)
+    </div>
+</section>
+
+<script type=module class="main">
+    import {SelectorObserver} from '../SelectorObserver.js';
+    new SelectorObserver({
+        on: el => el.innerHTML = 'found!' ,
+        off: el => el.innerHTML = 'lost!' ,
+    }).observe('#SOTargets div');
+</script>

package/js/SelectorObserver/tests/test.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <title>u2-ico Test</title>
+    <link rel=stylesheet href="../../../css/base/full.css">
+    <link rel=stylesheet href="../../../css/classless/variables.css">
+    <link rel=stylesheet href="../../../css/classless/classless.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+<body>
+
+<section>
+    <button onclick="targets.append(document.createElement('div'))">add item</button>
+    <button onclick="nonTargets.append(targets.lastElementChild )">remove item</button>
+    <h3>Targets</h3>
+    <div class=container id=targets>
+        <div></div>
+    </div>
+    <h3>Non targets</h3>
+    <div class=container id=nonTargets>
+    </div>
+</section>
+
+
+<script type=module style="display:block;">
+import {SelectorObserver} from '../SelectorObserver.js';
+let o = new SelectorObserver({
+    on: el => el.innerHTML = 'found!' ,
+    off: el => el.innerHTML = 'lost!' ,
+});
+o.observe('#targets > div');
+</script>
+
+<style>
+    .container {
+        display:flex;
+        flex-wrap:wrap;
+        background:#f5f5f5;
+    }
+    .container div {
+        background-color:var(--color-light);
+        margin:.5rem;
+        padding:.5rem;
+    }
+    #nonTargets div {
+        background-color: red;
+    }
+    button {
+        text-align: left;
+    }
+    button::after {
+        content: " " attr(onclick);
+        display: block;
+        font-size:.7rem;
+    }
+</style>