Dev: Plugin initialization

src/DevTools/DevTools.es6

@@ -45,9 +45,13 @@ export default class DevTools extends util.Emitter
     }
     add(tool)
     {
-        util.defaults(tool, new Tool());
+        let {init, show, hide} = new Tool();
+        util.defaults(tool, {init, show, hide});
 
-        var name = tool.name;
+        let name = tool.name;
+        if (!name) throw new Error('You must specify a name for a tool');
+        name = name.toLowerCase();
+        if (this._tools[name]) throw new Error('Tool ' + name + ' already exists' );
 
         this._$tools.prepend(`<div class="eruda-${name} eruda-tool"></div>`);
         tool.init(this._$tools.find(`.eruda-${name}`), this);

src/DevTools/NavBar.es6

@@ -19,8 +19,11 @@ export default class NavBar extends util.Emitter
     }
     add(name)
     {
+        let $bottomBar = this._$bottomBar;
+
         this._len++;
         this._$ul.prepend(`<li class="${name}" ontouchstart>${name}</li>`);
+        $bottomBar.css('left', util.pxToNum($bottomBar.css('left')) + ITEM_WIDTH);
         this._resetStyle();
     }
     setHeight(height)
@@ -39,7 +42,7 @@ export default class NavBar extends util.Emitter
             if ($this.text() === name)
             {
                 $this.addClass('eruda-active');
-                self._$bottomBar.css({left: ITEM_WIDTH * idx});
+                self._$bottomBar.css('left', ITEM_WIDTH * idx);
             } else
             {
                 $this.rmClass('eruda-active');
@@ -68,4 +71,4 @@ export default class NavBar extends util.Emitter
     }
 }
 
-const ITEM_WIDTH = 69;
+const ITEM_WIDTH = 69;

src/index.es6

@@ -32,6 +32,8 @@ module.exports = {
     },
     add(tool)
     {
+        if (util.isFn(tool)) tool = tool(this);
+
         this._devTools.add(tool);
 
         return this;

test/manual.html

@@ -15,6 +15,9 @@
         <li>
             <a href="#" id="issue17">#17</a>
         </li>
+        <li>
+            <a href="#" id="plugin">Plugin</a>
+        </li>
     </ul>
 </nav>
 <script>
@@ -37,6 +40,22 @@
         var a = new A();
         console.log(a);
     });
+    addClickEvent('plugin', function ()
+    {
+        eruda.add({name: 'test'});
+        eruda.add(function (eruda)
+        {
+            console.log(eruda);
+            return {
+                name: 'test2',
+                init: function ($el)
+                {
+                    this._$el = $el;
+                    this._$el.html('This is the new plugin');
+                }
+            };
+        });
+    });
 </script>
 <script>boot();</script>
 </body>