Add: Settings range

doc/TOOL_API.md

@@ -227,7 +227,7 @@ Add switch to toggle a boolean value.
 
 ### select
 
-Add select to select a number of string values
+Add select to select a number of string values.
 
 |Name  |Type  |Desc                      |
 |------|------|--------------------------|
@@ -236,6 +236,17 @@ Add select to select a number of string values
 |desc  |string|Option description        |
 |values|array |Array of strings to select|
 
+### range
+
+Add range to input a number.
+
+|Name  |Type  |Desc              |
+|------|------|------------------|
+|cfg   |object|Config object     |
+|name  |string|Option name       |
+|desc  |string|Option description|
+|option|object|Min, max, step  | |
+
 ### separator
 
 Add a separator.
@@ -245,11 +256,13 @@ var cfg = eruda.util.createCfg('test');
 
 cfg.set(eruda.util.defaults(cfg.get(), {
     testBool: true,
-    testSelect: 'select1'
+    testSelect: 'select1',
+    testRange: 1
 }));
 
 settings.text('Test')
         .switch(cfg, 'testBool', 'Test Bool')
         .select(cfg, 'testSelect', 'Test Select', ['select1', 'select2'])
+        .range(cfg, 'testRange', 'Test Range', {min: 0, max: 1, step: 0.1})
         .separator();
 ```

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'])

test/boot.js

@@ -6,7 +6,7 @@ function boot(name, cb)
         eruda.init({
             tool: name === 'settings' ? [] : name
         });
-        eruda.show().get().config.set('displaySize', '50%');
+        eruda.show().get().config.set('displaySize', '50');
 
         cb && cb();
 

test/settings.js

@@ -4,7 +4,8 @@ var tool = eruda.get('settings'),
 var cfg = eruda.config.create('eruda-test');
 cfg.set({
     testSwitch: false,
-    testSelect: ['1']
+    testSelect: '1',
+    testRange: 1
 });
 
 beforeEach(function () 
@@ -41,6 +42,20 @@ describe('select', function ()
         tool.select(cfg, 'testSelect', text, ['1', '2', '3']);
         var $el = $tool.find('.eruda-select');
         expect($el.find('ul li').length).toEqual(3);
+        expect($el.find('.eruda-head')).toContainText(text);
         expect($el.find('.eruda-val')).toContainText('1');
     });
 });
+
+describe('range', function () 
+{
+    it('ui', function () 
+    {
+        var text = 'Test Range';
+
+        tool.range(cfg, 'testRange', text, {min: 0, max: 1, step: 0.1});
+        var $el = $tool.find('.eruda-range');
+        expect($el.find('.eruda-head')).toContainText(text);
+        expect($el.find('input').length).toEqual(1);
+    });
+});