mediawiki-skins-Vector/resources/skins.vector.search/skins.vector.search.js
Sam Smith 9914d813d6 [search] Don't destroy #p-search element
The #p-search element is present in at least the Vector, Vector V2,
Timeless, and Monobook skins. This is because the HTML for the element
is generated in MediaWiki Core. At the very least, the
SearchSatisfaction instrument relies on the element always being
present.

Update the skins.vector.search module to simplify the App component
template so that it doesn't render a div#p-search element and mount that
component on the #searchform element instead.

Bug: T274869
Change-Id: Ifde679b62484fda7661fded2d978b78adac9f5da
2021-04-21 14:01:56 +01:00

51 lines
1.2 KiB
JavaScript

/** @module search */
var
Vue = require( 'vue' ).default || require( 'vue' ),
App = require( './App.vue' ),
config = require( './config.json' );
/**
* @param {HTMLElement} searchForm
* @param {HTMLInputElement} search
* @return {void}
*/
function initApp( searchForm, search ) {
// eslint-disable-next-line no-new
new Vue( {
el: searchForm,
/**
*
* @param {Function} createElement
* @return {Vue.VNode}
*/
render: function ( createElement ) {
return createElement( App, {
props: $.extend( {
autofocusInput: search === document.activeElement,
action: searchForm.getAttribute( 'action' ),
searchAccessKey: search.getAttribute( 'accessKey' ),
searchTitle: search.getAttribute( 'title' ),
searchPlaceholder: search.getAttribute( 'placeholder' ),
searchQuery: search.value
},
// Pass additional config from server.
config
)
} );
}
} );
}
/**
* @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 );