Difference between revisions of "Widget:RuneDisp"
From Official Runecraft Wiki
Tag: Rollback |
|||
| (77 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 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> | </script> | ||
</includeonly> | </includeonly> | ||
Latest revision as of 21:30, 26 January 2022
