Merge pull request Tencent#64 from Maizify/dev

panel will not scroll to bottom if it is not in the bottom

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "2.4.0-pre",
+  "version": "2.4.0-pre2",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/WechatFE/vConsole",
   "main": "dist/vconsole.min.js",

src/core/core.js

@@ -372,8 +372,8 @@ class VConsole {
     let that = this;
     // before show console panel, 
     // trigger a transitionstart event to make panel's property 'display' change from 'none' to 'block'
-    let panel = $.one('.vc-panel', this.$dom);
-    panel.style.display = 'block';
+    let $panel = $.one('.vc-panel', this.$dom);
+    $panel.style.display = 'block';
 
     // set 10ms delay to fix confict between display and transition
     setTimeout(function() {
@@ -392,9 +392,11 @@ class VConsole {
     $.removeClass(this.$dom, 'vc-toggle');
     this._triggerPluginsEvent('hideConsole');
 
-    let $mask = $.one('.vc-mask', this.$dom);
+    let $mask = $.one('.vc-mask', this.$dom),
+        $panel = $.one('.vc-panel', this.$dom);
     $.bind($mask, 'transitionend', function(evnet) {
       $mask.style.display = 'none';
+      $panel.style.display = 'none';
     });
   }
 
@@ -410,7 +412,7 @@ class VConsole {
     $.removeClass($.all('.vc-logbox', this.$dom), 'vc-actived');
     $.addClass($logbox, 'vc-actived');
     // scroll to bottom
-    $.one('.vc-content', this.$dom).scrollTop = $.one('.vc-content', this.$dom).scrollHeight;
+    // $.one('.vc-content', this.$dom).scrollTop = $.one('.vc-content', this.$dom).scrollHeight;
     // show toolbar
     $.removeClass($.all('.vc-tool', this.$dom), 'vc-actived');
     $.addClass($.all('.vc-tool-' + tabID, this.$dom), 'vc-actived');

src/core/core.less

@@ -35,6 +35,7 @@
   }
 
   .vc-mask {
+    display: none;
     position: fixed;
     top: 0;
     left: 0;
@@ -48,6 +49,7 @@
   }
 
   .vc-panel {
+    display: none;
     position: fixed;
     min-height: 85%;
     left: 0;

src/log/log.js

@@ -20,9 +20,11 @@ class VConsoleLogTab extends VConsolePlugin {
     this.allowUnformattedLog = true; // `[xxx]` format log
 
     this.isReady = false;
+    this.isShow = false;
     this.$tabbox = null;
     this.console = {};
     this.logList = [];
+    this.isInBottom = true; // whether the panel is in the bottom
 
     this.mockConsole();
   }
@@ -68,6 +70,7 @@ class VConsoleLogTab extends VConsolePlugin {
   onReady() {
     let that = this;
 
+    // log type filter
     let $subTabs = $.all('.vc-subtab', that.$tabbox);
     $.bind($subTabs, 'click', function(e) {
       e.preventDefault();
@@ -90,6 +93,40 @@ class VConsoleLogTab extends VConsolePlugin {
         $.addClass($log, 'vc-log-partly-' + logType);
       }
     });
+
+    let $content = $.one('.vc-content');
+    $.bind($content, 'scroll', function(e) {
+      if (!that.isShow) {
+        return;
+      }
+      if ($content.scrollTop + $content.offsetHeight >= $content.scrollHeight) {
+        that.isInBottom = true;
+      } else {
+        that.isInBottom = false;
+      }
+    });
+  }
+
+  onShow() {
+    this.isShow = true;
+    if (this.isInBottom == true) {
+      this.scrollToBottom();
+    }
+  }
+
+  onHide() {
+    this.isShow = false;
+  }
+
+  onShowConsole() {
+    if (this.isInBottom == true) {
+      this.scrollToBottom();
+    }
+  }
+
+  scrollToBottom() {
+    let $box = $.one('.vc-content');
+    $box.scrollTop = $box.scrollHeight - $box.offsetHeight;
   }
 
   /**
@@ -239,7 +276,11 @@ class VConsoleLogTab extends VConsolePlugin {
 
     // render to panel
     $.one('.vc-log', this.$tabbox).appendChild($line);
-    $.one('.vc-content').scrollTop = $.one('.vc-content').scrollHeight;
+
+    // scroll to bottom if it is in the bottom before
+    if (this.isInBottom) {
+      this.scrollToBottom();
+    }
 
     // print log to origin console
     if (!item.noOrigin) {