The Deadlock Wiki

User:Monster Domosed/common.js: Difference between revisions

Browse history interactively
← Older editNewer edit →

Monster Domosed (talk | contribs)

2 user groups
4,611 edits
No edit summary
No edit summary
Line 21: Line 21:
         /* ---- config ---- */
         /* ---- config ---- */
         var imageUrl    = el.dataset.image        || '',
         var imageUrl    = el.dataset.image        || '',
             image2dUrl  = el.dataset.imageFlat    || '',   // data-image-flat
             image2dUrl  = el.dataset.imageFlat    || '',
             icon2dUrl  = el.dataset.iconFlat    || '',   // data-icon-flat
             icon2dUrl  = el.dataset.iconFlat    || '',
             icon3dUrl  = el.dataset.iconStereo  || '',   // data-icon-stereo
             icon3dUrl  = el.dataset.iconStereo  || '',
             iconRotUrl  = el.dataset.iconRotate  || '',   // data-icon-rotate
             iconRotUrl  = el.dataset.iconRotate  || '',
             fw          = +el.dataset.frameWidth  || 300,
             fw          = +el.dataset.frameWidth  || 300,
             fh          = +el.dataset.frameHeight || 400,
             fh          = +el.dataset.frameHeight || 400,
Line 78: Line 78:


         /* ============================================================
         /* ============================================================
           MODE TOGGLE (top-right, built entirely in JS)
           MODE TOGGLE — single button, swaps icon on click
           ============================================================ */
           ============================================================ */
         var btn2d = null, btn3d = null;
         var toggleBtn = null,
            iconImg2d = null,
            iconImg3d = null;


         if (image2dUrl) {
         if (image2dUrl) {
             var toggle = document.createElement('div');
             toggleBtn = document.createElement('span');
             toggle.className = 'rm-mode-toggle';
             toggleBtn.className = 'rm-mode-toggle';
            toggleBtn.setAttribute('role', 'button');
            toggleBtn.setAttribute('tabindex', '0');
            toggleBtn.title = 'Switch to 2D';


             // 2D button
             // Create both icon images, show only one at a time
            btn2d = document.createElement('span');
            btn2d.className = 'rm-mode-btn rm-mode-2d';
            btn2d.setAttribute('role', 'button');
            btn2d.setAttribute('tabindex', '0');
            btn2d.title = '2D View';
             if (icon2dUrl) {
             if (icon2dUrl) {
                 btn2d.appendChild(makeImg(icon2dUrl, '2D', 'rm-mode-icon'));
                 iconImg2d = makeImg(icon2dUrl, '2D', 'rm-mode-icon rm-icon-2d');
             } else {
             }
                 btn2d.textContent = '2D';
            if (icon3dUrl) {
                 iconImg3d = makeImg(icon3dUrl, '3D', 'rm-mode-icon rm-icon-3d');
                iconImg3d.style.display = 'none'; // hidden initially (3D is active, show 2D icon)
             }
             }


             // 3D button (active by default)
             // In 3D mode → show 2D icon (to switch TO 2D)
             btn3d = document.createElement('span');
             // In 2D mode → show 3D icon (to switch TO 3D)
             btn3d.className = 'rm-mode-btn rm-mode-3d rm-active';
             if (iconImg2d) toggleBtn.appendChild(iconImg2d);
             btn3d.setAttribute('role', 'button');
             if (iconImg3d) toggleBtn.appendChild(iconImg3d);
            btn3d.setAttribute('tabindex', '0');
 
             btn3d.title = '3D View';
             // Text fallback if no icons
             if (icon3dUrl) {
             if (!icon2dUrl && !icon3dUrl) {
                 btn3d.appendChild(makeImg(icon3dUrl, '3D', 'rm-mode-icon'));
                 toggleBtn.textContent = '2D';
            } else {
                btn3d.textContent = '3D';
             }
             }


            toggle.appendChild(btn2d);
             el.appendChild(toggleBtn);
            toggle.appendChild(btn3d);
             el.appendChild(toggle);
         }
         }


         /* ============================================================
         /* ============================================================
           ROTATION ICON  (bottom-right, built in JS)
           ROTATION ICON  (bottom-right)
           ============================================================ */
           ============================================================ */
         if (iconRotUrl) {
         if (iconRotUrl) {
Line 152: Line 150:
             }
             }


             if (btn2d && btn3d) {
            // Swap the visible icon
                 btn2d.classList.toggle('rm-active', is2D);
             if (iconImg2d && iconImg3d) {
                 btn3d.classList.toggle('rm-active', !is2D);
                 // 2D mode active → show 3D icon (to switch back)
                // 3D mode active → show 2D icon (to switch to 2D)
                iconImg2d.style.display = is2D ? 'none' : '';
                 iconImg3d.style.display = is2D ? '' : 'none';
            }
 
            // Update title
            if (toggleBtn) {
                toggleBtn.title = is2D ? 'Switch to 3D' : 'Switch to 2D';
 
                // Text fallback
                if (!icon2dUrl && !icon3dUrl) {
                    toggleBtn.textContent = is2D ? '3D' : '2D';
                }
             }
             }
         }
         }


         if (btn2d) btn2d.addEventListener('click', function () { setMode('2d'); });
         if (toggleBtn) {
         if (btn3d) btn3d.addEventListener('click', function () { setMode('3d'); });
            toggleBtn.addEventListener('click', function () {
                setMode(is2D ? '3d' : '2d');
            });
         }


         /* ============================================================
         /* ============================================================
Retrieved from "https://deadlock.wiki/User:Monster_Domosed/common.js"