thallada.github.io/magic/index.html

124 lines
5.5 KiB
HTML
Raw Permalink Normal View History

2014-12-20 23:18:08 +00:00
---
layout: home
title: Tyler Hallada
---
<script>
window.onload = function () {
window.magicObj = new Magic({{site.data.magic | jsonify}});
magicObj.draw();
document.getElementById("play-pause").addEventListener("click", togglePlay);
2015-01-11 22:45:58 +00:00
document.getElementById("hide-show-mobile").addEventListener("click", togglePanel);
document.getElementById("hide-show-desktop").addEventListener("click", togglePanel);
document.getElementById("clear").addEventListener("click", clear);
}
function updateMagic(key, value) {
magicObj[key] = value;
}
2015-01-11 22:45:58 +00:00
function findParentWithIds(el, ids) {
while (ids.indexOf(el.getAttribute('id')) === -1) {
2015-01-11 21:20:37 +00:00
el = el.parentElement;
}
return el;
}
function togglePanel(event) {
var options = document.getElementById("options");
2015-01-11 22:45:58 +00:00
var button = findParentWithIds(event.target, ["hide-show-desktop", "hide-show-mobile"]);
if (options.offsetParent === null) { // hidden
options.style.display = "block";
2015-01-11 21:20:37 +00:00
button.innerHTML = "<i class=\"icon ion-chevron-down\"></i>";
} else { // shown
options.style.display = "none";
2015-01-11 21:20:37 +00:00
button.innerHTML = "<i class=\"icon ion-chevron-up\"></i>";
}
}
function togglePlay(event) {
2015-01-11 22:45:58 +00:00
var button = findParentWithIds(event.target, ["play-pause"]);
if (magicObj.paused) {
magicObj.paused = false;
2015-01-11 21:20:37 +00:00
button.innerHTML = "<i class=\"icon ion-pause\"></i>";
} else {
magicObj.paused = true;
2015-01-11 21:20:37 +00:00
button.innerHTML = "<i class=\"icon ion-play\"></i>";
}
}
function clear(event) {
magicObj.clear();
2014-12-20 23:18:08 +00:00
}
</script>
<div class="options-panel">
<div class="controls-tab">
<div class="controls">
2015-01-11 21:20:37 +00:00
<button id="play-pause"><i class="icon ion-pause"></i></button>
<button id="clear"><i class="icon ion-refresh"></i></button>
2015-01-11 23:01:15 +00:00
<button id="hide-show-mobile" class="hide-desktop hide-desktop-inline-block"><i class="icon ion-chevron-up"></i></button>
<button id="hide-show-desktop" class="hide-mobile hide-mobile-inline-block"><i class="icon ion-chevron-down"></i></button>
</div>
</div>
2015-01-13 20:01:33 +00:00
<div id="options" class="container-full hide-mobile hide-mobile-block">
<div class="row clearfix">
<div class="column fourth">
<form oninput="output.value=speed.value;updateMagic('step', parseFloat(speed.value))">
<label for="speed">Speed</label>
<input type="range" min=0.01 max=2 value={{site.data.magic.step}} id="speed" step=0.01>
<output name="output" for="speed">{{site.data.magic.step}}</output>
</form>
</div>
<div class="column fourth">
<form oninput="output.value=minDuration.value;updateMagic('minDuration', parseInt(minDuration.value))">
<label for="minDuration">Min Spell Duration</label>
<input type="range" min=1 max=1000 value={{site.data.magic.minDuration}} id="minDuration" step=1>
<output name="output" for="minDuration">{{site.data.magic.minDuration}}</output>
</form>
</div>
<div class="column fourth">
<form oninput="output.value=maxDuration.value;updateMagic('maxDuration', parseInt(maxDuration.value))">
<label for="maxDuration">Max Spell Duration</label>
<input type="range" min=1 max=1000 value={{site.data.magic.maxDuration}} id="maxDuration" step=1>
<output name="output" for="maxDuration">{{site.data.magic.maxDuration}}</output>
</form>
</div>
<div class="column fourth">
<form oninput="output.value=splineLength.value;updateMagic('splineLength', parseInt(splineLength.value))">
<label for="splineLength">Spline Length</label>
<input type="range" min=1 max=300 value={{site.data.magic.splineLength}} id="splineLength" step=1>
<output name="output" for="splineLength">{{site.data.magic.splineLength}}</output>
</form>
</div>
</div>
<div class="row clearfix">
<div class="column fourth">
<form oninput="output.value=minAngleChange.value;updateMagic('minAngleChange', parseInt(minAngleChange.value))">
<label for="minAngleChange">Min Angle</label>
<input type="range" min=0 max=360 value={{site.data.magic.minAngleChange}} id="minAngleChange" step=1>
<output name="output" for="minAngleChange">{{site.data.magic.minAngleChange}}</output>
</form>
</div>
<div class="column fourth">
<form oninput="output.value=maxAngleChange.value;updateMagic('maxAngleChange', parseInt(maxAngleChange.value))">
<label for="maxAngleChange">Max Angle</label>
<input type="range" min=0 max=360 value={{site.data.magic.maxAngleChange}} id="maxAngleChange" step=1>
<output name="output" for="maxAngleChange">{{site.data.magic.maxAngleChange}}</output>
</form>
</div>
<div class="column fourth">
<form oninput="output.value=prune_to.value;updateMagic('prune_to', parseInt(prune_to.value))">
<label for="prune_to">Branches</label>
<input type="range" min=0 max=300 value={{site.data.magic.prune_to}} id="prune_to" step=1>
<output name="output" for="prune_To">{{site.data.magic.prune_to}}</output>
</form>
</div>
<div class="column fourth">
2015-01-11 20:13:07 +00:00
<form onchange="output.value=randomColored.checked;updateMagic('randomColored', randomColored.checked)">
<label for="randomColored">Randomly Colored</label>
<input type="checkbox" {% if site.data.magic.randomColored %}checked{% endif %} id="randomColored">
<output name="output" for="randomColored">{{site.data.magic.randomColored}}</output>
</form>
</div>
</div>