Dev: Support auto scale liriliri#32

Jazzh5 · Oct 6, 2017 · 37dcb1b · 37dcb1b
1 parent c1550c0
commit 37dcb1b
Show file tree

Hide file tree

Showing 19 changed files with 301 additions and 73 deletions.
diff --git a/eustia/evalCss.js b/eustia/evalCss.js
@@ -1,23 +1,51 @@
-var mark = [];
+_('toStr each filter');
+
+var styleList = [],
+    scale = 1;
 
 function exports(css)
 {
-    for (var i = 0, len = mark.length; i < len; i++)
+    css = toStr(css);
+
+    for (var i = 0, len = styleList.length; i < len; i++)
     {
-        if (mark[i] === css) return;
+        if (styleList[i].css === css) return;
     }
-    mark.push(css);
 
-    var container = exports.container || document.head,
-        style = document.createElement('style');
+    let container = exports.container || document.head,
+        el = document.createElement('style');
 
-    style.type = 'text/css';
-    style.textContent = css;
+    el.type = 'text/css';
+    container.appendChild(el);
+
+    let style = {css, el, container};
+    resetStyle(style);
+    styleList.push(style);
 
-    container.appendChild(style);
+    return style;
 }
 
-exports.reset = function () 
+exports.setScale = function (s) 
+{
+    scale = s;
+    each(styleList, style => resetStyle(style));
+};
+
+exports.clear = function () 
+{
+    each(styleList, ({container, el}) => container.removeChild(el));
+    styleList = [];
+};
+
+exports.remove = function (style) 
 {
-    mark = [];
-};
+    console.log(style);
+    styleList = filter(styleList, s => s !== style);
+
+    style.container.removeChild(style.el);
+};
+
+function resetStyle({css, el}) 
+{
+    el.innerText = css.replace(/(\d+)px/g, ($0, $1) => (+$1 * scale) + 'px');
+}
diff --git a/src/Console/Console.js b/src/Console/Console.js
@@ -1,6 +1,7 @@
 import Logger from './Logger'
 import Tool from '../DevTools/Tool'
 import util from '../lib/util'
+import emitter from '../lib/emitter'
 
 export default class Console extends Tool
 {
@@ -9,6 +10,9 @@ export default class Console extends Tool
         super();
 
         this.name = 'console';
+        this._scale = 1;
+
+        this._registerListener();
     }
     init($el, parent)
     {
@@ -80,16 +84,29 @@ export default class Console extends Tool
     }
     destroy() 
     {
+        this._logger.destroy();
         super.destroy();
 
+        util.evalCss.remove(this._style);
         this.ignoreGlobalErr();
         this.restoreConsole();
+        this._unregisterListener();
+    }
+    _registerListener() 
+    {
+        this._scaleListener = scale => this._scale = scale;
+
+        emitter.on(emitter.SCALE, this._scaleListener);
+    }
+    _unregisterListener() 
+    {
+        emitter.off(emitter.SCALE, this._scaleListener);
     }
     _appendTpl()
     {
         let $el = this._$el;
 
-        util.evalCss(require('./Console.scss'));
+        this._style = util.evalCss(require('./Console.scss'));
         $el.append(require('./Console.hbs')());
 
         let _$inputContainer = $el.find('.eruda-js-input'),
@@ -174,15 +191,15 @@ export default class Console extends Tool
     {
         this._$inputContainer.css({
             paddingTop: 0,
-            height: 40
+            height: 40 * this._scale 
         });
 
         this._$inputBtns.hide();
     }
     _showInput()
     {
         this._$inputContainer.css({
-            paddingTop: 40,
+            paddingTop: 40 * this._scale,
             height: '100%'
         });
 

diff --git a/src/Console/Logger.js b/src/Console/Logger.js
@@ -6,7 +6,7 @@ export default class Logger extends util.Emitter
     constructor($el, parent)
     {
         super();
-        util.evalCss(require('./Logger.scss'));
+        this._style = util.evalCss(require('./Logger.scss'));
 
         this._$el = $el;
         this._parent = parent;
@@ -47,6 +47,10 @@ export default class Logger extends util.Emitter
     {
         Log.showSrcInSources = flag;
     }
+    destroy() 
+    {
+        util.evalCss.remove(this._style);
+    }
     filter(val)
     {
         this._filter = val;

diff --git a/src/DevTools/DevTools.js b/src/DevTools/DevTools.js
@@ -2,6 +2,7 @@ import NavBar from './NavBar'
 import util from '../lib/util'
 import logger from '../lib/logger'
 import Tool from './Tool'
+import emitter from '../lib/emitter'
 
 export default class DevTools extends util.Emitter
 {
@@ -10,15 +11,17 @@ export default class DevTools extends util.Emitter
         super();
 
         if (!util.isMobile()) util.evalCss(require('../style/scrollbar.css'));
-        util.evalCss(require('./DevTools.scss'));
+        this._style = util.evalCss(require('./DevTools.scss'));
 
         this.$parent = $parent;
         this._isShow = false;
         this._opacity = 1;
+        this._scale = 1;
         this._tools = {};
 
         this._appendTpl();
         this._initNavBar();
+        this._registerListener();
     }
     show()
     {
@@ -168,15 +171,32 @@ export default class DevTools extends util.Emitter
     }
     setNavBarHeight(height)
     {
-        this._$el.css('paddingTop', height);
-        this._navBar.setHeight(height);
+        this._navBarHeight = height;
+        this._$el.css('paddingTop', height * this._scale);
+        this._navBar.setHeight(height * this._scale);
     }
     destroy() 
     {
+        util.evalCss.remove(this._style);
+        this._unregisterListener();
         this.removeAll();
         this._navBar.destroy();
         this._$el.remove();
     }
+    _registerListener() 
+    {
+        this._scaleListener = scale => 
+        {
+            this._scale = scale;
+            this.setNavBarHeight(this._navBarHeight);
+        }
+
+        emitter.on(emitter.SCALE, this._scaleListener);
+    }
+    _unregisterListener() 
+    {
+        emitter.off(emitter.SCALE, this._scaleListener);
+    }
     _setTransparency(opacity)
     {
         if (!util.isNum(opacity)) return;

diff --git a/src/DevTools/NavBar.js b/src/DevTools/NavBar.js
@@ -6,7 +6,7 @@ export default class NavBar extends util.Emitter
     {
         super();
 
-        util.evalCss(require('./NavBar.scss'));
+        this._style = util.evalCss(require('./NavBar.scss'));
 
         this._$el = $el;
         $el.html('<div class="eruda-bottom-bar"></div>');
@@ -60,6 +60,7 @@ export default class NavBar extends util.Emitter
     }
     destroy() 
     {
+        util.evalCss.remove(this._style);
         this._$el.remove();
     }
     _resetBottomBar() 
@@ -82,7 +83,6 @@ export default class NavBar extends util.Emitter
         this._$el.css('height', height);
 
         let $el = this._$el;
-        this._resetBottomBar();
 
         $el.css({
             height: height
@@ -91,6 +91,8 @@ export default class NavBar extends util.Emitter
             'height': height,
             'lineHeight': height
         });
+
+        this._resetBottomBar();
     }
     _bindEvent()
     {

diff --git a/src/Elements/Elements.js b/src/Elements/Elements.js
@@ -11,7 +11,7 @@ export default class Elements extends Tool
     {
         super();
 
-        util.evalCss(require('./Elements.scss'));
+        this._style = util.evalCss(require('./Elements.scss'));
 
         this.name = 'elements';
         this._tpl = require('./Elements.hbs');
@@ -87,7 +87,9 @@ export default class Elements extends Tool
     {
         super.destroy();
 
+        util.evalCss.remove(this._style);
         this._select.disable();
+        this._highlight.destroy();
         this.restoreEventTarget();
     }
     _back()

diff --git a/src/Elements/Highlight.js b/src/Elements/Highlight.js
@@ -4,7 +4,7 @@ export default class Highlight
 {
     constructor($parent)
     {
-        util.evalCss(require('./Highlight.scss'));
+        this._style = util.evalCss(require('./Highlight.scss'));
 
         this._isShow = false;
 
@@ -22,6 +22,10 @@ export default class Highlight
         this.render();
         this._$el.show();
     }
+    destroy() 
+    {
+        util.evalCss.remove(this._style);
+    }
     hide()
     {
         this._isShow = false;

diff --git a/src/EntryBtn/EntryBtn.js b/src/EntryBtn/EntryBtn.js
@@ -1,18 +1,20 @@
 import util from '../lib/util'
 import Draggabilly from 'draggabilly'
+import emitter from '../lib/emitter'
 
 export default class EntryBtn extends util.Emitter
 {
     constructor($parent)
     {
         super();
 
-        util.evalCss(require('./EntryBtn.scss'));
+        this._style = util.evalCss(require('./EntryBtn.scss'));
 
         this._$parent = $parent;
         this._appendTpl();
         this._makeDraggable();
         this._bindEvent();
+        this._registerListener();
     }
     hide() 
     {
@@ -24,8 +26,33 @@ export default class EntryBtn extends util.Emitter
     }
     destroy() 
     {
+        util.evalCss.remove(this._style);
+        this._unregisterListener();
         this._$el.remove();
     }
+    _isOutOfRange() 
+    {
+        let cfg = this.config,
+            pos = cfg.get('pos'),
+            defPos = this._getDefPos();
+
+        return pos.x > defPos.x + 10 ||
+               pos.x < 0 ||
+               pos.y < 0 ||
+               pos.y > defPos.y + 10;
+    }
+    _registerListener() 
+    {
+        this._scaleListener = () => util.nextTick(() => 
+        {
+            if (this._isOutOfRange()) this._setPos();
+        });
+        emitter.on(emitter.SCALE, this._scaleListener)
+    }
+    _unregisterListener() 
+    {
+        emitter.off(emitter.SCALE, this._scaleListener);
+    }
     _appendTpl()
     {
         let $parent = this._$parent;
@@ -39,12 +66,7 @@ export default class EntryBtn extends util.Emitter
             pos = cfg.get('pos'),
             defPos = this._getDefPos();
 
-        let outOfRange = pos.x > defPos.x + 10 ||
-                         pos.x < 0 ||
-                         pos.y < 0 ||
-                         pos.y > defPos.y + 10;
-
-        if (outOfRange ||
+        if (this._isOutOfRange() ||
             !cfg.get('rememberPos') ||
             orientationChanged) pos = defPos;
 

diff --git a/src/Features/Features.js b/src/Features/Features.js
@@ -13,7 +13,7 @@ export default class Features extends Tool
     {
         super();
 
-        util.evalCss(require('./Features.scss'));
+        this._style = util.evalCss(require('./Features.scss'));
 
         this.name = 'features';
         this._tpl = require('./Features.hbs');
@@ -26,6 +26,12 @@ export default class Features extends Tool
 
         if (!this._isInit) this._initFeatures();
     }
+    destroy() 
+    {
+        super.destroy();
+
+        util.evalCss.remove(this._style);
+    }
     _initFeatures()
     {
         this._isInit = true;