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

Fix widget data-theme and data-scale attribute handling

Browse Source 
Fixed the build script to properly handle data-theme and data-scale attributes:
- Remove duplicate theme/scale assignments that were overriding options
- Apply theme classes to correct element (#dogCalculator)
- Support all three themes: light, dark, system
- Remove duplicate applyTheme/applyScale calls in init method
This commit is contained in:
Dayowe 2025-06-19 11:11:33 +02:00
parent f0666c247b
commit 081c4c2a7f
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
build.js
View File

@ -116,6 +116,8 @@ 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
.replace(/this\.theme = this\.getThemeFromURL\(\) \|\| 'system';\s*\n\s*this\.scale = this\.getScaleFromURL\(\) \|\| 1\.0;/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;
@ -123,7 +125,9 @@ function createWidgetJS(css, html, js) {
theme: options.theme || this.getThemeFromURL() || 'system', theme: options.theme || this.getThemeFromURL() || 'system',
scale: options.scale || this.getScaleFromURL() || 1.0, scale: options.scale || this.getScaleFromURL() || 1.0,
...options ...options
};`) };
this.theme = this.options.theme;
this.scale = this.options.scale;`)
// Replace the init() method to inject HTML and apply widget settings // Replace the init() method to inject HTML and apply widget settings
.replace(/init\(\) \{/, `init() { .replace(/init\(\) \{/, `init() {
// Inject the calculator HTML into the container // Inject the calculator HTML into the container
@ -133,7 +137,9 @@ function createWidgetJS(css, html, js) {
this.applyTheme(); this.applyTheme();
this.applyScale(); this.applyScale();
// Continue with original init logic`); // Continue with original init logic`)
// Remove duplicate applyTheme/applyScale calls
.replace(/this\.applyTheme\(\);\s*\n\s*this\.applyScale\(\);\s*\n\s*this\.bindEvents/g, 'this.bindEvents');
// Add widget-specific methods before the class closing brace // Add widget-specific methods before the class closing brace
transformedJS = transformedJS.replace(/(\s+)(\}\s*$)/, `$1 transformedJS = transformedJS.replace(/(\s+)(\}\s*$)/, `$1
@ -150,8 +156,14 @@ function createWidgetJS(css, html, js) {
} }
applyTheme() { applyTheme() {
if (this.options.theme === 'light' || this.options.theme === 'dark') { const calculatorContainer = this.container.querySelector('#dogCalculator');
this.container.classList.add('theme-' + this.options.theme); if (calculatorContainer) {
// Remove existing theme classes
calculatorContainer.classList.remove('theme-light', 'theme-dark', 'theme-system');
// Add the selected theme class
if (['light', 'dark', 'system'].includes(this.options.theme)) {
calculatorContainer.classList.add('theme-' + this.options.theme);
}
} }
} }

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

@ -945,10 +945,11 @@
scale: options.scale || this.getScaleFromURL() || 1.0, scale: options.scale || this.getScaleFromURL() || 1.0,
...options ...options
}; };
this.theme = this.options.theme;
this.scale = this.options.scale;
this.currentMER = 0; this.currentMER = 0;
this.isImperial = false; this.isImperial = false;
this.theme = this.getThemeFromURL() || 'system';
this.scale = this.getScaleFromURL() || 1.0;
this.init(); this.init();
} }
@ -1138,8 +1139,6 @@
this.applyScale(); this.applyScale();
// Continue with original init logic // Continue with original init logic
this.applyTheme();
this.applyScale();
this.bindEvents(); this.bindEvents();
this.updateUnitLabels(); this.updateUnitLabels();
this.setupIframeResize(); this.setupIframeResize();