Source: widget/help/view2/TileLightbox.js

(function() {
    /** lightbox helper for {@link Help4.widget.help.view2.Tile} */
    Help4.widget.help.view2.TileLightbox = class {
        /** @param {Help4.widget.help.view2.Tile} tile */
        static handleLightbox(tile) {
            const {projectTile, _selected, __contentView, lightboxControlId} = tile;
            const {type, linkLightbox} = projectTile;
            if (type !== 'link') return;

            const isAlreadyOpen = !!(lightboxControlId && __contentView.get(lightboxControlId));

            if (_selected) {
                // open content
                const {view2} = Help4.widget.help;
                linkLightbox
                    ? isAlreadyOpen || _openLightbox(tile)
                    : Help4.windowOpen(view2.getLinkTileUrl(projectTile));
            } else {
                // close content
                isAlreadyOpen && this.closeLightbox(tile);
            }
        }

        /** @param {Help4.widget.help.view2.Tile} tile */
        static alignLightbox(tile) {
            const {__contentView, lightboxControlId, __widget} = tile;

            const control = lightboxControlId && __contentView.get(lightboxControlId);
            if (!control) return;

            const {/** @type {?Help4.control2.bubble.Panel} */ panel} = __widget.getContext();
            const fullArea = {x: 0, y: 0, w: window.innerWidth, h: window.innerHeight};
            control.clientArea = panel?.docked
                ? Help4.reduceRect(fullArea, panel.getArea())
                : fullArea;
        }

        /** @param {Help4.widget.help.view2.Tile} tile */
        static closeLightbox(tile) {
            const {__contentView, lightboxControlId, __widget, _onPanelDock} = tile;
            lightboxControlId && __contentView.remove(lightboxControlId);

            const {/** @type {?Help4.control2.bubble.Panel} */ panel} = __widget.getContext();
            panel.removeListener('dock', _onPanelDock);

            tile.lightboxControlId = null;
        }
    }

    /**
     * @private
     * @param {Help4.widget.help.view2.Tile} tile
     */
    function _openLightbox(tile) {
        const {Localization} = Help4;
        const {view2} = Help4.widget.help;
        const {__contentView, __widget, projectTile, descriptor, _onPanelDock, __container} = tile;
        const {lightboxSizing: sizing, lightboxSize: {width: w, height: h}, content, language, showDetach = true, fullCover = false, splashOption} = projectTile;
        const url = view2.getLinkTileUrl(projectTile);
        const showCheckbox = __container.announcement === descriptor && splashOption === 'always';

        const lightbox = __contentView.add({
            _metadata: {
                descriptor,
                type: 'lightbox',
                checkbox: showCheckbox ? false : null
            },
            controlType: 'Lightbox',
            showDetach,
            checkboxText: showCheckbox ? Localization.getText('label.doNotShowAgain') : null,
            visible: false,
            sizing,
            size: {w, h},
            content,
            fullCover,
            url,
            contentLanguage: language
        })
        .addListener('lightboxCheckbox', ({active}) => {
            lightbox.setMetadata('checkbox', active);
            tile._fireEvent({type: 'lightboxCheckbox', descriptor, active});
        })
        .addListener('close', () => {
            const checkbox = lightbox.getMetadata('checkbox');

            view2.TileLightbox.closeLightbox(tile);

            // fire event to signal a user click to the close button of the lightbox
            // this is different from other close reasons that are handled in _closeLightbox
            tile._fireEvent({type: 'userCloseLightbox', descriptor, checkbox});
        });

        tile.lightboxControlId = lightbox.id;
        view2.TileLightbox.alignLightbox(tile);
        lightbox.visible = true;

        const {/** @type {?Help4.control2.bubble.Panel} */ panel} = __widget.getContext();
        panel?.addListener('dock', _onPanelDock);
    }
})();