Dev: Settings

src/DevTools/DevTools.es6

@@ -1,5 +1,6 @@
 import NavBar from './NavBar.es6'
 import util from '../util'
+import config from '../config/config.es6'
 
 require('./DevTools.scss');
 
@@ -9,16 +10,20 @@ export default class DevTools
     {
         this._$parent = $parent;
         this._isShow = false;
+        this._opacity = 1;
         this._tools = {};
 
         this._appendTpl();
         this._initNavBar();
+        this._initConfig();
     }
     show()
     {
         this._isShow = true;
 
-        this._$el.addClass('eruda-show').rmClass('eruda-hide');
+        this._$el.show();
+        // Need a delay after show to enable transition effect.
+        setTimeout(() => this._$el.css('opacity', this._opacity), 50);
 
         return this;
     }
@@ -26,8 +31,8 @@ export default class DevTools
     {
         this._isShow = false;
 
-        this._$el.addClass('eruda-hide').rmClass('eruda-show');
-        setTimeout(() => this._$el.rmClass('eruda-hide'), 300);
+        this._$el.css({opacity: 0});
+        setTimeout(() => this._$el.hide(), 300);
 
         return this;
     }
@@ -74,6 +79,38 @@ export default class DevTools
 
         return this;
     }
+    _initConfig()
+    {
+        var cfg = this.config = config.create('eruda-dev-tools');
+
+        cfg.set(util.defaults(cfg.get(), {
+            transparent: false,
+            halfScreen: false
+        }));
+
+        if (cfg.get('transparent')) this._setTransparency(true);
+        if (cfg.get('halfScreen')) this._setHalfScreen(true);
+
+        cfg.on('change', (key, val) =>
+        {
+            switch (key)
+            {
+                case 'transparent': return this._setTransparency(val);
+                case 'halfScreen': return this._setHalfScreen(val);
+            }
+        });
+    }
+    _setTransparency(flag)
+    {
+        this._opacity = flag ? 0.9 : 1;
+        if (this._isShow) this._$el.css({opacity: this._opacity});
+    }
+    _setHalfScreen(flag)
+    {
+        this._$el.css({
+            height: flag ? '50%': '100%'
+        });
+    }
     _appendTpl()
     {
         var $parent = this._$parent;

src/DevTools/DevTools.scss

@@ -5,19 +5,15 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    bottom: 0;
+    left: 0;
     padding-top: 50px !important;
     background: #fff;
     z-index: 500;
     display: none;
+    opacity: 0;
+    transition: opacity .3s;
     transform: translateZ(0);
-    &.show {
-        display: block !important;
-        animation: show-menu .3s linear both;
-    }
-    &.hide {
-        display: block !important;
-        animation: hide-menu .3s linear both;
-    }
     .tools {
         height: 100%;
         width: 100%;
@@ -27,6 +23,7 @@
         .tool {
             transform: translateZ(0);
             position: absolute;
+            overflow: hidden;
             left: 0;
             top: 0;
             background: $gray-light;
@@ -36,23 +33,3 @@
     }
 }
 
-
-@keyframes show-menu {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes hide-menu {
-    0% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
-    }
-}
-
-

src/DevTools/HomeBtn.es6

@@ -3,18 +3,17 @@ import Draggabilly from 'draggabilly'
 
 require('./HomeBtn.scss');
 
-export default class HomeBtn
+export default class HomeBtn extends util.Emitter
 {
     constructor($parent)
     {
+        super();
         this._$parent = $parent;
 
         this._appendTpl();
         this._makeDraggable();
         this._setPos();
         this._bindEvent();
-
-        util.Emitter.mixin(this);
     }
     _appendTpl()
     {

src/DevTools/NavBar.es6

@@ -2,16 +2,15 @@ import util from '../util'
 
 require('./NavBar.scss');
 
-export default class NavBar
+export default class NavBar extends util.Emitter
 {
     constructor($el)
     {
+        super();
         this._$el = $el;
         this._len = 0;
 
         this._bindEvent();
-
-        util.Emitter.mixin(this);
     }
     add(name)
     {

src/DevTools/Tool.es6

@@ -16,4 +16,8 @@ export default class Tool
 
         return this;
     }
+    getConfig()
+    {
+        return this._config;
+    }
 }