u2ui 1.0.1 → 1.4.5

package/js/Placer/Placer.js

@@ -1,156 +1,156 @@
-export class Placer {
-    constructor(el, options={}){
-        this.el = el;
-        this._followingAdjust = this._followingAdjust.bind(this);
-
-        this.options = { // default
-            y: 'after',
-            x: 'prepend',
-            stayInWindow: true,
-            switchSide: true,
-        };
-        this.setOptions(options);
-    }
-    setOptions(options){
-        Object.assign(this.options, options);
-        this._followingAdjust();
-    }
-    toElement(el) {
-        this.unfollow();
-        this._toElement(el);
-    }
-
-    /**
-     * @private
-     */
-    _toElement(el) {
-        const rect = el.getBoundingClientRect();
-        this.toClientRect(rect);
-    }
-
-    /**
-     * @private
-     * @param {DomRect} rect
-     */
-    toClientRect(rect){
-        /* margin can be done with css? would be better so we can use differen units */
-        if (this.options.margin) {
-            const margin = this.options.margin
-            rect = {
-                top:    rect.top    - margin,
-                bottom: rect.bottom + margin,
-                left:   rect.left   - margin,
-                right:  rect.right  + margin,
-                height: rect.height + margin*2,
-                width:  rect.width  + margin*2,
-            };
-        }
-        let viewport = { // viewport relative to the layer
-            top: 0,
-            left: 0,
-        };
-
-        let position = getComputedStyle(this.el).getPropertyValue('position');
-        if (position !== 'fixed') {
-            let root = offsetParent(this.el);
-            if (root) {
-                // if (!root) root = document.documentElement; // make no sense
-                viewport = root.getBoundingClientRect();
-                rect = {
-                    top:    rect.top    - viewport.top,
-                    bottom: rect.bottom - viewport.top,
-                    left:   rect.left   - viewport.left,
-                    right:  rect.right  - viewport.left,
-                    width:  rect.width,
-                    height: rect.height,
-                };
-            }
-        }
-        // start
-        let placeY = this.options.y;
-        let placeX = this.options.x;
-
-        const innerWidth  = document.documentElement.clientWidth;
-        const innerHeight = document.documentElement.clientHeight;
-
-        const layerWidth  = this.el.offsetWidth;
-        const layerHeight = this.el.offsetHeight;
-
-        let x = 0;
-        if (placeX==='prepend') x = rect.left;
-        if (placeX==='after')   x = rect.right;
-        if (this.options.switchSide && x + layerWidth + viewport.left > innerWidth) placeX = placeX === 'prepend' ? 'append' : 'before';
-        if (placeX==='before')  x = rect.left  - layerWidth;
-        if (placeX==='append')  x = rect.right - layerWidth;
-        if (x < -viewport.left) x = placeX === 'before' ? rect.right : rect.left;
-        if (placeX==='center')  x = rect.right - rect.width/2 - layerWidth/2;
-
-        let y = 0;
-        if (placeY==='prepend') y = rect.top;
-        if (placeY==='after')   y = rect.bottom;
-        if (this.options.switchSide && y + layerHeight + viewport.top > innerHeight) placeY = placeY === 'prepend' ? 'append' : 'before';
-        if (placeY==='before')  y = rect.top    - layerHeight;
-        if (placeY==='append')  y = rect.bottom - layerHeight;
-        if (y < -viewport.top)  y = placeY === 'before' ? rect.bottom : rect.top;
-        if (placeY==='center')  y = rect.top + rect.height/2 - layerHeight/2;
-
-        if (this.options.stayInWindow) {
-            x = clamp(x, -viewport.left, innerWidth  - viewport.left - layerWidth);
-            y = clamp(y, -viewport.top,  innerHeight - viewport.top  - layerHeight);
-        }
-
-        if (position === 'absolute') {
-            x += scrollX;
-            y += scrollY;
-        }
-
-        requestAnimationFrame(()=>{
-            this.el.style.top  = y + 'px';
-            this.el.style.left = x + 'px';
-        });
-
-        this.positionX = placeX;
-        this.positionY = placeY;
-    }
-
-    // follow:
-    followElement(el){
-        if (this.following === el) return;
-        this.following = el;
-        if (!el) return;
-        clearInterval(this.followInterval);
-        this.followInterval = setInterval(this._followingAdjust,200);
-        this._addAndRemoveListeners(true);
-        this._followingAdjust();
-    }
-    unfollow(){
-        this.following = null;
-        clearInterval(this.followInterval);
-        this._addAndRemoveListeners(false);
-    }
-
-    _addAndRemoveListeners(add){
-        const method = add ? 'addEventListener' : 'removeEventListener';
-        window[method]('resize',this._followingAdjust,{passive:true});
-        document[method]('mousemove',this._followingAdjust,{passive:true});
-        document[method]('mouseup',this._followingAdjust,{passive:true});
-        document[method]('input',this._followingAdjust,{passive:true, capture:true});
-        document[method]('scroll',this._followingAdjust,{passive:true, capture:true});
-    }
-    _followingAdjust(){
-        const run = this.following && this.el.parentNode && this.following.parentNode && this.el.offsetWidth && this.following.offsetWidth;
-        run ? this._toElement(this.following) : this.unfollow();
-    }
-};
-
-
-const offsetParent = (el) => {
-    let parent = el.offsetParent;
-    if (parent === document.body) {
-        let position = getComputedStyle(parent).getPropertyValue('position');
-        if (position === 'static') parent = null;
-    }
-    return parent;
-}
-
-const clamp=(value, min, max) => value < min ? min : value > max ? max : value;
+export class Placer {
+    constructor(el, options={}){
+        this.el = el;
+        this._followingAdjust = this._followingAdjust.bind(this);
+
+        this.options = { // default
+            y: 'after',
+            x: 'prepend',
+            stayInWindow: true,
+            switchSide: true,
+        };
+        this.setOptions(options);
+    }
+    setOptions(options){
+        Object.assign(this.options, options);
+        this._followingAdjust();
+    }
+    toElement(el) {
+        this.unfollow();
+        this._toElement(el);
+    }
+
+    /**
+     * @private
+     */
+    _toElement(el) {
+        const rect = el.getBoundingClientRect();
+        this.toClientRect(rect);
+    }
+
+    /**
+     * @private
+     * @param {DomRect} rect
+     */
+    toClientRect(rect){
+        /* margin can be done with css? would be better so we can use differen units */
+        if (this.options.margin) {
+            const margin = this.options.margin
+            rect = {
+                top:    rect.top    - margin,
+                bottom: rect.bottom + margin,
+                left:   rect.left   - margin,
+                right:  rect.right  + margin,
+                height: rect.height + margin*2,
+                width:  rect.width  + margin*2,
+            };
+        }
+        let viewport = { // viewport relative to the layer
+            top: 0,
+            left: 0,
+        };
+
+        let position = getComputedStyle(this.el).getPropertyValue('position');
+        if (position !== 'fixed') {
+            let root = offsetParent(this.el);
+            if (root) {
+                // if (!root) root = document.documentElement; // make no sense
+                viewport = root.getBoundingClientRect();
+                rect = {
+                    top:    rect.top    - viewport.top,
+                    bottom: rect.bottom - viewport.top,
+                    left:   rect.left   - viewport.left,
+                    right:  rect.right  - viewport.left,
+                    width:  rect.width,
+                    height: rect.height,
+                };
+            }
+        }
+        // start
+        let placeY = this.options.y;
+        let placeX = this.options.x;
+
+        const innerWidth  = document.documentElement.clientWidth;
+        const innerHeight = document.documentElement.clientHeight;
+
+        const layerWidth  = this.el.offsetWidth;
+        const layerHeight = this.el.offsetHeight;
+
+        let x = 0;
+        if (placeX==='prepend') x = rect.left;
+        if (placeX==='after')   x = rect.right;
+        if (this.options.switchSide && x + layerWidth + viewport.left > innerWidth) placeX = placeX === 'prepend' ? 'append' : 'before';
+        if (placeX==='before')  x = rect.left  - layerWidth;
+        if (placeX==='append')  x = rect.right - layerWidth;
+        if (x < -viewport.left) x = placeX === 'before' ? rect.right : rect.left;
+        if (placeX==='center')  x = rect.right - rect.width/2 - layerWidth/2;
+
+        let y = 0;
+        if (placeY==='prepend') y = rect.top;
+        if (placeY==='after')   y = rect.bottom;
+        if (this.options.switchSide && y + layerHeight + viewport.top > innerHeight) placeY = placeY === 'prepend' ? 'append' : 'before';
+        if (placeY==='before')  y = rect.top    - layerHeight;
+        if (placeY==='append')  y = rect.bottom - layerHeight;
+        if (y < -viewport.top)  y = placeY === 'before' ? rect.bottom : rect.top;
+        if (placeY==='center')  y = rect.top + rect.height/2 - layerHeight/2;
+
+        if (this.options.stayInWindow) {
+            x = clamp(x, -viewport.left, innerWidth  - viewport.left - layerWidth);
+            y = clamp(y, -viewport.top,  innerHeight - viewport.top  - layerHeight);
+        }
+
+        if (position === 'absolute') {
+            x += scrollX;
+            y += scrollY;
+        }
+
+        requestAnimationFrame(()=>{
+            this.el.style.top  = y + 'px';
+            this.el.style.left = x + 'px';
+        });
+
+        this.positionX = placeX;
+        this.positionY = placeY;
+    }
+
+    // follow:
+    followElement(el){
+        if (this.following === el) return;
+        if (!el) return this.unfollow();
+        this.following = el;
+        clearInterval(this.followInterval);
+        this.followInterval = setInterval(this._followingAdjust,200);
+        this._addAndRemoveListeners(true);
+        this._followingAdjust();
+    }
+    unfollow(){
+        this.following = null;
+        clearInterval(this.followInterval);
+        this._addAndRemoveListeners(false);
+    }
+
+    _addAndRemoveListeners(add){
+        const method = add ? 'addEventListener' : 'removeEventListener';
+        window[method]('resize',this._followingAdjust,{passive:true});
+        document[method]('mousemove',this._followingAdjust,{passive:true});
+        document[method]('mouseup',this._followingAdjust,{passive:true});
+        document[method]('input',this._followingAdjust,{passive:true, capture:true});
+        document[method]('scroll',this._followingAdjust,{passive:true, capture:true});
+    }
+    _followingAdjust(){
+        const run = this.following && this.el.parentNode && this.following.parentNode && this.el.offsetWidth && this.following.offsetWidth;
+        run ? this._toElement(this.following) : this.unfollow();
+    }
+};
+
+
+const offsetParent = (el) => {
+    let parent = el.offsetParent;
+    if (parent === document.body) {
+        let position = getComputedStyle(parent).getPropertyValue('position');
+        if (position === 'static') parent = null;
+    }
+    return parent;
+}
+
+const clamp=(value, min, max) => value < min ? min : value > max ? max : value;

package/js/Placer/README.md

@@ -1,26 +1,24 @@
 # Placer.js
-Absolute place elements relative to others
+Positions elements relative to a target, auto-adjusting on move or resize.
 
 ## Usage
 
 ```js
-import {Placer} from "../Placer.js";
-
-let placer = new Placer(moverEl, {
-    x:'after',
-    y:'after',
-    margin: 0,
-    stayInWindow: true,
-    switchSide: true,
-});
-
+let placer = new u2_Placer(moverEl, {
+    x:'after',
+    y:'after',
+    margin: 0,
+    stayInWindow: true,
+    switchSide: true,
+});
+
 placer.toElement(target);
 ```
 
 ```html
-<div id=moverEl style="position:absolute">move to</div>
-<button id=target>
-    move to me
+<div id=moverEl style="position:absolute">move to</div>
+<button id=target>
+    move to me
 </button>
 ```
 
@@ -47,13 +45,13 @@ placer.followElement(element); // place moverEl relative to element and follow i
 ## Install
 
 ```js
-import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/js/Placer/Placer.min.js"
+import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@main/js/Placer/Placer.js"
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/js/Placer/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/js/Placer/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/js/Placer/tests/minimal.html)  
 
 ## About
 

package/js/PointerObserver/PointerObserver-no-scroll.js

@@ -0,0 +1,146 @@
+
+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);
+
+
+		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.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;
+		}
+		
+		// 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.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);
+// 	}
+// },