Home Manual Reference Source
import AbstractWidget from 'ievv_jsbase/widget/AbstractWidget.js'
public class | source

AbstractWidget

Base class for widgets for WidgetRegistrySingleton.

Example:

Create a very simple widget
export default class OpenMenuWidget extends AbstractWidget {
    constructor(element) {
         super(element);
         this._onClickBound = (...args) => {
             this._onClick(...args);
         };
         this.element.addEventListener('click', this._onClickBound);
    }

    _onClick = (e) => {
         e.preventDefault();
         console.log('I should have opened the menu here');
    }

    destroy() {
         this.element.removeEventListener('click', this._onClickBound);
    }
}
Use the widget
<button type="button" data-ievv-jsbase-widget="open-menu-button">
    Open menu
</button>
A widget with configuration input
export default class OpenMenuWidget extends AbstractWidget {
    constructor(element) {
         super(element);
         this._onClickBound = (...args) => {
             this._onClick(...args);
         };
         this.element.addEventListener('click', this._onClickBound);
    }

    getDefaultConfig() {
         return {
             'menuId': 'id_main_menu';
         }
    }

    _onClick = (e) => {
         e.preventDefault();
         console.log(`I should have opened the menu with id="${this.config.menuId}" here`);
    }

    destroy() {
         this.element.removeEventListener('click', this._onClickBound);
    }
}
Use the widget with config
<!-- Using the default config -->
<button type="button" data-ievv-jsbase-widget="open-menu-button">
    Open the main menu
</button>
<!-- Override the menuId config -->
<button type="button" data-ievv-jsbase-widget="open-menu-button"
         data-ievv-jsbase-widget-config='{"menuId": "id_the_other_menu"}'>
    Open the other menu
</button>

Constructor Summary

Public Constructor
public

constructor(element: Element)

Member Summary

Public Members
public get

Get the config.

public

element: *

Method Summary

Public Methods
public

Destroy the widget.

public

Get the default config.

Public Constructors

public constructor(element: Element) source

Params:

NameTypeAttributeDescription
element Element

The element to load the widget in.

Public Members

public get config: Object: * source

Get the config.

JSON decodes any config supplied via the data-ievv-jsbase-widget-config attribute of the Element and AbstractWidget#getDefaultConfig into a config object. The result of this is cached, so multiple calls to this property will only result in the config object being created once.

Return:

Object

The config object. This will be an empty object if we have no AbstractWidget#getDefaultConfig and no config is supplied via the data-ievv-jsbase-widget-config attribute of the Element.

Throw:

SyntaxError

If the data-ievv-jsbase-widget-config attribute does not contain valid JSON data. Not thrown if the element does not have a data-ievv-jsbase-widget-config attribute.

public element: * source

Public Methods

public destroy() source

Destroy the widget.

You should override this in subclasses if your widget sets up something that will work incorrectly if the widget disappears or is re-created (such as event listeners and signals).

public getDefaultConfig(): Object source

Get the default config.

Any config supplied via the data-ievv-jsbase-widget-config attribute is merged into this object.

Return:

Object