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
Hydrate .model-fallback into the interactive model viewer (via update-page on Domosed MCP)
Line 128: Line 128:


         preview.appendChild(button);
         preview.appendChild(button);
    }
    /**
    * Builds the interactive .model-placeholder markup (preview <img>, hint,
    * name) from the data attributes carried by a no-JS .model-fallback block.
    * The preview image URL is fetched from the wiki API asynchronously.
    */
    function buildPlaceholder(data) {
        const model = data.model;
        const name = data.name || model;
        const altImage = data.altImage || model;
        const sizeMatch = String(data.modelsize || '').match(/(\d+)/);
        const size = sizeMatch ? parseInt(sizeMatch[1], 10) : 300;
        const el = document.createElement('div');
        el.className = 'model-placeholder model_size_' + size + 'px';
        el.dataset.model = model;
        el.dataset.name = name;
        const preview = document.createElement('div');
        preview.className = 'model-preview';
        const img = document.createElement('img');
        img.className = 'model-preview-img';
        img.alt = name;
        preview.appendChild(img);
        el.appendChild(preview);
        const hint = document.createElement('div');
        hint.className = 'model-hint';
        hint.textContent = 'Click to view';
        preview.appendChild(hint);
        const nameEl = document.createElement('div');
        nameEl.className = 'model-name';
        nameEl.textContent = name;
        el.appendChild(nameEl);
        if (altImage) {
            getFileUrl(altImage + '.png').then(function (url) {
                if (url && img.isConnected) {
                    img.src = url;
                }
            });
        }
        return el;
    }
    /**
    * Upgrades a no-JS .model-fallback block into the interactive placeholder,
    * preserving every data attribute the template supplied.
    */
    function hydrateFallback(fallback) {
        if (
            !fallback ||
            fallback.dataset.hydrated ||
            fallback.dataset.model === undefined
        ) {
            return;
        }
        fallback.dataset.hydrated = '1';
        const placeholder = buildPlaceholder({
            model: fallback.dataset.model,
            name: fallback.dataset.name,
            altImage: fallback.dataset.altImage,
            modelsize: fallback.dataset.modelsize
        });
        initPreview(placeholder);
        fallback.replaceWith(placeholder);
     }
     }


Line 140: Line 216:
         ) {
         ) {
             initPreview(root);
             initPreview(root);
        }
        if (
            root.nodeType === Node.ELEMENT_NODE &&
            root.matches('.model-fallback')
        ) {
            hydrateFallback(root);
         }
         }


Line 146: Line 229:
                 .querySelectorAll('.model-placeholder')
                 .querySelectorAll('.model-placeholder')
                 .forEach(initPreview);
                 .forEach(initPreview);
            root
                .querySelectorAll('.model-fallback')
                .forEach(hydrateFallback);
         }
         }
     }
     }
Line 188: Line 274:


})();
})();




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