From 9e9452d057723c955acbe47d614435a20badf028 Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Fri, 20 Sep 2013 21:38:17 +0200 Subject: [PATCH] add random button --- index.html | 1 + scripts/main.js | 4 +++ scripts/src/controls.js | 27 ++++++++++++--- scripts/src/random-button.js | 67 ++++++++++++++++++++++++++++++++++++ styles/global.css | 11 ++++++ 5 files changed, 106 insertions(+), 4 deletions(-) create mode 100644 scripts/src/random-button.js 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;