2020-11-19 17:12:53 +00:00
|
|
|
<template>
|
2022-02-01 20:52:16 +00:00
|
|
|
<cdx-typeahead-search
|
2021-09-09 21:40:06 +00:00
|
|
|
:id="id"
|
2021-04-21 12:48:02 +00:00
|
|
|
ref="searchForm"
|
2022-02-01 20:52:16 +00:00
|
|
|
:class="rootClasses"
|
|
|
|
:search-results-label="$i18n( 'searchresults' ).text()"
|
2021-04-21 12:48:02 +00:00
|
|
|
:accesskey="searchAccessKey"
|
|
|
|
:title="searchTitle"
|
|
|
|
:placeholder="searchPlaceholder"
|
|
|
|
:aria-label="searchPlaceholder"
|
|
|
|
:initial-input-value="searchQuery"
|
2021-05-26 21:13:43 +00:00
|
|
|
:button-label="$i18n( 'searchbutton' ).text()"
|
2021-04-21 12:48:02 +00:00
|
|
|
:form-action="action"
|
|
|
|
:show-thumbnail="showThumbnail"
|
2021-05-25 10:40:49 +00:00
|
|
|
:highlight-query="highlightQuery"
|
2021-12-16 03:13:56 +00:00
|
|
|
:auto-expand-width="autoExpandWidth"
|
2022-02-01 20:52:16 +00:00
|
|
|
:search-results="suggestions"
|
|
|
|
:search-footer-url="searchFooterUrl"
|
|
|
|
@input="onInput"
|
|
|
|
@search-result-click="instrumentation.onSuggestionClick"
|
2021-05-13 14:25:53 +00:00
|
|
|
@submit="onSubmit"
|
2021-04-21 12:48:02 +00:00
|
|
|
>
|
2021-09-30 20:52:16 +00:00
|
|
|
<template #default>
|
2022-05-16 13:25:03 +00:00
|
|
|
<input
|
|
|
|
type="hidden"
|
2021-09-30 20:52:16 +00:00
|
|
|
name="title"
|
|
|
|
:value="searchPageTitle"
|
|
|
|
>
|
2022-05-16 13:25:03 +00:00
|
|
|
<input
|
|
|
|
type="hidden"
|
2021-09-30 20:52:16 +00:00
|
|
|
name="wprov"
|
|
|
|
:value="wprov"
|
|
|
|
>
|
|
|
|
</template>
|
2022-05-16 13:25:03 +00:00
|
|
|
<!-- eslint-disable-next-line vue/no-template-shadow -->
|
2022-03-16 23:40:42 +00:00
|
|
|
<template #search-footer-text="{ searchQuery }">
|
2021-09-30 20:52:16 +00:00
|
|
|
<span v-i18n-html:vector-searchsuggest-containing="[ searchQuery ]"></span>
|
|
|
|
</template>
|
2022-02-01 20:52:16 +00:00
|
|
|
</cdx-typeahead-search>
|
2020-11-19 17:12:53 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-02-01 20:52:16 +00:00
|
|
|
/* global SearchSubmitEvent */
|
|
|
|
const { CdxTypeaheadSearch } = require( '@wikimedia/codex-search' ),
|
|
|
|
{ defineComponent, nextTick } = require( 'vue' ),
|
2022-02-02 21:17:56 +00:00
|
|
|
client = require( './restSearchClient.js' ),
|
2022-02-01 20:52:16 +00:00
|
|
|
restClient = client( mw.config ),
|
|
|
|
urlGenerator = require( './urlGenerator.js' )( mw.config ),
|
2020-11-24 22:16:03 +00:00
|
|
|
instrumentation = require( './instrumentation.js' );
|
2020-11-19 17:12:53 +00:00
|
|
|
|
2022-05-16 13:25:03 +00:00
|
|
|
// @vue/component
|
2022-02-01 20:52:16 +00:00
|
|
|
module.exports = exports = defineComponent( {
|
2020-11-19 17:12:53 +00:00
|
|
|
name: 'App',
|
2022-07-19 23:23:06 +00:00
|
|
|
compatConfig: {
|
|
|
|
MODE: 3
|
|
|
|
},
|
|
|
|
compilerOptions: {
|
|
|
|
whitespace: 'condense'
|
|
|
|
},
|
2022-02-01 20:52:16 +00:00
|
|
|
components: { CdxTypeaheadSearch },
|
2020-11-19 17:12:53 +00:00
|
|
|
props: {
|
2021-09-09 21:40:06 +00:00
|
|
|
id: {
|
|
|
|
type: String,
|
|
|
|
required: true
|
|
|
|
},
|
2021-07-28 16:15:57 +00:00
|
|
|
searchPageTitle: {
|
|
|
|
type: String,
|
|
|
|
default: 'Special:Search'
|
|
|
|
},
|
2020-11-19 17:12:53 +00:00
|
|
|
autofocusInput: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
action: {
|
|
|
|
type: String,
|
|
|
|
default: ''
|
|
|
|
},
|
|
|
|
/** The keyboard shortcut to focus search. */
|
2022-05-16 13:25:03 +00:00
|
|
|
// eslint-disable-next-line vue/require-default-prop
|
2020-11-19 17:12:53 +00:00
|
|
|
searchAccessKey: {
|
2022-03-16 23:40:42 +00:00
|
|
|
type: String
|
2020-11-19 17:12:53 +00:00
|
|
|
},
|
|
|
|
/** The access key informational tip for search. */
|
2022-05-16 13:25:03 +00:00
|
|
|
// eslint-disable-next-line vue/require-default-prop
|
2020-11-19 17:12:53 +00:00
|
|
|
searchTitle: {
|
2022-03-16 23:40:42 +00:00
|
|
|
type: String
|
2020-11-19 17:12:53 +00:00
|
|
|
},
|
|
|
|
/** The ghost text shown when no search query is entered. */
|
2022-05-16 13:25:03 +00:00
|
|
|
// eslint-disable-next-line vue/require-default-prop
|
2020-11-19 17:12:53 +00:00
|
|
|
searchPlaceholder: {
|
2022-03-16 23:40:42 +00:00
|
|
|
type: String
|
2020-11-19 17:12:53 +00:00
|
|
|
},
|
|
|
|
/**
|
|
|
|
* The search query string taken from the server-side rendered input immediately before
|
|
|
|
* client render.
|
|
|
|
*/
|
2022-05-16 13:25:03 +00:00
|
|
|
// eslint-disable-next-line vue/require-default-prop
|
2020-11-19 17:12:53 +00:00
|
|
|
searchQuery: {
|
2022-03-16 23:40:42 +00:00
|
|
|
type: String
|
2020-11-26 00:58:10 +00:00
|
|
|
},
|
|
|
|
showThumbnail: {
|
2022-03-16 23:40:42 +00:00
|
|
|
type: Boolean,
|
2022-05-16 13:25:03 +00:00
|
|
|
// eslint-disable-next-line vue/no-boolean-default
|
2022-03-16 23:40:42 +00:00
|
|
|
default: true
|
2020-11-26 00:58:10 +00:00
|
|
|
},
|
|
|
|
showDescription: {
|
2022-03-16 23:40:42 +00:00
|
|
|
type: Boolean,
|
2022-05-16 13:25:03 +00:00
|
|
|
// eslint-disable-next-line vue/no-boolean-default
|
2022-03-16 23:40:42 +00:00
|
|
|
default: true
|
2021-05-25 10:40:49 +00:00
|
|
|
},
|
|
|
|
highlightQuery: {
|
2022-03-16 23:40:42 +00:00
|
|
|
type: Boolean,
|
2022-05-16 13:25:03 +00:00
|
|
|
// eslint-disable-next-line vue/no-boolean-default
|
2022-03-16 23:40:42 +00:00
|
|
|
default: true
|
2021-12-16 03:13:56 +00:00
|
|
|
},
|
|
|
|
autoExpandWidth: {
|
2022-03-16 23:40:42 +00:00
|
|
|
type: Boolean,
|
|
|
|
default: false
|
2020-11-19 17:12:53 +00:00
|
|
|
}
|
2020-11-24 22:16:03 +00:00
|
|
|
},
|
2022-01-31 21:43:32 +00:00
|
|
|
data() {
|
2020-11-24 22:16:03 +00:00
|
|
|
return {
|
2022-02-01 20:52:16 +00:00
|
|
|
// -1 here is the default "active suggestion index".
|
2020-11-24 22:16:03 +00:00
|
|
|
wprov: instrumentation.getWprovFromResultIndex( -1 ),
|
|
|
|
|
2022-02-01 20:52:16 +00:00
|
|
|
// Suggestions to be shown in the TypeaheadSearch menu.
|
|
|
|
suggestions: [],
|
|
|
|
|
|
|
|
// Link to the search page for the current search query.
|
|
|
|
searchFooterUrl: '',
|
|
|
|
|
|
|
|
// Whether to apply a CSS class that disables the CSS transitions on the text input
|
|
|
|
disableTransitions: this.autofocusInput,
|
|
|
|
|
2020-11-24 22:16:03 +00:00
|
|
|
instrumentation: instrumentation.listeners
|
|
|
|
};
|
|
|
|
},
|
2022-05-16 13:25:03 +00:00
|
|
|
computed: {
|
2022-02-01 20:52:16 +00:00
|
|
|
rootClasses() {
|
|
|
|
return {
|
|
|
|
'vector-search-box-disable-transitions': this.disableTransitions
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2022-05-16 13:25:03 +00:00
|
|
|
/**
|
2022-02-01 20:52:16 +00:00
|
|
|
* Fetch suggestions when new input is received.
|
2022-05-16 13:25:03 +00:00
|
|
|
*
|
2022-02-01 20:52:16 +00:00
|
|
|
* @param {string} value
|
2022-05-16 13:25:03 +00:00
|
|
|
*/
|
2022-02-01 20:52:16 +00:00
|
|
|
onInput: function ( value ) {
|
|
|
|
const domain = mw.config.get( 'wgVectorSearchHost', location.host ),
|
|
|
|
query = value.trim();
|
|
|
|
|
|
|
|
if ( query === '' ) {
|
|
|
|
this.suggestions = [];
|
|
|
|
this.searchFooterUrl = '';
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
instrumentation.listeners.onFetchStart();
|
|
|
|
|
|
|
|
restClient.fetchByTitle( query, domain, 10, this.showDescription ).fetch
|
|
|
|
.then( ( data ) => {
|
|
|
|
this.suggestions = data.results;
|
|
|
|
this.searchFooterUrl = urlGenerator.generateUrl( query );
|
|
|
|
|
|
|
|
const event = {
|
|
|
|
numberOfResults: data.results.length,
|
|
|
|
query: query
|
|
|
|
};
|
|
|
|
instrumentation.listeners.onFetchEnd( event );
|
|
|
|
} )
|
|
|
|
.catch( () => {
|
|
|
|
// TODO: error handling
|
|
|
|
} );
|
2022-05-16 13:25:03 +00:00
|
|
|
},
|
2022-02-01 20:52:16 +00:00
|
|
|
|
2020-11-24 22:16:03 +00:00
|
|
|
/**
|
2022-02-01 20:52:16 +00:00
|
|
|
* @param {SearchSubmitEvent} event
|
2020-11-24 22:16:03 +00:00
|
|
|
*/
|
2022-01-31 21:43:32 +00:00
|
|
|
onSubmit( event ) {
|
2020-11-24 22:16:03 +00:00
|
|
|
this.wprov = instrumentation.getWprovFromResultIndex( event.index );
|
|
|
|
|
|
|
|
instrumentation.listeners.onSubmit( event );
|
|
|
|
}
|
2022-05-16 13:25:03 +00:00
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
if ( this.autofocusInput ) {
|
2022-02-01 20:52:16 +00:00
|
|
|
this.$refs.searchForm.focus();
|
|
|
|
nextTick( () => {
|
|
|
|
this.disableTransitions = false;
|
|
|
|
} );
|
2022-05-16 13:25:03 +00:00
|
|
|
}
|
2020-11-19 17:12:53 +00:00
|
|
|
}
|
2022-02-01 20:52:16 +00:00
|
|
|
} );
|
2020-11-19 17:12:53 +00:00
|
|
|
</script>
|