Dropdown.js 2.12 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
import Vue from "vue";
export default Vue.extend({
    name: "AlgoliaSearchDropdown",
    props: {
        options: { type: Object, required: true },
    },
    data: () => ({
        placeholder: "",
    }),
    watch: {
        $lang(newValue) {
            this.update(this.options, newValue);
        },
        options(newValue) {
            this.update(newValue, this.$lang);
        },
    },
    mounted() {
        this.initialize(this.options, this.$lang);
        this.placeholder =
            this.$site.themeConfig.searchPlaceholder || "";
    },
    methods: {
        initialize(userOptions, lang) {
            void Promise.all([
                import(
                /* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.js"),
                import(
                /* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.css"),
            ]).then(([docsearch]) => {
                // eslint-disable-next-line
                docsearch.default(Object.assign(Object.assign({}, userOptions), { inputSelector: "#algolia-search-input", 
                    // #697 Make docsearch work well at i18n mode.
                    algoliaOptions: {
                        facetFilters: [`lang:${lang}`].concat(
                        // eslint-disable-next-line
                        userOptions.facetFilters || []),
                    }, handleSelected: (_input, _event, suggestion) => {
                        const { pathname, hash } = new URL(suggestion.url);
                        const routepath = pathname.replace(this.$site.base, "/");
                        if (this.$router.getRoutes().some((route) => route.path === routepath))
                            void this.$router.push(`${routepath}${decodeURIComponent(hash)}`);
                        else
                            window.open(suggestion.url);
                    } }));
            });
        },
        update(options, lang) {
            this.$el.innerHTML =
                '<input id="algolia-search-input" class="search-query">';
            this.initialize(options, lang);
        },
    },
});
//# sourceMappingURL=Dropdown.js.map