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

Constrain slider

Browse Source
This commit is contained in:
Dayowe 2025-06-26 11:27:03 +02:00
parent f3baa12bd3
commit 4d493b7d71
1 changed files with 95 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
iframe.html
View File

@ -1324,6 +1324,59 @@
color: #f19a5f;
}
}
/* Disabled slider and input styles */
.dog-calculator-percentage-slider:disabled {
opacity: 0.5;
cursor: not-allowed;
background: #f0f0f0;
}
.dog-calculator-percentage-slider:disabled::-webkit-slider-thumb {
background: #ccc;
cursor: not-allowed;
}
.dog-calculator-percentage-slider:disabled::-webkit-slider-thumb:hover {
background: #ccc;
transform: none;
}
.dog-calculator-percentage-slider:disabled::-moz-range-thumb {
background: #ccc;
cursor: not-allowed;
}
.dog-calculator-percentage-input:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f8f8f8;
border-color: #ddd;
}
/* Dark theme disabled styles */
.dog-calculator-container.theme-dark .dog-calculator-percentage-slider:disabled {
background: #2a2530;
}
.dog-calculator-container.theme-dark .dog-calculator-percentage-input:disabled {
background-color: #2a2530;
border-color: #3a3442;
color: #8a8a8a;
}
/* System theme disabled styles */
@media (prefers-color-scheme: dark) {
.dog-calculator-container.theme-system .dog-calculator-percentage-slider:disabled {
background: #2a2530;
}
.dog-calculator-container.theme-system .dog-calculator-percentage-input:disabled {
background-color: #2a2530;
border-color: #3a3442;
color: #8a8a8a;
}
}
</style>
</head>
<body>
@ -1663,9 +1716,48 @@
this.foodSources.forEach(fs => {
const slider = document.getElementById(`percentage-slider-${fs.id}`);
const input = document.getElementById(`percentage-input-${fs.id}`);
const display = document.getElementById(`percentage-display-${fs.id}`);
if (slider) slider.value = fs.percentage;
if (input) input.value = fs.percentage;
if (display) display.textContent = `${fs.percentage}%`;
});
// Update constraints after values are set
this.updatePercentageConstraints();
}
updatePercentageConstraints() {
this.foodSources.forEach(fs => {
const slider = document.getElementById(`percentage-slider-${fs.id}`);
const input = document.getElementById(`percentage-input-${fs.id}`);
if (!slider || !input) return;
if (fs.isLocked) {
// Locked sources can't be changed
slider.disabled = true;
input.disabled = true;
} else {
// Calculate the maximum this source can have
const lockedSources = this.foodSources.filter(other => other.id !== fs.id && other.isLocked);
const totalLockedPercentage = lockedSources.reduce((sum, other) => sum + other.percentage, 0);
const maxAllowed = 100 - totalLockedPercentage;
// Re-enable and set constraints
slider.disabled = false;
input.disabled = false;
slider.max = maxAllowed;
input.max = maxAllowed;
// If current value exceeds max, adjust it
if (fs.percentage > maxAllowed) {
fs.percentage = maxAllowed;
slider.value = maxAllowed;
input.value = maxAllowed;
document.getElementById(`percentage-display-${fs.id}`).textContent = `${maxAllowed}%`;
}
}
});
}
@ -1901,6 +1993,9 @@
}
}
});
// Update percentage constraints based on lock states
this.updatePercentageConstraints();
}
updateFoodSourceData(id, field, value) {