coveo-search-ui-extensions/bin/es6/components/UserActions/ResponsiveUserActions.js

Small generic components to extend the functionality of Coveo's Search UI framework.

import { $$, ResponsiveComponentsManager, ResponsiveDropdownHeader, } from 'coveo-search-ui';
import { UserActions } from './UserActions';
/**
 * Handle the responsive button creation and positionning.
 */
export class ResponsiveUserActions {
    /**
     * Create a **ResponsiveUserActions** instance.
     *
     * @param root The root of the interface.
     * @param ID Identifier of the **ResponsiveUserActions**.
     * @param _options _unused parameter_.
     */
    constructor(root, ID, _options) {
        this.root = root;
        this.ID = ID;
    }
    /**
     * Register the **component** to the **ResponsiveComponentsManager**.
     *
     * @param root The root of the interface.
     * @param component The component to register as a responsive component.
     */
    static init(root, component) {
        ResponsiveComponentsManager.register(ResponsiveUserActions, $$(root), UserActions.ID, component, {});
    }
    /**
     * Register the user action component as a responsive component.
     *
     * @param component The component to register as a responsive component.
     */
    registerComponent(component) {
        if (!this.userActions && component.constructor.ID === UserActions.ID) {
            this.userActions = component;
            this.buildDropdownHeader(this.userActions.options.buttonLabel);
            return true;
        }
        return false;
    }
    /**
     * On resize, will place the user actions button in the Dropdown Header Wrapper Section.
     */
    handleResizeEvent() {
        const wrapper = $$(this.root).find(`.${ResponsiveComponentsManager.DROPDOWN_HEADER_WRAPPER_CSS_CLASS}`);
        if (wrapper != null) {
            $$(wrapper).append(this.dropdownHeader.element.el);
        }
    }
    /**
     * Always return true because the component always need a button.
     */
    needDropdownWrapper() {
        return true;
    }
    buildDropdownHeader(label) {
        // Create a button.
        const button = document.createElement('a');
        const content = document.createElement('p');
        content.innerText = label;
        button.appendChild(content);
        this.dropdownHeader = new ResponsiveDropdownHeader('user-actions', $$(button));
        this.dropdownHeader.element.on('click', () => {
            this.userActions.toggle();
        });
    }
}
//# sourceMappingURL=ResponsiveUserActions.js.map