reorganizing build scripts
This commit is contained in:
parent
633c1e87e8
commit
b894b60b65
430 changed files with 136 additions and 53943 deletions
219
theme/static/js/card-multiselect.js
Normal file
219
theme/static/js/card-multiselect.js
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
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();
|
||||
}
|
||||
});
|
||||
|
||||
// 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();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (choicesInstance.getValue(true).length > 0 && window.updateGlobalCardFilters) {
|
||||
window.updateGlobalCardFilters();
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue