mediawiki-skins-Vector/resources/skins.vector.search/skins.vector.search.js
Lucas Werkmeister 86c9693693 search: Reduce skins.vector.search module size
Change I765d3bbf89 pushes the module over the configured maximum allowed
size (3 KiB, see bundlesize.config.json); shave off some bytes elsewhere
to bring it below the limit again. IMHO all of these changes should be
acceptable:

* arrow functions are already used elsewhere in this module;
* using the mw.config.get() fallback argument is normal (it slightly
  changes behavior, but I don’t think explicitly setting the search
  client or URL generator to a falsy value and expecting to get the
  default behavior should be considered supported);
* not quoting [name="search"] matches [name=title] immediately above;
* using forEach() with a function reference is still readable (initApp()
  is now called with extra arguments, but that doesn’t matter).

Change-Id: I45dda26cb59279d91804b0c2bbf12174fa78ee12
2022-09-30 19:05:03 +02:00

50 lines
1.4 KiB
JavaScript

/** @module search */
const
Vue = require( 'vue' ),
App = require( './App.vue' ),
config = require( './config.json' );
/**
* @param {Element} searchBox
* @return {void}
*/
function initApp( searchBox ) {
const searchForm = searchBox.querySelector( '.vector-search-box-form' ),
titleInput = /** @type {HTMLInputElement|null} */ (
searchBox.querySelector( 'input[name=title]' )
),
search = /** @type {HTMLInputElement|null} */ ( searchBox.querySelector( 'input[name=search]' ) ),
searchPageTitle = titleInput && titleInput.value;
if ( !searchForm || !search || !titleInput ) {
throw new Error( 'Attempted to create Vue search element from an incompatible element.' );
}
// @ts-ignore
Vue.createMwApp(
App, $.extend( {
id: searchForm.id,
autofocusInput: search === document.activeElement,
action: searchForm.getAttribute( 'action' ),
searchAccessKey: search.getAttribute( 'accessKey' ),
searchPageTitle: searchPageTitle,
searchTitle: search.getAttribute( 'title' ),
searchPlaceholder: search.getAttribute( 'placeholder' ),
searchQuery: search.value,
autoExpandWidth: searchBox ? searchBox.classList.contains( 'vector-search-box-auto-expand-width' ) : false
// Pass additional config from server.
}, config )
)
.mount( searchForm.parentNode );
}
/**
* @param {Document} document
* @return {void}
*/
function main( document ) {
document.querySelectorAll( '.vector-search-box' )
.forEach( initApp );
}
main( document );