i-eat.rocks/site/drag.js

132 lines
3.7 KiB
JavaScript
Raw Normal View History

2024-08-15 22:09:42 +00:00
let mousedown = 0;
let selected = null;
let zIndex = 0
/* CLAMP */
function clampPos() {
if (selected) {
const sPosX = Number(selected.style.left.replace("px", ""));
const sPosY = Number(selected.style.top.replace("px", ""));
const lPad = -selected.offsetWidth / 2;
const rPad = window.innerWidth - selected.offsetWidth / 2;
const tPad = 0;
2024-08-18 03:17:43 +00:00
const bPad = document.body.offsetHeight - 72;
2024-08-15 22:09:42 +00:00
if (sPosX < lPad) {selected.style.left = lPad + "px"};
if (sPosX > rPad) {selected.style.left = rPad + "px"};
if (sPosY < tPad) {selected.style.top = tPad + "px"};
2024-08-15 23:51:36 +00:00
if (sPosY > bPad) {selected.style.top = bPad + "px"};
2024-08-15 22:09:42 +00:00
2024-08-16 05:45:22 +00:00
document.querySelectorAll("iframe").forEach(item => { item.style.pointerEvents = "all"; })
2024-08-15 22:09:42 +00:00
selected = null;
if (mouseDown > 0) {mouseDown--;};
}
}
addEventListener("touchend", clampPos);
addEventListener("mouseup", clampPos);
/* DESKTOP */
let mouseDown = 0
addEventListener("mousedown", event => {
const t = event.target
if (t.classList.contains("drag")) {
selected = t.parentElement;
};
if (t.parentElement.classList.contains("drag")) {
selected = t.parentElement.parentElement;
};
if (selected) {
2024-08-16 05:45:22 +00:00
document.querySelectorAll("iframe").forEach(item => { item.style.pointerEvents = "none"; })
2024-08-15 22:09:42 +00:00
zIndex ++;
selected.style.zIndex = zIndex;
}
mouseDown ++;
});
addEventListener("mousemove", event => {
2024-08-16 05:45:22 +00:00
if (selected) {
2024-08-15 22:09:42 +00:00
let curL = selected.style.left.replace("px", "");
let curT = selected.style.top.replace("px", "");
curL = Number(curL);
curT = Number(curT);
selected.style.left = (curL + event.movementX) + "px";
selected.style.top = (curT + event.movementY) + "px";
}
})
/* MOBILE */
let initialTouchPosition = { x: 0, y: 0 };
addEventListener("touchstart", event => {
const t = event.target;
if (t.classList.contains("drag")) {
selected = t.parentElement;
}
if (t.parentElement.classList.contains("drag")) {
selected = t.parentElement.parentElement;
}
if (selected) {
zIndex ++;
selected.style.zIndex = zIndex;
}
initialTouchPosition = {
x: event.touches[0].clientX,
y: event.touches[0].clientY
};
});
addEventListener("touchmove", event => {
console.log(event)
if (selected) {
let curL = selected.style.left.replace("px", "");
let curT = selected.style.top.replace("px", "");
curL = Number(curL);
curT = Number(curT);
selected.style.left = (curL + event.touches[0].clientX - initialTouchPosition.x) + "px";
selected.style.top = (curT + event.touches[0].clientY - initialTouchPosition.y) + "px";
initialTouchPosition = {
x: event.touches[0].clientX,
y: event.touches[0].clientY
};
}
});
/* CREATE WINDOW */
function createWindow(url, title, width, height) {
const win = document.createElement("div");
win.className = "window";
const head = document.createElement("div");
head.classList = "header drag";
2024-08-16 05:45:22 +00:00
head.innerHTML = "<p>" + title + "</p><button onclick='clampPos(); this.parentNode.parentNode.remove()'>x</button>";
2024-08-15 22:09:42 +00:00
const frame = `<iframe class='content' src='${url}' width='${width}' height='${height}'></iframe>`;
win.appendChild(head);
win.innerHTML += frame;
win.style.left = ((window.innerWidth / 2) - (Number(width.replace("px","")) / 2)) + "px";
2024-08-15 23:09:13 +00:00
win.style.top = ((window.innerHeight / 2) - (Number(height.replace("px","")) / 2) + window.scrollY) + "px";
2024-08-15 22:09:42 +00:00
zIndex ++;
win.style.zIndex = zIndex;
document.body.appendChild(win);
2024-08-16 00:13:37 +00:00
}