doc/plugin_event_list.md
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.
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.
myPlugin.on('init', function() {
// do something to init plugin
this.list = []; // `this` == `myPlugin`
});
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.
html can be a HTML string or an HTMLElement object (Or object which supports appendTo() method, like JQuery object), and an optional object for tab options.A tab option is an object with properties:
| Property | |||
|---|---|---|---|
| fixedHeight | boolean | optional | Whether the height of tab is fixed to 100%. |
myPlugin.on('renderTab', function(callback) {
var html = '<div>Hello</div>';
callback(html);
});
Trigger while vConsole trying to add new tab buttons which are under the tab bar. This event will only be triggered once.
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 | Custom data of the button, key-value format. |
| className | string | optional | The className of the button. |
| actived | boolean | optional | Button's actived style. |
| onClick | (event, data) => boolean | 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. |
var type;
myPlugin.on('addTopBar', function(callback) {
var btnList = [];
btnList.push({
name: 'Apple',
className: '',
data: {type: 'apple'},
onClick: function(event, data) {
if (type != data.type) {
// `this` points to current button
type = data.type;
} else {
return false;
}
}
});
btnList.push({
name: 'Orange',
className: '',
data: {type: 'orange'},
onClick: function(event, data) {
type = data.type;
}
}
});
callback(btnList);
});
Trigger while vConsole trying to add new tool buttons for a plugin. This event will only be triggered once.
array of tool buttons.A tool button is an object with properties:
| Property | |||
|---|---|---|---|
| name | string | required | The display name of the button. |
| data | object | optional | Custom data of the button, key-value format. |
| 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 | (event, data) => void | required | A callback function when user click the button. |
myPlugin.on('addTool', function(callback) {
var toolList = [];
toolList.push({
name: 'Reload',
global: false,
data: {},
onClick: function(event, data) {
location.reload();
}
});
callback(toolList);
});
Trigger when all initialization is finished. This event will only be triggered once. Now plugin is installed and it's DOM is ready.
myPlugin.on('ready', function() {
// do something...
});
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.
myPlugin.on('remove', function() {
// do something...
});
Trigger when a tab is shown. Only the plugin binded with renderTab will receive this event.
myPlugin.on('show', function() {
// do something
});
Trigger when a tab is hidden. Only the plugin binded with renderTab will receive this event.
myPlugin.on('hide', function() {
// do something
});
Trigger when vConsole is shown.
myPlugin.on('showConsole', function() {
// do something
});
Trigger when vConsole is hidden.
myPlugin.on('hideConsole', function() {
// do something
});
Trigger when vConsole.setOption() is called.
myPlugin.on('updateOption', function() {
// do something
});