FUNCT Add support to modify sliders

diff --git a/package.json b/package.json
index fabae34..d75f535 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
--- 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 (file)
--- 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',