conditinal-fields.js
219 lines
| 1 | document.addEventListener('readystatechange', (event) => { |
| 2 | if (event.target.readyState !== 'complete') { |
| 3 | return null; |
| 4 | } |
| 5 | |
| 6 | const state = {}; |
| 7 | |
| 8 | /** |
| 9 | * Get list of watched fields. |
| 10 | * @since 2.15.0 |
| 11 | * |
| 12 | * @return object |
| 13 | */ |
| 14 | function getWatchedElementNames(donationForm) { |
| 15 | const fields = {}; |
| 16 | |
| 17 | donationForm.querySelectorAll('[data-field-visibility-conditions]').forEach(function (fieldContainer) { |
| 18 | const visibilityConditions = JSON.parse(fieldContainer.getAttribute('data-field-visibility-conditions')); |
| 19 | const visibilityCondition = visibilityConditions[0]; // Currently we support only one visibility condition. |
| 20 | let fieldContainerSelector = `[data-field-name="${fieldContainer.getAttribute('data-field-name')}"]`; |
| 21 | let {field} = visibilityCondition; |
| 22 | |
| 23 | // Get field. It will tell use real name of field. |
| 24 | field = document.querySelector(`[name="${field}"], [name="${field}[]"]`); |
| 25 | |
| 26 | if (field) { |
| 27 | fields[field.name] = { |
| 28 | ...fields[field.name], |
| 29 | [fieldContainerSelector]: visibilityConditions, |
| 30 | }; |
| 31 | } |
| 32 | }); |
| 33 | |
| 34 | return fields; |
| 35 | } |
| 36 | |
| 37 | /** |
| 38 | * @since 2.15.0 |
| 39 | * |
| 40 | * @param operator |
| 41 | * @param firstData |
| 42 | * @param secondData |
| 43 | * |
| 44 | * @return boolean |
| 45 | */ |
| 46 | function compareWithOperator(operator, firstData, secondData) { |
| 47 | return { |
| 48 | '=': firstData === secondData, |
| 49 | '!=': firstData !== secondData, |
| 50 | '>': firstData > secondData, |
| 51 | '>=': firstData >= secondData, |
| 52 | '<': firstData < secondData, |
| 53 | '<=': firstData <= secondData, |
| 54 | }[operator]; |
| 55 | } |
| 56 | |
| 57 | /** |
| 58 | * Handle fields visibility. |
| 59 | * @since 2.15.0 |
| 60 | */ |
| 61 | function handleVisibility(donationForm, watchedFieldName, visibilityConditionsForWatchedField) { |
| 62 | for (const [fieldContainerSelector, visibilityConditions] of Object.entries( |
| 63 | visibilityConditionsForWatchedField |
| 64 | )) { |
| 65 | const fieldWrapper = donationForm.querySelector(fieldContainerSelector); |
| 66 | const fieldName = fieldWrapper.getAttribute('data-field-name'); |
| 67 | const visibilityCondition = visibilityConditions[0]; // Currently we support only one visibility condition. |
| 68 | let visible = false; |
| 69 | const {operator, value} = visibilityCondition; |
| 70 | |
| 71 | const inputs = donationForm.querySelectorAll(`[name="${watchedFieldName}"]`); |
| 72 | let hasFieldController = !!inputs.length; |
| 73 | |
| 74 | if (hasFieldController) { |
| 75 | inputs.forEach((input) => { |
| 76 | const fieldType = input.getAttribute('type'); |
| 77 | |
| 78 | // Make an exception for the amount field and parse the value |
| 79 | const inputValue = |
| 80 | input.name === 'give-amount' |
| 81 | ? Give.fn.unFormatCurrency( |
| 82 | input.value, |
| 83 | Give.form.fn.getInfo('decimal_separator', donationForm) |
| 84 | ) |
| 85 | : input.value; |
| 86 | |
| 87 | const comparisonResult = compareWithOperator(operator, inputValue, value); |
| 88 | |
| 89 | if (fieldType === 'checkbox') { |
| 90 | if ( |
| 91 | (comparisonResult && input.checked && operator === '=') || |
| 92 | (!input.checked && operator === '!=') |
| 93 | ) { |
| 94 | visible = true; |
| 95 | } |
| 96 | } else if (fieldType === 'radio') { |
| 97 | if (input.checked && comparisonResult) { |
| 98 | visible = true; |
| 99 | } |
| 100 | } else if (comparisonResult) { |
| 101 | visible = true; |
| 102 | } |
| 103 | }); |
| 104 | |
| 105 | // Show or Hide field wrapper. |
| 106 | if (visible) { |
| 107 | const field = fieldWrapper.querySelector(`[name="${fieldName}"][data-required]`); |
| 108 | fieldWrapper.classList.remove('give-hidden'); |
| 109 | |
| 110 | // Make hidden flagged required field required. |
| 111 | if (field) { |
| 112 | field.setAttribute('required', ''); |
| 113 | field.removeAttribute('data-required'); |
| 114 | } |
| 115 | } else { |
| 116 | const field = fieldWrapper.querySelector(`[name="${fieldName}"][required]`); |
| 117 | fieldWrapper.classList.add('give-hidden'); |
| 118 | |
| 119 | // Make hidden required field non-required. |
| 120 | if (field) { |
| 121 | field.removeAttribute('required'); |
| 122 | field.setAttribute('data-required', '1'); |
| 123 | } |
| 124 | } |
| 125 | } |
| 126 | } |
| 127 | } |
| 128 | |
| 129 | /** |
| 130 | * Setup state for condition visibility settings. |
| 131 | * state contains list of watched elements per donation form. |
| 132 | * |
| 133 | * @since 2.15.0 |
| 134 | */ |
| 135 | function addVisibilityConditionsToStateForDonationForm(donationForm) { |
| 136 | const uniqueDonationFormId = donationForm.getAttribute('data-id'); |
| 137 | const watchedFields = getWatchedElementNames(donationForm); |
| 138 | |
| 139 | // Add donation form to state only if visibility conditions exiting for at least form field. |
| 140 | if (uniqueDonationFormId && Object.keys(watchedFields).length) { |
| 141 | state[uniqueDonationFormId] = watchedFields; |
| 142 | } |
| 143 | } |
| 144 | |
| 145 | /** |
| 146 | * @since 2.15.0 |
| 147 | * @param donationForm |
| 148 | */ |
| 149 | function applyVisibilityConditionsToDonationForm(donationForm) { |
| 150 | const uniqueDonationFormId = donationForm.getAttribute('data-id'); |
| 151 | |
| 152 | if (uniqueDonationFormId && uniqueDonationFormId in state) { |
| 153 | const formState = state[uniqueDonationFormId]; |
| 154 | |
| 155 | for (const [watchedFieldName, visibilityConditions] of Object.entries(formState)) { |
| 156 | handleVisibility( |
| 157 | document.querySelector(`form[data-id="${uniqueDonationFormId}"]`).closest('.give-form'), |
| 158 | watchedFieldName, |
| 159 | visibilityConditions |
| 160 | ); |
| 161 | } |
| 162 | } |
| 163 | } |
| 164 | |
| 165 | /** |
| 166 | * @since 2.15.0 |
| 167 | */ |
| 168 | function addChangeEventToWatchedElementsForDonationForm(donationFormUniqueId) { |
| 169 | const donationForm = document |
| 170 | .querySelector(`form.give-form[data-id="${donationFormUniqueId}"`) |
| 171 | .closest('form.give-form'); |
| 172 | |
| 173 | if (!donationForm || !state.hasOwnProperty(donationFormUniqueId)) { |
| 174 | return; |
| 175 | } |
| 176 | |
| 177 | for (const [watchedElementName, VisibilityConditions] of Object.entries(state[donationFormUniqueId])) { |
| 178 | document.querySelectorAll(`[name = "${watchedElementName}"]`).forEach((field) => { |
| 179 | jQuery(field).on( |
| 180 | 'input change blur', |
| 181 | handleVisibility.bind(null, donationForm, watchedElementName, VisibilityConditions) |
| 182 | ); |
| 183 | }); |
| 184 | } |
| 185 | } |
| 186 | |
| 187 | /** |
| 188 | * @since 2.15.0 |
| 189 | */ |
| 190 | function bootVisibilityConditionsFormAllDonationForm() { |
| 191 | document.querySelectorAll('form.give-form').forEach(addVisibilityConditionsToStateForDonationForm); |
| 192 | |
| 193 | // Apply visibility conditions. |
| 194 | // Add change event to watched field. |
| 195 | for (const [donationFormUniqueId, donationFormState] of Object.entries(state)) { |
| 196 | for (const [watchedFieldName, visibilityConditions] of Object.entries(donationFormState)) { |
| 197 | handleVisibility( |
| 198 | document.querySelector(`form[data-id="${donationFormUniqueId}"]`).closest('.give-form'), |
| 199 | watchedFieldName, |
| 200 | visibilityConditions |
| 201 | ); |
| 202 | } |
| 203 | |
| 204 | addChangeEventToWatchedElementsForDonationForm(donationFormUniqueId); |
| 205 | } |
| 206 | } |
| 207 | |
| 208 | bootVisibilityConditionsFormAllDonationForm(); |
| 209 | |
| 210 | // Apply visibility conditions to donation form when donor switch gateway. |
| 211 | document.addEventListener('give_gateway_loaded', (event) => { |
| 212 | const donationForm = document.getElementById(event.detail.formIdAttribute); |
| 213 | const uniqueDonationFormId = donationForm.getAttribute('data-id'); |
| 214 | addVisibilityConditionsToStateForDonationForm(donationForm); |
| 215 | applyVisibilityConditionsToDonationForm(donationForm); |
| 216 | addChangeEventToWatchedElementsForDonationForm(uniqueDonationFormId); |
| 217 | }); |
| 218 | }); |
| 219 |