diff --git a/doc/TOOL_API.md b/doc/TOOL_API.md index c2df200..416118a 100644 --- a/doc/TOOL_API.md +++ b/doc/TOOL_API.md @@ -239,6 +239,15 @@ Customization for all tools. Clear settings. +### remove + +Remove setting. + +|Name|Type |Desc | +|----|------|-------------| +|cfg |object|Config object| +|name|string|Option name | + ### text Add text. @@ -308,4 +317,6 @@ settings.text('Test') .select(cfg, 'testSelect', 'Test Select', ['select1', 'select2']) .range(cfg, 'testRange', 'Test Range', {min: 0, max: 1, step: 0.1}) .separator(); + +settings.remove(cfg, 'testBool') ``` diff --git a/src/Console/Console.js b/src/Console/Console.js index f3e39fc..f5d844c 100644 --- a/src/Console/Console.js +++ b/src/Console/Console.js @@ -18,6 +18,7 @@ export default class Console extends Tool { } init($el, container) { super.init($el) + this._container = container this._appendTpl() @@ -25,8 +26,8 @@ export default class Console extends Tool { this._exposeLogger() this._rejectionHandler = e => this._logger.error(e.reason) - this._initCfg(container) - this._bindEvent(container) + this._initCfg() + this._bindEvent() } show() { super.show() @@ -88,6 +89,7 @@ export default class Console extends Tool { this.ignoreGlobalErr() this.restoreConsole() this._unregisterListener() + this._rmCfg() } _registerListener() { this._scaleListener = scale => (this._scale = scale) @@ -142,7 +144,8 @@ export default class Console extends Tool { }) ) } - _bindEvent(container) { + _bindEvent() { + let container = this._container let $input = this._$input, $inputBtns = this._$inputBtns, $control = this._$control, @@ -202,9 +205,29 @@ export default class Console extends Tool { this._$inputBtns.show() } - _initCfg(container) { - let sources = container.get('sources'), - logger = this._logger + _rmCfg() { + let cfg = this.config + + let settings = this._container.get('settings') + if (!settings) return + + settings + .remove(cfg, 'catchGlobalErr') + .remove(cfg, 'overrideConsole') + .remove(cfg, 'displayExtraInfo') + .remove(cfg, 'displayUnenumerable') + .remove(cfg, 'displayGetterVal') + .remove(cfg, 'lazyEvaluation') + .remove(cfg, 'viewLogInSources') + .remove(cfg, 'displayIfErr') + .remove(cfg, 'useWorker') + .remove(cfg, 'maxLogNum') + .remove('Console') + } + _initCfg() { + let container = this._container + let sources = container.get('sources') + let logger = this._logger let cfg = (this.config = Settings.createCfg('console', { catchGlobalErr: true, @@ -271,8 +294,9 @@ export default class Console extends Tool { .switch(cfg, 'lazyEvaluation', 'Lazy Evaluation') if (isWorkerSupported) settings.switch(cfg, 'useWorker', 'Use Web Worker') - if (sources) + if (sources) { settings.switch(cfg, 'viewLogInSources', 'View Log In Sources Panel') + } settings .select(cfg, 'maxLogNum', 'Max Log Number', [ diff --git a/src/Elements/Elements.js b/src/Elements/Elements.js index c42480e..66ce931 100644 --- a/src/Elements/Elements.js +++ b/src/Elements/Elements.js @@ -76,8 +76,8 @@ export default class Elements extends Tool { overrideEventTarget() { let winEventProto = getWinEventProto() - let origAddEvent = (this._origAddEvent = winEventProto.addEventListener), - origRmEvent = (this._origRmEvent = winEventProto.removeEventListener) + let origAddEvent = (this._origAddEvent = winEventProto.addEventListener) + let origRmEvent = (this._origRmEvent = winEventProto.removeEventListener) winEventProto.addEventListener = function(type, listener, useCapture) { addEvent(this, type, listener, useCapture) @@ -108,31 +108,32 @@ export default class Elements extends Tool { this._highlight.destroy() this._disableObserver() this.restoreEventTarget() + this._rmCfg() } _back() { if (this._curEl === this._htmlEl) return - let parentQueue = this._curParentQueue, - parent = parentQueue.shift() + let parentQueue = this._curParentQueue + let parent = parentQueue.shift() while (!isElExist(parent)) parent = parentQueue.shift() this.set(parent) } _bindEvent() { - let self = this, - container = this._container, - select = this._select + let self = this + let container = this._container + let select = this._select this._$el .on('click', '.eruda-child', function() { - let idx = $(this).data('idx'), - curEl = self._curEl, - el = curEl.childNodes[idx] + let idx = $(this).data('idx') + let curEl = self._curEl + let el = curEl.childNodes[idx] if (el && el.nodeType === 3) { - let curTagName = curEl.tagName, - type + let curTagName = curEl.tagName + let type switch (curTagName) { case 'SCRIPT': @@ -158,8 +159,8 @@ export default class Elements extends Tool { !isElExist(el) ? self._render() : self.set(el) }) .on('click', '.eruda-listener-content', function() { - let text = $(this).text(), - sources = container.get('sources') + let text = $(this).text() + let sources = container.get('sources') if (sources) { sources.set('js', text) @@ -168,9 +169,9 @@ export default class Elements extends Tool { }) .on('click', '.eruda-breadcrumb', () => { let data = - this._elData || - JSON.parse(stringify(this._curEl, { getterVal: true })), - sources = container.get('sources') + this._elData || + JSON.parse(stringify(this._curEl, { getterVal: true })) + let sources = container.get('sources') this._elData = data @@ -180,9 +181,9 @@ export default class Elements extends Tool { } }) .on('click', '.eruda-parent', function() { - let idx = $(this).data('idx'), - curEl = self._curEl, - el = curEl.parentNode + let idx = $(this).data('idx') + let curEl = self._curEl + let el = curEl.parentNode while (idx-- && el.parentNode) el = el.parentNode @@ -258,8 +259,8 @@ export default class Elements extends Tool { _getData() { let ret = {} - let el = this._curEl, - cssStore = this._curCssStore + let el = this._curEl + let cssStore = this._curCssStore let { className, id, attributes, tagName } = el @@ -303,8 +304,9 @@ export default class Elements extends Tool { } ret.boxModel = boxModel - if (this._rmDefComputedStyle) + if (this._rmDefComputedStyle) { computedStyle = rmDefComputedStyle(computedStyle) + } ret.rmDefComputedStyle = this._rmDefComputedStyle processStyleRules(computedStyle) ret.computedStyle = computedStyle @@ -358,6 +360,18 @@ export default class Elements extends Tool { } } } + _rmCfg() { + let cfg = this.config + + let settings = this._container.get('settings') + + if (!settings) return + + settings + .remove(cfg, 'overrideEventTarget') + .remove(cfg, 'observeElement') + .remove('Elements') + } _initCfg() { let cfg = (this.config = Settings.createCfg('elements', { overrideEventTarget: true, @@ -484,9 +498,9 @@ function formatChildNodes(nodes) { } function getParents(el) { - let ret = [], - i = 0, - parent = el.parentNode + let ret = [] + let i = 0 + let parent = el.parentNode while (parent && parent.nodeType === 1) { ret.push({ @@ -566,8 +580,9 @@ function rmEvent(el, type, listener, useCapture = false) { if (keys(events).length === 0) delete el.erudaEvents } -let getWinEventProto = () => - safeGet(window, 'EventTarget.prototype') || window.Node.prototype +let getWinEventProto = () => { + return safeGet(window, 'EventTarget.prototype') || window.Node.prototype +} let wrapLink = link => `${link}` diff --git a/src/Network/Network.js b/src/Network/Network.js index 0edff3f..0a94d0f 100644 --- a/src/Network/Network.js +++ b/src/Network/Network.js @@ -199,6 +199,16 @@ export default class Network extends Tool { evalCss.remove(this._style) this.restoreXhr() this.restoreFetch() + this._rmCfg() + } + _rmCfg() { + let cfg = this.config + + let settings = this._container.get('settings') + + if (!settings) return + + settings.remove(cfg, 'overrideFetch').remove('Network') } _initCfg() { let cfg = (this.config = Settings.createCfg('network', { diff --git a/src/Resources/Resources.js b/src/Resources/Resources.js index 6de95dc..dbe3203 100644 --- a/src/Resources/Resources.js +++ b/src/Resources/Resources.js @@ -63,6 +63,7 @@ export default class Resources extends Tool { this._disableObserver() evalCss.remove(this._style) + this._rmCfg() } refreshScript() { let scriptData = [] @@ -179,8 +180,8 @@ export default class Resources extends Tool { }) } else { $('img').each(function() { - let $this = $(this), - src = $this.attr('src') + let $this = $(this) + let src = $this.attr('src') if ($this.data('exclude') === 'true') return @@ -206,9 +207,9 @@ export default class Resources extends Tool { return super.hide() } _bindEvent() { - let self = this, - $el = this._$el, - container = this._container + let self = this + let $el = this._$el + let container = this._container $el .on('click', '.eruda-refresh-local-storage', () => @@ -231,9 +232,9 @@ export default class Resources extends Tool { ) .on('click', '.eruda-refresh-image', () => this.refreshImage()._render()) .on('click', '.eruda-delete-storage', function() { - let $this = $(this), - key = $this.data('key'), - type = $this.data('type') + let $this = $(this) + let key = $this.data('key') + let type = $this.data('type') if (type === 'local') { localStorage.removeItem(key) @@ -267,9 +268,9 @@ export default class Resources extends Tool { this.refreshCookie()._render() }) .on('click', '.eruda-storage-val', function() { - let $this = $(this), - key = $this.data('key'), - type = $this.data('type') + let $this = $(this) + let key = $this.data('key') + let type = $this.data('type') let val = type === 'local' @@ -325,6 +326,18 @@ export default class Resources extends Tool { } } } + _rmCfg() { + let cfg = this.config + + let settings = this._container.get('settings') + + if (!settings) return + + settings + .remove(cfg, 'hideErudaSetting') + .remove(cfg, 'observeElement') + .remove('Resources') + } _initCfg() { let cfg = (this.config = Settings.createCfg('resources', { hideErudaSetting: true, diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js index 8e70204..0b78d5b 100644 --- a/src/Settings/Settings.js +++ b/src/Settings/Settings.js @@ -1,5 +1,14 @@ import Tool from '../DevTools/Tool' -import { evalCss, $, LocalStore } from '../lib/util' +import { + evalCss, + $, + LocalStore, + uniqId, + each, + filter, + isStr, + clone +} from '../lib/util' export default class Settings extends Tool { constructor() { @@ -19,6 +28,27 @@ export default class Settings extends Tool { this._bindEvent() } + remove(config, key) { + if (isStr(config)) { + this._$el.find('.eruda-text').each(function() { + let $this = $(this) + if ($this.text() === config) $this.remove() + }) + } else { + this._settings = filter(this._settings, setting => { + if (setting.config === config && setting.key === key) { + this._$el.find('#' + setting.id).remove() + return false + } + + return true + }) + } + + this._cleanSeparator() + + return this + } destroy() { super.destroy() @@ -29,13 +59,15 @@ export default class Settings extends Tool { this._$el.html('') } switch(config, key, desc) { - this._settings.push({ config, key }) + let id = this._genId('settings') + + this._settings.push({ config, key, id }) this._$el.append( this._switchTpl({ desc, key, - idx: this._settings.length - 1, + id, val: config.get(key) }) ) @@ -48,13 +80,15 @@ export default class Settings extends Tool { desc, colors = ['#2196f3', '#707d8b', '#f44336', '#009688', '#ffc107'] ) { - this._settings.push({ config, key }) + let id = this._genId('settings') + + this._settings.push({ config, key, id }) this._$el.append( this._colorTpl({ desc, colors, - idx: this._settings.length - 1, + id, val: config.get(key) }) ) @@ -62,13 +96,15 @@ export default class Settings extends Tool { return this } select(config, key, desc, selections) { - this._settings.push({ config, key }) + let id = this._genId('settings') + + this._settings.push({ config, key, id }) this._$el.append( this._selectTpl({ desc, selections, - idx: this._settings.length - 1, + id, val: config.get(key) }) ) @@ -76,7 +112,9 @@ export default class Settings extends Tool { return this } range(config, key, desc, { min = 0, max = 1, step = 0.1 }) { - this._settings.push({ config, key, min, max, step }) + let id = this._genId('settings') + + this._settings.push({ config, key, min, max, step, id }) let val = config.get(key) @@ -88,7 +126,7 @@ export default class Settings extends Tool { step, val, progress: progress(val, min, max), - idx: this._settings.length - 1 + id }) ) @@ -104,36 +142,62 @@ export default class Settings extends Tool { return this } + // Merge adjacent separators + _cleanSeparator() { + let children = clone(this._$el.get(0).children) + + function isSeparator(node) { + return node.getAttribute('class') === 'eruda-separator' + } + + for (let i = 0, len = children.length; i < len - 1; i++) { + if (isSeparator(children[i]) && isSeparator(children[i + 1])) { + $(children[i]).remove() + } + } + } + _genId() { + return uniqId('eruda-settings') + } _closeAll() { this._$el.find('.eruda-open').rmClass('eruda-open') } + _getSetting(id) { + let ret + + each(this._settings, setting => { + if (setting.id === id) ret = setting + }) + + return ret + } _bindEvent() { let self = this this._$el .on('click', '.eruda-checkbox', function() { - let $input = $(this).find('input'), - idx = $input.data('idx'), - val = $input.get(0).checked + let $input = $(this).find('input') + let id = $input.data('id') + let val = $input.get(0).checked - let setting = self._settings[idx] + let setting = self._getSetting(id) setting.config.set(setting.key, val) }) .on('click', '.eruda-select .eruda-head', function() { let $el = $(this) - .parent() - .find('ul'), - isOpen = $el.hasClass('eruda-open') + .parent() + .find('ul') + let isOpen = $el.hasClass('eruda-open') self._closeAll() isOpen ? $el.rmClass('eruda-open') : $el.addClass('eruda-open') }) .on('click', '.eruda-select li', function() { - let $this = $(this), - $ul = $this.parent(), - val = $this.text(), - idx = $ul.data('idx'), - setting = self._settings[idx] + let $this = $(this) + let $ul = $this.parent() + let val = $this.text() + let id = $ul.data('id') + let setting = self._getSetting(id) $ul.rmClass('eruda-open') $ul @@ -145,29 +209,29 @@ export default class Settings extends Tool { }) .on('click', '.eruda-range .eruda-head', function() { let $el = $(this) - .parent() - .find('.eruda-input-container'), - isOpen = $el.hasClass('eruda-open') + .parent() + .find('.eruda-input-container') + let isOpen = $el.hasClass('eruda-open') self._closeAll() isOpen ? $el.rmClass('eruda-open') : $el.addClass('eruda-open') }) .on('change', '.eruda-range input', function() { - let $this = $(this), - $container = $this.parent(), - idx = $container.data('idx'), - val = +$this.val(), - setting = self._settings[idx] + let $this = $(this) + let $container = $this.parent() + let id = $container.data('id') + let val = +$this.val() + let setting = self._getSetting(id) setting.config.set(setting.key, val) }) .on('input', '.eruda-range input', function() { - let $this = $(this), - $container = $this.parent(), - idx = $container.data('idx'), - val = +$this.val(), - setting = self._settings[idx], - { min, max } = setting + let $this = $(this) + let $container = $this.parent() + let id = $container.data('id') + let val = +$this.val() + let setting = self._getSetting(id) + let { min, max } = setting $container .parent() @@ -179,19 +243,19 @@ export default class Settings extends Tool { }) .on('click', '.eruda-color .eruda-head', function() { let $el = $(this) - .parent() - .find('ul'), - isOpen = $el.hasClass('eruda-open') + .parent() + .find('ul') + let isOpen = $el.hasClass('eruda-open') self._closeAll() isOpen ? $el.rmClass('eruda-open') : $el.addClass('eruda-open') }) .on('click', '.eruda-color li', function() { - let $this = $(this), - $ul = $this.parent(), - val = $this.css('background-color'), - idx = $ul.data('idx'), - setting = self._settings[idx] + let $this = $(this) + let $ul = $this.parent() + let val = $this.css('background-color') + let id = $ul.data('id') + let setting = self._getSetting(id) $ul.rmClass('eruda-open') $ul diff --git a/src/Settings/color.hbs b/src/Settings/color.hbs index d9d0cb8..b09358f 100644 --- a/src/Settings/color.hbs +++ b/src/Settings/color.hbs @@ -1,9 +1,9 @@ -
+
{{desc}}
-