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 1: Line 1:
/**
/**
  * Rotatable Model Viewer — with 2D / 3D toggle
  * Rotatable Model Viewer — with 2D / 3D toggle
  * All <img> elements are created here in JS to bypass MediaWiki's HTML sanitizer.
  * All <img> elements created in JS to bypass MediaWiki sanitizer.
  */
  */
(function () {
(function () {
Line 21: Line 21:
         /* ---- config ---- */
         /* ---- config ---- */
         var imageUrl    = el.dataset.image        || '',
         var imageUrl    = el.dataset.image        || '',
             image2dUrl  = el.dataset.image2d      || '',
             image2dUrl  = el.dataset.imageFlat    || '',   // data-image-flat
             icon2dUrl  = el.dataset.icon_2d      || el.dataset.icon2d  || '',
             icon2dUrl  = el.dataset.iconFlat    || '',   // data-icon-flat
             icon3dUrl  = el.dataset.icon_3d      || el.dataset.icon3d   || '',
             icon3dUrl  = el.dataset.iconStereo   || '',   // data-icon-stereo
             iconRotUrl  = el.dataset.icon_rotate  || el.dataset.iconRotate || '',
             iconRotUrl  = el.dataset.iconRotate   || '',   // data-icon-rotate
             fw          = +el.dataset.frameWidth  || 300,
             fw          = +el.dataset.frameWidth  || 300,
             fh          = +el.dataset.frameHeight || 400,
             fh          = +el.dataset.frameHeight || 400,
Line 46: Line 46:


         /* ============================================================
         /* ============================================================
           3D SPRITE STRIP (<img> created in JS)
           3D SPRITE STRIP
           ============================================================ */
           ============================================================ */
         var img      = makeImg(imageUrl, '', 'rm-strip');
         var img      = makeImg(imageUrl, '', 'rm-strip');
Line 69: Line 69:


         /* ============================================================
         /* ============================================================
           2D STATIC IMAGE (<img> created in JS)
           2D STATIC IMAGE
           ============================================================ */
           ============================================================ */
         var staticImg = null;
         var staticImg = null;
Line 78: Line 78:


         /* ============================================================
         /* ============================================================
           MODE TOGGLE  (top-right, built in JS)
           MODE TOGGLE  (top-right, built entirely in JS)
           ============================================================ */
           ============================================================ */
         var btn2d = null, btn3d = null;
         var btn2d = null, btn3d = null;
Line 86: Line 86:
             toggle.className = 'rm-mode-toggle';
             toggle.className = 'rm-mode-toggle';


            // 2D button
             btn2d = document.createElement('span');
             btn2d = document.createElement('span');
             btn2d.className = 'rm-mode-btn rm-mode-2d';
             btn2d.className = 'rm-mode-btn rm-mode-2d';
Line 97: Line 98:
             }
             }


            // 3D button (active by default)
             btn3d = document.createElement('span');
             btn3d = document.createElement('span');
             btn3d.className = 'rm-mode-btn rm-mode-3d rm-active';
             btn3d.className = 'rm-mode-btn rm-mode-3d rm-active';
Line 130: Line 132:
             img.style.left = -(cur * fw) + 'px';
             img.style.left = -(cur * fw) + 'px';
         }
         }
         function nudge(d) { if (!is2D) { show(cur - d); hideHint(); } }
         function nudge(d) { if (!is2D) { show(cur + d); hideHint(); } }
         function reset()  { show(startFrame); }
         function reset()  { show(startFrame); }
         function hideHint() { if (hint) hint.classList.add('rm-hidden'); }
         function hideHint() { if (hint) hint.classList.add('rm-hidden'); }
Line 227: Line 229:
                 bR = wrap.querySelector('.rm-btn-right'),
                 bR = wrap.querySelector('.rm-btn-right'),
                 bO = wrap.querySelector('.rm-btn-reset');
                 bO = wrap.querySelector('.rm-btn-reset');
             if (bL) bL.addEventListener('click', function () { nudge(1); });
             if (bL) bL.addEventListener('click', function () { nudge(-1); });
             if (bR) bR.addEventListener('click', function () { nudge(-1); });
             if (bR) bR.addEventListener('click', function () { nudge( 1); });
             if (bO) bO.addEventListener('click', reset);
             if (bO) bO.addEventListener('click', reset);
         }
         }
Retrieved from "https://deadlock.wiki/User:Monster_Domosed/common.js"