A simple panel frame definition:
module.exports = {
style: `
:host { margin: 5px; }
h2 { color: #f90; }
`,
template: `
<h2>Hello World!</h2>
`,
ready () {
console.log('Hello World!');
},
};
Invoked after the panel has been loaded successfully and is ready to be shown
Invoked before panel closed.
LESS Styles to be accessible within panel.
The CSS Styles is defined under Shadow DOM v1, so it obey the style rules for shadow dom. For example, you can use the selector :host
to represent the panel frame itself.
Since the panel frame is live in shadow dom, the style is isolated.
Raw HTML to be rendered as contents of panel.
Mapping for DOM event definitions and their respective callbacks. The callback function will be executed whenever it's matching key is received by this package's listener.
Example:
module.exports = {
// ...
listeners: {
mousedown ( event ) {
event.stopPropagation();
Editor.log('on mousedown');
},
'panel-resize' ( event ) {
event.stopPropagation();
Editor.log('on panel resize');
}
}
};
Mapping for IPC message definitions and their respective callbacks.
Example:
module.exports = {
// ...
messages: {
// this is equal to `${panelID}:say-hello`
'say-hello' ( event ) {
console.log('Hello!');
},
}
};
TODO
Mapping for DOM element by css selector.
For example, if your template HTML contained a selector <span id="my_title">Title</span>
, when you define myTile: '#my_title'
in $
then could access its DOM node from
the code code using $myTitle
:
module.exports = {
template: `
<div><span id="my_title">Title</span></div>
`,
$: {
myTitle: "#my_title"
},
ready () {
let myTitleElm = this.$myTitle;
// do something ...
},
};
Trigger when name
has been set.