Widgets Operations v7 - nodeGame/nodegame GitHub Wiki
- status: complete
- version: 7.x
- follows from: Widgets List
Widgets are created and managed with the object node.widgets
.
// Creating and appending a widget to the page.
var root = W.getElementById('myRoot');
var timer = node.widgets.append('VisualTimer', root);
// Alternative you can directly pass the id of the element.
var timer = node.widgets.append('VisualTimer', 'myRoot');
// Without generating HTML.
var widget = node.widgets.get('MoodGauge');
// Integrating a custom widget.
var options = {};
var customWidget = new MyCustomWidget(options);
node.widgets.append(customWidget, root);
After a widget has been appended, the following HTML div elements are created as part of the widget interface:
-
panelDiv: the outer div containing all other elements below.
- headingDiv: the div containing the title of the widget.
- bodyDiv: the div containing the main content of the widget.
- footerDiv: the div containing the footer of the widget (hidden by default).
After a new widget is created a reference is added inside the array
node.widgets.instances
.
node.widgets.instances[0]; // VisualTimer.
node.widgets.instances[1]; // MoodGauge.
node.widgets.instances[2]; // CustomWidget.
A reference to the last appended widget is stored in under lastAppended
:
node.widgets.lastAppended; // CustomWidget.
To destroy a widget and removing it from the DOM, just invoke the
destroy
method on the widget itself.
node.widgets.lastAppended.destroy();
// To destroy all widgets:
node.widgets.destroyAll();
Previously appended widgets that are no longer found on the page are destroyed upon entering a new step.