lxm_front/eruda
1
0
Fork 0
mirror of https://github.com/liriliri/eruda.git synced 2026-03-20 09:38:37 +08:00
Code Issues Projects Releases Wiki Activity

Dev: Settings ui

Browse Source
This commit is contained in:
surunzi
2017-11-09 14:56:09 +08:00
parent bab07acd69
commit 5b1171983d
3 changed files with 59 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
doc/README_CN.md
View File

@@ -49,7 +49,7 @@ Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools
通过CDN使用：
```html
<script src="//cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script>
<script src="//cdn.bootcss.com/eruda/1.2.6/eruda.min.js"></script>
<script>eruda.init();</script>
```

22
src/Settings/Settings.js
View File

@@ -97,6 +97,10 @@ export default class Settings extends Tool
return this;
}
_closeAll()
{
this._$el.find('.eruda-open').rmClass('eruda-open');
}
_bindEvent()
{
let self = this;
@@ -111,7 +115,11 @@ export default class Settings extends Tool
setting.config.set(setting.key, val);
}).on('click', '.eruda-select .eruda-head', function ()
{
util.$(this).parent().find('ul').toggleClass('eruda-open');
let $el = util.$(this).parent().find('ul'),
isOpen = $el.hasClass('eruda-open');
self._closeAll();
isOpen ? $el.rmClass('eruda-open') : $el.addClass('eruda-open');
}).on('click', '.eruda-select li', function ()
{
let $this = util.$(this),
@@ -126,7 +134,11 @@ export default class Settings extends Tool
setting.config.set(setting.key, val);
}).on('click', '.eruda-range .eruda-head', function ()
{
util.$(this).parent().find('.eruda-input-container').toggleClass('eruda-open');
let $el = util.$(this).parent().find('.eruda-input-container'),
isOpen = $el.hasClass('eruda-open');
self._closeAll();
isOpen ? $el.rmClass('eruda-open') : $el.addClass('eruda-open');
}).on('change', '.eruda-range input', function ()
{
let $this = util.$(this),
@@ -149,7 +161,11 @@ export default class Settings extends Tool
$container.find('.eruda-range-track-progress').css('width', progress(val, min, max) + '%');
}).on('click', '.eruda-color .eruda-head', function ()
{
util.$(this).parent().find('ul').toggleClass('eruda-open');
let $el = util.$(this).parent().find('ul'),
isOpen = $el.hasClass('eruda-open');
self._closeAll();
isOpen ? $el.rmClass('eruda-open') : $el.addClass('eruda-open');
}).on('click', '.eruda-color li', function ()
{
let $this = util.$(this),

85
test/settings.js
View File

@@ -8,7 +8,7 @@ describe('settings', function ()
testSwitch: false,
testSelect: '1',
testRange: 1,
testColor: '#000'
testColor: '#fff'
});
beforeEach(function ()
@@ -16,63 +16,56 @@ describe('settings', function ()
tool.clear();
});
describe('switch', function ()
it('switch', function ()
{
it('ui', function ()
{
var text = 'Test Switch';
var text = 'Test Switch';
tool.switch(cfg, 'testSwitch', text);
expect($tool.find('.eruda-switch')).toContainText(text);
});
tool.switch(cfg, 'testSwitch', text);
expect($tool.find('.eruda-switch')).toContainText(text);
$tool.find('.eruda-checkbox').click();
expect(cfg.get('testSwitch')).toBe(true);
});
describe('separator', function ()
it('separator', function ()
{
it('ui', function ()
{
tool.separator();
expect($tool.find('.eruda-separator').length).toEqual(1);
});
tool.separator();
expect($tool.find('.eruda-separator').length).toEqual(1);
});
describe('select', function ()
it('select', function ()
{
it('ui', function ()
{
var text = 'Test Select';
var text = 'Test Select';
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');
});
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');
$el.find('.eruda-head').click();
$el.find('ul li').eq(1).click();
expect(cfg.get('testSelect')).toBe('2');
});
it('range', 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);
$el.find('.eruda-head').click();
});
describe('range', function ()
it('color', function ()
{
it('ui', function ()
{
var text = 'Test Range';
var text = 'Test Color';
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);
});
});
describe('color', function ()
{
it('ui', function ()
{
var text = 'Test Color';
tool.color(cfg, 'testColor', text, ['#000', '#fff']);
var $el = $tool.find('.eruda-color');
expect($el.find('.eruda-head')).toContainText(text);
expect($el.find('ul li').length).toEqual(2);
});
tool.color(cfg, 'testColor', text, ['#000', '#fff']);
var $el = $tool.find('.eruda-color');
expect($el.find('.eruda-head')).toContainText(text);
expect($el.find('ul li').length).toEqual(2);
$el.find('.eruda-head').click();
$el.find('ul li').eq(0).click();
expect(cfg.get('testColor')).toBe('rgb(0, 0, 0)');
});
});