From 93fd685ca743e223b5010c02cce0d11560848a2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Fri, 31 May 2013 15:47:17 +0200 Subject: [PATCH] Display hue/saturation value in button text --- examples/hue-saturation.html | 8 ++++++++ examples/hue-saturation.js | 26 ++++++++++++++++++++++---- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/examples/hue-saturation.html b/examples/hue-saturation.html index d660d27daa..71f853e9bb 100644 --- a/examples/hue-saturation.html +++ b/examples/hue-saturation.html @@ -8,6 +8,14 @@ Hue/saturation example + diff --git a/examples/hue-saturation.js b/examples/hue-saturation.js index 8acd24140d..53049a4336 100644 --- a/examples/hue-saturation.js +++ b/examples/hue-saturation.js @@ -24,27 +24,45 @@ var map = new ol.Map({ }); var increaseHue = document.getElementById('increase-hue'); +var resetHue = document.getElementById('reset-hue'); +var decreaseHue = document.getElementById('decrease-hue'); + +function setResetHueButtonHTML() { + resetHue.innerHTML = 'Hue (' + layer.getHue() + ')'; +} +setResetHueButtonHTML(); + increaseHue.addEventListener('click', function() { layer.setHue(layer.getHue() + 0.25); + setResetHueButtonHTML(); }, false); -var resetHue = document.getElementById('reset-hue'); resetHue.addEventListener('click', function() { layer.setHue(0); + setResetHueButtonHTML(); }, false); -var decreaseHue = document.getElementById('decrease-hue'); decreaseHue.addEventListener('click', function() { layer.setHue(layer.getHue() - 0.25); + setResetHueButtonHTML(); }, false); var increaseSaturation = document.getElementById('increase-saturation'); +var resetSaturation = document.getElementById('reset-saturation'); +var decreaseSaturation = document.getElementById('decrease-saturation'); + +function setResetSaturationButtonHTML() { + resetSaturation.innerHTML = 'Saturation (' + layer.getSaturation() + ')'; +} +setResetSaturationButtonHTML(); + increaseSaturation.addEventListener('click', function() { layer.setSaturation(layer.getSaturation() + 0.25); + setResetSaturationButtonHTML(); }, false); -var resetSaturation = document.getElementById('reset-saturation'); resetSaturation.addEventListener('click', function() { layer.setSaturation(1); + setResetSaturationButtonHTML(); }, false); -var decreaseSaturation = document.getElementById('decrease-saturation'); decreaseSaturation.addEventListener('click', function() { layer.setSaturation(layer.getSaturation() - 0.25); + setResetSaturationButtonHTML(); }, false);