add disableLogScrolling option

mixsun · Apr 9, 2018 · 1a777b1 · 1a777b1
1 parent 7509f6e
commit 1a777b1
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 #### V3.2.0-dev (2018-04-xx)
 
 - [FEATURE] Support `console.time()` and `console.timeEnd()`.
+- [FEATRUE] Add `disableLogScrolling` (in `vConsole.option`).
 - [FIX] Fix `setOption()` error.
 - [FIX] Fix cookies' value wrong display.
 

diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -1,8 +1,9 @@
 [English](./CHANGELOG.md) | 简体中文
 
-#### V3.2.0 (2018-04-xx)
+#### V3.2.0-dev (2018-04-xx)
 
 - 【特性】支持 `console.time()` 及 `console.timeEnd()`。
+- 【特性】新增 `disableLogScrolling` 配置项（`vConsole.option`），用于禁止新日志引起的自动滚动到底部。
 - 【修复】修复初始化后立即调用 `setOption` 引起的错误。
 - 【修复】修复 cookies 显示错误的问题。
 

diff --git a/dist/vconsole.min.js b/dist/vconsole.min.js
diff --git a/doc/public_properties_methods.md b/doc/public_properties_methods.md
@@ -16,7 +16,7 @@ The current version of vConsole.
 Example:
 
 ```javascript
-vConsole.version // => "3.0.0"
+vConsole.version // => "3.1.0"
 ```
 
 
@@ -27,12 +27,13 @@ A configuration object.
 - Writable
 - Type: object
 
-Key            | Type     | Optional | Default value                               | Description
--------------- | -------- | -------- | ------------------------------------------- | -------------------
-defaultPlugins | Array    | true     | ['system', 'network', 'element', 'storage'] | Listed built-in plugins will be inited and loaded into vConsole. 
-onReady        | Function | true     |                                             | Trigger after vConsole is inited and default plugins is loaded.
-onClearLog     | Function | true     |                                             | Trigger after click "Clear" button in Log and System panel.
-maxLogNumber   | Number   | true     | 1000                                        | Overflow logs will be removed from log tabs.
+Key                   | Type     | Optional | Default value                               | Description
+--------------------- | -------- | -------- | ------------------------------------------- | -------------------
+defaultPlugins        | Array    | true     | ['system', 'network', 'element', 'storage'] | Listed built-in plugins will be inited and loaded into vConsole. 
+onReady               | Function | true     |                                             | Trigger after vConsole is inited and default plugins is loaded.
+onClearLog            | Function | true     |                                             | Trigger after click "Clear" button in Log and System panel.
+maxLogNumber          | Number   | true     | 1000                                        | Overflow logs will be removed from log tabs.
+disableLogScrolling   | Boolean  | true     |                                             | If `false`, panel will not scroll to bottom while printing new logs.
 
 Example:
 

diff --git a/doc/public_properties_methods_CN.md b/doc/public_properties_methods_CN.md
@@ -16,7 +16,7 @@ vConsole 提供一些公共属性字段、函数方法，以便开发插件。
 例子：
 
 ```javascript
-vConsole.version // => "3.0.0"
+vConsole.version // => "3.1.0"
 ```
 
 
@@ -27,12 +27,13 @@ vConsole.version // => "3.0.0"
 - 可写
 - 类型：object
 
-键名           | 类型      | 可选     | 默认值                                       | 描述
--------------- | -------- | -------- | ------------------------------------------- | -------------------
-defaultPlugins | Array    | true     | ['system', 'network', 'element', 'storage'] | 需要自动初始化并加载的内置插件。 
-onReady        | Function | true     |                                             | 回调方法，当 vConsole 完成初始化并加载完内置插件后触发。
-onClearLog     | Function | true     |                                             | 回调方法，点击 Log 或 System 面板的 "Clear" 按钮后出发。
-maxLogNumber   | Number   | true     | 1000                                        | 超出上限的日志会被自动清除。
+键名                  | 类型      | 可选     | 默认值                                       | 描述
+--------------------- | -------- | -------- | ------------------------------------------- | -------------------
+defaultPlugins        | Array    | true     | ['system', 'network', 'element', 'storage'] | 需要自动初始化并加载的内置插件。 
+onReady               | Function | true     |                                             | 回调方法，当 vConsole 完成初始化并加载完内置插件后触发。
+onClearLog            | Function | true     |                                             | 回调方法，点击 Log 或 System 面板的 "Clear" 按钮后出发。
+maxLogNumber          | Number   | true     | 1000                                        | 超出上限的日志会被自动清除。
+disableLogScrolling   | Boolean  | true     |                                             | 若为 `false`，有新日志时面板将不会自动滚动到底部。
 
 例子：
 

diff --git a/example/demo1.html b/example/demo1.html
@@ -44,6 +44,7 @@ <h1 class="page_title">Demo 1</h1>
 window.vConsole = new window.VConsole({
   defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
   maxLogNumber: 1000,
+  // disableLogScrolling: true,
   onReady: function() {
     console.log('vConsole is ready.');
   },
@@ -53,6 +54,38 @@ <h1 class="page_title">Demo 1</h1>
 });
 
 
+setInterval(function() {
+  console.log(Date.now())
+}, 500)
+  function setStyle(selector, styles) {
+    var $elems = document.querySelectorAll(selector);
+    for (var i=0; i<$elems.length; i++) {
+      for (var k in styles) {
+        $elems[i].style[k] = styles[k];
+      }
+    }
+  }
+  var hackVConsole = function() {
+    setStyle('.vc-switch', {display: 'none'});
+    setStyle('.vc-global-tool.vc-hide', {display: 'none'});
+    setStyle('.vc-panel', {'min-height': '100%'});
+    setStyle('.vc-cmd', {height: '0', overflow:'hidden', border:'none', visibility:'hidden'});
+    setStyle('.vc-log', {'padding-bottom':'0'})
+    setStyle('#__vconsole', {'font-size':'13px'});
+    // re-position 'clear' button to right-top
+    setStyle('.vc-content', {bottom:'0'});
+    setStyle('.vc-tool-default, .vc-tool-system', {position:'fixed', display: 'inline-block', top:'4px', right:'0', width:'60px', height:'34px', 'background-color':'#FBF9FE', 'border':'1px solid #D9D9D9', 'border-right':'none', 'line-height':'34px', 'border-radius':'3px 0 0 0'});
+    vConsole.show()
+  }
+
+  var hackTimer = setInterval(function() {
+    if (window.vConsole.isInited) {
+      clearInterval(hackTimer)
+      hackVConsole()
+    }
+  }, 300);
+
+
 console.info('欢迎使用 vConsole。vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。');
 
 $('.js_btn_log').on('tap', function(e) {

diff --git a/src/log/log.js b/src/log/log.js
@@ -166,7 +166,7 @@ class VConsoleLogTab extends VConsolePlugin {
   onShow() {
     this.isShow = true;
     if (this.isInBottom == true) {
-      this.scrollToBottom();
+      this.autoScrollToBottom();
     }
   }
 
@@ -176,7 +176,7 @@ class VConsoleLogTab extends VConsolePlugin {
 
   onShowConsole() {
     if (this.isInBottom == true) {
-      this.scrollToBottom();
+      this.autoScrollToBottom();
     }
   }
 
@@ -220,6 +220,12 @@ class VConsoleLogTab extends VConsolePlugin {
     }
   }
 
+  autoScrollToBottom() {
+    if (!this.vConsole.option.disableLogScrolling) {
+      this.scrollToBottom();
+    }
+  }
+
   scrollToBottom() {
     let $content = $.one('.vc-content');
     if ($content) {
@@ -412,7 +418,7 @@ class VConsoleLogTab extends VConsolePlugin {
 
     // scroll to bottom if it is in the bottom before
     if (this.isInBottom) {
-      this.scrollToBottom();
+      this.autoScrollToBottom();
     }
 
     // print log to origin console