add onReady callback to vConsole.option

huang2a · Oct 31, 2017 · 1977d39 · 1977d39
1 parent d2a7f4c
commit 1977d39
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
+#### V3.x.x (dev)
+
+- [FEATURE] Add `vConsole.showSwitch()` and `vConsole.hideSwitch()` methods, see [Public Properties & Methods](./doc/public_properties_methods.md).
+- [FEATURE] Add `onReady` callback function to `vConsole.option`.
+
+
 #### V3.0.0 (2017-09-27)
 
 Basic:

diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -1,5 +1,11 @@
 [English](./CHANGELOG.md) | 简体中文
 
+#### V3.x.x (dev)
+
+- 【特性】新增 `vConsole.showSwitch()` 及 `vConsole.hideSwitch()` 方法，请查阅[公共属性及方法](./doc/public_properties_methods_CN.md)。
+- 【特性】新增 `onReady` 回调方法，位于 `vConsole.option`。
+
+
 #### V3.0.0 (2017-09-27)
 
 基础：
@@ -48,7 +54,7 @@ Network 插件：
 
 #### V2.5.0 (2016-09-28)
 
-- 【特性】新增 `vConsole.removePlugin()` 方法，请查阅[Public Properties & Methods](./doc/public_properties_methods_CN.md)。
+- 【特性】新增 `vConsole.removePlugin()` 方法，请查阅[公共属性及方法](./doc/public_properties_methods_CN.md)。
 - 【特性】新增 `remove` 插件事件，请查阅[插件：Event 事件列表](./doc/plugin_event_list_CN.md)。
 - 【优化】页面不会随着 vConsole 的滚动而滚动。
 - 【修复】修正 `window.onerror()` 内的函数调用笔误。

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
@@ -27,10 +27,11 @@ 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. 
-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.
+maxLogNumber   | Number   | true     | 1000                                        | Overflow logs will be removed from log tabs.
 
 Example:
 
@@ -211,4 +212,40 @@ vConsole.hide();
 ```
 
 
+### vConsole.showSwitch()
+
+Show vConsole switch button.
+
+##### Parameters:
+- None
+
+##### Return:
+- None
+
+##### Example:
+
+```javascript
+vConsole.showSwitch();
+```
+
+
+### vConsole.hideSwitch()
+
+Hide vConsole switch button. 
+
+After the button is hidden, the user will not be able to call vConsole manually. The button or panel must be shown programmably via `vConsole.showSwitch()` or `vConsole.show()`.
+
+##### Parameters:
+- None
+
+##### Return:
+- None
+
+##### Example:
+
+```javascript
+vConsole.hideSwitch();
+```
+
+
 [Back to Index](./a_doc_index.md)
diff --git a/doc/public_properties_methods_CN.md b/doc/public_properties_methods_CN.md
@@ -27,10 +27,11 @@ vConsole.version // => "3.0.0"
 - 可写
 - 类型：object
 
-键名           | 类型     | 可选     | 默认值                                       | 描述
--------------- | ------- | -------- | ------------------------------------------- | -------------------
-defaultPlugins | Array   | true     | ['system', 'network', 'element', 'storage'] | 需要自动初始化并加载的内置插件。 
-maxLogNumber   | Number  | true     | 1000                                        | 超出上限的日志会被自动清除。
+键名           | 类型      | 可选     | 默认值                                       | 描述
+-------------- | -------- | -------- | ------------------------------------------- | -------------------
+defaultPlugins | Array    | true     | ['system', 'network', 'element', 'storage'] | 需要自动初始化并加载的内置插件。 
+onReady        | Function | true     |                                             | 回调方法，当 vConsole 完成初始化并加载完内置插件后触发。
+maxLogNumber   | Number   | true     | 1000                                        | 超出上限的日志会被自动清除。
 
 例子：
 
@@ -181,7 +182,7 @@ vConsole.showTab("system"); // 显示 System tab
 
 显示 vConsole 主面板。这个方法会触发插件事件 `showConsole`。
 
-##### 参数
+##### 参数：
 - 无
 
 ##### 返回：
@@ -198,7 +199,7 @@ vConsole.show();
 
 隐藏 vConsole 主面板。这个方法会触发插件事件 `hideConsole`。
 
-##### 参数
+##### 参数：
 - 无
 
 ##### 返回：
@@ -211,4 +212,40 @@ vConsole.hide();
 ```
 
 
+### vConsole.showSwitch()
+
+显示 vConsole 的开关按钮。
+
+##### 参数：
+- 无
+
+##### 返回：
+- 无
+
+##### 例子：
+
+```javascript
+vConsole.showSwitch();
+```
+
+
+### vConsole.hideSwitch()
+
+隐藏 vConsole 的开关按钮
+
+隐藏后，用户将无法手动唤起 vConsole 面板。因此按钮或面板必须通过 `vConsole.showSwitch()` 或 `vConsole.show()` 来展示出来。
+
+##### 参数：
+- 无
+
+##### 返回：
+- 无
+
+##### 例子：
+
+```javascript
+vConsole.hideSwitch();
+```
+
+
 [返回索引](./a_doc_index_CN.md)
diff --git a/example/demo1.html b/example/demo1.html
@@ -32,6 +32,7 @@ <h1 class="page_title">Demo 1</h1>
     <a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax_get">发起AJAX(GET)</a>
     <a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax_post">发起AJAX(POST)</a>
 
+    <a href="javascript:;" class="weui_btn weui_btn_warn js_btn_hideswitch">隐藏按钮</a>
     <a href="javascript:;" class="weui_btn weui_btn_warn js_btn_destroy">销毁vConsole</a>
   </div>
   <div class="weui_toptips weui_notice" id="js_tips">已打印log</div>
@@ -41,7 +42,10 @@ <h1 class="page_title">Demo 1</h1>
 // 初始化vConsole
 window.vConsole = new window.VConsole({
   defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
-  maxLogNumber: 1000
+  maxLogNumber: 1000,
+  onReady: function() {
+    // console.log('vConsole is ready.');
+  }
 });
 
 console.info('欢迎使用 vConsole。vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。');
@@ -85,12 +89,35 @@ <h1 class="page_title">Demo 1</h1>
   });
   showTips();
 });
-$('.js_btn_destroy').on('tap', function(e) {
+$('.js_btn_hideswitch').on('tap', function(e) {
+  var that = this;
   if ($(this).hasClass('weui_btn_disabled')) {
     return false;
   }
   $(this).addClass('weui_btn_disabled');
+  window.vConsole.hideSwitch();
+  var count = 6;
+  var cb = function() {
+    count--;
+    if (count == 0) {
+      window.vConsole.showSwitch();
+      $(that).removeClass('weui_btn_disabled');
+      $(that).html('隐藏按钮');
+      clearInterval(timer);
+      return;
+    }
+    $(that).html('隐藏按钮(' + count + ')');
+  }
+  cb();
+  var timer = setInterval(cb, 1000);
+});
+$('.js_btn_destroy').on('tap', function(e) {
+  if ($(this).hasClass('weui_btn_disabled')) {
+    return false;
+  }
+  $('.weui_btn').addClass('weui_btn_disabled');
   window.vConsole.destroy();
+  $(this).html('刷新页面以重载vConsole');
 });
 
 // 用于页面内展示顶部tips

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "3.0.0",
+  "version": "3.1.0-dev",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/Tencent/vConsole",
   "main": "dist/vconsole.min.js",

diff --git a/src/core/core.js b/src/core/core.js
@@ -396,6 +396,10 @@ class VConsole {
     if (this.tabList.length > 0) {
       this.showTab(this.tabList[0]);
     }
+
+    if (tool.isFunction(this.option.onReady)) {
+      this.option.onReady.call(this);
+    }
   }
 
   /**
@@ -627,6 +631,29 @@ class VConsole {
     });
   }
 
+  /**
+   * show switch button
+   * @public
+   */
+  showSwitch() {
+    if (!this.isInited) {
+      return;
+    }
+    let $switch = $.one('.vc-switch', this.$dom);
+    $switch.style.display = 'block';
+  }
+
+  /**
+   * hide switch button
+   */
+  hideSwitch() {
+    if (!this.isInited) {
+      return;
+    }
+    let $switch = $.one('.vc-switch', this.$dom);
+    $switch.style.display = 'none';
+  }
+
   /**
    * show a tab
    * @public