Dev: No auto initialization

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": {

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);
 

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()
     }
 }
 

src/Console/Console.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools { .tools {
     .console {

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 = [];

src/Console/Log.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools { .tools { .console {
     .logs {

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(`<div class="eruda-${name} eruda-tool"></div>`);
+        this._$tools.prepend(`<div class="eruda-${name} eruda-tool"></div>`);
         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;
-
+            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));
     }
 }
 

src/DevTools/DevTools.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools {
     position: absolute;

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(`<li class="${name}">${name}</li>`)
+        this._$el.prepend(`<li class="${name}">${name}</li>`)
                  .css({width: this._len * 69});
     }
     remove(name)

src/DevTools/NavBar.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools {
     .nav-bar {

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);
+                let sources = parent.get('sources');
+
+                if (sources)
+                {
+                    sources.set(type, el.nodeValue);
                     parent.showTool('sources');
                 }
 
-            if (el.nodeType === 1) return self._setEl(el);
+                return;
+            }
+
+            !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()

src/Elements/Elements.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools { .tools {
     .elements {

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;
 

src/Elements/Highlight.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .elements-highlight {
     display: none;

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)
     {

src/EntryBtn/EntryBtn.hbs

@@ -1,3 +1,3 @@
-<div class="eruda-home-btn" ontouchstart>
+<div class="eruda-entry-btn" ontouchstart>
     <span class="eruda-icon-cog"></span>
 </div>

src/EntryBtn/EntryBtn.scss

@@ -1,4 +1,4 @@
-.container { .home-btn {
+.container { .entry-btn {
     width: 40px;
     height: 40px;
     background: #000;

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 = {};

src/Features/Features.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools { .tools {
     .features {

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 = [];

src/Info/Info.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools { .tools {
     .info {

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()
     {

src/Network/Network.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools { .tools {
     .network {

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);
 

src/Resources/Resources.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools { .tools {
     .resources {

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 = [];

src/Settings/Settings.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools { .tools {
     .settings {

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 = [];

src/Snippets/Snippets.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools { .tools {
     .snippets {

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;
 

src/Sources/Sources.scss

@@ -1,4 +1,4 @@
-@import "../variable";
+@import "../style/variable";
 
 .dev-tools { .tools {
     .sources {

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');
+    }
 };
 
+

test/index.html

@@ -5,13 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title>Eruda</title>
     <link rel="stylesheet" href="style.css">
-    <script>
-        (function () {
-            var src = '../dist/eruda.js';
-            if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
-            document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
-        })();
-    </script>
+    <script src="../dist/eruda.js"></script>
+    <script>eruda.init();</script>
 </head>
 <body>
     <div id="test-element" class="border" style="color:red">