219 lines
No EOL
9 KiB
JavaScript
219 lines
No EOL
9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
if (!window.updateGlobalCardFilters) {
|
|
window.updateGlobalCardFilters = function() {
|
|
const selects = document.querySelectorAll('.card-multiselect');
|
|
|
|
// Rebuild global selections and rarity filtering.
|
|
const globalSelectedIds = [];
|
|
let globalRarity = null;
|
|
|
|
selects.forEach(select => {
|
|
const selectedValues = select.choicesInstance ? select.choicesInstance.getValue(true) : [];
|
|
selectedValues.forEach(cardId => {
|
|
if (cardId && globalSelectedIds.indexOf(cardId) === -1) {
|
|
globalSelectedIds.push(cardId);
|
|
}
|
|
});
|
|
if (selectedValues.length > 0 && globalRarity === null) {
|
|
const option = select.querySelector('option[value="${selectedValues[0]}"]');
|
|
if (option) {
|
|
globalRarity = option.getAttribute('data-rarity');
|
|
}
|
|
}
|
|
});
|
|
|
|
selects.forEach(select => {
|
|
if (select.choicesInstance && select.choicesInstance.dropdown.element) {
|
|
// Reset all options to enabled.
|
|
select.querySelectorAll('option').forEach(function(option) {
|
|
option.disabled = false;
|
|
});
|
|
// Reset all items to visible.
|
|
select.choicesInstance.dropdown.element.querySelectorAll('[data-card-id]').forEach(function(item) {
|
|
item.style.display = '';
|
|
});
|
|
// Filter out options/items that do not match the global rarity.
|
|
if (globalRarity) {
|
|
select.querySelectorAll('option[data-rarity]:not([data-rarity="'+globalRarity+'"])').forEach(function(option) {
|
|
option.disabled = true;
|
|
});
|
|
select.choicesInstance.dropdown.element.querySelectorAll('[data-rarity]:not([data-rarity="'+globalRarity+'"])').forEach(function(item) {
|
|
item.style.display = 'none';
|
|
});
|
|
}
|
|
// Filter out options/items that match the global selected card IDs.
|
|
for (const cardId of globalSelectedIds) {
|
|
select.choicesInstance.dropdown.element.querySelectorAll('[data-card-id="' + cardId + '"]').forEach(function(item) {
|
|
item.style.display = 'none';
|
|
});
|
|
select.querySelectorAll('option[data-card-id="'+cardId+'"]:not(option[selected])').forEach(function(option) {
|
|
option.disabled = true;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
};
|
|
}
|
|
|
|
if (!window.updateOptionQuantity) {
|
|
window.updateOptionQuantity = function(item, quantity) {
|
|
const cardId = item.getAttribute('data-card-id');
|
|
const option = item.closest('.choices__inner').querySelector('option[value="' + cardId + '"]');
|
|
if (option) {
|
|
option.setAttribute('data-quantity', quantity);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!window.getOptionQuantity) {
|
|
window.getOptionQuantity = function(item) {
|
|
const cardId = item.getAttribute('data-card-id');
|
|
const option = item.closest('.choices__inner').querySelector('option[value="' + cardId + '"]');
|
|
return option ? parseInt(option.getAttribute('data-quantity')) : "";
|
|
}
|
|
}
|
|
|
|
|
|
const selectFields = document.querySelectorAll('.card-multiselect');
|
|
selectFields.forEach(selectField => {
|
|
const placeholder = selectField.getAttribute('data-placeholder') || '';
|
|
|
|
const choicesInstance = new Choices(selectField, {
|
|
removeItemButton: false,
|
|
placeholderValue: placeholder,
|
|
searchEnabled: true,
|
|
shouldSort: false,
|
|
allowHTML: true,
|
|
closeDropdownOnSelect: true,
|
|
removeItemButton: true,
|
|
searchFields: ['label'],
|
|
resetScrollPosition: false,
|
|
callbackOnCreateTemplates: function(template) {
|
|
const getCardContent = (data) => {
|
|
let htmlContent = (data.element && data.element.getAttribute('data-html-content')) || data.label;
|
|
let quantity = data.element.getAttribute('data-quantity');
|
|
quantity = quantity ? parseInt(quantity) : 1;
|
|
htmlContent = htmlContent.replace('__QUANTITY__', quantity);
|
|
return htmlContent;
|
|
};
|
|
|
|
const renderCard = (classNames, data, type) => {
|
|
const rarity = data.element ? data.element.getAttribute('data-rarity') : '';
|
|
const cardId = data.element ? data.element.getAttribute('data-card-id') : 0;
|
|
const cardname = data.element ? data.element.getAttribute('data-name') : '';
|
|
const content = getCardContent(data);
|
|
if (type === 'item') {
|
|
return template(`
|
|
<div class="${classNames.item} mx-auto w-max ${data.highlighted ? classNames.highlightedState : ''} relative"
|
|
data-id="${data.id}"
|
|
data-card-id="${cardId}"
|
|
data-item
|
|
data-rarity="${rarity}"
|
|
data-name="${cardname}"
|
|
aria-selected="true"
|
|
style="cursor: pointer; padding: 1rem;">
|
|
<button type="button" class="decrement absolute left-[-1.5rem] top-1/2 transform -translate-y-1/2 bg-base-300 text-base-content px-2">-</button>
|
|
<button type="button" class="increment absolute right-[-1.5rem] top-1/2 transform -translate-y-1/2 bg-base-300 text-base-content px-2">+</button>
|
|
<div class="card-content">${content}</div>
|
|
</div>
|
|
`);
|
|
} else {
|
|
const extraAttributes = `data-select-text="${this.config.itemSelectText}" data-choice ${
|
|
data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'
|
|
}`;
|
|
const extraClasses = classNames.itemChoice;
|
|
return template(`
|
|
<div class="${classNames.item} ${extraClasses} ${data.highlighted ? classNames.highlightedState : ''} mx-auto w-max"
|
|
${extraAttributes}
|
|
data-id="${data.id}"
|
|
data-card-id="${cardId}"
|
|
data-name="${cardname}"
|
|
data-choice
|
|
data-rarity="${rarity}"
|
|
style="cursor: pointer;">
|
|
${content}
|
|
</div>
|
|
`);
|
|
}
|
|
};
|
|
|
|
return {
|
|
choice: function(classNames, data) {
|
|
return renderCard(classNames, data, 'choice');
|
|
},
|
|
item: function(classNames, data) {
|
|
return renderCard(classNames, data, 'item');
|
|
}
|
|
};
|
|
}
|
|
});
|
|
|
|
// Associate the Choices instance with the select field.
|
|
selectField.choicesInstance = choicesInstance;
|
|
|
|
if (!window.cardMultiselectInstances) {
|
|
window.cardMultiselectInstances = [];
|
|
}
|
|
window.cardMultiselectInstances.push(selectField);
|
|
|
|
selectField.addEventListener('change', function() {
|
|
if (window.updateGlobalCardFilters) {
|
|
window.updateGlobalCardFilters();
|
|
}
|
|
});
|
|
|
|
if (choicesInstance.getValue(true).length > 0 && window.updateGlobalCardFilters) {
|
|
window.updateGlobalCardFilters();
|
|
}
|
|
|
|
// Listen for increment/decrement clicks (scoped to the choices container).
|
|
const choicesContainer = selectField.closest('.choices') || document;
|
|
|
|
choicesContainer.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('increment')) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
e.stopImmediatePropagation();
|
|
const container = e.target.closest('[data-item]');
|
|
if (container) {
|
|
let quantityBadge = container.querySelector('.card-quantity-badge');
|
|
let quantity = window.getOptionQuantity(container);
|
|
quantity = quantity + 1;
|
|
quantityBadge.innerText = quantity;
|
|
window.updateOptionQuantity(container, quantity);
|
|
}
|
|
}
|
|
if (e.target.classList.contains('decrement')) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
e.stopImmediatePropagation();
|
|
const container = e.target.closest('[data-item]');
|
|
if (container) {
|
|
let quantityBadge = container.querySelector('.card-quantity-badge');
|
|
let quantity = window.getOptionQuantity(container);
|
|
const cardId = container.getAttribute('data-card-id');
|
|
if (quantity === 1) {
|
|
const option = selectField.querySelector('option[value="' + cardId + '"]');
|
|
if (option) {
|
|
choicesInstance.removeActiveItemsByValue(option.value);
|
|
option.selected = false;
|
|
}
|
|
if (window.updateGlobalCardFilters) {
|
|
window.updateGlobalCardFilters();
|
|
}
|
|
} else {
|
|
quantity = quantity - 1;
|
|
quantityBadge.innerText = quantity;
|
|
window.updateOptionQuantity(container, quantity);
|
|
}
|
|
}
|
|
}
|
|
if (e.target.closest('[data-item]') &&
|
|
!e.target.classList.contains('increment') &&
|
|
!e.target.classList.contains('decrement')) {
|
|
e.stopPropagation();
|
|
e.stopImmediatePropagation();
|
|
}
|
|
});
|
|
});
|
|
}); |