constructor()

in static/src/javascripts/projects/common/modules/navigation/search.js [10:147]

• 116 lines of code
• 18 McCabe index (conditional complexity)

    constructor() {
        fastdom
            .measure(() =>
                Array.from(document.getElementsByClassName('js-search-toggle'))
            )
            .then(toggles => {
                const googleSearchSwitch = config.get('switches.googleSearch');
                const googleSearchUrl = config.get('page.googleSearchUrl');
                const googleSearchId = config.get('page.googleSearchId');

                if (
                    googleSearchSwitch &&
                    googleSearchUrl &&
                    googleSearchId &&
                    toggles.length > 0
                ) {
                    this.gcsUrl = `${googleSearchUrl}?cx=${googleSearchId}`;
                    this.resultSetSize =
                        config.get('page.section') === 'identity' ? 3 : 10;

                    toggles.forEach(toggle => {
                        const popupClass = toggle.getAttribute('data-toggle');

                        if (!popupClass) {
                            return;
                        }

                        fastdom.mutate(() => {
                            toggle.setAttribute('role', 'button');
                            toggle.setAttribute(
                                'aria-controls',
                                'search-popup'
                            );
                            toggle.setAttribute('aria-haspopup', 'dialog');
                        });

                        fastdom
                            .measure(
                                () =>
                                    document.getElementsByClassName(
                                        popupClass
                                    )[0]
                            )
                            .then(popup => {
                                if (!popup) {
                                    return;
                                }

                                bean.on(toggle, 'click', e => {
                                    const handleEsc = (event) => {
                                        const keyboardEvent = (event);

                                        if (keyboardEvent.key === 'Escape') {
                                            // eslint-disable-next-line no-use-before-define
                                            dismissSearchPopup(keyboardEvent);
                                            toggle.focus();
                                        }
                                    };
                                    const dismissSearchPopup = (
                                        event
                                    ) => {
                                        event.preventDefault();
                                        toggle.classList.remove('is-active');
                                        popup.classList.add('is-off');

                                        bean.off(
                                            document,
                                            'click',
                                            // eslint-disable-next-line no-use-before-define
                                            maybeDismissSearchPopup
                                        );
                                        document.removeEventListener(
                                            'keyup',
                                            handleEsc
                                        );
                                    };
                                    const maybeDismissSearchPopup = (
                                        event
                                    ) => {
                                        let el = (event.target);
                                        let clickedPop = false;

                                        while (el && !clickedPop) {
                                            /*  either the search pop-up or the autocomplete resultSetSize
                                                NOTE: it would be better to check for `.gssb_c`,
                                                 which is the outer autocomplete element, but
                                                 google stops the event bubbling earlier
                                            */
                                            if (
                                                el &&
                                                el.classList &&
                                                (el.classList.contains(
                                                    popupClass
                                                ) ||
                                                    el.classList.contains(
                                                        'gsq_a'
                                                    ))
                                            ) {
                                                clickedPop = true;
                                            }

                                            el = el && el.parentElement;
                                        }

                                        if (!clickedPop) {
                                            dismissSearchPopup(event);
                                        }
                                    };

                                    setTimeout(() => {
                                        if (
                                            toggle.classList.contains(
                                                'is-active'
                                            )
                                        ) {
                                            popup.focus();
                                            bean.on(
                                                document,
                                                'click',
                                                maybeDismissSearchPopup
                                            );
                                            document.addEventListener(
                                                'keyup',
                                                handleEsc
                                            );
                                        }
                                    });

                                    this.load(popup);

                                    // Make sure search is always in the correct state
                                    e.preventDefault();
                                });
                            });
                    });
                }
            });
    }