aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-09-23 11:32:30 +0200
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:20:13 +0100
commitc3a5d63e11e85d617a131160e8af6baed55fbfb6 (patch)
tree3885f63801f453638f868c4b76ff0fc5d6a6c8e3
parent650b416279c9e4264b519edfc996b513aadc69b7 (diff)
FUNCT Add support to modify sliders
-rw-r--r--package.json4
-rw-r--r--src/index.html93
-rw-r--r--src/index.js7
-rw-r--r--src/js/app.js29
-rw-r--r--src/js/buttons.js38
-rw-r--r--src/js/chair.js33
-rw-r--r--src/js/fan_speed.js29
-rw-r--r--src/js/sliders.js56
-rw-r--r--src/js/temperature.js89
-rw-r--r--src/styles/main.scss3
-rw-r--r--webpack.config.js3
11 files changed, 117 insertions, 267 deletions
diff --git a/package.json b/package.json
index fabae34..d75f535 100644
--- a/package.json
+++ b/package.json
@@ -35,5 +35,7 @@
"webpack-dev-server": "^3.7.2",
"zip-webpack-plugin": "^3.0.0"
},
- "dependencies": {}
+ "dependencies": {
+ "mustache": "^3.1.0"
+ }
}
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;
diff --git a/webpack.config.js b/webpack.config.js
index ac50a74..0d6cf17 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,7 +10,8 @@ const ZipPlugin = require('zip-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
- index: './src/index.js'
+ index: './src/index.js',
+ index: './src/js/app.js'
},
output: {
path: __dirname + '/dist',