Release v2.2.0
This commit is contained in:
@@ -0,0 +1,237 @@
|
||||
function updateAnnouncementDurationFields() {
|
||||
var modeSelect = document.getElementById('announcement-duration-mode');
|
||||
var durationFields = document.querySelector('[data-announcement-duration-value-fields]');
|
||||
if (!modeSelect || !durationFields) {
|
||||
return;
|
||||
}
|
||||
|
||||
var durationValueInput = document.getElementById('announcement-duration-value');
|
||||
var durationUnitSelect = document.getElementById('announcement-duration-unit');
|
||||
var isDurationMode = String(modeSelect.value || '').trim() === 'duration';
|
||||
|
||||
durationFields.hidden = !isDurationMode;
|
||||
if (durationValueInput) {
|
||||
durationValueInput.disabled = !isDurationMode;
|
||||
}
|
||||
if (durationUnitSelect) {
|
||||
durationUnitSelect.disabled = !isDurationMode;
|
||||
}
|
||||
}
|
||||
|
||||
function updateAnnouncementColorPreview() {
|
||||
var colorSelect = document.getElementById('announcement-color');
|
||||
var preview = document.querySelector('[data-announcement-color-preview]');
|
||||
if (!colorSelect || !preview) {
|
||||
return;
|
||||
}
|
||||
|
||||
var selectedOption = colorSelect.options[colorSelect.selectedIndex] || null;
|
||||
var colorKey = String(colorSelect.value || '').trim().toLowerCase() || 'primary';
|
||||
var label = selectedOption ? String(selectedOption.textContent || selectedOption.label || colorKey).trim() : colorKey;
|
||||
|
||||
preview.className = 'announcement-color-preview text-bg-' + colorKey;
|
||||
preview.setAttribute('aria-label', label);
|
||||
preview.setAttribute('title', label);
|
||||
preview.textContent = '';
|
||||
}
|
||||
|
||||
function updateAnnouncementIconPreview() {
|
||||
var iconSelect = document.getElementById('announcement-icon');
|
||||
var preview = document.querySelector('[data-announcement-icon-preview]');
|
||||
if (!iconSelect || !preview) {
|
||||
return;
|
||||
}
|
||||
|
||||
var selectedOption = iconSelect.options[iconSelect.selectedIndex] || null;
|
||||
var iconKey = selectedOption ? String(selectedOption.value || '').trim().toLowerCase() : '';
|
||||
var label = selectedOption ? String(selectedOption.textContent || selectedOption.label || iconKey).trim() : iconKey;
|
||||
|
||||
preview.className = 'announcement-icon-preview';
|
||||
preview.innerHTML = '<i class="bi bi-' + iconKey + '" aria-hidden="true"></i>';
|
||||
preview.setAttribute('aria-label', label);
|
||||
preview.setAttribute('title', label);
|
||||
}
|
||||
|
||||
function positionAnnouncementIconPicker() {
|
||||
var picker = document.querySelector('[data-announcement-icon-picker]');
|
||||
var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
|
||||
var shell = document.querySelector('[data-announcement-icon-picker-shell]');
|
||||
if (!picker || picker.hidden || !toggle || !shell) {
|
||||
return;
|
||||
}
|
||||
|
||||
var padding = 8;
|
||||
var toggleRect = toggle.getBoundingClientRect();
|
||||
var menuRect = picker.getBoundingClientRect();
|
||||
var viewportHeight = window.innerHeight || document.documentElement.clientHeight || toggleRect.bottom;
|
||||
var placementAbove = false;
|
||||
var spaceBelow = viewportHeight - toggleRect.bottom - padding;
|
||||
var spaceAbove = toggleRect.top - padding;
|
||||
|
||||
if (menuRect.height > spaceBelow && spaceAbove > spaceBelow) {
|
||||
placementAbove = true;
|
||||
}
|
||||
|
||||
picker.classList.toggle('is-open-above', placementAbove);
|
||||
}
|
||||
|
||||
function closeAnnouncementIconPicker() {
|
||||
var picker = document.querySelector('[data-announcement-icon-picker]');
|
||||
var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
|
||||
if (!picker) {
|
||||
return;
|
||||
}
|
||||
|
||||
picker.hidden = true;
|
||||
picker.classList.remove('is-open-above');
|
||||
if (toggle) {
|
||||
toggle.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
function openAnnouncementIconPicker() {
|
||||
var picker = document.querySelector('[data-announcement-icon-picker]');
|
||||
var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
|
||||
if (!picker) {
|
||||
return;
|
||||
}
|
||||
|
||||
picker.hidden = false;
|
||||
if (toggle) {
|
||||
toggle.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined' && window.requestAnimationFrame) {
|
||||
window.requestAnimationFrame(positionAnnouncementIconPicker);
|
||||
} else {
|
||||
positionAnnouncementIconPicker();
|
||||
}
|
||||
}
|
||||
|
||||
function updateAnnouncementIconPickerSelection() {
|
||||
var iconSelect = document.getElementById('announcement-icon');
|
||||
var previewButton = document.querySelector('[data-announcement-icon-picker-toggle]');
|
||||
var picker = document.querySelector('[data-announcement-icon-picker]');
|
||||
if (!iconSelect || !previewButton || !picker) {
|
||||
return;
|
||||
}
|
||||
|
||||
var selectedOption = iconSelect.options[iconSelect.selectedIndex] || null;
|
||||
var selectedValue = selectedOption ? String(selectedOption.value || '').trim().toLowerCase() : '';
|
||||
var label = selectedOption ? String(selectedOption.textContent || selectedOption.label || selectedValue).trim() : selectedValue;
|
||||
var icon = previewButton.querySelector('[data-announcement-icon-picker-icon]');
|
||||
var text = previewButton.querySelector('[data-announcement-icon-picker-label]');
|
||||
|
||||
previewButton.setAttribute('aria-label', label);
|
||||
previewButton.setAttribute('title', label);
|
||||
if (icon) {
|
||||
icon.className = 'bi bi-' + selectedValue;
|
||||
}
|
||||
if (text) {
|
||||
text.textContent = label;
|
||||
}
|
||||
|
||||
picker.querySelectorAll('[data-announcement-icon-option]').forEach(function (button) {
|
||||
var isSelected = String(button.getAttribute('data-icon-key') || '').trim().toLowerCase() === selectedValue;
|
||||
button.classList.toggle('is-selected', isSelected);
|
||||
button.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
|
||||
});
|
||||
}
|
||||
|
||||
function setAnnouncementIconValue(iconKey) {
|
||||
var iconSelect = document.getElementById('announcement-icon');
|
||||
if (!iconSelect) {
|
||||
return;
|
||||
}
|
||||
|
||||
var normalized = String(iconKey || '').trim().toLowerCase();
|
||||
if (!normalized) {
|
||||
return;
|
||||
}
|
||||
|
||||
iconSelect.value = normalized;
|
||||
updateAnnouncementIconPreview();
|
||||
updateAnnouncementIconPickerSelection();
|
||||
}
|
||||
|
||||
function initAnnouncementForm() {
|
||||
var modeSelect = document.getElementById('announcement-duration-mode');
|
||||
var colorSelect = document.getElementById('announcement-color');
|
||||
var iconSelect = document.getElementById('announcement-icon');
|
||||
var iconPickerToggle = document.querySelector('[data-announcement-icon-picker-toggle]');
|
||||
var iconPicker = document.querySelector('[data-announcement-icon-picker]');
|
||||
var iconPickerClose = document.querySelector('[data-announcement-icon-picker-close]');
|
||||
|
||||
if (modeSelect) {
|
||||
modeSelect.addEventListener('change', updateAnnouncementDurationFields);
|
||||
updateAnnouncementDurationFields();
|
||||
}
|
||||
|
||||
if (colorSelect) {
|
||||
colorSelect.addEventListener('change', updateAnnouncementColorPreview);
|
||||
updateAnnouncementColorPreview();
|
||||
}
|
||||
|
||||
if (iconSelect) {
|
||||
iconSelect.addEventListener('change', updateAnnouncementIconPreview);
|
||||
updateAnnouncementIconPreview();
|
||||
}
|
||||
|
||||
if (iconPickerToggle) {
|
||||
iconPickerToggle.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
var isExpanded = iconPicker && !iconPicker.hidden;
|
||||
if (isExpanded) {
|
||||
closeAnnouncementIconPicker();
|
||||
} else {
|
||||
openAnnouncementIconPicker();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (iconPickerClose) {
|
||||
iconPickerClose.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
closeAnnouncementIconPicker();
|
||||
});
|
||||
}
|
||||
|
||||
if (iconPicker) {
|
||||
iconPicker.addEventListener('click', function (event) {
|
||||
var button = event.target && event.target.closest ? event.target.closest('[data-announcement-icon-option]') : null;
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
setAnnouncementIconValue(button.getAttribute('data-icon-key'));
|
||||
closeAnnouncementIconPicker();
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('resize', positionAnnouncementIconPicker);
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var picker = document.querySelector('[data-announcement-icon-picker]');
|
||||
var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
|
||||
if (!picker || picker.hidden) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (picker.contains(event.target) || (toggle && toggle.contains(event.target))) {
|
||||
return;
|
||||
}
|
||||
|
||||
closeAnnouncementIconPicker();
|
||||
});
|
||||
|
||||
updateAnnouncementIconPickerSelection();
|
||||
}
|
||||
|
||||
if (typeof document !== 'undefined') {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initAnnouncementForm, { once: true });
|
||||
} else {
|
||||
initAnnouncementForm();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user