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

Fix data-theme and data-scale widget attributes not being applied

Browse Source 
- Remove theme/scale assignments that override widget options in build process
- Widget now properly uses data-theme and data-scale attributes from HTML
- Both light and dark themes work correctly when multiple widgets on same page
- Scale attribute properly applies to each widget independently
This commit is contained in:
Dayowe 2025-08-18 14:54:25 +02:00
parent 4ec42fdbc0
commit c4770d5ee6
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
build.js
View File

@ -141,8 +141,9 @@ function createWidgetJS(css, html, js) {
.replace(/document\.querySelectorAll\(/g, 'this.container.querySelectorAll(') .replace(/document\.querySelectorAll\(/g, 'this.container.querySelectorAll(')
// Remove the DOMContentLoaded listener and class instantiation - we'll handle this in the widget wrapper // Remove the DOMContentLoaded listener and class instantiation - we'll handle this in the widget wrapper
.replace(/document\.addEventListener\('DOMContentLoaded'.*?\n.*?new DogCalorieCalculator.*?\n.*?\}\);/s, '') .replace(/document\.addEventListener\('DOMContentLoaded'.*?\n.*?new DogCalorieCalculator.*?\n.*?\}\);/s, '')
// Remove duplicate theme/scale assignments that override options // Remove theme/scale assignments that would override widget options
.replace(/this\.theme = this\.getThemeFromURL\(\) \|\| 'system';\s*\n\s*this\.scale = this\.getScaleFromURL\(\) \|\| 1\.0;/g, '') .replace(/this\.theme = this\.getThemeFromURL\(\) \|\| CALCULATOR_CONFIG\.defaultTheme;/g, '')
.replace(/this\.scale = this\.getScaleFromURL\(\) \|\| CALCULATOR_CONFIG\.defaultScale;/g, '')
// Add widget initialization methods // Add widget initialization methods
.replace(/constructor\(\) \{/, `constructor(container, options = {}) { .replace(/constructor\(\) \{/, `constructor(container, options = {}) {
this.container = container; this.container = container;
@ -186,14 +187,14 @@ function createWidgetJS(css, html, js) {
// Remove existing theme classes // Remove existing theme classes
calculatorContainer.classList.remove('theme-light', 'theme-dark', 'theme-system'); calculatorContainer.classList.remove('theme-light', 'theme-dark', 'theme-system');
// Add the selected theme class // Add the selected theme class
if (['light', 'dark', 'system'].includes(this.options.theme)) { if (['light', 'dark', 'system'].includes(this.theme)) {
calculatorContainer.classList.add('theme-' + this.options.theme); calculatorContainer.classList.add('theme-' + this.theme);
} }
} }
} }
applyScale() { applyScale() {
const scale = Math.max(0.5, Math.min(2.0, this.options.scale)); const scale = Math.max(0.5, Math.min(2.0, this.scale));
if (scale !== 1.0) { if (scale !== 1.0) {
this.container.style.transform = \`scale(\${scale})\`; this.container.style.transform = \`scale(\${scale})\`;
this.container.style.transformOrigin = 'top left'; this.container.style.transformOrigin = 'top left';

4
sundog-dog-food-calculator.js
View File

@ -2106,8 +2106,8 @@ const CALCULATOR_CONFIG = {
this.scale = this.options.scale; this.scale = this.options.scale;
this.currentMER = 0; this.currentMER = 0;
this.isImperial = false; this.isImperial = false;
this.theme = this.getThemeFromURL() || CALCULATOR_CONFIG.defaultTheme;
this.scale = this.getScaleFromURL() || CALCULATOR_CONFIG.defaultScale;
this.foodSources = []; this.foodSources = [];
this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources; this.maxFoodSources = CALCULATOR_CONFIG.maxFoodSources;
this.mealsPerDay = 2; this.mealsPerDay = 2;