malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Refactor search form reset

Browse Source
This commit is contained in:
Tetrakern 2024-02-01 14:17:33 +01:00
parent 5bc224436f
commit 145cf3868a
3 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/application.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
searchform.php
View File

@ -106,6 +106,7 @@ if ( $show_advanced ) {
spellcheck="false"
autocomplete="off"
autocorrect="off"
data-default=""
>
<div class="search-form__bar-actions">
@ -264,7 +265,7 @@ if ( $show_advanced ) {
<div class="search-form__select-wrapper select-wrapper">
<div class="search-form__select-title"><?php _ex( 'Type', 'Advanced search heading.', 'fictioneer' ); ?></div>
<select name="post_type" class="search-form__select" autocomplete="off">
<select name="post_type" class="search-form__select" autocomplete="off" data-default="any">
<option value="any" <?php echo $post_type == 'any' ? 'selected' : ''; ?>><?php _ex( 'Any', 'Advanced search option.', 'fictioneer' ); ?></option>
<option value="fcn_chapter" <?php echo $post_type == 'fcn_chapter' ? 'selected' : ''; ?>><?php _ex( 'Chapters', 'Advanced search option.', 'fictioneer' ); ?></option>
<option value="fcn_story" <?php echo $post_type == 'fcn_story' ? 'selected' : ''; ?>><?php _ex( 'Stories', 'Advanced search option.', 'fictioneer' ); ?></option>
@ -280,7 +281,7 @@ if ( $show_advanced ) {
<div class="search-form__select-wrapper select-wrapper">
<div class="search-form__select-title"><?php _ex( 'Match', 'Advanced search heading.', 'fictioneer' ); ?></div>
<select name="sentence" class="search-form__select" autocomplete="off">
<select name="sentence" class="search-form__select" autocomplete="off" data-default="0">
<option value="0" <?php echo $sentence == '0' ? 'selected' : ''; ?>><?php _ex( 'Keywords', 'Advanced search option.', 'fictioneer' ); ?></option>
<option value="1" <?php echo $sentence == '1' ? 'selected' : ''; ?>><?php _ex( 'Phrase', 'Advanced search option.', 'fictioneer' ); ?></option>
</select>
@ -288,7 +289,7 @@ if ( $show_advanced ) {
<div class="search-form__select-wrapper select-wrapper">
<div class="search-form__select-title"><?php _ex( 'Sort', 'Advanced search heading.', 'fictioneer' ); ?></div>
<select name="orderby" class="search-form__select" autocomplete="off">
<select name="orderby" class="search-form__select" autocomplete="off" data-default="modified">
<option value="relevance" <?php echo $orderby == 'relevance' ? 'selected' : ''; ?>><?php _ex( 'Relevance', 'Advanced search option.', 'fictioneer' ); ?></option>
<option value="date" <?php echo $orderby == 'date' ? 'selected' : ''; ?>><?php _ex( 'Published', 'Advanced search option.', 'fictioneer' ); ?></option>
<option value="modified" <?php echo $orderby == 'modified' ? 'selected' : ''; ?>><?php _ex( 'Updated', 'Advanced search option.', 'fictioneer' ); ?></option>
@ -298,7 +299,7 @@ if ( $show_advanced ) {
<div class="search-form__select-wrapper select-wrapper">
<div class="search-form__select-title"><?php _ex( 'Order', 'Advanced search heading.', 'fictioneer' ); ?></div>
<select name="order" class="search-form__select" autocomplete="off">
<select name="order" class="search-form__select" autocomplete="off" data-default="desc">
<option value="desc" <?php echo $order == 'desc' ? 'selected' : ''; ?>><?php _ex( 'Descending', 'Advanced search option.', 'fictioneer' ); ?></option>
<option value="asc" <?php echo $order == 'asc' ? 'selected' : ''; ?>><?php _ex( 'Ascending', 'Advanced search option.', 'fictioneer' ); ?></option>
</select>

63
src/js/application.js
View File

@ -1374,9 +1374,9 @@ _$('.fictioneer-comments')?.addEventListener('click', event => {
function fcn_contactFormSubmit(button) {
// Setup
const form = button.closest('form'),
formData = new FormData(form),
payload = {'action': 'fictioneer_ajax_submit_contact_form'};
const form = button.closest('form');
const formData = new FormData(form);
const payload = {'action': 'fictioneer_ajax_submit_contact_form'};
// Form valid?
if (!form.reportValidity()) {
@ -1636,8 +1636,8 @@ class FCN_KeywordInput {
addNode(text = null) {
// Get and prepare value
const name = text ?? this.input.value.replace(',', ''),
value = this.allowList[this.encode(name)];
const name = text ?? this.input.value.replace(',', '');
const value = this.allowList[this.encode(name)];
// Only allowed value and no duplicates
if (!value || this.keywords.indexOf(value) > -1) {
@ -1809,16 +1809,40 @@ class FCN_KeywordInput {
}
}
/**
* Reset search form.
*
* @since 5.9.4
* @param {HTMLElement} button - The reset button clicked.
* @param {HTMLElement} form - The form to be reset.
* @param {FCN_KeywordInput[]} keywordInputs - Array of keyword input objects.
*/
function fcn_resetSearchForm(button, form, keywordInputs) {
// Reset keyword inputs
keywordInputs.forEach(input => input.reset());
// Reset selects and inputs (even after form submit)
form.querySelectorAll('input, select').forEach(element => {
element.value = element.dataset.default ?? element.value;
});
// Reset current query info
form.querySelector('.search-form__current').innerHTML = '';
// Notification
fcn_showNotification(button.dataset.reset, 2);
}
// Initialize
_$$('.search-form').forEach(form => {
const keywordInputs = [];
// Skip if simple form
if (form.classList.contains('_simple')) {
return;
}
// Initialize each keyword input in form
const keywordInputs = [];
form.querySelectorAll('.keyword-input__input').forEach(element => { keywordInputs.push(new FCN_KeywordInput(element)) });
// Remove allow list
@ -1827,11 +1851,11 @@ _$$('.search-form').forEach(form => {
// Listen for form changes...
form.addEventListener(
'change',
e => {
event => {
// Empty current query info when form changes
if (
!e.target.classList.contains('search-form__advanced-control') &&
!e.target.classList.contains('search-form__string')
!event.target.classList.contains('search-form__advanced-control') &&
!event.target.classList.contains('search-form__string')
) {
form.querySelector('.search-form__current').innerHTML = '';
}
@ -1841,24 +1865,7 @@ _$$('.search-form').forEach(form => {
// Reset form button
form.querySelectorAll('.reset').forEach(button => {
button.addEventListener(
'click',
e => {
// Reset keyword inputs
keywordInputs.forEach(input => { input.reset() });
// Reset selects and inputs
form.querySelector('input[name=s]').value = '';
form.querySelector('select[name=post_type]').value = 'any';
form.querySelector('select[name=sentence]').value = '0';
form.querySelector('select[name=orderby]').value = 'modified';
form.querySelector('select[name=order]').value = 'desc';
// Reset current query info
form.querySelector('.search-form__current').innerHTML = '';
// Notification
fcn_showNotification(button.dataset.reset, 2);
}
'click', () => { fcn_resetSearchForm(button, form, keywordInputs); }
);
});
});