From 4d493b7d714f1b319cb0ca7fe6ea70347d405cd3 Mon Sep 17 00:00:00 2001 From: Dayowe Date: Thu, 26 Jun 2025 11:27:03 +0200 Subject: [PATCH] Constrain slider --- iframe.html | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) diff --git a/iframe.html b/iframe.html index 38573af..674fbf0 100644 --- a/iframe.html +++ b/iframe.html @@ -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; + } + } @@ -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) {