View source for Widget:RuneDisp

<noinclude>
__NOTOC__
</noinclude>

<includeonly>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<div id="bg_box" style="height:fit-content;width:fit-content;padding:5px;background-color:aliceblue;border-color:black;border-style:solid;margin:0 auto"></div>

<script type="text/javascript">
var bg_box = document.getElementById("bg_box");

// Read in given arguments
var runefile = '<!--{$runefile}-->';
var multilayer = '<!--{$multilayer}-->';
var activationlayer = '<!--{$activationlayer}-->';

// Initialize & fill runefiles w/ smarty script
var runefiles = []
<!--{foreach from=$runefiles item=iter}-->
runefiles.push('<!--{$iter}-->');
<!--{/foreach}-->;

// 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"><div class="controls"><div>Layer: <select id="layer"></select></div></div></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.lastChild);
}

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("MLrune").style.height = "250px"; 
document.getElementById("MLrune").style.width = "250px";
}

</script>
</includeonly>