Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Publicly expose a method for opening Instant Results. #2987

Merged
merged 14 commits into from
Oct 12, 2022
Merged

Publicly expose a method for opening Instant Results. #2987

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
378fc86
WIP: Open Instant Results with an action.
JakePT Sep 6, 2022
b7f4479
Merge branch 'develop' into feature/2507
JakePT Oct 9, 2022
538338b
Alternate method for exposing open modal method.
JakePT Oct 9, 2022
b6ac5da
Revert changes unneeded at this time.
JakePT Oct 9, 2022
5c8fe78
Add test and documentation for openModal().
JakePT Oct 9, 2022
d362c8b
Merge branch 'develop' into feature/2507
felipeelia Oct 11, 2022
8189852
Merge branch 'develop' into feature/2507
felipeelia Oct 11, 2022
fcc06a5
Search for block before inserting in tests.
JakePT Oct 12, 2022
c0f064e
Tweak tests.
JakePT Oct 12, 2022
7931149
Fix missing @, deactivated proxy.
JakePT Oct 12, 2022
76f0ce9
Fix missing @.
JakePT Oct 12, 2022
5c4eea4
Dont use WP CLI for proxy plugin.
JakePT Oct 12, 2022
39bb67d
Enable proxy before Instant Results.
JakePT Oct 12, 2022
eadd20c
Merge branch 'develop' into feature/2507
JakePT Oct 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
WIP: Open Instant Results with an action.
  • Loading branch information
@JakePT
JakePT committed Sep 6, 2022
commit 378fc869fa6a7dac1bab77fbf3f2f2bb8858c9c6
54 changes: 43 additions & 11 deletions assets/js/instant-results/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
useRef,
WPElement,
} from '@wordpress/element';
import { addAction, doAction, removeAction } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';

/**
Expand Down Expand Up @@ -165,6 +166,15 @@ const App = () => {
dispatch({ type: 'APPLY_ARGS', payload: { search, post_type } });
}, []);

/**
* Handle open action.
*
* @param {Event} event Input event.
*/
const onOpen = useCallback((args) => {
dispatch({ type: 'APPLY_ARGS', payload: args });
}, []);

/**
* Handle changes to search parameters.
*/
Expand All @@ -186,20 +196,13 @@ const App = () => {
* @returns {Function} A cleanup function that unbinds the events.
*/
const handleEvents = () => {
const inputs = document.querySelectorAll('form input[type="search"');
const modal = modalRef.current;

inputs.forEach((input) => {
input.form.addEventListener('submit', onSubmit);
});

addAction('ep.InstantResults.open', 'ep/onOpenInstantResults', onOpen);
modal.ownerDocument.defaultView.addEventListener('popstate', onPopState);

return () => {
inputs.forEach((input) => {
input.form.removeEventListener('submit', onSubmit);
});

removeAction('ep.InstantResults.open', 'ep/onOpenInstantResults');
modal.ownerDocument.defaultView.removeEventListener('popstate', onPopState);
};
};
Expand All @@ -220,7 +223,7 @@ const App = () => {
* Effects.
*/
useEffect(handleInit, []);
useEffect(handleEvents, [onEscape, onPopState, onSubmit]);
useEffect(handleEvents, [onEscape, onOpen, onPopState]);
useEffect(handleChanges, [
doSearch,
pushState,
Expand Down Expand Up @@ -250,4 +253,33 @@ const App = () => {
);
};

render(<App />, document.getElementById('ep-instant-results'));
/**
* Handle submission of search forms.
*
* @param {Event} event Submit.
*/
const onSubmit = (event) => {
event.preventDefault();

const search = event.currentTarget.s.value;
const post_type = getPostTypesFromForm(event.currentTarget);

doAction('ep.InstantResults.open', { search, post_type });
};

/**
* Initialize Instant Results.
*
* @returns {void}
*/
const init = () => {
const inputs = document.querySelectorAll('form input[name="s"');

inputs.forEach((input) => {
input.form.addEventListener('submit', onSubmit);
});

render(<App />, document.getElementById('ep-instant-results'));
};

window.addEventListener('DOMContentLoaded', init);