Difference between revisions of "Widget:RuneDisp"
From Official Runecraft Wiki
(Documentation) |
|||
| Line 3: | Line 3: | ||
</noinclude> | </noinclude> | ||
| + | // NOTE: Rune widgets should look like below -- see that the runefiles array START from the bottom, and grow to the top | ||
| + | // {{#widget:RuneDisp|runefile=/images/b/b4/PegasusFull.glb|multilayer=true|activationlayer=2|runefiles=/images/3/3d/Pegasus_1.glb|runefiles=/images/6/6e/Pegasus_2_act.glb|runefiles=/images/5/56/Pegasus_3.glb}} | ||
| + | |||
| + | // This is what actually gets rendered | ||
<includeonly> | <includeonly> | ||
| + | // Import model-viewer JS shenanigans | ||
<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> | ||
| + | // Start the actual file | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| + | |||
| + | // 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 25: | ||
<!--{/foreach}-->; | <!--{/foreach}-->; | ||
| + | // Single rune case - very simple. | ||
if (multilayer == "false") { | if (multilayer == "false") { | ||
document.write('<model-viewer id="rune" 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>'); | document.write('<model-viewer id="rune" 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 { | + | } else { |
| + | |||
| + | // Not so simple case - render normally to start | ||
document.write('<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>'); | document.write('<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 31: | Line 44: | ||
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 41: | Line 54: | ||
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; | 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'); | ||
| Line 58: | Line 73: | ||
}); | }); | ||
| + | // 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; | ||
}); | }); | ||
| − | |||
} | } | ||
Revision as of 18:34, 14 January 2022
// NOTE: Rune widgets should look like below -- see that the runefiles array START from the bottom, and grow to the top
//
// This is what actually gets rendered
