| 1 |
/** |
| 2 |
* Behavior Tiles — handles selection of 404 behavior option tiles. |
| 3 |
*/ |
| 4 |
(function () { |
| 5 |
'use strict'; |
| 6 |
|
| 7 |
function init() { |
| 8 |
var container = document.querySelector('.abj404-behavior-tiles'); |
| 9 |
if (!container) { |
| 10 |
return; |
| 11 |
} |
| 12 |
|
| 13 |
var tiles = container.querySelectorAll('.abj404-tile'); |
| 14 |
var hiddenInput = container.querySelector('#dest404_behavior'); |
| 15 |
var customPicker = document.getElementById('abj404-custom-page-picker'); |
| 16 |
|
| 17 |
function selectTile(behavior) { |
| 18 |
tiles.forEach(function (t) { |
| 19 |
var isSel = t.getAttribute('data-behavior') === behavior; |
| 20 |
t.classList.toggle('selected', isSel); |
| 21 |
t.setAttribute('aria-checked', isSel ? 'true' : 'false'); |
| 22 |
}); |
| 23 |
|
| 24 |
if (hiddenInput) { |
| 25 |
hiddenInput.value = behavior; |
| 26 |
} |
| 27 |
|
| 28 |
// Show/hide custom page picker and toggle required on its input |
| 29 |
// so hidden required fields don't block form submission. |
| 30 |
if (customPicker) { |
| 31 |
var isCustom = behavior === 'custom'; |
| 32 |
customPicker.style.display = isCustom ? '' : 'none'; |
| 33 |
var pickerInput = customPicker.querySelector('[name="redirect_to_user_field"]'); |
| 34 |
if (pickerInput) { |
| 35 |
if (isCustom) { |
| 36 |
pickerInput.setAttribute('required', ''); |
| 37 |
} else { |
| 38 |
pickerInput.removeAttribute('required'); |
| 39 |
} |
| 40 |
} |
| 41 |
} |
| 42 |
|
| 43 |
// Mark the form as dirty so the save bar shows |
| 44 |
var form = document.getElementById('admin-options-page'); |
| 45 |
if (form) { |
| 46 |
var event = new Event('change', { bubbles: true }); |
| 47 |
form.dispatchEvent(event); |
| 48 |
} |
| 49 |
} |
| 50 |
|
| 51 |
tiles.forEach(function (tile) { |
| 52 |
tile.addEventListener('click', function () { |
| 53 |
selectTile(tile.getAttribute('data-behavior')); |
| 54 |
}); |
| 55 |
|
| 56 |
tile.addEventListener('keydown', function (e) { |
| 57 |
if (e.key === 'Enter' || e.key === ' ') { |
| 58 |
e.preventDefault(); |
| 59 |
selectTile(tile.getAttribute('data-behavior')); |
| 60 |
} |
| 61 |
}); |
| 62 |
}); |
| 63 |
|
| 64 |
// Signal that click handlers are bound. Any consumer that needs to |
| 65 |
// interact with the tiles programmatically (E2E tests, ancillary |
| 66 |
// scripts) can wait for this attribute instead of guessing at JS-bind |
| 67 |
// timing. Generic, not test-only. |
| 68 |
container.setAttribute('data-tiles-ready', '1'); |
| 69 |
} |
| 70 |
|
| 71 |
// Initialize when DOM is ready |
| 72 |
if (document.readyState === 'loading') { |
| 73 |
document.addEventListener('DOMContentLoaded', init); |
| 74 |
} else { |
| 75 |
init(); |
| 76 |
} |
| 77 |
})(); |
| 78 |
|
