Widget:RuneDisp

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script> <script type="text/javascript"> var bg_box = document.getElementById("bg_box");

// Read in given arguments var runefile = ; var multilayer = ; var activationlayer = ;

// Initialize & fill runefiles w/ smarty script

var runefiles = [ , ];

// Single rune case - very simple. if (multilayer == "false") { bg_box.innerHTML += '<model-viewer id="MLrune" bounds="tight" src="' + runefile + '" ar ar-modes="scene-viewer webxr quick-look" camera-controls poster="poster.webp" shadow-intensity="1" environment-image="neutral" exposure="1" camera-orbit="0deg 65deg auto"></model-viewer>';

} else {

// Not so simple case - render normally to start

bg_box.innerHTML += '<model-viewer id="MLrune" bounds="tight" src="' + runefile + '" ar ar-modes="scene-viewer webxr quick-look" camera-controls poster="poster.webp" shadow-intensity="1" environment-image="neutral" exposure="1" camera-orbit="0deg 65deg auto">

Layer: <select id="layer"></select>

</model-viewer>';

// Define DOM elements for later use const modelViewerLayers = document.querySelector("model-viewer#MLrune"); const select = document.querySelector('#layer');

// Create a listener for creating dropdown elements when loaded modelViewerLayers.addEventListener('load', () => {

//Set default const option = document.createElement('option');

//brief break to clear repeated options const lyr = document.getElementById("layer"); while (lyr.firstChild) { option.removeChild(lyr.firstChild); }

option.value = 'default'; option.textContent = 'Full Rune'; select.appendChild(option);

// Internal variable manipulation to get the orders right const reversedRunes = [...runefiles].reverse(); var length = reversedRunes.length;

// Auto fill all other variable options for (const rne of reversedRunes) { const option = document.createElement('option'); option.value = rne; if (length == activationlayer) { option.textContent = 'Activation Layer'; } else { option.textContent = 'Layer ' + length; } select.appendChild(option); length--; }

});

// Create listener for element selection select.addEventListener('input', (event) => { modelViewerLayers.src = event.target.value === 'default' ? runefile : event.target.value; });

// Set model viewer size document.getElementById("MLrune").style.height = "250px"; }

</script>