Dev: Console

src/DevTools/DevTools.es6

@@ -0,0 +1,54 @@
+import NavBar from './NavBar.es6'
+
+require('!style!css!sass!./DevTools.scss');
+
+export default class DevTools
+{
+    constructor($parent)
+    {
+        this._$parent = $parent;
+        this._isShow = false;
+        this._tools = {};
+
+        this._appendTpl();
+        this._initNavBar();
+    }
+    _appendTpl()
+    {
+        var $parent = this._$parent;
+
+        $parent.append(require('./DevTools.hbs')());
+
+        this._$el = $parent.find('.dev-tools');
+        this._$tools = this._$el.find('.tools');
+    }
+    _initNavBar()
+    {
+        this._navBar = new NavBar(this._$el.find('.nav-bar'));
+    }
+    show()
+    {
+        this._isShow = true;
+
+        this._$el.addClass('show').rmClass('hide');
+    }
+    hide()
+    {
+        this._isShow = false;
+
+        this._$el.addClass('hide').rmClass('show');
+        setTimeout(() => this._$el.rmClass('hide'), 3000);
+    }
+    toggle()
+    {
+        this._isShow ? this.hide() : this.show();
+    }
+    add(tool)
+    {
+        var name = tool.name;
+
+        this._$tools.append('<div class="' + name + ' tool"></div>');
+        tool.init(this._$tools.find('.' + name));
+        this._tools[name] = tool;
+    }
+}

src/DevTools/DevTools.hbs

@@ -0,0 +1,4 @@
+<div class="dev-tools">
+    <div class="nav-bar"></div>
+    <div class="tools"></div>
+</div>

src/DevTools/DevTools.scss

@@ -0,0 +1,51 @@
+#eruda {
+    .dev-tools {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        z-index: 500;
+        display: none;
+        &.show {
+            display: block;
+            animation: show-menu .3s linear both;
+        }
+        &.hide {
+            display: block;
+            animation: hide-menu .3s linear both;
+        }
+        .tools {
+            height: calc(100% - 50px);
+            width: 100%;
+            position: relative;
+            overflow: scroll;
+            .tool {
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+@keyframes show-menu {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes hide-menu {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+

src/DevTools/HomeBtn.es6

@@ -0,0 +1,37 @@
+import util from '../util'
+
+var Draggabilly = require('draggabilly');
+
+require('!style!css!sass!./HomeBtn.scss');
+
+export default class HomeBtn
+{
+    constructor($parent)
+    {
+        this._$parent = $parent;
+
+        this._appendTpl();
+        this._makeDraggable();
+        this._bindEvent();
+
+        util.Emitter.mixin(this);
+    }
+    _appendTpl()
+    {
+        var $parent = this._$parent;
+
+        $parent.append(require('./HomeBtn.hbs')());
+
+        this._$el = $parent.find('.home-btn');
+    }
+    _bindEvent()
+    {
+        this._draggabilly.on('staticClick', () => this.emit('click') );
+    }
+    _makeDraggable()
+    {
+        this._draggabilly = new Draggabilly(this._$el.get(0), {
+            containment: true
+        });
+    }
+};

src/DevTools/HomeBtn.hbs

@@ -0,0 +1,3 @@
+<div class="home-btn">
+    <div class="circle"></div>
+</div>

src/DevTools/HomeBtn.scss

@@ -0,0 +1,25 @@
+#eruda {
+    .home-btn {
+        width: 40px;
+        height: 40px;
+        background: rgba(0, 0, 0, 0.8);
+        opacity: 0.3;
+        border-radius: 10px;
+        padding-top: 10px;
+        position: relative;
+        top: 4px;
+        left: 4px;
+        z-index: 1000;
+        transition: opacity .3s;
+        .circle {
+            background: #fff;
+            border-radius: 50%;
+            margin: 0 auto;
+            width: 20px;
+            height: 20px;
+        }
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+}

src/DevTools/NavBar.es6

@@ -0,0 +1,15 @@
+require('!style!css!sass!./NavBar.scss');
+
+export default class NavBar
+{
+    constructor($el)
+    {
+        this._$el = $el;
+
+        this.render();
+    }
+    render()
+    {
+        this._$el.append(require('./NavBar.hbs')());
+    }
+}

src/DevTools/NavBar.hbs

@@ -0,0 +1,3 @@
+<ul>
+    <li class="active">Console</li>
+</ul>

src/DevTools/NavBar.scss

@@ -0,0 +1,21 @@
+#eruda { .dev-tools {
+    .nav-bar {
+        height: 50px;
+        overflow: hidden;
+        box-shadow: 0 1px 0 0 #ccc;
+        ul {
+            display: flex;
+            li {
+                float: left;
+                height: 50px;
+                line-height: 50px;
+                text-align: center;
+                flex-grow: 1;
+                &.active {
+                    color: #76a2ee;
+                    border-bottom: 3px solid #76a2ee;
+                }
+            }
+        }
+    }
+} }