constructor()

in static/src/javascripts/projects/common/modules/gallery/lightbox.js [41:134]

• 72 lines of code
• 8 McCabe index (conditional complexity)

    constructor() {
        // CONFIG
        this.showEndslate =
            getBreakpoint() !== 'mobile' &&
            config.get('page.section') !== 'childrens-books-site' &&
            config.get('page.contentType') === 'Gallery';
        this.useSwipe = hasTouchScreen();
        this.swipeThreshold = 0.05;
        this.handleKeyEvents = this.unboundHandleKeyEvents.bind(this);

        // TEMPLATE
        const generateButtonHTML = (label) => {
            const tmpl = buttonTpl;
            return template(tmpl)({
                label,
            });
        };

        const galleryLightboxHtml = `<dialog class="overlay gallery-lightbox gallery-lightbox--closed gallery-lightbox--hover">
                <div class="gallery-lightbox__sidebar">
                    ${generateButtonHTML('close')}
                    <div class="gallery-lightbox__progress  gallery-lightbox__progress--sidebar">
                        <span class="gallery-lightbox__index js-gallery-index"></span>
                        <span class="gallery-lightbox__progress-separator"></span>
                        <span class="gallery-lightbox__count js-gallery-count"></span>
                    </div>
                    ${generateButtonHTML('next')}
                    ${generateButtonHTML('prev')}
                    ${generateButtonHTML('info-button')}
                </div>
                <div class="js-gallery-swipe gallery-lightbox__swipe-container">
                    <ul class="gallery-lightbox__content js-gallery-content"></ul>
                </div>
            </dialog>`;

        // ELEMENT BINDINGS
        this.lightboxEl = bonzo.create(galleryLightboxHtml);
        this.$lightboxEl = bonzo(this.lightboxEl).prependTo(document.body);
        this.$indexEl = $('.js-gallery-index', this.lightboxEl);
        this.$countEl = $('.js-gallery-count', this.lightboxEl);
        this.$contentEl = $('.js-gallery-content', this.lightboxEl);
        this.nextBtn = qwery('.js-gallery-next', this.lightboxEl)[0];
        this.prevBtn = qwery('.js-gallery-prev', this.lightboxEl)[0];
        this.closeBtn = qwery('.js-gallery-close', this.lightboxEl)[0];
        this.infoBtn = qwery('.js-gallery-info-button', this.lightboxEl)[0];
        this.$swipeContainer = $('.js-gallery-swipe');
        bean.on(this.nextBtn, 'click', this.trigger.bind(this, 'next'));
        bean.on(this.prevBtn, 'click', this.trigger.bind(this, 'prev'));
        bean.on(this.closeBtn, 'click', this.close.bind(this));
        bean.on(this.infoBtn, 'click', this.trigger.bind(this, 'toggleInfo'));
        this.resize = this.trigger.bind(this, 'resize');
        this.toggleInfo = (e) => {
            const infoPanelClick =
                bonzo(e.target).hasClass('js-gallery-lightbox-info') ||
                $.ancestor(e.target, 'js-gallery-lightbox-info');

            if (!infoPanelClick) {
                this.trigger('toggleInfo');
            }
        };

        if (hasTouchScreen()) {
            this.disableHover();
        }

        bean.on(window, 'popstate', event => {
            if (!event.state) {
                this.trigger('close');
            }
        });

        const dialog = document.querySelector('dialog');

        // We are exposing this promise here so that it can be waited on when initiating lightbox
        if(!dialog.showModal) {
            this.polyfillPromise = import('dialog-polyfill')
            this.polyfillPromise.then(dialogPolyfill => dialogPolyfill.default.registerDialog(dialog))

        }



        // FSM CONFIG
        this.fsm = new FiniteStateMachine({
            initial: 'closed',
            onChangeState(oldState, newState) {
                this.$lightboxEl
                    .removeClass(`gallery-lightbox--${oldState}`)
                    .addClass(`gallery-lightbox--${newState}`);
            },
            context: this,
            states: this.states,
        });
    }