Widget:RuneDisp4

<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_box4");

// 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="MLrune4" 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="MLrune4" 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="layer4"></select>

</model-viewer>';

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

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

   const lyr = document.getElementById("layer4");

   if (!lyr) return; // Prevents errors if #layer4 is missing

   // Clear existing options
   lyr.innerHTML = ;

   // Add "Full Rune" as default option
   const defaultOption = document.createElement('option');
   defaultOption.value = 'default';
   defaultOption.textContent = 'Full Rune';
   lyr.appendChild(defaultOption);

   // Reverse the runefiles array *without modifying the original*
   const reversedRunes = [...runefiles].reverse();

   let index = reversedRunes.length; // Start from highest layer number

   for (const rne of reversedRunes) {
       const option = document.createElement('option');
       option.value = rne;
       option.textContent = (index == activationlayer) ? 'Activation Layer' : `Layer ${index}`;
       lyr.appendChild(option);
       index--;
   }

   console.log("Dropdown updated with layers:", lyr.innerHTML);

});

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

// Internal variable manipulation to get the orders right var 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("MLrune4").style.height = "250px"; }

</script>