load()

in static/src/javascripts/projects/common/modules/navigation/search.js [149:237]


    load(popup) {
        let s;
        let x;

        fastdom
            .measure(() => ({
                allSearchPlaceholders: Array.from(
                    document.getElementsByClassName('js-search-placeholder')
                ),
                searchPlaceholder: popup.getElementsByClassName(
                    'js-search-placeholder'
                )[0],
            }))
            .then(els => {
                const { allSearchPlaceholders, searchPlaceholder } = els;

                if (!searchPlaceholder) {
                    return;
                }

                // Unload any search placeholders elsewhere in the DOM
                allSearchPlaceholders.forEach(c => {
                    if (c !== searchPlaceholder) {
                        fastdom.mutate(() => {
                            c.innerHTML = '';
                        });
                    }
                });

                // Load the Google search monolith, if not already present in this context.
                // We have to re-run their script each time we do this.
                if (!searchPlaceholder.innerHTML) {
                    fastdom.mutate(() => {
                        if (searchPlaceholder) {
                            searchPlaceholder.innerHTML = `<div class="search-box" role="search">
                            <gcse:searchbox></gcse:searchbox>
                            </div>
                            <div class="search-results" data-link-name="search">
                            <gcse:searchresults webSearchResultSetSize="'}${
                                this.resultSetSize
                            }" linkTarget="_self"></gcse:searchresults>
                            </div>`;
                        }
                    });

                    bean.on(searchPlaceholder, 'keydown', '.gsc-input', () => {
                        fastdom.measure(() => {
                            const $autoCompleteObject = $('.gssb_c');
                            const searchFromTop = $autoCompleteObject.css(
                                'top'
                            );
                            const windowOffset = $(window).scrollTop();

                            fastdom.mutate(() => {
                                $autoCompleteObject.css({
                                    top:
                                        parseInt(searchFromTop, 10) +
                                        windowOffset,
                                    'z-index': '1030',
                                });
                            });
                        });
                    });

                    bean.on(
                        searchPlaceholder,
                        'click',
                        '.search-results',
                        e => {
                            const targetEl = e.target;

                            if (targetEl.nodeName.toLowerCase() === 'a') {
                                targetEl.target = '_self';
                            }
                        }
                    );

                    s = document.createElement('script');
                    s.async = true;
                    s.src = this.gcsUrl;
                    x = document.getElementsByTagName('script')[0];

                    fastdom.mutate(() => {
                        if (x.parentNode) {
                            x.parentNode.insertBefore(s, x);
                        }
                    });
                }
            });