Domination Earth

User:Stumblean/common.js: Difference between revisions

← Older editNewer edit →
Stumblean (talk | contribs)
Autopatrolled users, Bureaucrats, Confirmed users, Interface administrators, Rollbackers, Administrators
115 edits
No edit summary
Tags: Mobile edit Mobile web edit Advanced mobile edit
Stumblean (talk | contribs)
Autopatrolled users, Bureaucrats, Confirmed users, Interface administrators, Rollbackers, Administrators
115 edits
No edit summary
Tags: Mobile edit Mobile web edit Advanced mobile edit
Line 4: Line 4:
     const menu = document.createElement("div");
     const menu = document.createElement("div");
     menu.id = "mahitoMenu";
     menu.id = "mahitoMenu";
     menu.style.position = "fixed";
     Object.assign(menu.style, {
    menu.style.top = "20px";
        position: "fixed",
    menu.style.right = "20px";
        top: "20px",
    menu.style.padding = "10px";
        right: "20px",
    menu.style.backgroundColor = "#111";
        padding: "10px",
    menu.style.color = "#fff";
        backgroundColor: "#111",
    menu.style.border = "2px solid #666";
        color: "#fff",
    menu.style.zIndex = "9999";
        border: "2px solid #666",
    menu.style.fontFamily = "monospace";
        zIndex: "9999",
    menu.style.borderRadius = "10px";
        fontFamily: "monospace",
    menu.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
        borderRadius: "10px",
    menu.style.userSelect = "none";
        boxShadow: "0 0 10px rgba(0,0,0,0.5)",
    menu.style.touchAction = "none";
        userSelect: "none",
    menu.style.width = "auto";
        touchAction: "none",
        transition: "transform 0.3s ease, opacity 0.3s ease"
    });


     // Header
     // Header
     const header = document.createElement("div");
     const header = document.createElement("div");
     header.style.cursor = "grab";
     Object.assign(header.style, {
    header.style.display = "flex";
        cursor: "grab",
    header.style.justifyContent = "space-between";
        display: "flex",
    header.style.alignItems = "center";
        justifyContent: "space-between",
    header.style.marginBottom = "8px";
        alignItems: "center",
        marginBottom: "8px"
    });


     const title = document.createElement("div");
     const title = document.createElement("div");
Line 34: Line 38:
     const minimizeBtn = document.createElement("button");
     const minimizeBtn = document.createElement("button");
     minimizeBtn.textContent = "➖";
     minimizeBtn.textContent = "➖";
     minimizeBtn.style.background = "#333";
     Object.assign(minimizeBtn.style, {
    minimizeBtn.style.color = "#fff";
        background: "#333",
    minimizeBtn.style.border = "none";
        color: "#fff",
    minimizeBtn.style.cursor = "pointer";
        border: "none",
    minimizeBtn.style.marginLeft = "10px";
        cursor: "pointer",
        marginLeft: "10px"
    });
     header.appendChild(minimizeBtn);
     header.appendChild(minimizeBtn);
     menu.appendChild(header);
     menu.appendChild(header);
Line 44: Line 50:
     // Content
     // Content
     const content = document.createElement("div");
     const content = document.createElement("div");
     const openBtn = document.createElement("button");
     const openBtn = document.createElement("button");
     openBtn.textContent = "Open Explanation";
     openBtn.textContent = "Open Explanation";
     openBtn.style.background = "#444";
     Object.assign(openBtn.style, {
    openBtn.style.color = "#fff";
        background: "#444",
    openBtn.style.border = "none";
        color: "#fff",
    openBtn.style.padding = "5px 10px";
        border: "none",
    openBtn.style.cursor = "pointer";
        padding: "5px 10px",
        cursor: "pointer"
    });
     openBtn.onclick = function () {
     openBtn.onclick = function () {
         console.log("Open Explanation clicked");
         console.log("Open Explanation clicked");
Line 59: Line 66:
     document.body.appendChild(menu);
     document.body.appendChild(menu);


     // Minimized image element (hidden at first)
     // Minimized icon
     const minimizedIcon = document.createElement("img");
     const minimizedIcon = document.createElement("img");
     minimizedIcon.src = minimizedImgURL;
     minimizedIcon.src = minimizedImgURL;
     minimizedIcon.style.position = "fixed";
     Object.assign(minimizedIcon.style, {
    minimizedIcon.style.top = "20px";
        position: "fixed",
    minimizedIcon.style.right = "20px";
        top: "20px",
    minimizedIcon.style.width = "30px";
        right: "20px",
    minimizedIcon.style.height = "30px";
        width: "30px",
    minimizedIcon.style.borderRadius = "5px";
        height: "30px",
    minimizedIcon.style.cursor = "pointer";
        borderRadius: "5px",
    minimizedIcon.style.display = "none";
        cursor: "pointer",
    minimizedIcon.style.zIndex = "9999";
        display: "none",
        opacity: "0",
        zIndex: "9999",
        transition: "opacity 0.3s ease"
    });
     document.body.appendChild(minimizedIcon);
     document.body.appendChild(minimizedIcon);


     // Minimize logic
     // Minimize logic
     minimizeBtn.onclick = function () {
     minimizeBtn.onclick = function () {
         menu.style.display = "none";
         menu.style.transform = "scale(0.5)";
        minimizedIcon.style.display = "block";
        menu.style.opacity = "0";
        setTimeout(() => {
            menu.style.display = "none";
            menu.style.transform = "scale(1)";
            menu.style.opacity = "1";
            minimizedIcon.style.display = "block";
            requestAnimationFrame(() => {
                minimizedIcon.style.opacity = "1";
            });
        }, 300);
     };
     };


     // Restore logic
     // Restore logic
     minimizedIcon.onclick = function () {
     minimizedIcon.onclick = function () {
         menu.style.display = "block";
         minimizedIcon.style.opacity = "0";
         minimizedIcon.style.display = "none";
         setTimeout(() => {
            minimizedIcon.style.display = "none";
            menu.style.display = "block";
        }, 300);
     };
     };


     // Dragging (mouse + touch)
     // Drag support (mouse + touch)
     let isDragging = false,
     let isDragging = false;
        offsetX = 0,
    let offsetX = 0;
        offsetY = 0;
    let offsetY = 0;


     function startDrag(x, y) {
     function startDrag(x, y) {
Line 110: Line 133:


     // Mouse events
     // Mouse events
     header.addEventListener("mousedown", e => {
     header.addEventListener("mousedown", function (e) {
         startDrag(e.clientX, e.clientY);
         startDrag(e.clientX, e.clientY);
         e.preventDefault();
         e.preventDefault();
     });
     });
     document.addEventListener("mousemove", e => doDrag(e.clientX, e.clientY));
     document.addEventListener("mousemove", function (e) {
        doDrag(e.clientX, e.clientY);
    });
     document.addEventListener("mouseup", stopDrag);
     document.addEventListener("mouseup", stopDrag);


     // Touch events
     // Touch events
     header.addEventListener("touchstart", e => {
     header.addEventListener("touchstart", function (e) {
         const touch = e.touches[0];
         const touch = e.touches[0];
         startDrag(touch.clientX, touch.clientY);
         startDrag(touch.clientX, touch.clientY);
         e.preventDefault();
         e.preventDefault();
     });
     });
     document.addEventListener("touchmove", e => {
     document.addEventListener("touchmove", function (e) {
         if (!isDragging) return;
         if (!isDragging) return;
         const touch = e.touches[0];
         const touch = e.touches[0];
Retrieved from "https://dominationearth.wikioasis.org/wiki/User:Stumblean/common.js"