refactor(search): ♻️ rename typeaheadItems to htmlHelper

This commit is contained in:
alistair3149 2023-08-28 19:20:44 -07:00
parent 325f22f0dd
commit b33d5bbc87
No known key found for this signature in database
GPG key ID: 16076C01E5C88864
4 changed files with 15 additions and 15 deletions

View file

@ -10,7 +10,7 @@
* @property {string} desc
*/
function typeaheadItem() {
function htmlHelper() {
return {
/**
* Generate menu item HTML using the existing template
@ -18,7 +18,7 @@ function typeaheadItem() {
* @param {TypeaheadItemData} data
* @return {HTMLElement|void}
*/
get: function ( data ) {
getItemElement: function ( data ) {
// TODO: Should we use template element or Mustache or just Javascript?
const template = document.getElementById( 'citizen-typeahead-template' );
@ -31,7 +31,7 @@ function typeaheadItem() {
fragment = template.content.cloneNode( true ),
item = fragment.querySelector( '.citizen-typeahead__item' );
this.update( item, data );
this.updateItemElement( item, data );
return fragment;
},
/**
@ -40,7 +40,7 @@ function typeaheadItem() {
* @param {HTMLElement} item
* @param {TypeaheadItemData} data
*/
update: function ( item, data ) {
updateItemElement: function ( item, data ) {
if ( data.id ) {
item.setAttribute( 'id', data.id );
}
@ -82,5 +82,5 @@ function typeaheadItem() {
};
}
/** @module typeaheadItem */
module.exports = typeaheadItem;
/** @module htmlHelper */
module.exports = htmlHelper;

View file

@ -1,5 +1,5 @@
const config = require( './config.json' );
const typeaheadItem = require( './typeaheadItem.js' )();
const htmlHelper = require( './htmlHelper.js' )();
const searchHistory = require( './searchHistory.js' )( config );
function presult() {
@ -18,7 +18,7 @@ function presult() {
size: 'sm',
desc: result
};
fragment.append( typeaheadItem.get( data ) );
fragment.append( htmlHelper.getItemElement( data ) );
} );
}
return fragment;
@ -35,7 +35,7 @@ function presult() {
title: mw.message( 'searchsuggest-search' ).text(),
desc: mw.message( 'citizen-search-empty-desc' ).text()
};
fragment.append( typeaheadItem.get( data ) );
fragment.append( htmlHelper.getItemElement( data ) );
}
typeaheadEl.querySelector( '.citizen-typeahead__item-placeholder' )?.remove();

View file

@ -5,7 +5,7 @@ const
// Config object from getCitizenSearchResourceLoaderConfig()
const config = require( './config.json' );
const typeaheadItem = require( './typeaheadItem.js' )();
const htmlHelper = require( './htmlHelper.js' )();
const presult = require( './presult.js' )();
const searchClient = require( './searchClient.js' )( config );
const searchHistory = require( './searchHistory.js' )( config );
@ -384,7 +384,7 @@ function getSuggestions() {
// Thumbnail placeholder icon
data.icon = 'image';
}
fragment.append( typeaheadItem.get( data ) );
fragment.append( htmlHelper.getItemElement( data ) );
} );
} else {
// Update placeholder with no result content
@ -395,7 +395,7 @@ function getSuggestions() {
title: mw.message( 'citizen-search-noresults-title', searchQuery.valueHtml ).text(),
desc: mw.message( 'citizen-search-noresults-desc' ).text()
};
fragment.append( typeaheadItem.get( data ) );
fragment.append( htmlHelper.getItemElement( data ) );
}
typeahead.items.clear();
typeahead.element.querySelector( '.citizen-typeahead__item-placeholder' )?.remove();
@ -460,13 +460,13 @@ function updateTypeaheadItems() {
// Update existing element instead of creating a new one
if ( item ) {
// FIXME: Probably more efficient to just replace the query than the whole messaage?
typeaheadItem.update( item, {
htmlHelper.updateItemElement( item, {
link: itemLink,
desc: itemDesc
}
);
} else {
item = typeaheadItem.get( {
item = htmlHelper.getItemElement( {
icon: data.icon,
id: itemId,
type: 'tool',

View file

@ -157,7 +157,7 @@
"callback": "MediaWiki\\Skins\\Citizen\\Hooks\\ResourceLoaderHooks::getCitizenSearchResourceLoaderConfig"
},
"resources/skins.citizen.search/typeahead.js",
"resources/skins.citizen.search/typeaheadItem.js",
"resources/skins.citizen.search/htmlHelper.js",
"resources/skins.citizen.search/fetch.js",
"resources/skins.citizen.search/presult.js",
"resources/skins.citizen.search/searchClient.js",