Handles registration of new Origami components so that DOM upgrades are handled on page load and elements can be upgraded after initial page load.
const componentHandler = require('o-component-handler');
document.addEventListener('DOMContentLoaded', () => {
componentHandler.upgradeAllRegistered();
});
Upgrades all registered components found in the current DOM.
Searches existing DOM for elements of the specified component type and upgrades them if they have not already been upgraded.
- jsClass string: Optional. The programmatic name of the component. For Origami components, this should be the name of the constructor function, e.g.
DropdownMenu
. - cssClass string: Optional. The CSS class name. All elements with the matching class name will be upgraded.
Upgrades a single element.
- element: The DOM element to be upgraded.
- jsClass string: Optional. The programmatic name of the component. If omitted, the element will be upgraded with all registered components that match the element's
class
attribute.
<div id="example" class="o-example-component"></div>
// Upgrade the element with ExampleComponent
componentHandler.upgradeElement(document.getElementById('example'));
Allows the consumer to be alerted to any upgrades that are performed for a given component type.
- jsClass string: The programmatic name of the component.
- callback Function: The function to call when an upgrade occurs.
componentHandler.registerUpgradedCallback('ExampleComponent', () => {
// The component was upgraded
});
// The registered callback will be executed when `ExampleComponent` is
// upgraded
componentHandler.upgradeDom('ExampleComponent');
Gets the upgraded element's class instance for the specified component type.
- element HTMLElement: The upgraded element.
- jsClass string: The class name of the instance.
Registers a class for future use and attempts to upgrade existing DOM. This method should be invoked by the Origami component implementation.
- config Object. An object with the following properties:
- classConstructor Function: The component's constructor function.
- className string: The name of the constructor function as a string. This should generally be the normalized version of the Origami module name, e.g.
ExampleComponent
foro-example-component
. - cssClass string: The CSS class string, which should be the name of the Origami module, e.g.
o-example-component
.
Origami components should register themselves with the component handler (see examples).
This software is published by Pearson Education under the MIT license.