WordPress/wp-includes/blocks/search/view.js

69 lines
2.3 KiB
JavaScript
Raw Normal View History

/******/ (function() { // webpackBootstrap
var __webpack_exports__ = {};
window.addEventListener('DOMContentLoaded', () => {
const hiddenClass = 'wp-block-search__searchfield-hidden';
Array.from(document.getElementsByClassName('wp-block-search__button-behavior-expand')).forEach(block => {
const searchField = block.querySelector('.wp-block-search__input');
const searchButton = block.querySelector('.wp-block-search__button');
const searchLabel = block.querySelector('.wp-block-search__label');
const ariaLabel = searchButton.getAttribute('aria-label');
const id = searchField.getAttribute('id');
const toggleSearchField = showSearchField => {
if (showSearchField) {
searchField.removeAttribute('aria-hidden');
searchField.removeAttribute('tabindex');
searchButton.removeAttribute('aria-expanded');
searchButton.removeAttribute('aria-controls');
searchButton.setAttribute('type', 'submit');
searchButton.setAttribute('aria-label', 'Submit Search');
return block.classList.remove(hiddenClass);
}
searchButton.removeAttribute('type');
searchField.setAttribute('aria-hidden', 'true');
searchField.setAttribute('tabindex', '-1');
searchButton.setAttribute('aria-expanded', 'false');
searchButton.setAttribute('aria-controls', id);
searchButton.setAttribute('aria-label', ariaLabel);
return block.classList.add(hiddenClass);
};
const hideSearchField = e => {
if (!e.target.closest('.wp-block-search')) {
return toggleSearchField(false);
}
if (e.key === 'Escape') {
searchButton.focus();
return toggleSearchField(false);
}
};
const handleButtonClick = e => {
if (block.classList.contains(hiddenClass)) {
e.preventDefault();
searchField.focus();
toggleSearchField(true);
}
};
searchButton.removeAttribute('type');
searchField.addEventListener('keydown', e => {
hideSearchField(e);
});
searchButton.addEventListener('click', handleButtonClick);
searchButton.addEventListener('keydown', e => {
hideSearchField(e);
});
if (searchLabel) {
searchLabel.addEventListener('click', handleButtonClick);
}
document.body.addEventListener('click', hideSearchField);
});
});
/******/ })()
;