mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-12 09:21:11 +00:00
bd83398659
Creates a new skins.vector.search module that replaces the searchSuggest module from MediaWiki core. This module creates a new Vue app using the WVUI search widget for the new search experience. The legacy search input form is still retains on pageload, and the new search kicks on search input focus. In order to manage that transition, the legacy search input is styled to resemble the new WVUI input, and the new input is manually focused after the component mounts. Vue is also added as a dev-dependency to help with type-checking. Other changes: * the entry in skin.json is reordered alphabetically after skins.vector.js Bug: T264355 Change-Id: Ibb9561a77a14734297cb4d0ddcd415fc0750b45d
46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
var
|
|
Vue = require( 'vue' ).default || require( 'vue' ),
|
|
App = require( './App.vue' );
|
|
|
|
/**
|
|
* @param {HTMLElement} searchForm
|
|
* @param {HTMLInputElement} search
|
|
* @return {void}
|
|
*/
|
|
function initApp( searchForm, search ) {
|
|
// eslint-disable-next-line no-new
|
|
new Vue( {
|
|
el: '#p-search',
|
|
/**
|
|
*
|
|
* @param {Function} createElement
|
|
* @return {Vue.VNode}
|
|
*/
|
|
render: function ( createElement ) {
|
|
return createElement( App, {
|
|
props: {
|
|
autofocusInput: search === document.activeElement,
|
|
action: searchForm.getAttribute( 'action' ),
|
|
searchAccessKey: search.getAttribute( 'accessKey' ),
|
|
searchTitle: search.getAttribute( 'title' ),
|
|
searchPlaceholder: search.getAttribute( 'placeholder' ),
|
|
searchQuery: search.value
|
|
}
|
|
} );
|
|
}
|
|
} );
|
|
}
|
|
/**
|
|
* @param {Document} document
|
|
* @return {void}
|
|
*/
|
|
function main( document ) {
|
|
var
|
|
searchForm = /** @type {HTMLElement} */ ( document.querySelector( '#searchform' ) ),
|
|
search = /** @type {HTMLInputElement|null} */ ( document.getElementById( 'searchInput' ) );
|
|
if ( search && searchForm ) {
|
|
initApp( searchForm, search );
|
|
}
|
|
}
|
|
main( document );
|