132 lines
No EOL
3.7 KiB
JavaScript
132 lines
No EOL
3.7 KiB
JavaScript
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;
|
|
const bPad = document.body.offsetHeight - 72;
|
|
|
|
if (sPosX < lPad) {selected.style.left = lPad + "px"};
|
|
if (sPosX > rPad) {selected.style.left = rPad + "px"};
|
|
if (sPosY < tPad) {selected.style.top = tPad + "px"};
|
|
if (sPosY > bPad) {selected.style.top = bPad + "px"};
|
|
|
|
document.querySelectorAll("iframe").forEach(item => { item.style.pointerEvents = "all"; })
|
|
|
|
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) {
|
|
document.querySelectorAll("iframe").forEach(item => { item.style.pointerEvents = "none"; })
|
|
zIndex ++;
|
|
selected.style.zIndex = zIndex;
|
|
}
|
|
mouseDown ++;
|
|
});
|
|
|
|
addEventListener("mousemove", 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.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";
|
|
head.innerHTML = "<p>" + title + "</p><button onclick='clampPos(); this.parentNode.parentNode.remove()'>x</button>";
|
|
|
|
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";
|
|
win.style.top = ((window.innerHeight / 2) - (Number(height.replace("px","")) / 2) + window.scrollY) + "px";
|
|
|
|
zIndex ++;
|
|
win.style.zIndex = zIndex;
|
|
|
|
document.body.appendChild(win);
|
|
} |