Difference between revisions of "Widget:RuneDisp"
From Official Runecraft Wiki
Tag: Rollback |
|||
| (40 intermediate revisions by 2 users not shown) | |||
| Line 5: | Line 5: | ||
<includeonly> | <includeonly> | ||
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> | <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"> | <script type="text/javascript"> | ||
| + | var bg_box = document.getElementById("bg_box"); | ||
| + | |||
| + | // Read in given arguments | ||
var runefile = '<!--{$runefile}-->'; | var runefile = '<!--{$runefile}-->'; | ||
var multilayer = '<!--{$multilayer}-->'; | var multilayer = '<!--{$multilayer}-->'; | ||
var activationlayer = '<!--{$activationlayer}-->'; | var activationlayer = '<!--{$activationlayer}-->'; | ||
| + | // Initialize & fill runefiles w/ smarty script | ||
var runefiles = [] | var runefiles = [] | ||
<!--{foreach from=$runefiles item=iter}--> | <!--{foreach from=$runefiles item=iter}--> | ||
| Line 16: | Line 22: | ||
<!--{/foreach}-->; | <!--{/foreach}-->; | ||
| + | // Single rune case - very simple. | ||
if (multilayer == "false") { | 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 modelViewerLayers = document.querySelector("model-viewer#MLrune"); | ||
const select = document.querySelector('#layer'); | const select = document.querySelector('#layer'); | ||
| − | // | + | // Create a listener for creating dropdown elements when loaded |
| − | |||
modelViewerLayers.addEventListener('load', () => { | modelViewerLayers.addEventListener('load', () => { | ||
| Line 33: | Line 41: | ||
const option = document.createElement('option'); | const option = document.createElement('option'); | ||
| − | //brief break to clear | + | //brief break to clear repeated options |
const lyr = document.getElementById("layer"); | const lyr = document.getElementById("layer"); | ||
while (lyr.firstChild) { | while (lyr.firstChild) { | ||
| Line 43: | Line 51: | ||
select.appendChild(option); | select.appendChild(option); | ||
| + | // Internal variable manipulation to get the orders right | ||
var reversedRunes = runefiles.reverse(); | var reversedRunes = runefiles.reverse(); | ||
| + | var length = reversedRunes.length; | ||
| + | // Auto fill all other variable options | ||
for (const rne of reversedRunes) { | for (const rne of reversedRunes) { | ||
| − | |||
const option = document.createElement('option'); | const option = document.createElement('option'); | ||
option.value = rne; | option.value = rne; | ||
| − | if ( | + | if (length == activationlayer) { |
option.textContent = 'Activation Layer'; | option.textContent = 'Activation Layer'; | ||
} else { | } else { | ||
| − | option.textContent = 'Layer '+ | + | option.textContent = 'Layer ' + length; |
} | } | ||
select.appendChild(option); | select.appendChild(option); | ||
| + | length--; | ||
} | } | ||
}); | }); | ||
| + | // Create listener for element selection | ||
select.addEventListener('input', (event) => { | select.addEventListener('input', (event) => { | ||
modelViewerLayers.src = event.target.value === 'default' ? runefile : event.target.value; | 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> | </script> | ||
</includeonly> | </includeonly> | ||
Latest revision as of 21:30, 26 January 2022
