@cocreate/position 1.14.0 → 1.16.0

package/CONTRIBUTING.md

@@ -13,7 +13,7 @@ Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-position)
 ```
 git position https://github.com/contributor/CoCreate-position.git
 cd CoCreate-position
-git remote add upstream https://github.com/CoCreate-app/CoCreate-position.git
+git remote add upstream https://gitlab.com/cocreatejs/CoCreate-position.git
 ```
 
 ## Create a Topic Branch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/position",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "description": "Make any element draggable and movable. Customizable via attributes, great for popups, alerts, multitasking and displaying multiple views.",
   "keywords": [
     "position",
@@ -22,7 +22,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CoCreate-app/CoCreate-position.git"
+    "url": "git+https://gitlab.com/cocreatejs/CoCreate-position.git"
   },
   "author": "CoCreate LLC",
   "license": "MIT",
@@ -36,10 +36,11 @@
   },
   "main": "./src/index.js",
   "dependencies": {
-    "@cocreate/observer": "^1.22.0"
+    "@cocreate/observer": "^1.23.0",
+    "@cocreate/utils": "^1.54.0"
   },
   "devDependencies": {
-    "@cocreate/webpack": "^1.8.0"
+    "@cocreate/webpack": "^1.9.0"
   },
   "allowScripts": {
     "@cocreate/observer@1.19.0": true,

package/src/index.js

@@ -1,10 +1,14 @@
 import observer from "@cocreate/observer";
+import { queryElements } from "@cocreate/utils";
 import position from "./position";
 import "./index.css";
 
+const positionTriggers = new WeakSet();
+
 function init() {
 	let elements = document.querySelectorAll("[moveable], [positionable]");
 	initElements(elements);
+	initPositionTriggers(document.querySelectorAll("[position-query]"));
 }
 
 function initElements(elements) {
@@ -12,7 +16,26 @@ function initElements(elements) {
 }
 
 function initElement(element) {
-	element.position = new position(element, element.parentElement);
+	if (!element.position)
+		element.position = new position(element, element.parentElement);
+}
+
+function initPositionTriggers(elements) {
+	for (const trigger of elements) {
+		if (positionTriggers.has(trigger)) continue;
+		positionTriggers.add(trigger);
+		trigger.addEventListener("click", () => {
+			requestAnimationFrame(() => {
+				const targets = queryElements({ element: trigger, prefix: "position" });
+				const anchors = queryElements({ element: trigger, prefix: "position-anchor" });
+				const anchor = anchors[0] || trigger;
+				for (const target of targets) {
+					initElement(target);
+					target.position.place(anchor);
+				}
+			});
+		});
+	}
 }
 
 observer.init({
@@ -24,6 +47,16 @@ observer.init({
 	}
 });
 
+observer.init({
+	name: "positionQueryAddedNodes",
+	types: ["addedNodes", "attributes"],
+	selector: "[position-query]",
+	attributeFilter: ["position-query"],
+	callback: (mutation) => {
+		initPositionTriggers([mutation.target]);
+	}
+});
+
 observer.init({
 	name: "positionAttributes",
 	types: ["attributes"],

package/src/position.js

@@ -37,6 +37,18 @@ function position(el, container, options) {
     this._selectElement()
 }
 
+const INTERACTIVE_SELECTOR = [
+    "a",
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "label",
+    "summary",
+    "[contenteditable]:not([contenteditable='false'])",
+    "[moveable-ignore]"
+].join(",");
+
 position.prototype = {
     constructor: position,
 
@@ -58,38 +70,60 @@ position.prototype = {
         if (this.dragHandle)
             positionableEl = this.dragHandle
 
+        this._documentMouseMove = function (e) {
+            if (!self.clickedInfo?.isMoving) return;
+            e.preventDefault();
+            self._onMove(e);
+        };
+        this._documentMouseUp = function (e) {
+            if (!self.clickedInfo?.isMoving) return;
+            self._onUp(e);
+            e.preventDefault();
+        };
+        this._documentTouchMove = function (e) {
+            if (!self.clickedInfo?.isMoving || !e.touches.length) return;
+            e.preventDefault();
+            self._onMove(e.touches[0]);
+        };
+        this._documentTouchEnd = function (e) {
+            if (!self.clickedInfo?.isMoving) return;
+            self._onUp(e.changedTouches?.[0]);
+        };
+        this._documentBlur = function () {
+            self._onUp();
+        };
+
         positionableEl.addEventListener('touchstart', function (e) {
             self._selectElement(e.detail.element)
             self._onDown(e.touches[0]);
+            if (self.clickedInfo?.isMoving) self._bindDocumentDrag();
         })
 
         positionableEl.addEventListener('mousedown', function (e) {
             self._selectElement(e.detail.element)
             self._onDown(e);
+            if (self.clickedInfo?.isMoving) self._bindDocumentDrag();
         })
 
-        positionableEl.addEventListener('mousemove', function (e) {
-            if (self.clickedInfo && self.clickedInfo.isMoving) {
-                e.preventDefault();
-                self._onMove(e);
-            }
-        });
-
-        positionableEl.addEventListener('mouseup', function (e) {
-            if (self.clickedInfo && self.clickedInfo.isMoving) {
-                self._onUp(e);
-                e.preventDefault();
-            }
-        }, true);
-
-        positionableEl.addEventListener('touchmove', function (e) {
-            self._onMove(e.touches[0]);
-        }, { passive: false });
+    },
 
-        positionableEl.addEventListener('touchend', function (e) {
-            self._onUp(e.touches[0]);
-        }, { passive: false });
+    _bindDocumentDrag: function () {
+        this._unbindDocumentDrag();
+        document.addEventListener('mousemove', this._documentMouseMove);
+        document.addEventListener('mouseup', this._documentMouseUp, true);
+        document.addEventListener('touchmove', this._documentTouchMove, { passive: false });
+        document.addEventListener('touchend', this._documentTouchEnd, true);
+        document.addEventListener('touchcancel', this._documentTouchEnd, true);
+        window.addEventListener('blur', this._documentBlur);
+    },
 
+    _unbindDocumentDrag: function () {
+        document.removeEventListener('mousemove', this._documentMouseMove);
+        document.removeEventListener('mouseup', this._documentMouseUp, true);
+        document.removeEventListener('touchmove', this._documentTouchMove);
+        document.removeEventListener('touchend', this._documentTouchEnd, true);
+        document.removeEventListener('touchcancel', this._documentTouchEnd, true);
+        window.removeEventListener('blur', this._documentBlur);
     },
 
     _isMovable() {
@@ -99,7 +133,105 @@ position.prototype = {
         return this.point.x > 0 && this.point.x < width && this.point.y > 0 && this.point.y < this.dragAreaHeight;
     },
 
+    place: function (anchor = this.el, options = {}) {
+        if (!anchor?.getBoundingClientRect) return;
+
+        const placement = options.placement ||
+            anchor.getAttribute("position-placement") ||
+            this.el.getAttribute("position-placement") ||
+            "bottom-start";
+        const offset = Number(options.offset ??
+            anchor.getAttribute("position-offset") ??
+            this.el.getAttribute("position-offset") ?? 8);
+        const padding = Number(options.padding ??
+            anchor.getAttribute("position-padding") ??
+            this.el.getAttribute("position-padding") ?? 8);
+        const collision = (options.collision ||
+            anchor.getAttribute("position-collision") ||
+            this.el.getAttribute("position-collision") ||
+            "flip shift").split(/[\s,]+/);
+
+        const anchorRect = anchor.getBoundingClientRect();
+        const elementRect = this.el.getBoundingClientRect();
+        const parentRect = this.container.getBoundingClientRect();
+        const isFixed = getComputedStyle(this.el).position === "fixed";
+        const boundary = isFixed
+            ? { left: 0, top: 0, right: innerWidth, bottom: innerHeight }
+            : parentRect;
+        let [side, align = "center"] = placement.split("-");
+
+        const getCoordinates = (currentSide) => {
+            let left;
+            let top;
+            if (currentSide === "top" || currentSide === "bottom") {
+                top = currentSide === "top"
+                    ? anchorRect.top - elementRect.height - offset
+                    : anchorRect.bottom + offset;
+                left = align === "start"
+                    ? anchorRect.left
+                    : align === "end"
+                        ? anchorRect.right - elementRect.width
+                        : anchorRect.left + (anchorRect.width - elementRect.width) / 2;
+            } else {
+                left = currentSide === "left"
+                    ? anchorRect.left - elementRect.width - offset
+                    : anchorRect.right + offset;
+                top = align === "start"
+                    ? anchorRect.top
+                    : align === "end"
+                        ? anchorRect.bottom - elementRect.height
+                        : anchorRect.top + (anchorRect.height - elementRect.height) / 2;
+            }
+            return { left, top };
+        };
+
+        let coordinates = getCoordinates(side);
+        if (collision.includes("flip")) {
+            const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
+            const overflows =
+                (side === "top" && coordinates.top < boundary.top + padding) ||
+                (side === "bottom" && coordinates.top + elementRect.height > boundary.bottom - padding) ||
+                (side === "left" && coordinates.left < boundary.left + padding) ||
+                (side === "right" && coordinates.left + elementRect.width > boundary.right - padding);
+            if (overflows) {
+                side = opposite[side] || side;
+                coordinates = getCoordinates(side);
+            }
+        }
+
+        if (collision.includes("shift")) {
+            coordinates.left = Math.min(
+                Math.max(coordinates.left, boundary.left + padding),
+                Math.max(boundary.left + padding, boundary.right - elementRect.width - padding)
+            );
+            coordinates.top = Math.min(
+                Math.max(coordinates.top, boundary.top + padding),
+                Math.max(boundary.top + padding, boundary.bottom - elementRect.height - padding)
+            );
+        }
+
+        this.el.style.right = "auto";
+        this.el.style.bottom = "auto";
+        this.el.style.left = (isFixed
+            ? coordinates.left
+            : coordinates.left - parentRect.left + this.container.scrollLeft) + "px";
+        this.el.style.top = (isFixed
+            ? coordinates.top
+            : coordinates.top - parentRect.top + this.container.scrollTop) + "px";
+        this.isSnap = false;
+        this.__setRectInfo();
+        this.createEvent("element-positioned");
+    },
+
     _onDown: function (e) {
+        // A title-bar style drag handle may contain controls. Those controls
+        // must retain their native click, focus, and file-picker behavior.
+        const interactive = e.target?.closest?.(INTERACTIVE_SELECTOR);
+        if (this.dragHandle && interactive && this.dragHandle.contains(interactive)) {
+            this.clickedInfo = null;
+            return;
+        }
+
         this.__getBoundStatus(e);
 
         this.clickedInfo = {
@@ -121,6 +253,7 @@ position.prototype = {
     },
 
     _onUp: function (e) {
+        this._unbindDocumentDrag();
         if (!this.clickedInfo) {
             return;
         }
@@ -346,4 +479,4 @@ position.prototype = {
     },
 }
 
-export default position;
+export default position;