User:Stumblean/common.js: Difference between revisions

Stumblean (talk | contribs)
No edit summary
Tags: Mobile edit Mobile web edit Advanced mobile edit
Stumblean (talk | contribs)
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", // rounded square
     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) {