cinco/glitch-images
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'interface-changes' into develop

Browse Source
This commit is contained in:
Georg Fischer 2013-09-20 20:51:16 +02:00
commit a34ac769ae
3 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -13,19 +13,19 @@
</article>
<div class="content" id="controls">
<div class="control-wrapper">
<label class="control-label" for="amount">glitch amount</label>
<label class="control-label" for="amount">glitch amount <span class="control-slider-value"></span></label>
<input class="control-input" type="range" id="amount" min="0" max="100" value="50" />
</div>
<div class="control-wrapper">
<label class="control-label" for="seed">seed</label>
<label class="control-label" for="seed">seed <span class="control-slider-value"></span></label>
<input class="control-input" type="range" id="seed" min="0" max="100" value="50" />
</div>
<div class="control-wrapper">
<label class="control-label" for="iterations">iterations</label>
<label class="control-label" for="iterations">iterations <span class="control-slider-value"></span></label>
<input class="control-input" type="range" id="iterations" min="1" max="50" value="5" />
</div>
<div class="control-wrapper">
<label class="control-label" for="quality">jpg quality</label>
<label class="control-label" for="quality">jpg quality <span class="control-slider-value"></span></label>
<input class="control-input" type="range" id="quality" min="1" max="90" value="50" />
</div>
</div>

8
scripts/src/controls.js vendored
View File

@ -23,6 +23,7 @@ define(
control.addEventListener( 'change', controlUpdated, false );
updateValue( control.id, control.value );
updateValueInUI( control.id, control.value );
}
is_initialized = true;
@ -36,6 +37,7 @@ define(
var target = event.target;
updateValue( target.id, target.value );
updateValueInUI( target.id, target.value );
}
function updateValue( key, value )
@ -48,6 +50,12 @@ define(
}
}
function updateValueInUI( key, value )
{
var el = document.querySelectorAll( 'label[for="' + key + '"] .control-slider-value' )[0];
el.innerHTML = value;
}
return { init: init };
}
);

8
styles/global.css
View File

@ -83,12 +83,20 @@ a:hover
color: #666;
}
.control-slider-value
{
display: inline-block;
color: #333;
float: right;
}
.control-input
{
display: block;
width: 100px;
}
#import-input
{
display: none;