src/components/VisitorLayer.js

goog.module('gep.components.VisitorLayer');

const AbstractLayer = goog.require('gep.components.AbstractLayer');
const {LayerType} = goog.require('gep.provider.LayerProvider');
const {ExhibitionProvider} = goog.require('gep.provider.ExhibitionProvider');
const MinibarContainer = goog.require('gep.components.MinibarContainer');

const {EventType,listen} = goog.require('goog.events');
const classlist = goog.require('goog.dom.classlist');
const {createDom} = goog.require('goog.dom');
const TagName = goog.require('goog.dom.TagName');

/**
 * Component that controls the display of the visitor layer and its contents.
 * @extends {AbstractLayer}
 */
class VisitorLayer extends AbstractLayer
{
    constructor()
    {
        super(LayerType.VISITOR);

        /**
         * Reference to ExhibitionProvider to communicate with the backend and provide and monitor all information that dynamically changes the application.
         * @type {ExhibitionProvider}
         * @private
         */
        this.exhibitionProvider_ = ExhibitionProvider.getInstance();

        /**
         * @type {Element}
         * @private
         */
        this.btnLegals_ = null;
    }

    /**
     * Component is ready and had loaded all dependencies (inherit method waitFor and sub components).
     * Init layer content navigation elements.
     * @inheritDoc
     */
    onInit()
    {
        super.onInit();

        /**
         * Dom element for the navigation button
         * @type {!Element}
         * @private
         */
        this.btnNavigation_ = /** @type {!Element} */ (this.getElement().querySelector('.layer-content-switcher[data-content="navigation"]'));
        classlist.enable(this.btnNavigation_, 'is-visible', true);
    }

    /**
     * Activates all interactive elements in the layer.
     * @inheritDoc
     */
    activate_()
    {
        super.activate_();

        if(this.layerData_ && this.layerData_['id'])
            this.switchContent_(this.layerData_['id']);
    }

    /**
     * Builds the layer contents.
     * @inheritDoc
     */
    initContentElements_()
    {
        super.initContentElements_();

        this.exhibitionProvider_.loadInfo().then(() => {
            let contentWrapper = /** @type {MinibarContainer} */ (this.queryComponent('.layer-content[data-content="info"] .layer-content-scroll-wrapper'));
            if(contentWrapper.minibar) contentWrapper.minibar.destroy();
            contentWrapper.getElement().innerHTML = '';
            this.exhibitionProvider_.info.forEach((infoContent) => {
                let element = createDom(infoContent.type == 'headline' ? TagName.H3 : TagName.P, {'class': infoContent.type == 'headline' ? 'layer-subtitle' : 'layer-text'});
                element.innerHTML = infoContent.text;
                contentWrapper.getElement().appendChild(element);
            });
            if(window['GAMEPAD_MODE'] != 'on')
            {
                this.btnLegals_ = createDom(TagName.BUTTON, {'class': 'box-button layer-button layer-button--privacy'}, createDom(TagName.SPAN, {'class': 'label'}, 'Privacy Policy'));
                listen(this.btnLegals_, EventType.CLICK, this.handleClickLegals_, false, this);
                contentWrapper.getElement().appendChild(this.btnLegals_);
            }
            setTimeout(() => { if(contentWrapper.minibar) contentWrapper.minibar.init(); }, 0);
        });
    }

    /**
     * @private
     */
    handleClickLegals_()
    {
        this.layerProvider_.show('blocking');
    }

    /**
     * Activates all interactive elements in the active layer content.
     * @inheritDoc
     */
    activateContent_()
    {
        super.activateContent_();

        let selector = (this.activeContentId_ ? '[data-content="'+this.activeContentId_+'"] ' : '') +'[data-cmp="minibar-container"]';
        let minibars = /** @type {Array<MinibarContainer>} */ (this.queryComponentAll(selector));
        minibars.forEach((minibar) => {
            minibar.update();
            minibar.reset();
        });
    }

    /**
     * Init a switch of the layer content by layer navigation elements.
     * @inheritDoc
     */
    handleContentSwitch_(event)
    {
        if(event.currentTarget == this.btnNavigation_ && (window['GAMEPAD_MODE'] === 'on'))
            this.layerProvider_.show('guiding');
        else
            super.handleContentSwitch_(event);
    }

    /**
     * Switches the display of the current layer content element.
     * Enable dark mode on sub content profile.
     * @inheritDoc
     */
    switchContent_(id)
    {
        super.switchContent_(id);

        classlist.enable(this.getElement(), 'is-dark-mode', this.activeContentId_ == 'profile');
    }

    /**
     * Checks whether a content change and thus an update of
     * the content should take place when the layer is called up again.
     * @inheritDoc
     */
    checkLayerContentInitalisation_(event)
    {
        let isSameContent = this.layerData_ != null && event.data != null && this.layerData_['id'] == event.data['id'];
        return !isSameContent;
    }
}

exports = VisitorLayer;