Plugin: Event List

All events are optional. But some features (like adding tool buttons) are depended on specific events.

Each event has a callback function, which will be called when event is triggered.

init

Trigger before starting to initialize a plugin. You can configure plugin’s properties in this event. This event will only be trigger once.
Note that plugin’s DOM is not ready now.

Callback Arguments:
  • none
Example:
  1. myPlugin.on('init', function() {
  2.     // do something to init plugin
  3.     this.list = []; // `this` == `myPlugin`
  4. });

renderTab

Trigger while vConsole trying to create a new tab for a plugin. This event will only be triggered once.
After binding this event, vConsole will get HTML from your callback to render a tab. A new tab will definitely be added if you bind this event, no matter what tab’s HTML you set. Do not bind this event if you don’t want to add a new tab.

Callback Arguments:
  • (required) function(html): a callback function that receives the content HTML of the new tab. html can be a HTML string or an HTMLElement object (Or object which supports appendTo() method, like JQuery object).
Example:
  1. myPlugin.on('renderTab', function(callback) {
  2.     var html = '<div>Hello</div>';
  3.     callback(html);
  4. });

addTopBar

Trigger while vConsole trying to add new tab buttons which are under the tab bar. This event will only be triggered once.

Callback Arguments:

  • (required) function(btnList): a callback function that receives an array of tab buttons.

A tab button is an object with properties:

Property
name string required The display name of the button.
data object optional The dataset of the button, key-value format.
className string optional The className of the button.
onClick function required A callback function when user click the button. The target button will automatically be added actived style after this callback unless it returns false.
Example:
  1. var type;
  2. myPlugin.on('addTopBar', function(callback) {
  3.     var btnList = [];
  4.     btnList.push({
  5.         name: 'Apple',
  6.         className: '',
  7.         data: {type: 'apple'},
  8.         onClick: function() {
  9.             if (type != this.dataset.type) {
  10.                 // `this` points to current button
  11.                 type = this.dataset.type;
  12.             } else {
  13.                 return false;
  14.             }
  15.         }
  16.     });
  17.     btnList.push({
  18.         name: 'Orange',
  19.         className: '',
  20.         data: {type: 'orange'},
  21.         onClick: function() {
  22.             type = this.dataset.type;
  23.         }
  24.     }
  25.     });
  26.     callback(btnList);
  27. });

addTool

Trigger while vConsole trying to add new tool buttons for a plugin. This event will only be triggered once.

Callback Arguments:
  • (required) function(toolList): a callback function that receives an array of tool buttons.

A tool button is an object with properties:

Property
name string required The display name of the button.
global boolean optional, default false When false, the button will be hidden while switching to other tab. When true, the button will be available to all tabs.
onClick function required A callback function when user click the button.
Example:
  1. myPlugin.on('addTool', function(callback) {
  2.     var toolList = [];
  3.     toolList.push({
  4.         name: 'Reload',
  5.         global: false,
  6.         onClick: function(e) {
  7.             location.reload();
  8.         }
  9.     });
  10.     callback(toolList);
  11. });

ready

Trigger when all initialization is finished. This event will only be triggered once.
Now plugin is installed and it’s DOM is ready.

Callback Arguments:
  • none
Example:
  1. myPlugin.on('ready', function() {
  2.     // do something...
  3. });

remove

Trigger before starting to uninitialize a plugin. This event will only be triggered once.

Note that this event may be called before init event if you remove a plugin before vConsole is ready.

Callback Arguments:
  • none
Example:
  1. myPlugin.on('remove', function() {
  2.     // do something...
  3. });

show

Trigger when a tab is shown. Only the plugin binded with renderTab will receive this event.

Callback Arguments:
  • none
Example:
  1. myPlugin.on('show', function() {
  2.     // do something
  3. });

hide

Trigger when a tab is hidden. Only the plugin binded with renderTab will receive this event.

Callback Arguments:
  • none
Example:
  1. myPlugin.on('hide', function() {
  2.     // do something
  3. });

showConsole

Trigger when vConsole is shown.

Callback Arguments:
  • none
Example:
  1. myPlugin.on('showConsole', function() {
  2.     // do something
  3. });

hideConsole

Trigger when vConsole is hidden.

Callback Arguments:
  • none
Example:
  1. myPlugin.on('hideConsole', function() {
  2.     // do something
  3. });

updateOption

Trigger when vConsole.setOption() is called.

Callback Arguments:
  • none
Example:
  1. myPlugin.on('updateOption', function() {
  2.     // do something
  3. });

Back to Index