@websline/cms-view-utils 0.25.0 → 1.0.0-alpha.0

package/src/utils/iframeDragHandler.js

@@ -1,222 +0,0 @@
-// Handler for mouse follower behavior inside the iframe
-class IframeDragHandler {
-	constructor() {
-		this.mouseFollowerWidth = 48;
-		this.mouseFollowerHeight = 48;
-
-		this.handleMouseMove = (event) => {
-			this.lastMouseEvent = event;
-			this.updateMouseFollowerPosition(event);
-			this.checkMouseLeaveFrame();
-		};
-
-		this.handleScroll = () => {
-			if (!this.lastMouseEvent) return;
-			this.updateMouseFollowerPosition(this.lastMouseEvent);
-		};
-
-		window.addEventListener("message", (event) => {
-			const { owner, type } = event.data;
-			if (owner !== "dragging") return;
-
-			if (type === "startDragging") {
-				this.enableDragging();
-			}
-
-			if (type === "stopDragging") {
-				this.disableDragging();
-			}
-
-			if (type === "enterIframeWhileDragging") {
-				this.showMouseFollower();
-			}
-
-			if (type === "leaveIframeWhileDragging") {
-				this.hideMouseFollower();
-			}
-		});
-	}
-
-	enableDragging() {
-		this.addStopDraggingHandler();
-		this.addMouseFollowerToDOM();
-		this.addMouseFollowerHandler();
-		this.highlightDropzone();
-		this.addDropListeners();
-		this.addDraggingClass();
-		window.addEventListener("scroll", this.handleScroll, true);
-	}
-
-	disableDragging() {
-		this.removeStopDraggingHandler();
-		this.removeMouseFollowerFromDOM();
-		this.removeMouseFollowerHandler();
-		this.unhighlightDropzone();
-		this.removeDropListeners();
-		this.removeDraggingClass();
-		window.removeEventListener("scroll", this.handleScroll, true);
-		this.lastMouseEvent = null;
-	}
-
-	addStopDraggingHandler() {
-		window.addEventListener("mouseup", this.stopDragging);
-	}
-
-	removeStopDraggingHandler() {
-		window.removeEventListener("mouseup", this.stopDragging);
-	}
-
-	stopDragging = () => {
-		this.sendParentMessage({
-			owner: "iframe",
-			type: "stopDragging",
-		});
-		this.removeStopDraggingHandler();
-	};
-
-	addMouseFollowerToDOM() {
-		if (this.mouseFollowerInDOM()) return;
-
-		const div = document.createElement("div");
-		div.className = "mouse-follower";
-
-		Object.assign(div.style, {
-			position: "absolute",
-			zIndex: "9999",
-			pointerEvents: "none",
-			left: `-${this.mouseFollowerWidth}px`,
-			top: `-${this.mouseFollowerHeight}px`,
-			width: this.mouseFollowerWidth + "px",
-			height: this.mouseFollowerHeight + "px",
-			background: "url(/drag-component.svg) no-repeat center center",
-		});
-
-		document.body.appendChild(div);
-	}
-
-	addMouseFollowerHandler() {
-		window.addEventListener("mousemove", this.handleMouseMove);
-	}
-
-	removeMouseFollowerHandler() {
-		window.removeEventListener("mousemove", this.handleMouseMove);
-	}
-
-	updateMouseFollowerPosition(event) {
-		const div = this.getMouseFollower();
-		if (div) {
-			div.style.left = `${event.clientX + window.scrollX - this.mouseFollowerWidth / 2}px`;
-			div.style.top = `${event.clientY + window.scrollY - this.mouseFollowerHeight / 2}px`;
-		}
-	}
-
-	checkMouseLeaveFrame() {
-		const follower = this.getMouseFollower();
-		if (!follower) return;
-
-		const rect = follower.getBoundingClientRect();
-		const margin = 1;
-
-		const outOfBounds =
-			rect.left < -margin ||
-			rect.top < -margin ||
-			rect.right > window.innerWidth + margin ||
-			rect.bottom > window.innerHeight + margin;
-
-		if (outOfBounds && !follower.dataset._wasOutside) {
-			follower.dataset._wasOutside = "true";
-			this.hideMouseFollower();
-			this.sendParentMessage({ owner: "iframe", type: "leaveIframe" });
-		} else if (!outOfBounds && follower.dataset._wasOutside === "true") {
-			delete follower.dataset._wasOutside;
-		}
-	}
-
-	hideMouseFollower() {
-		const div = this.getMouseFollower();
-		if (div) {
-			div.style.display = "none";
-		}
-	}
-
-	showMouseFollower() {
-		const div = this.getMouseFollower();
-		if (div) {
-			div.style.display = "block";
-		}
-	}
-
-	removeMouseFollowerFromDOM() {
-		const div = this.getMouseFollower();
-		if (div) {
-			div.remove();
-		}
-	}
-
-	mouseFollowerInDOM() {
-		return !!this.getMouseFollower();
-	}
-
-	getMouseFollower() {
-		return document.querySelector(".mouse-follower");
-	}
-
-	sendParentMessage(message) {
-		window.parent.postMessage(message, "*");
-	}
-
-	addDropListeners() {
-		const dropzones = document.querySelectorAll("[data-drop-zone]");
-
-		dropzones.forEach((dropzone) => {
-			dropzone.addEventListener("mouseup", this.commitDrop);
-		});
-	}
-
-	removeDropListeners() {
-		const dropzones = document.querySelectorAll("[data-drop-zone]");
-
-		dropzones.forEach((dropzone) => {
-			dropzone.removeEventListener("mouseup", this.commitDrop);
-		});
-	}
-
-	commitDrop = (event) => {
-		event.preventDefault();
-		const dropPosition = parseInt(
-			event.target.getAttribute("data-drop-zone-index") || "0"
-		);
-
-		this.sendParentMessage({
-			owner: "iframe",
-			position: dropPosition,
-			type: "commitDrop",
-		});
-	};
-
-	highlightDropzone() {
-		const dropzones = document.querySelectorAll("[data-drop-zone]");
-
-		dropzones.forEach((dropzone) => {
-			dropzone.classList.add("highlight");
-		});
-	}
-
-	unhighlightDropzone() {
-		const dropzones = document.querySelectorAll("[data-drop-zone]");
-
-		dropzones.forEach((dropzone) => {
-			dropzone.classList.remove("highlight");
-		});
-	}
-
-	addDraggingClass() {
-		document.body.classList.add("cms-editor-is-dragging");
-	}
-
-	removeDraggingClass() {
-		document.body.classList.remove("cms-editor-is-dragging");
-	}
-}
-
-export default IframeDragHandler;

package/src/utils/index.js

@@ -1,2 +0,0 @@
-export * from "./iframeDragHandler";
-export * from "./dragDropUtils";