User:Stumblean/common.js: Difference between revisions
No edit summary Tags: Mobile edit Mobile web edit Advanced mobile edit |
No edit summary Tags: Mobile edit Mobile web edit Advanced mobile edit |
||
Line 12: | Line 12: | ||
const settings = JSON.parse(localStorage.getItem("mahitoMenuSettings")) || defaultSettings; | const settings = JSON.parse(localStorage.getItem("mahitoMenuSettings")) || defaultSettings; | ||
function saveSettings() { | function saveSettings() { | ||
localStorage.setItem("mahitoMenuSettings", JSON.stringify(settings)); | localStorage.setItem("mahitoMenuSettings", JSON.stringify(settings)); | ||
Line 34: | Line 33: | ||
userSelect: "none" | userSelect: "none" | ||
}); | }); | ||
// === DRAGGABLE LOGIC | |||
function makeDraggable(el) { | |||
let offsetX = 0, offsetY = 0, isDragging = false; | |||
el.addEventListener("mousedown", startDrag); | |||
el.addEventListener("touchstart", startDrag); | |||
function startDrag(e) { | |||
isDragging = true; | |||
const evt = e.type.startsWith("touch") ? e.touches[0] : e; | |||
offsetX = evt.clientX - el.offsetLeft; | |||
offsetY = evt.clientY - el.offsetTop; | |||
document.addEventListener("mousemove", onDrag); | |||
document.addEventListener("mouseup", stopDrag); | |||
document.addEventListener("touchmove", onDrag); | |||
document.addEventListener("touchend", stopDrag); | |||
} | |||
function onDrag(e) { | |||
if (!isDragging) return; | |||
const evt = e.type.startsWith("touch") ? e.touches[0] : e; | |||
el.style.left = evt.clientX - offsetX + "px"; | |||
el.style.top = evt.clientY - offsetY + "px"; | |||
el.style.right = "auto"; // prevent auto snapping | |||
} | |||
function stopDrag() { | |||
isDragging = false; | |||
document.removeEventListener("mousemove", onDrag); | |||
document.removeEventListener("mouseup", stopDrag); | |||
document.removeEventListener("touchmove", onDrag); | |||
document.removeEventListener("touchend", stopDrag); | |||
} | |||
} | |||
makeDraggable(menu); | |||
const header = document.createElement("div"); | const header = document.createElement("div"); | ||
Line 89: | Line 126: | ||
display: "none", | display: "none", | ||
cursor: "pointer", | cursor: "pointer", | ||
borderRadius: "6px", | borderRadius: "6px", | ||
width: settings.minimizedSize + "px", | width: settings.minimizedSize + "px", | ||
height: settings.minimizedSize + "px" | height: settings.minimizedSize + "px" | ||
Line 103: | Line 140: | ||
minimizedIcon.style.display = "block"; | minimizedIcon.style.display = "block"; | ||
}); | }); | ||
makeDraggable(minimizedIcon); // draggable icon too | |||
function makeButton(text, action) { | function makeButton(text, action) { |