mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-14 11:15:33 +00:00
9914d813d6
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
51 lines
1.2 KiB
JavaScript
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 );
|