diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.html | 93 | ||||
| -rw-r--r-- | src/index.js | 7 | ||||
| -rw-r--r-- | src/js/app.js | 29 | ||||
| -rw-r--r-- | src/js/buttons.js | 38 | ||||
| -rw-r--r-- | src/js/chair.js | 33 | ||||
| -rw-r--r-- | src/js/fan_speed.js | 29 | ||||
| -rw-r--r-- | src/js/sliders.js | 56 | ||||
| -rw-r--r-- | src/js/temperature.js | 89 | ||||
| -rw-r--r-- | src/styles/main.scss | 3 |
9 files changed, 112 insertions, 265 deletions
diff --git a/src/index.html b/src/index.html index 9c1ac9b..6b2ed01 100644 --- a/src/index.html +++ b/src/index.html @@ -25,81 +25,24 @@ <h1 class="header"> Mixer </h1> - <div class="entry"> - <div class="label"> - Volume 1: <span class="value"> 50%</span> - </div> - <a href="#" class="button"> - <span class="icon-volume-decrease"></span> - </a> - <div class="slider"> - <input type="range" min="1" value="1" max="100"> - <progress value="50" max="100"></progress> - </div> - <a href="#" class="button"> - <span class="icon-volume-increase"></span> - </a> - </div> - <div class="entry"> - <div class="label"> - Volume 1: <span class="value"> 50%</span> - </div> - <a href="#" class="button"> - <span class="icon-volume-decrease"></span> - </a> - <div class="slider"> - <input type="range" min="1" value="1" max="100"> - <progress value="50" max="100"></progress> - </div> - <a href="#" class="button"> - <span class="icon-volume-increase"></span> - </a> - </div> - <div class="entry"> - <div class="label"> - Volume 1: <span class="value"> 50%</span> - </div> - <a href="#" class="button"> - <span class="icon-volume-decrease"></span> - </a> - <div class="slider"> - <input type="range" min="1" value="1" max="100"> - <progress value="50" max="100"></progress> - </div> - <a href="#" class="button"> - <span class="icon-volume-increase"></span> - </a> - </div> - <div class="entry"> - <div class="label"> - Volume 1: <span class="value"> 50%</span> - </div> - <a href="#" class="button"> - <span class="icon-volume-decrease"></span> - </a> - <div class="slider"> - <input type="range" min="1" value="1" max="100"> - <progress value="50" max="100"></progress> - </div> - <a href="#" class="button"> - <span class="icon-volume-increase"></span> - </a> - </div> - <div class="entry"> - <div class="label"> - Volume 1: <span class="value"> 50%</span> - </div> - <a href="#" class="button"> - <span class="icon-volume-decrease"></span> - </a> - <div class="slider"> - <input type="range" min="1" value="1" max="100"> - <progress value="50" max="100"></progress> - </div> - <a href="#" class="button"> - <span class="icon-volume-increase"></span> - </a> - </div> + <div id="SliderContainer"></div> + <script id="slider-template" type="x-tmpl-mustache"> + <div class="entry" id="slider-{{id}}" slider-id="{{ id }}" value="{{ value }}"> + <div class="label"> + {{ name }}: <span class="value"> {{ value }}%</span> + </div> + <a href="#" class="button" onclick="window.decrease(this);"> + <span class="icon-volume-decrease"></span> + </a> + <div class="slider"> + <input type="range" min="1" value="{{ value }}" max="100" oninput="window.change(this);"> + <progress value="{{ value }}" max="100"></progress> + </div> + <a href="#" class="button" onclick="window.increase(this);"> + <span class="icon-volume-increase"></span> + </a> + </div> + </script> </div> <div class="log" id="log"> diff --git a/src/index.js b/src/index.js index 142b8d1..fa62684 100644 --- a/src/index.js +++ b/src/index.js @@ -16,6 +16,13 @@ /* JS */ import './js/AFB.js'; +import { init } from './js/app'; +import { increase, decrease, change } from './js/sliders'; /* CSS */ import './styles/app.scss'; + +window.increase = increase; +window.decrease = decrease; +window.change = change; +init();
\ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js new file mode 100644 index 0000000..773e5b0 --- /dev/null +++ b/src/js/app.js @@ -0,0 +1,29 @@ +import Mustache from 'mustache'; +import { init as init_sliders } from './sliders'; + +var template; + +function render_sliders(sliders) { + var sliderContainer = document.getElementById('SliderContainer'); + for( var i=0; i<sliders.length; i++) { + var node = Mustache.render(template, sliders[i]); + sliderContainer.innerHTML += node; + } +} + +export function init() { + template = document.getElementById('slider-template').innerHTML; + Mustache.parse(template); + + var sliders = []; + for( var i=0; i<10; i++) { + sliders.push({ + id: i, + name: 'Volume '+i, + value: Math.floor(Math.random()*100) + }); + } + + init_sliders(sliders); + render_sliders(sliders); +}
\ No newline at end of file diff --git a/src/js/buttons.js b/src/js/buttons.js deleted file mode 100644 index 5fcb521..0000000 --- a/src/js/buttons.js +++ /dev/null @@ -1,38 +0,0 @@ -/* - * Copyright 2019 Igalia, S.L. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -var buttons = { - ac: false, - auto: false, - circulation: false, - down: false, - up: false, - right: false, - rear: false, - front: false -}; - -function update(node, value) { - node.setAttribute('value', value); -} - -module.exports = { - toggle: function(node) { - var key = node.getAttribute('key'); - buttons[key] = !buttons[key]; - update(node, buttons[key]); - } -}
\ No newline at end of file diff --git a/src/js/chair.js b/src/js/chair.js deleted file mode 100644 index 5cd26e8..0000000 --- a/src/js/chair.js +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Copyright 2019 Igalia, S.L. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -var left = 0; -var right = 0; - -function update(node, value){ - node.setAttribute('value', value); -} - -module.exports = { - left: function(node) { - left = (left + 1) % 3; - update(node, left); - }, - right: function(node) { - right = (right + 1) % 3; - update(node, right); - }, -}
\ No newline at end of file diff --git a/src/js/fan_speed.js b/src/js/fan_speed.js deleted file mode 100644 index 8b131b5..0000000 --- a/src/js/fan_speed.js +++ /dev/null @@ -1,29 +0,0 @@ -/* - * Copyright 2019 Igalia, S.L. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -var value = 0; - -function update(node, value) { - node.value = value; - node.parentNode.getElementsByTagName('progress')[0].value = value; -} - -module.exports = { - set: function(node) { - value = node.value; - update(node, value); - } -}
\ No newline at end of file diff --git a/src/js/sliders.js b/src/js/sliders.js new file mode 100644 index 0000000..624e8e4 --- /dev/null +++ b/src/js/sliders.js @@ -0,0 +1,56 @@ +this.sliders = {}; + +function getRootNode(node) { + while(!node.hasAttribute('slider-id') && node.parentNode) { + return getRootNode(node.parentNode); + } + + if( node.hasAttribute('slider-id') ) { + return node; + } else { + return false; + } +} + +function getValue(node) { + node = getRootNode(node); + if( node ) { + return parseInt(node.getAttribute('value')); + } else { + return false; + } +} + +function setValue(node, value) { + node = getRootNode(node); + if( node ){ + value = Math.max(Math.min(value, 100), 0); + node.setAttribute('value', value); + node.getElementsByTagName('progress')[0].value = value; + node.getElementsByTagName('input')[0].value = value; + node.getElementsByClassName('value')[0].innerHTML = value+'%'; + } +} + +function init(sliders) { + console.log(sliders); +} + +function increase(node) { + setValue(node, getValue(node)+5); +} + +function decrease(node) { + setValue(node, getValue(node)-5); +} + +function change(node) { + setValue(node, node.value); +} + +module.exports = { + init: init, + increase: increase, + decrease: decrease, + change: change +}
\ No newline at end of file diff --git a/src/js/temperature.js b/src/js/temperature.js deleted file mode 100644 index 3a394a1..0000000 --- a/src/js/temperature.js +++ /dev/null @@ -1,89 +0,0 @@ -/* - * Copyright 2019 Igalia, S.L. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -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 98456a0..01373eb 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -98,10 +98,11 @@ body { .header { text-align: center; + margin: 0; } .entry { - height: 100px; + height: 120px; .label { margin: 10px 0; |