| 1 |
/** |
| 2 |
* Internal dependencies. |
| 3 |
*/ |
| 4 |
import Tooltip from '@10up/component-tooltip'; |
| 5 |
|
| 6 |
/** |
| 7 |
* WordPress dependencies. |
| 8 |
*/ |
| 9 |
import { __ } from '@wordpress/i18n'; |
| 10 |
|
| 11 |
/** |
| 12 |
* Window dependencies. |
| 13 |
*/ |
| 14 |
const { |
| 15 |
ajaxurl, |
| 16 |
epDash: { skipUrl, syncUrl }, |
| 17 |
} = window; |
| 18 |
|
| 19 |
/** |
| 20 |
* Determine whether a Feature's new settings will require a reindex. |
| 21 |
* |
| 22 |
* @param {FormData} data Form data. |
| 23 |
* @returns {boolean} Whether a reindex will need to occur when saved. |
| 24 |
*/ |
| 25 |
const willChangeTriggerReindex = (data) => { |
| 26 |
return ( |
| 27 |
data.get('requires_reindex') === '1' && |
| 28 |
data.get('was_active') === '0' && |
| 29 |
data.get('settings[active]') === '1' |
| 30 |
); |
| 31 |
}; |
| 32 |
|
| 33 |
/** |
| 34 |
* Handle Feature settings being submitted. |
| 35 |
* |
| 36 |
* @param {Event} event Submit event. |
| 37 |
*/ |
| 38 |
const onSubmit = async (event) => { |
| 39 |
event.preventDefault(); |
| 40 |
|
| 41 |
const form = event.target; |
| 42 |
const data = new FormData(form); |
| 43 |
const requiresConfirmation = willChangeTriggerReindex(data); |
| 44 |
|
| 45 |
if (requiresConfirmation) { |
| 46 |
/* eslint-disable no-alert */ |
| 47 |
const isConfirmed = window.confirm( |
| 48 |
__( |
| 49 |
'Enabling this feature will begin re-indexing your content. Do you wish to proceed?', |
| 50 |
'elasticpress', |
| 51 |
), |
| 52 |
); |
| 53 |
|
| 54 |
if (!isConfirmed) { |
| 55 |
return; |
| 56 |
} |
| 57 |
} |
| 58 |
|
| 59 |
const feature = form.closest('.ep-feature'); |
| 60 |
const syncingNotice = feature.querySelector('.requirements-status-notice--syncing'); |
| 61 |
|
| 62 |
feature.classList.add('saving'); |
| 63 |
form.submit.disabled = true; |
| 64 |
syncingNotice.style.display = null; |
| 65 |
|
| 66 |
const request = await fetch(ajaxurl, { method: 'POST', body: data }); |
| 67 |
const response = await request.json(); |
| 68 |
|
| 69 |
if (response.success === false) { |
| 70 |
const { data = [] } = response; |
| 71 |
|
| 72 |
if (data) { |
| 73 |
for (const { code = '' } of data) { |
| 74 |
if (code === 'is_indexing') { |
| 75 |
syncingNotice.style.display = 'block'; |
| 76 |
} |
| 77 |
} |
| 78 |
} |
| 79 |
|
| 80 |
form.submit.disabled = false; |
| 81 |
feature.classList.remove('saving'); |
| 82 |
return; |
| 83 |
} |
| 84 |
|
| 85 |
feature.classList.toggle('feature-active', response.data.active); |
| 86 |
|
| 87 |
if (response.data.reindex) { |
| 88 |
window.location = syncUrl; |
| 89 |
} else { |
| 90 |
feature.classList.remove('saving'); |
| 91 |
form.submit.disabled = false; |
| 92 |
form.was_active.value = response.data.active ? '1' : '0'; |
| 93 |
} |
| 94 |
}; |
| 95 |
|
| 96 |
/** |
| 97 |
* Handle a Feature being set to be turned on or off. |
| 98 |
* |
| 99 |
* @param {Event} event Change event. |
| 100 |
*/ |
| 101 |
const onToggle = (event) => { |
| 102 |
const { form } = event.target; |
| 103 |
const data = new FormData(form); |
| 104 |
|
| 105 |
const notice = form.querySelector('.requirements-status-notice--reindex'); |
| 106 |
const requiresConfirmation = willChangeTriggerReindex(data); |
| 107 |
|
| 108 |
if (notice) { |
| 109 |
notice.style.display = requiresConfirmation ? 'block' : null; |
| 110 |
} |
| 111 |
}; |
| 112 |
|
| 113 |
/** |
| 114 |
* Handle click events within a Feature. |
| 115 |
* |
| 116 |
* @param {Event} event Click event. |
| 117 |
*/ |
| 118 |
const onClick = (event) => { |
| 119 |
const { target } = event; |
| 120 |
|
| 121 |
/** |
| 122 |
* Handle toggling settings. |
| 123 |
*/ |
| 124 |
if (target.classList.contains('settings-button')) { |
| 125 |
const feature = target.closest('.ep-feature'); |
| 126 |
|
| 127 |
feature.classList.toggle('show-settings'); |
| 128 |
target.setAttribute('aria-expanded', feature.classList.contains('show-settings')); |
| 129 |
} |
| 130 |
|
| 131 |
/** |
| 132 |
* Handle toggling description. |
| 133 |
*/ |
| 134 |
if (target.classList.contains('learn-more') || target.classList.contains('collapse')) { |
| 135 |
target.closest('.ep-feature').classList.toggle('show-full'); |
| 136 |
} |
| 137 |
}; |
| 138 |
|
| 139 |
/** |
| 140 |
* Handle setup form submission. |
| 141 |
* |
| 142 |
* Asks for confirmation if the user doesn't select any features to activate. |
| 143 |
* If the user wants to continue then skip installation. |
| 144 |
* |
| 145 |
* @param {Event} event Submit event. |
| 146 |
* @returns {void} |
| 147 |
*/ |
| 148 |
const onSubmitSetup = (event) => { |
| 149 |
const features = new FormData(event.target).getAll('features[]'); |
| 150 |
|
| 151 |
/** |
| 152 |
* If any features are selected continue as normal... |
| 153 |
*/ |
| 154 |
if (features.length > 0) { |
| 155 |
return; |
| 156 |
} |
| 157 |
|
| 158 |
/** |
| 159 |
* ...otherwise stop submission and ask for confirmation. |
| 160 |
*/ |
| 161 |
event.preventDefault(); |
| 162 |
|
| 163 |
const confirm = window.confirm( |
| 164 |
__( |
| 165 |
'It looks like you’re trying to use ElasticPress’s advanced features only. If you’d like to activate basic search, please select Cancel and activate the Post Search Feature. Otherwise, please click Ok to configure advanced features.', |
| 166 |
'elasticpress', |
| 167 |
), |
| 168 |
); |
| 169 |
|
| 170 |
/** |
| 171 |
* If the user wants to proceed, skip installation. |
| 172 |
*/ |
| 173 |
if (confirm) { |
| 174 |
window.location = skipUrl; |
| 175 |
} |
| 176 |
}; |
| 177 |
|
| 178 |
/** |
| 179 |
* Bind events. |
| 180 |
*/ |
| 181 |
const featuresEl = document.querySelector('.ep-features'); |
| 182 |
|
| 183 |
if (featuresEl) { |
| 184 |
featuresEl.addEventListener('change', onToggle); |
| 185 |
featuresEl.addEventListener('submit', onSubmit); |
| 186 |
featuresEl.addEventListener('click', onClick); |
| 187 |
} |
| 188 |
|
| 189 |
const submitEl = document.querySelector('button.setup-button'); |
| 190 |
|
| 191 |
if (submitEl) { |
| 192 |
submitEl.form.addEventListener('submit', onSubmitSetup); |
| 193 |
} |
| 194 |
|
| 195 |
/** |
| 196 |
* Tooltips. |
| 197 |
*/ |
| 198 |
// eslint-disable-next-line no-new |
| 199 |
new Tooltip('.a11y-tip'); |
| 200 |
|
