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

Inplace editing

Browse Source
This commit is contained in:
Dayowe 2025-06-26 12:34:06 +02:00
parent c7d4d8eb9e
commit d3872aef40
1 changed files with 85 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
iframe.html
View File

@ -1466,6 +1466,58 @@
flex: 1; flex: 1;
} }
/* Editable Food Source Name Styling */
.dog-calculator-food-source-name-input {
background: transparent;
border: 2px solid transparent;
color: var(--text-primary);
font-size: 1.1rem;
font-weight: 600;
font-family: inherit;
padding: 0.5rem;
border-radius: 4px;
width: 100%;
outline: none;
transition: all 0.2s ease;
cursor: text;
}
.dog-calculator-food-source-name-input:hover {
border-color: var(--border-color);
background: var(--bg-secondary);
}
.dog-calculator-food-source-name-input:focus {
border-color: var(--primary-color);
background: var(--bg-primary);
box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
}
.dog-calculator-food-source-name-input::placeholder {
color: var(--text-secondary);
opacity: 0.7;
}
/* Dark theme adjustments */
.dog-calculator-container.theme-dark .dog-calculator-food-source-name-input:hover {
background: #2a2530;
}
.dog-calculator-container.theme-dark .dog-calculator-food-source-name-input:focus {
background: #1e1a24;
}
/* System theme adjustments */
@media (prefers-color-scheme: dark) {
.dog-calculator-container.theme-system .dog-calculator-food-source-name-input:hover {
background: #2a2530;
}
.dog-calculator-container.theme-system .dog-calculator-food-source-name-input:focus {
background: #1e1a24;
}
}
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 576px) { @media (max-width: 576px) {
.dog-calculator-food-amount-item { .dog-calculator-food-amount-item {
@ -1477,6 +1529,10 @@
.dog-calculator-food-amount-label { .dog-calculator-food-amount-label {
justify-content: center; justify-content: center;
} }
.dog-calculator-food-source-name-input {
font-size: 1rem;
}
} }
</style> </style>
</head> </head>
@ -2130,10 +2186,13 @@
updateFoodSourceNames() { updateFoodSourceNames() {
this.foodSources.forEach((fs, index) => { this.foodSources.forEach((fs, index) => {
fs.name = `Food Source ${index + 1}`; // Only update if the name is still the default pattern
const titleElement = document.getElementById(`food-title-${fs.id}`); if (fs.name.match(/^Food Source \d+$/)) {
if (titleElement) { fs.name = `Food Source ${index + 1}`;
titleElement.textContent = fs.name; const titleElement = document.getElementById(`food-title-${fs.id}`);
if (titleElement) {
titleElement.value = fs.name;
}
} }
}); });
} }
@ -2163,7 +2222,7 @@
const cardHTML = ` const cardHTML = `
<div class="dog-calculator-food-source-card" id="foodSource-${foodSource.id}"> <div class="dog-calculator-food-source-card" id="foodSource-${foodSource.id}">
<div class="dog-calculator-food-source-header"> <div class="dog-calculator-food-source-header">
<h4 class="dog-calculator-food-source-title" id="food-title-${foodSource.id}">${foodSource.name}</h4> <input type="text" class="dog-calculator-food-source-name-input" id="food-title-${foodSource.id}" value="${foodSource.name}" placeholder="Enter food name" maxlength="50" title="Click to edit food source name">
${this.foodSources.length > 1 ? `<button class="dog-calculator-remove-food-btn" id="remove-${foodSource.id}" type="button" title="Remove this food source">×</button>` : ''} ${this.foodSources.length > 1 ? `<button class="dog-calculator-remove-food-btn" id="remove-${foodSource.id}" type="button" title="Remove this food source">×</button>` : ''}
</div> </div>
@ -2206,6 +2265,9 @@
} }
bindFoodSourceEvents(id) { bindFoodSourceEvents(id) {
// Name input events
const nameInput = document.getElementById(`food-title-${id}`);
// Energy input events // Energy input events
const energyInput = document.getElementById(`energy-${id}`); const energyInput = document.getElementById(`energy-${id}`);
const energyUnitSelect = document.getElementById(`energy-unit-${id}`); const energyUnitSelect = document.getElementById(`energy-unit-${id}`);
@ -2214,6 +2276,24 @@
const removeBtn = document.getElementById(`remove-${id}`); const removeBtn = document.getElementById(`remove-${id}`);
const lockBtn = document.getElementById(`lock-${id}`); const lockBtn = document.getElementById(`lock-${id}`);
if (nameInput) {
nameInput.addEventListener('input', () => {
const newName = nameInput.value.trim() || `Food Source ${this.foodSources.findIndex(fs => fs.id === id) + 1}`;
this.updateFoodSourceData(id, 'name', newName);
this.updateFoodCalculations(); // This will refresh the food amount breakdown with new names
});
nameInput.addEventListener('blur', () => {
// If field is empty, restore default name
if (!nameInput.value.trim()) {
const defaultName = `Food Source ${this.foodSources.findIndex(fs => fs.id === id) + 1}`;
nameInput.value = defaultName;
this.updateFoodSourceData(id, 'name', defaultName);
this.updateFoodCalculations();
}
});
}
if (energyInput) { if (energyInput) {
energyInput.addEventListener('input', () => { energyInput.addEventListener('input', () => {
this.updateFoodSourceData(id, 'energy', energyInput.value); this.updateFoodSourceData(id, 'energy', energyInput.value);