u2ui 1.0.0 → 1.4.5

package/js/PointerObserver/PointerObserver.js

@@ -1,130 +1,161 @@
-
-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);
-// 	}
-// },
+
+const d = document;
+
+export class PointerObserver {
+    constructor(el, options) {
+
+        this.options = {
+            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);
+		this.scroll = this.scroll.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' && e.button !== 0) 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;
+
+
+		/* neu: *
+		const initial = {
+            x: pointer.pageX,
+            y: pointer.pageY,
+            time: e.timeStamp || Date.now()
+        };
+
+        this.posStart = { ...initial };
+        this.pos      = { ...initial };
+        this.last     = { ...initial };
+		/* */
+		this.posStart = this.pos = {
+			x:pointer.pageX,
+			y:pointer.pageY
+		};
+		/* */
+		this.clientPos = { x: pointer.clientX, y: pointer.clientY }; // für scroll
+
+		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);
+		}
+		d.addEventListener('scroll', this.scroll, {signal, passive: true, capture: true});
+		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;
+		}
+		
+		// NEU: Verhindern, dass 'last' überschrieben wird, wenn keine tatsächliche Bewegung stattfand.
+        if (pointer.pageX === this.pos.x && pointer.pageY === this.pos.y) return;
+
+		this.last = this.pos;
+		this.pos = {
+			x: pointer.pageX,
+			y: pointer.pageY,
+			time: e.timeStamp,
+		};
+		this.clientPos = { x: pointer.clientX, y: pointer.clientY }; // für scroll
+
+        this.onmove && this.onmove(e);
+	}
+	scroll(e) {
+		const syntEvent = {
+			pageX: this.clientPos.x + window.pageXOffset,
+			pageY: this.clientPos.y + window.pageYOffset,
+			clientX: this.clientPos.x,
+			clientY: this.clientPos.y,
+			timeStamp: e.timeStamp,
+		};
+		this.move(syntEvent);
+	}	
+	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

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

package/js/SelectorObserver/README.md

@@ -1,33 +1,33 @@
 # SelectorObserver.js
-Monitor elements by CSS selector
+Watches elements matching a selector
 
 ## Usage
 
 ```js
-import {SelectorObserver} from '../SelectorObserver.js';
-new SelectorObserver({
-    on: el => el.innerHTML = 'found!' ,
-    off: el => el.innerHTML = 'lost!' ,
+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 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"
+import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@main/js/SelectorObserver/SelectorObserver.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)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/js/SelectorObserver/tests/minimal.html)  
 
 ## Options - "checkAnimation" (beta)