Humany Floating widget

The Floating widget consists of a trigger element (triggerDOMElement) and a main widget element (widgetDOMElement).

General commands

The following commands are part of the Webprovisions widget definition and are available for all widget types.

initialize(): Promise

No custom behaviour.

activate([options: BotWidgetActivationOptions]): Promise

Creates new instances of triggerDOMElement and widgetDOMElement. The triggerDOMElement is directly appended to the DOM whereas the widgetDOMElement is not appended until later.

After activation, the elements are available on the Container:

const widgetDOMElement = container.get('widgetDOMElement');
const triggerDOMElement = container.get('triggerDOMElement');

destroy(): Promise

Invokes moveOutsideViewport() and then removes widgetDOMElement and triggerDOMElement.

Widget commands

Regular commands can be invoked after the widget has been activated.

navigate(commands: { route: string, params?: { [key: string]: any }}): void

Navigates the widget to specified route with optional params.

moveInsideViewport(): void

Positions the widgetDOMElement inside the viewport relative to the triggerDOMElement. Together with CSS transitions this will create an animation where the widget is sliding in.

moveOutsideViewport(): void

Positions the widgetDOMElement outside the viewport relative to the triggerDOMElement. Together with CSS transitions this will create an animation where the widget is sliding out.

Services

Both asynchronous and synchronous services are available on the Container:

Async services:

// ES stage 3 syntax
const theService = await container.getAsync('theService');

// ES6 syntax
container.getAsync('theService').then((theService) => {

});

Sync services:

const theService = container.get('theService');

The following service is registered when a Floating widget is created.

Accessing the controller from a Plugin

The widget controller is available on initialize() (but not in the constructor). When extending from the Webprovisions.Platform.Plugin class, the controller is accessible on this.controller. Use the invoke() function to invoke commands on the widget API:

import { Plugin } from '@humany/widget-core';

class MyPlugin extends Plugin {
  initialize() {
    this.controller.invoke('[commandName]');
  }
}

See the Skeleton Plugin repository for an example on how to author a Webprovisions plugin.