diff --git a/package.json b/package.json index ad4aab4..2ac0c55 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "eruda", - "version": "0.4.1", + "version": "0.5.0", "description": "Console for mobile JavaScript", "main": "dist/eruda.js", "scripts": { diff --git a/script/icomoon.js b/script/icomoon.js index 3fc8da5..07fb88b 100644 --- a/script/icomoon.js +++ b/script/icomoon.js @@ -31,7 +31,7 @@ function genCssFile(fontData) function writeCssFile(data) { - fs.writeFile(path.resolve(__dirname, '../src/icon.css'), data, 'utf-8', function (err, data) + fs.writeFile(path.resolve(__dirname, '../src/style/icon.css'), data, 'utf-8', function (err, data) { if (err) return console.log(err); diff --git a/src/Console/Console.es6 b/src/Console/Console.es6 index 7d1eb76..ff4df88 100644 --- a/src/Console/Console.es6 +++ b/src/Console/Console.es6 @@ -3,14 +3,14 @@ import Tool from '../DevTools/Tool.es6' import util from '../lib/util' import config from '../lib/config.es6' -require('./Console.scss'); - export default class Console extends Tool { constructor() { super(); + require('./Console.scss'); + this.name = 'console'; } init($el, parent) @@ -137,7 +137,10 @@ export default class Console extends Tool log.on('viewJson', (data) => { - parent.get('sources').set('json', data); + var sources = parent.get('sources'); + if (!sources) return; + + sources.set('json', data); parent.showTool('sources'); }).on('insert', (log) => { @@ -186,6 +189,13 @@ export default class Console extends Tool case 'overrideConsole': return val ? this.overrideConsole() : this.restoreConsole(); } }); + + var settings = this._parent.get('settings'); + + settings.add(cfg, 'catchGlobalErr', 'Catch Global Errors') + .add(cfg, 'overrideConsole', 'Override Console') + .add(cfg, 'displayIfErr', 'Auto Display If Error Occurs') + .separator() } } diff --git a/src/Console/Console.scss b/src/Console/Console.scss index 189ef87..5cb764c 100644 --- a/src/Console/Console.scss +++ b/src/Console/Console.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { .tools { .console { diff --git a/src/Console/Log.es6 b/src/Console/Log.es6 index ad94851..077de6e 100644 --- a/src/Console/Log.es6 +++ b/src/Console/Log.es6 @@ -2,14 +2,14 @@ import util from '../lib/util' import highlight from '../lib/highlight.es6' import beautify from 'js-beautify' -require('./Log.scss'); - export default class Log extends util.Emitter { constructor($el, parent) { super(); + require('./Log.scss'); + this._$el = $el; this._parent = parent; this._logs = []; diff --git a/src/Console/Log.scss b/src/Console/Log.scss index 37a6967..0c43a03 100644 --- a/src/Console/Log.scss +++ b/src/Console/Log.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { .tools { .console { .logs { diff --git a/src/DevTools/DevTools.es6 b/src/DevTools/DevTools.es6 index 316b686..db369f9 100644 --- a/src/DevTools/DevTools.es6 +++ b/src/DevTools/DevTools.es6 @@ -3,14 +3,14 @@ import util from '../lib/util' import Tool from './Tool.es6' import config from '../lib/config.es6' -require('./DevTools.scss'); - export default class DevTools extends util.Emitter { constructor($parent) { super(); + require('./DevTools.scss'); + this.$parent = $parent; this._isShow = false; this._opacity = 1; @@ -49,7 +49,7 @@ export default class DevTools extends util.Emitter var name = tool.name; - this._$tools.append(`
`); + this._$tools.prepend(`
`); tool.init(this._$tools.find(`.eruda-${name}`), this); tool.active = false; this._tools[name] = tool; @@ -97,10 +97,12 @@ export default class DevTools extends util.Emitter util.each(tools, (tool) => { - if (tool.active) lastTool = tool; - - tool.active = false; - tool.hide(); + if (tool.active) + { + lastTool = tool; + tool.active = false; + tool.hide(); + } }); tool.active = true; @@ -156,7 +158,7 @@ export default class DevTools extends util.Emitter _initNavBar() { this._navBar = new NavBar(this._$el.find('.eruda-nav-bar ul')); - this._navBar.on('showTool', name => this.showTool(name)); + this._navBar.on('showTool', (name) => this.showTool(name)); } } diff --git a/src/DevTools/DevTools.scss b/src/DevTools/DevTools.scss index 169dce0..1885b62 100644 --- a/src/DevTools/DevTools.scss +++ b/src/DevTools/DevTools.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { position: absolute; diff --git a/src/DevTools/NavBar.es6 b/src/DevTools/NavBar.es6 index 4e194d4..a93d5f5 100644 --- a/src/DevTools/NavBar.es6 +++ b/src/DevTools/NavBar.es6 @@ -1,12 +1,13 @@ import util from '../lib/util' -require('./NavBar.scss'); - export default class NavBar extends util.Emitter { constructor($el) { super(); + + require('./NavBar.scss'); + this._$el = $el; this._len = 0; @@ -15,7 +16,7 @@ export default class NavBar extends util.Emitter add(name) { this._len++; - this._$el.append(`
  • ${name}
    • `) + this._$el.prepend(`
  • ${name}
    • `) .css({width: this._len * 69}); } remove(name) diff --git a/src/DevTools/NavBar.scss b/src/DevTools/NavBar.scss index d0b7a86..58bb3d5 100644 --- a/src/DevTools/NavBar.scss +++ b/src/DevTools/NavBar.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { .nav-bar { diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6 index 8840984..491c0f7 100644 --- a/src/Elements/Elements.es6 +++ b/src/Elements/Elements.es6 @@ -4,14 +4,14 @@ import Highlight from './Highlight.es6' import Select from './Select.es6' import util from '../lib/util' -require('./Elements.scss'); - export default class Elements extends Tool { constructor() { super(); + require('./Elements.scss'); + this.name = 'elements'; this._tpl = require('./Elements.hbs'); this._rmDefComputedStyle = true; @@ -49,7 +49,7 @@ export default class Elements extends Tool while (!isElExist(parent)) parent = parentQueue.shift(); - this._setEl(parent); + this._setElAndRender(parent); } _bindEvent() { @@ -62,9 +62,7 @@ export default class Elements extends Tool curEl = self._curEl, el = curEl.childNodes[idx]; - if (!isElExist(el)) self._render(); - - if (el.nodeType === 3) + if (el && el.nodeType === 3) { let parent = self._parent, curTagName = curEl.tagName, @@ -77,11 +75,18 @@ export default class Elements extends Tool default: return; } - parent.get('sources').set(type, el.nodeValue); - parent.showTool('sources'); + let sources = parent.get('sources'); + + if (sources) + { + sources.set(type, el.nodeValue); + parent.showTool('sources'); + } + + return; } - if (el.nodeType === 1) return self._setEl(el); + !isElExist(el) ? self._render() : self._setEl(el); }).on('click', '.toggle-all-computed-style', () => this._toggleAllComputedStyle()); var $bottomBar = this._$el.find('.eruda-bottom-bar'); @@ -90,9 +95,9 @@ export default class Elements extends Tool .on('click', '.eruda-refresh', () => this._render()) .on('click', '.eruda-highlight', () => this._toggleHighlight()) .on('click', '.eruda-select', () => this._toggleSelect()) - .on('click', '.eruda-reset', () => this._setEl(this._htmlEl)); + .on('click', '.eruda-reset', () => this._setElAndRender(this._htmlEl)); - select.on('select', target => this._setEl(target)); + select.on('select', target => this._setElAndRender(target)); } _toggleAllComputedStyle() { @@ -143,7 +148,10 @@ export default class Elements extends Tool parent = parent.parentNode; } this._curParentQueue = parentQueue; - + } + _setElAndRender(e) + { + this._setEl(e); this._render(); } _getData() diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss index 79b91cc..6ecc08c 100644 --- a/src/Elements/Elements.scss +++ b/src/Elements/Elements.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { .tools { .elements { diff --git a/src/Elements/Highlight.es6 b/src/Elements/Highlight.es6 index 69c8de2..b04f44f 100644 --- a/src/Elements/Highlight.es6 +++ b/src/Elements/Highlight.es6 @@ -1,11 +1,11 @@ import util from '../lib/util' -require('./Highlight.scss'); - export default class Highlight { constructor($parent) { + require('./Highlight.scss'); + this._isShow = false; this._top = 0; diff --git a/src/Elements/Highlight.scss b/src/Elements/Highlight.scss index 69d6330..1248b32 100644 --- a/src/Elements/Highlight.scss +++ b/src/Elements/Highlight.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .elements-highlight { display: none; diff --git a/src/EntryBtn/EntryBtn.es6 b/src/EntryBtn/EntryBtn.es6 index 64615df..379b5bf 100644 --- a/src/EntryBtn/EntryBtn.es6 +++ b/src/EntryBtn/EntryBtn.es6 @@ -2,14 +2,14 @@ import util from '../lib/util' import Draggabilly from 'draggabilly' import config from '../lib/config.es6' -require('./EntryBtn.scss'); - export default class EntryBtn extends util.Emitter { constructor($parent) { super(); + require('./EntryBtn.scss'); + this._$parent = $parent; this._appendTpl(); this._makeDraggable(); @@ -22,7 +22,7 @@ export default class EntryBtn extends util.Emitter var $parent = this._$parent; $parent.append(require('./EntryBtn.hbs')()); - this._$el = $parent.find('.eruda-home-btn'); + this._$el = $parent.find('.eruda-entry-btn'); } _setPos(orientationChanged) { diff --git a/src/EntryBtn/EntryBtn.hbs b/src/EntryBtn/EntryBtn.hbs index 0005c51..a0212c0 100644 --- a/src/EntryBtn/EntryBtn.hbs +++ b/src/EntryBtn/EntryBtn.hbs @@ -1,3 +1,3 @@ -
    +
    \ No newline at end of file diff --git a/src/EntryBtn/EntryBtn.scss b/src/EntryBtn/EntryBtn.scss index 7e5af79..e7836f2 100644 --- a/src/EntryBtn/EntryBtn.scss +++ b/src/EntryBtn/EntryBtn.scss @@ -1,4 +1,4 @@ -.container { .home-btn { +.container { .entry-btn { width: 40px; height: 40px; background: #000; diff --git a/src/Features/Features.es6 b/src/Features/Features.es6 index cb021e5..5a810a1 100644 --- a/src/Features/Features.es6 +++ b/src/Features/Features.es6 @@ -2,8 +2,6 @@ import Tool from '../DevTools/Tool.es6' import util from '../lib/util' import modernizr from './modernizr' -require('./Features.scss'); - var featureList = require('./featureList.json'); var featureNames = featureList['feature-detects'], @@ -14,6 +12,9 @@ export default class Features extends Tool constructor() { super(); + + require('./Features.scss'); + this.name = 'features'; this._tpl = require('./Features.hbs'); this._features = {}; diff --git a/src/Features/Features.scss b/src/Features/Features.scss index add10e4..f088cb7 100644 --- a/src/Features/Features.scss +++ b/src/Features/Features.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { .tools { .features { diff --git a/src/Info/Info.es6 b/src/Info/Info.es6 index 52898cb..e41a4d5 100644 --- a/src/Info/Info.es6 +++ b/src/Info/Info.es6 @@ -2,13 +2,14 @@ import Tool from '../DevTools/Tool.es6' import util from '../lib/util' import defInfo from './defInfo.es6' -require('./Info.scss'); - export default class Info extends Tool { constructor() { super(); + + require('./Info.scss'); + this.name = 'info'; this._tpl = require('./Info.hbs'); this._msgs = []; diff --git a/src/Info/Info.scss b/src/Info/Info.scss index 0cdd112..4a65ac5 100644 --- a/src/Info/Info.scss +++ b/src/Info/Info.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { .tools { .info { diff --git a/src/Network/Network.es6 b/src/Network/Network.es6 index 72d4982..f64b42f 100644 --- a/src/Network/Network.es6 +++ b/src/Network/Network.es6 @@ -3,13 +3,14 @@ import Request from './Request.es6' import util from '../lib/util' import config from '../lib/config.es6' -require('./Network.scss'); - export default class Network extends Tool { constructor() { super(); + + require('./Network.scss'); + this.name = 'network'; this._performanceTimingData = []; this._requests = {}; @@ -136,6 +137,8 @@ export default class Network extends Tool var sources = parent.get('sources'); + if (!sources) return; + sources.set('http', { url: data.url, resTxt: data.resTxt, @@ -253,6 +256,10 @@ export default class Network extends Tool case 'overrideXhr': return val ? this.overrideXhr() : this.restoreXhr(); } }); + + var settings = this._parent.get('settings'); + settings.add(cfg, 'overrideXhr', 'Catch Ajax Requests') + .separator(); } _render() { diff --git a/src/Network/Network.scss b/src/Network/Network.scss index fddb31e..38e70f3 100644 --- a/src/Network/Network.scss +++ b/src/Network/Network.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { .tools { .network { diff --git a/src/Resources/Resources.es6 b/src/Resources/Resources.es6 index 5af40e9..bb8d03c 100644 --- a/src/Resources/Resources.es6 +++ b/src/Resources/Resources.es6 @@ -1,13 +1,14 @@ import Tool from '../DevTools/Tool.es6' import util from '../lib/util' -require('./Resources.scss'); - export default class Resources extends Tool { constructor() { super(); + + require('./Resources.scss'); + this.name = 'resources'; this._localStoreData = []; this._cookieData = []; @@ -180,6 +181,7 @@ export default class Resources extends Tool function showSources(type, data) { var sources = parent.get('sources'); + if (!sources) return; sources.set(type, data); diff --git a/src/Resources/Resources.scss b/src/Resources/Resources.scss index 574a480..0680657 100644 --- a/src/Resources/Resources.scss +++ b/src/Resources/Resources.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { .tools { .resources { diff --git a/src/Settings/Settings.es6 b/src/Settings/Settings.es6 index 64edcea..5f87389 100644 --- a/src/Settings/Settings.es6 +++ b/src/Settings/Settings.es6 @@ -1,13 +1,14 @@ import Tool from '../DevTools/Tool.es6' import util from '../lib/util' -require('./Settings.scss'); - export default class Settings extends Tool { constructor() { super(); + + require('./Settings.scss'); + this.name = 'settings'; this._switchTpl = require('./switch.hbs'); this._settings = []; diff --git a/src/Settings/Settings.scss b/src/Settings/Settings.scss index 9b10313..cf3b98b 100644 --- a/src/Settings/Settings.scss +++ b/src/Settings/Settings.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { .tools { .settings { diff --git a/src/Snippets/Snippets.es6 b/src/Snippets/Snippets.es6 index 837bff9..2991674 100644 --- a/src/Snippets/Snippets.es6 +++ b/src/Snippets/Snippets.es6 @@ -2,13 +2,14 @@ import Tool from '../DevTools/Tool.es6' import defSnippets from './defSnippets.es6' import util from '../lib/util' -require('./Snippets.scss'); - export default class Snippets extends Tool { constructor() { super(); + + require('./Snippets.scss'); + this.name = 'snippets'; this._snippets = []; diff --git a/src/Snippets/Snippets.scss b/src/Snippets/Snippets.scss index 79fd53b..145b031 100644 --- a/src/Snippets/Snippets.scss +++ b/src/Snippets/Snippets.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { .tools { .snippets { diff --git a/src/Sources/Sources.es6 b/src/Sources/Sources.es6 index 9b37b2b..0074170 100644 --- a/src/Sources/Sources.es6 +++ b/src/Sources/Sources.es6 @@ -4,13 +4,14 @@ import beautify from 'js-beautify' import highlight from '../lib/highlight.es6' import JsonViewer from './JsonViewer.es6' -require('./Sources.scss'); - export default class Sources extends Tool { constructor() { super(); + + require('./Sources.scss'); + this.name = 'sources'; this._isInit = false; diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss index 49ba54c..779a4c0 100644 --- a/src/Sources/Sources.scss +++ b/src/Sources/Sources.scss @@ -1,4 +1,4 @@ -@import "../variable"; +@import "../style/variable"; .dev-tools { .tools { .sources { diff --git a/src/index.es6 b/src/index.es6 index 2f2ca3b..ba9c44f 100644 --- a/src/index.es6 +++ b/src/index.es6 @@ -1,4 +1,4 @@ -import HomeBtn from './EntryBtn/EntryBtn.es6' +import EntryBtn from './EntryBtn/EntryBtn.es6' import DevTools from './DevTools/DevTools.es6' import Console from './Console/Console.es6' import Network from './Network/Network.es6' @@ -12,96 +12,117 @@ import Settings from './Settings/Settings.es6' import util from './lib/util' import config from './lib/config.es6' -require('./style.scss'); -require('./reset.scss'); -require('./icon.css'); - -var $container; - -appendContainer(); - -var devTools = new DevTools($container); - -var homeBtn = new HomeBtn($container); - -homeBtn.on('click', () => devTools.toggle()); - -var consoleTool = new Console(), - network = new Network(), - elements = new Elements(), - snippets = new Snippets(), - resources = new Resources(), - info = new Info(), - sources = new Sources(), - features = new Features(), - settings = new Settings(); - -devTools.add(consoleTool) - .add(elements) - .add(network) - .add(resources) - .add(info) - .add(snippets) - .add(sources) - .add(features) - .add(settings) - .showTool('console'); - -settings.separator() - .add(devTools.config, 'activeEruda', 'Always Activated') - .separator() - .add(homeBtn.config, 'rememberPos', 'Remember Entry Button Position') - .separator() - .add(devTools.config, 'transparent', 'Transparent') - .add(devTools.config, 'halfScreen', 'Half Screen Size') - .separator() - .add(consoleTool.config, 'catchGlobalErr', 'Catch Global Errors') - .add(consoleTool.config, 'overrideConsole', 'Override Console') - .add(consoleTool.config, 'displayIfErr', 'Auto Display If Error Occurs') - .separator() - .add(network.config, 'overrideXhr', 'Catch Ajax Requests'); - -function appendContainer() -{ - if (eruda) eruda.destroy(); - - var containerNode = document.createElement('div'); - containerNode.id = 'eruda'; - containerNode.className = 'eruda-container'; - document.documentElement.appendChild(containerNode); - $container = util.$(containerNode); -} - module.exports = { + init(options) + { + require('./style/style.scss'); + require('./style/reset.scss'); + require('./style/icon.css'); + + options = options || {}; + util.defaults(options, { + tool: ['console', 'elements', 'network', 'resources', 'sources', 'info', 'snippets', 'features'] + }); + options.tool = util.toArr(options.tool).reverse(); + this._options = options; + + this.config = config; + this.util = util; + + this.Console = Console; + this.Elements = Elements; + this.Network = Network; + this.Sources = Sources; + this.Resources = Resources; + this.Info = Info; + this.Snippets = Snippets; + this.Features = Features; + + this._initContainer(); + this._initDevTools(); + this._initEntryBtn(); + this._initSettings(); + this._initTools(); + }, get(name) { - return util.isUndef(name) ? devTools : devTools.get(name); + return util.isUndef(name) ? this._devTools : this._devTools.get(name); }, add(tool) { - devTools.add(tool); + this._devTools.add(tool); return this; }, remove(name) { - devTools.remove(name); + this._devTools.remove(name); return this; }, show(name) { - util.isUndef(name) ? devTools.show() : devTools.showTool(name); + util.isUndef(name) ? this._devTools.show() : this._devTools.showTool(name); return this; }, - destroy() + _initContainer() { - devTools.destroy(); - $container.remove(); - window.eruda = undefined; + var el; + + var container = this._options.container; + if (util.isEl(container)) + { + el = container; + } else + { + el = document.createElement('div'); + document.documentElement.appendChild(el); + el.id = 'eruda'; + el.className = 'eruda-container' + } + + this._$el = util.$(el); }, - config, - util + _initDevTools() + { + this._devTools = new DevTools(this._$el); + }, + _initEntryBtn() + { + var entryBtn = this._entryBtn = new EntryBtn(this._$el); + + entryBtn.on('click', () => this._devTools.toggle()); + }, + _initSettings() + { + var devTools = this._devTools; + + var settings = new Settings(); + devTools.add(settings); + + settings.separator() + .add(this._entryBtn.config, 'rememberPos', 'Remember Entry Button Position') + .separator() + .add(devTools.config, 'activeEruda', 'Always Activated') + .add(devTools.config, 'transparent', 'Transparent') + .add(devTools.config, 'halfScreen', 'Half Screen Size') + .separator(); + }, + _initTools() + { + var tool = this._options.tool, + devTools = this._devTools; + + tool.forEach(name => + { + var Tool = this[util.upperFirst(name)]; + + if (Tool) devTools.add(new Tool()); + }); + + devTools.showTool(util.last(tool) || 'settings'); + } }; + diff --git a/src/icon.css b/src/style/icon.css similarity index 100% rename from src/icon.css rename to src/style/icon.css diff --git a/src/reset.scss b/src/style/reset.scss similarity index 100% rename from src/reset.scss rename to src/style/reset.scss diff --git a/src/style.scss b/src/style/style.scss similarity index 100% rename from src/style.scss rename to src/style/style.scss diff --git a/src/variable.scss b/src/style/variable.scss similarity index 100% rename from src/variable.scss rename to src/style/variable.scss diff --git a/test/index.html b/test/index.html index 0a1e712..4c48cc1 100644 --- a/test/index.html +++ b/test/index.html @@ -5,13 +5,8 @@ Eruda - + +