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 1: Line 1:
(function() {
(function () {
    const minimizedImgURL = "https://files.catbox.moe/wk78nl.jpg";
 
     const menu = document.createElement("div");
     const menu = document.createElement("div");
     menu.id = "mahitoMenu";
     menu.id = "mahitoMenu";
Line 14: Line 16:
     menu.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
     menu.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
     menu.style.userSelect = "none";
     menu.style.userSelect = "none";
     menu.style.touchAction = "none"; // prevents weird scrolling glitches
     menu.style.touchAction = "none";
    menu.style.width = "auto";


     // Header for dragging and minimizing
     // Header
     const header = document.createElement("div");
     const header = document.createElement("div");
     header.style.cursor = "grab";
     header.style.cursor = "grab";
Line 36: Line 39:
     minimizeBtn.style.cursor = "pointer";
     minimizeBtn.style.cursor = "pointer";
     minimizeBtn.style.marginLeft = "10px";
     minimizeBtn.style.marginLeft = "10px";
    minimizeBtn.onclick = function() {
        content.style.display = content.style.display === "none" ? "block" : "none";
    };
     header.appendChild(minimizeBtn);
     header.appendChild(minimizeBtn);
     menu.appendChild(header);
     menu.appendChild(header);


    // Content
     const content = document.createElement("div");
     const content = document.createElement("div");


Line 51: Line 52:
     openBtn.style.padding = "5px 10px";
     openBtn.style.padding = "5px 10px";
     openBtn.style.cursor = "pointer";
     openBtn.style.cursor = "pointer";
     openBtn.onclick = function() {
     openBtn.onclick = function () {
         console.log("Open Explanation clicked");
         console.log("Open Explanation clicked");
     };
     };
     content.appendChild(openBtn);
     content.appendChild(openBtn);
     menu.appendChild(content);
     menu.appendChild(content);
     document.body.appendChild(menu);
     document.body.appendChild(menu);


     // Dragging support for mouse + touch
    // Minimized image element (hidden at first)
     let isDragging = false, offsetX = 0, offsetY = 0;
    const minimizedIcon = document.createElement("img");
    minimizedIcon.src = minimizedImgURL;
    minimizedIcon.style.position = "fixed";
    minimizedIcon.style.top = "20px";
    minimizedIcon.style.right = "20px";
    minimizedIcon.style.width = "30px";
    minimizedIcon.style.height = "30px";
    minimizedIcon.style.borderRadius = "5px";
    minimizedIcon.style.cursor = "pointer";
    minimizedIcon.style.display = "none";
    minimizedIcon.style.zIndex = "9999";
    document.body.appendChild(minimizedIcon);
 
    // Minimize logic
    minimizeBtn.onclick = function () {
        menu.style.display = "none";
        minimizedIcon.style.display = "block";
    };
 
    // Restore logic
    minimizedIcon.onclick = function () {
        menu.style.display = "block";
        minimizedIcon.style.display = "none";
    };
 
     // Dragging (mouse + touch)
     let isDragging = false,
        offsetX = 0,
        offsetY = 0;


     function startDrag(x, y) {
     function startDrag(x, y) {
Line 89: Line 117:
     document.addEventListener("mouseup", stopDrag);
     document.addEventListener("mouseup", stopDrag);


     // Touch events (for mobile)
     // Touch events
     header.addEventListener("touchstart", e => {
     header.addEventListener("touchstart", e => {
         const touch = e.touches[0];
         const touch = e.touches[0];