From 081c4c2a7f4f3652243b90f8a2e4287662831967 Mon Sep 17 00:00:00 2001
From: Dayowe <dayowe@tutamail.com>
Date: Thu, 19 Jun 2025 11:11:33 +0200
Subject: [PATCH] Fix widget data-theme and data-scale attribute handling

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
---
 build.js                      | 20 ++++++++++++++++----
 sundog-dog-food-calculator.js |  7 +++----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/build.js b/build.js
index 3b5f19c..b896b72 100644
--- a/build.js
+++ b/build.js
@@ -116,6 +116,8 @@ function createWidgetJS(css, html, js) {
         .replace(/document\.querySelectorAll\(/g, 'this.container.querySelectorAll(')
         // Remove the DOMContentLoaded listener and class instantiation - we'll handle this in the widget wrapper
         .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
         .replace(/constructor\(\) \{/, `constructor(container, options = {}) {
             this.container = container;
@@ -123,7 +125,9 @@ function createWidgetJS(css, html, js) {
                 theme: options.theme || this.getThemeFromURL() || 'system',
                 scale: options.scale || this.getScaleFromURL() || 1.0,
                 ...options
-            };`)
+            };
+            this.theme = this.options.theme;
+            this.scale = this.options.scale;`)
         // Replace the init() method to inject HTML and apply widget settings
         .replace(/init\(\) \{/, `init() {
             // Inject the calculator HTML into the container
@@ -133,7 +137,9 @@ function createWidgetJS(css, html, js) {
             this.applyTheme();
             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
     transformedJS = transformedJS.replace(/(\s+)(\}\s*$)/, `$1
@@ -150,8 +156,14 @@ function createWidgetJS(css, html, js) {
         }
 
         applyTheme() {
-            if (this.options.theme === 'light' || this.options.theme === 'dark') {
-                this.container.classList.add('theme-' + this.options.theme);
+            const calculatorContainer = this.container.querySelector('#dogCalculator');
+            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);
+                }
             }
         }
 
diff --git a/sundog-dog-food-calculator.js b/sundog-dog-food-calculator.js
index 1b78972..c9ee05e 100644
--- a/sundog-dog-food-calculator.js
+++ b/sundog-dog-food-calculator.js
@@ -945,10 +945,11 @@
                 scale: options.scale || this.getScaleFromURL() || 1.0,
                 ...options
             };
+            this.theme = this.options.theme;
+            this.scale = this.options.scale;
                 this.currentMER = 0;
                 this.isImperial = false;
-                this.theme = this.getThemeFromURL() || 'system';
-                this.scale = this.getScaleFromURL() || 1.0;
+                
                 this.init();
             }
 
@@ -1138,8 +1139,6 @@
             this.applyScale();
             
             // Continue with original init logic
-                this.applyTheme();
-                this.applyScale();
                 this.bindEvents();
                 this.updateUnitLabels();
                 this.setupIframeResize();