dayowe/sundog-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lock into place

Browse Source
This commit is contained in:
Dayowe 2025-06-26 11:47:33 +02:00
parent 4d493b7d71
commit 61b238fdf0
1 changed files with 69 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
iframe.html
View File

@ -1330,6 +1330,7 @@
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
background: #f0f0f0; background: #f0f0f0;
pointer-events: none;
} }
.dog-calculator-percentage-slider:disabled::-webkit-slider-thumb { .dog-calculator-percentage-slider:disabled::-webkit-slider-thumb {
@ -1352,6 +1353,7 @@
cursor: not-allowed; cursor: not-allowed;
background-color: #f8f8f8; background-color: #f8f8f8;
border-color: #ddd; border-color: #ddd;
pointer-events: none;
} }
/* Dark theme disabled styles */ /* Dark theme disabled styles */
@ -1734,6 +1736,10 @@
if (!slider || !input) return; if (!slider || !input) return;
// Always keep full 0-100 scale for all sliders
slider.max = 100;
input.max = 100;
if (fs.isLocked) { if (fs.isLocked) {
// Locked sources can't be changed // Locked sources can't be changed
slider.disabled = true; slider.disabled = true;
@ -1744,11 +1750,13 @@
const totalLockedPercentage = lockedSources.reduce((sum, other) => sum + other.percentage, 0); const totalLockedPercentage = lockedSources.reduce((sum, other) => sum + other.percentage, 0);
const maxAllowed = 100 - totalLockedPercentage; const maxAllowed = 100 - totalLockedPercentage;
// Re-enable and set constraints // Re-enable
slider.disabled = false; slider.disabled = false;
input.disabled = false; input.disabled = false;
slider.max = maxAllowed;
input.max = maxAllowed; // Store max allowed for validation (we'll check this in event handlers)
slider.dataset.maxAllowed = maxAllowed;
input.dataset.maxAllowed = maxAllowed;
// If current value exceeds max, adjust it // If current value exceeds max, adjust it
if (fs.percentage > maxAllowed) { if (fs.percentage > maxAllowed) {
@ -1775,7 +1783,20 @@
index !== changedIndex && !fs.isLocked index !== changedIndex && !fs.isLocked
); );
if (otherUnlockedSources.length === 0) return; // If this is the only unlocked source, force it to fill remaining percentage
if (otherUnlockedSources.length === 0) {
const lockedSources = this.foodSources.filter((fs, index) =>
index !== changedIndex && fs.isLocked
);
const totalLockedPercentage = lockedSources.reduce((sum, fs) => sum + fs.percentage, 0);
const requiredPercentage = 100 - totalLockedPercentage;
// Force the changed source to the required percentage
this.foodSources[changedIndex].percentage = requiredPercentage;
this.updatePercentageInputs();
this.updateFoodCalculations();
return;
}
// Calculate total locked percentage (excluding the changed source) // Calculate total locked percentage (excluding the changed source)
const lockedSources = this.foodSources.filter((fs, index) => const lockedSources = this.foodSources.filter((fs, index) =>
@ -1919,7 +1940,35 @@
if (percentageSlider) { if (percentageSlider) {
percentageSlider.addEventListener('input', () => { percentageSlider.addEventListener('input', () => {
const newPercentage = parseInt(percentageSlider.value); // Check if this source is locked first
const foodSource = this.foodSources.find(fs => fs.id === id);
if (foodSource && foodSource.isLocked) {
// Reset slider to original value and return
percentageSlider.value = foodSource.percentage;
return;
}
// Check if this is the only unlocked source (will be forced to fixed percentage)
const otherUnlockedSources = this.foodSources.filter((fs, index) =>
fs.id !== id && !fs.isLocked
);
if (otherUnlockedSources.length === 0) {
// This is the only unlocked source - don't update display, just call adjustPercentages
// which will force it to the correct value and update display properly
this.adjustPercentages(id, parseInt(percentageSlider.value));
return;
}
let newPercentage = parseInt(percentageSlider.value);
const maxAllowed = parseInt(percentageSlider.dataset.maxAllowed) || 100;
// Constrain to max allowed but keep slider scale 0-100
if (newPercentage > maxAllowed) {
newPercentage = maxAllowed;
percentageSlider.value = maxAllowed;
}
this.adjustPercentages(id, newPercentage); this.adjustPercentages(id, newPercentage);
document.getElementById(`percentage-display-${id}`).textContent = `${newPercentage}%`; document.getElementById(`percentage-display-${id}`).textContent = `${newPercentage}%`;
}); });
@ -1927,7 +1976,21 @@
if (percentageInput) { if (percentageInput) {
percentageInput.addEventListener('change', () => { percentageInput.addEventListener('change', () => {
const newPercentage = Math.max(0, Math.min(100, parseInt(percentageInput.value) || 0)); // Check if this source is locked first
const foodSource = this.foodSources.find(fs => fs.id === id);
if (foodSource && foodSource.isLocked) {
// Reset input to original value and return
percentageInput.value = foodSource.percentage;
return;
}
let newPercentage = parseInt(percentageInput.value) || 0;
const maxAllowed = parseInt(percentageInput.dataset.maxAllowed) || 100;
// Constrain to valid range and max allowed
newPercentage = Math.max(0, Math.min(maxAllowed, newPercentage));
percentageInput.value = newPercentage;
this.adjustPercentages(id, newPercentage); this.adjustPercentages(id, newPercentage);
document.getElementById(`percentage-display-${id}`).textContent = `${newPercentage}%`; document.getElementById(`percentage-display-${id}`).textContent = `${newPercentage}%`;
}); });