Add: Settings range

src/DevTools/DevTools.js

@@ -110,8 +110,8 @@ export default class DevTools extends util.Emitter
         let cfg = this.config = util.createCfg('dev-tools');
 
         cfg.set(util.defaults(cfg.get(), {
-            transparency: '95%',
-            displaySize: '80%',
+            transparency: 0.95,
+            displaySize: 80,
             tinyNavBar: false,
             activeEruda: false
         }));
@@ -138,13 +138,12 @@ export default class DevTools extends util.Emitter
     }
     _setTransparency(opacity)
     {
-        opacity = +opacity.replace('%', '') / 100;
         this._opacity = opacity;
         if (this._isShow) this._$el.css({opacity});
     }
     _setDisplaySize(height)
     {
-        this._$el.css({height});
+        this._$el.css({height: height + '%'});
     }
     _appendTpl()
     {

src/Settings/Settings.js

@@ -12,6 +12,7 @@ export default class Settings extends Tool
         this.name = 'settings';
         this._switchTpl = require('./switch.hbs');
         this._selectTpl = require('./select.hbs');
+        this._rangeTpl = require('./range.hbs');
         this._settings = [];
     }
     init($el)
@@ -42,7 +43,19 @@ export default class Settings extends Tool
         this._settings.push({config, key});
 
         this._$el.append(this._selectTpl({
-            desc, key, selections,
+            desc, selections,
+            idx: this._settings.length - 1,
+            val: config.get(key)
+        }));
+
+        return this;
+    }
+    range(config, key, desc, {min = 0, max = 1, step = 0.1}) 
+    {
+        this._settings.push({config, key});
+
+        this._$el.append(this._rangeTpl({
+            desc, min, max, step,
             idx: this._settings.length - 1,
             val: config.get(key)
         }));
@@ -88,6 +101,24 @@ export default class Settings extends Tool
             $ul.parent().find('.eruda-head span').text(val);
 
             setting.config.set(setting.key, val);
+        }).on('click', '.eruda-range .eruda-head', function () 
+        {
+            util.$(this).parent().find('.eruda-input-container').toggleClass('eruda-open');
+        }).on('change', '.eruda-range input', function () 
+        {
+            let $this = util.$(this),
+                $container = $this.parent(),
+                idx = $container.data('idx'),
+                val = $this.val(),
+                setting = self._settings[idx];
+
+            setting.config.set(setting.key, val);
+        }).on('input', '.eruda-range input', function () 
+        {
+            let $this = util.$(this),
+                val = $this.val();
+            
+            $this.parent().parent().find('.eruda-head span').text(val);
         });
     }
 }

src/Settings/Settings.scss

@@ -12,16 +12,16 @@
             color: $gray-dark;
             font-size: 12px;
         }
-        .select {
+        .select, .range {
             cursor: pointer;
         }
-        .select .head, .switch {
+        .select .head, .switch, .range .head {
             padding: $padding;
             background: #fff;
             font-size: $font-size;
             border-bottom: 1px solid $gray-light;
         }
-        .select .head {
+        .select .head, .range .head {
             transition: background $anim-duration, color $anim-duration;
             span {
                 float: right;
@@ -46,6 +46,34 @@
                 }
             }
         }
+        .range .input-container {
+            display: none;
+            padding: $padding;
+            background: $gray-light;
+            &.open {
+                display: block;
+            }
+            input {
+                -webkit-appearance: none;
+                background: $gray;
+                height: 4px;
+                width: 100%;
+                position: relative;
+                top: -3px;
+                margin: 0 auto;
+            }
+            input::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                position: relative;
+                top: 0px;
+                z-index: 1;
+                width: 15px;
+                height: 15px;
+                border-radius: 10px;
+                background-color: #FFF;
+                box-shadow: $box-shadow;
+            }
+        }
         .switch {
             .checkbox {
                 float: right;

src/Settings/range.hbs

@@ -0,0 +1,9 @@
+<div class="eruda-range">
+    <div class="eruda-head">
+        {{desc}}
+        <span class="eruda-val">{{val}}</span>
+    </div>
+    <div class="eruda-input-container" data-idx="{{idx}}">
+        <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{val}}"/>
+    </div>
+</div>

src/index.js

@@ -132,8 +132,8 @@ module.exports = {
                 .separator()
                 .switch(devTools.config, 'activeEruda', 'Always Activated')
                 .switch(devTools.config, 'tinyNavBar', 'Tiny Navigation Bar')
-                .select(devTools.config, 'transparency', 'Transparency', ['100%', '95%', '90%', '85%', '80%', '75%', '70%'])
-                .select(devTools.config, 'displaySize', 'Display Size', ['100%', '90%', '80%', '70%', '60%', '50%'])
+                .range(devTools.config, 'transparency', 'Transparency', {min: 0.2, max: 1, step: 0.01})
+                .range(devTools.config, 'displaySize', 'Display Size', {min: 40, max: 100, step: 1})
                 .separator();
     },
     _initTools(tool = ['console', 'elements', 'network', 'resources', 'sources', 'info', 'snippets', 'features'])