diff options
| -rw-r--r-- | src/index.html | 111 | ||||
| -rw-r--r-- | src/index.js | 5 | ||||
| -rw-r--r-- | src/js/temperature.js | 73 | ||||
| -rw-r--r-- | src/styles/main.scss | 11 | ||||
| -rw-r--r-- | webpack.config.js | 3 |
5 files changed, 87 insertions, 116 deletions
diff --git a/src/index.html b/src/index.html index 4ffbb28..45a53d0 100644 --- a/src/index.html +++ b/src/index.html @@ -19,7 +19,6 @@ FAN SPEED </div> </div> - </div> <div class="center"> <a id="LeftChair" value="0" href="#" class="seat left item button" onclick="CHAIR.left()"> @@ -44,59 +43,7 @@ <img class="two" src="../images/HMI_HVAC_ChairIndicator_Two.svg"/> </a> <div class="temperatures item"> - <div class="temperatures-container"> - <div class="temperature"> - LO - </div> - <div class="temperature"> - 16º - </div> - <div class="temperature"> - 17º - </div> - <div class="temperature"> - 18º - </div> - <div class="temperature"> - 19º - </div> - <div class="temperature"> - 20º - </div> - <div class="temperature"> - 21º - </div> - <div class="temperature"> - 22º - </div> - <div class="temperature"> - 23º - </div> - <div class="temperature"> - 24º - </div> - <div class="temperature"> - 25º - </div> - <div class="temperature"> - 26º - </div> - <div class="temperature"> - 27º - </div> - <div class="temperature"> - 28º - </div> - <div class="temperature"> - 29º - </div> - <div class="temperature"> - HI - </div> - <div class="temperature"> - - </div> - </div> + <div id="lefttemperature" class="temperatures-container" onscroll="TEMPERATURE.left(this)"></div> </div> <div class="block item"> <a id="autobutton" value="false" href="#" class="auto item button" onclick="BUTTON.auto()"> @@ -111,60 +58,8 @@ <img class="enabled" src="../images/HMI_HVAC_Circulation_Active.svg"/> </a> </div> - <div class=" temperatures item"> - <div class="temperatures-container"> - <div class="temperature"> - LO - </div> - <div class="temperature"> - 16º - </div> - <div class="temperature"> - 17º - </div> - <div class="temperature"> - 18º - </div> - <div class="temperature"> - 19º - </div> - <div class="temperature"> - 20º - </div> - <div class="temperature"> - 21º - </div> - <div class="temperature"> - 22º - </div> - <div class="temperature"> - 23º - </div> - <div class="temperature"> - 24º - </div> - <div class="temperature"> - 25º - </div> - <div class="temperature"> - 26º - </div> - <div class="temperature"> - 27º - </div> - <div class="temperature"> - 28º - </div> - <div class="temperature"> - 29º - </div> - <div class="temperature"> - HI - </div> - <div class="temperature"> - - </div> - </div> + <div class="temperatures item"> + <div id="righttemperature" class="temperatures-container" onscroll="TEMPERATURE.right(this)"></div> </div> </div> <div class="bottom"> diff --git a/src/index.js b/src/index.js index b5d367b..d71dd0c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,9 @@ /* JS */ import './js/AFB.js'; -import { init, launch } from './js/app.js'; /* CSS */ import './styles/app.scss'; -document.addEventListener('DOMContentLoaded', init);
\ No newline at end of file +document.addEventListener('DOMContentLoaded', function(){ + TEMPERATURE.init(); +});
\ No newline at end of file diff --git a/src/js/temperature.js b/src/js/temperature.js new file mode 100644 index 0000000..45cbe8c --- /dev/null +++ b/src/js/temperature.js @@ -0,0 +1,73 @@ +var left = 22; +var right = 22; + +var lowTemperature = 15; +var hiTemperature = 30; +var temperatures = []; + +var isScrolling; +var elementHeight; + +function createTemperatureElement() { + var element = document.createElement('div'); + element.classList = ['temperature']; + element.style.height = elementHeight+'px'; + element.style.lineHeight = elementHeight+'px'; + return element; +} + +function update(node, index) { + node.scrollTop = index*elementHeight; + + for( var i=0; i<node.children.length; i++) { + node.children[i].setAttribute('enabled',false); + } + node.children[index].setAttribute('enabled', true); +} + +module.exports = { + left: function(node) { + clearTimeout(isScrolling); + + isScrolling = setTimeout(function(){ + var index = Math.round(node.scrollTop/elementHeight); + left = temperatures[index]; + update(node, index); + console.log('LEFT', left); + }, 100); + }, + right: function(node) { + clearTimeout(isScrolling); + + isScrolling = setTimeout(function(){ + var index = Math.round(node.scrollTop/elementHeight); + right = temperatures[index]; + update(node, index); + console.log('RIGHT', right); + }, 100); + }, + init: function() { + var leftTemperature = document.getElementById('lefttemperature'); + var rightTemperature = document.getElementById('righttemperature'); + elementHeight = leftTemperature.offsetHeight/2; + + for( var i=lowTemperature; i<=hiTemperature; i++) { + var element = createTemperatureElement(); + if( i === lowTemperature) { + element.innerHTML = 'LO'; + } else if( i === hiTemperature ) { + element.innerHTML = 'HI'; + } else { + element.innerHTML = i+'º'; + } + leftTemperature.appendChild(element); + rightTemperature.appendChild(element.cloneNode(true)); + temperatures[temperatures.length] = i; + } + leftTemperature.appendChild(createTemperatureElement()); + rightTemperature.appendChild(createTemperatureElement()); + + update(leftTemperature, temperatures.indexOf(left)); + update(rightTemperature, temperatures.indexOf(right)); + } +}
\ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 698d3ee..660fb92 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -191,16 +191,17 @@ body { width: 100%; height: 480px; overflow-y: scroll; - scroll-snap-type: y mandatory; - scroll-behavior: smooth; .temperature { + &[enabled='true'] { + color: map-get($colors, primary); + } + &[enabled='false'] { + color: map-get($colors, grey); + } font-size: 10rem; text-align: center; width: 100%; - height: 240px; - line-height: 240px; - scroll-snap-align: start; } } } diff --git a/webpack.config.js b/webpack.config.js index ed7e0a3..072f70a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -13,7 +13,8 @@ module.exports = { index: './src/index.js', FANSPEED: './src/js/fan_speed.js', CHAIR: './src/js/chair.js', - BUTTON: './src/js/buttons.js' + BUTTON: './src/js/buttons.js', + TEMPERATURE: './src/js/temperature.js' }, output: { path: __dirname + '/dist', |