diff --git a/index.html b/index.html
index eb95090..c024148 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,7 @@
+
diff --git a/scripts/main.js b/scripts/main.js
index 1ac5d14..906cee6 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -21,6 +21,7 @@ require(
'src/export-png',
'src/save-button',
'src/import-button',
+ 'src/random-button',
'util/feature-test',
'lib/signals-1.0.0',
'lib/html5slider'
@@ -33,6 +34,7 @@ require(
png,
save_button,
import_button,
+ random_button,
testFeatures,
Signal
)
@@ -46,6 +48,7 @@ require(
signals: {
'image-loaded' : new Signal(),
'set-new-src' : new Signal(),
+ 'control-set' : new Signal(),
'control-updated' : new Signal(),
'export-png' : new Signal(),
'saved' : new Signal()
@@ -58,6 +61,7 @@ require(
png.init( shared );
save_button.init( shared );
import_button.init( shared );
+ random_button.init( shared );
image.init( shared );
}
diff --git a/scripts/src/controls.js b/scripts/src/controls.js
index 2237f1c..33ab075 100644
--- a/scripts/src/controls.js
+++ b/scripts/src/controls.js
@@ -28,16 +28,35 @@ define(
is_initialized = true;
+ signals['control-set'].add( setControlValues );
signals['control-updated'].dispatch( values );
}
}
- function controlUpdated( event )
+ function controlUpdated( element )
{
- var target = event.target;
+ if ( element.target )
+ {
+ element = element.target;
+ }
- updateValue( target.id, target.value );
- updateValueInUI( target.id, target.value );
+ updateValue( element.id, element.value );
+ updateValueInUI( element.id, element.value );
+ }
+
+ function setControlValues( new_values )
+ {
+ var control;
+
+ for ( var id in new_values )
+ {
+ control = document.getElementById( id );
+ control.value = new_values[id];
+ controlUpdated( control );
+ }
+
+ values = new_values;
+ signals['control-updated'].dispatch( values );
}
function updateValue( key, value )
diff --git a/scripts/src/random-button.js b/scripts/src/random-button.js
new file mode 100644
index 0000000..4d3bb5e
--- /dev/null
+++ b/scripts/src/random-button.js
@@ -0,0 +1,67 @@
+/*global define*/
+define(
+ function()
+ {
+ var signals;
+ var controls;
+ var random_button;
+ var constraints = { };
+
+ function init( shared )
+ {
+ signals = shared.signals;
+
+ if ( shared.feature['query-selector-all'] )
+ {
+ controls = document.querySelectorAll( '.control-input' );
+ constraints = getConstraints( controls );
+ random_button = document.getElementById( 'random-button' );
+
+ random_button.addEventListener( 'click', buttonClicked, false );
+ random_button.classList.remove( 'is-hidden' );
+ }
+
+ }
+
+ function buttonClicked( event )
+ {
+ event.preventDefault();
+ randomize();
+ }
+
+ function randomize()
+ {
+ var new_values = { };
+ var constraint;
+
+ for ( var id in constraints )
+ {
+ constraint = constraints[id];
+ new_values[id] = getRandomInt( constraint.min, constraint.max );
+ }
+
+ signals['control-set'].dispatch( new_values );
+ }
+
+ function getConstraints( controls )
+ {
+ var result = { };
+ var control;
+
+ for ( var i = 0, len = controls.length; i < len; i++ )
+ {
+ control = controls[i];
+ result[control.id] = { min: parseInt( control.min, 10 ), max: parseInt( control.max, 10 ) };
+ }
+
+ return result;
+ }
+
+ function getRandomInt( min, max )
+ {
+ return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
+ }
+
+ return { init: init };
+ }
+);
\ No newline at end of file
diff --git a/styles/global.css b/styles/global.css
index 3bca8c3..26d1ab6 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -24,6 +24,11 @@ a:hover
text-decoration: underline;
}
+.is-hidden
+{
+ display: none;
+}
+
.button
{
background-color: #eaeaea;
@@ -45,6 +50,12 @@ a:hover
color: #fff;
}
+#random-button
+{
+ position: relative;
+ top: 3px;
+}
+
.headline
{
font-size: 12px;