From aff9fb87219c92453cfdc4d09f10dd80fd0fb917 Mon Sep 17 00:00:00 2001
From: Dayowe <dayowe@tutamail.com>
Date: Sun, 8 Jun 2025 22:46:43 +0200
Subject: [PATCH] Update

---
 dog-food-calculator-widget.js | 54 ++++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/dog-food-calculator-widget.js b/dog-food-calculator-widget.js
index e9b4539..e82fed4 100644
--- a/dog-food-calculator-widget.js
+++ b/dog-food-calculator-widget.js
@@ -1111,6 +1111,9 @@
                 embedModal.classList.add(`dog-calc-theme-${this.theme}`);
                 document.body.appendChild(embedModal);
             }
+            
+            // Bind events for modal elements now that they're in the document
+            this.bindModalEvents();
         }
 
         applyTheme() {
@@ -1167,23 +1170,28 @@
             
             if (unitToggle) unitToggle.addEventListener('change', () => this.toggleUnits());
 
-            // Modal event listeners
+            // Modal event listeners - buttons are in widget, modals are in document
             const shareBtn = this.container.querySelector('#shareBtn');
             const embedBtn = this.container.querySelector('#embedBtn');
-            const shareModalClose = this.container.querySelector('#shareModalClose');
-            const embedModalClose = this.container.querySelector('#embedModalClose');
 
             if (shareBtn) shareBtn.addEventListener('click', () => this.showShareModal());
             if (embedBtn) embedBtn.addEventListener('click', () => this.showEmbedModal());
+        }
+
+        bindModalEvents() {
+            // Modal elements are in document body, so we need to set up their events after moving them
+            const shareModalClose = document.querySelector('#shareModalClose');
+            const embedModalClose = document.querySelector('#embedModalClose');
+
             if (shareModalClose) shareModalClose.addEventListener('click', () => this.hideShareModal());
             if (embedModalClose) embedModalClose.addEventListener('click', () => this.hideEmbedModal());
 
             // Share buttons
-            const shareFacebook = this.container.querySelector('#shareFacebook');
-            const shareTwitter = this.container.querySelector('#shareTwitter');
-            const shareLinkedIn = this.container.querySelector('#shareLinkedIn');
-            const shareEmail = this.container.querySelector('#shareEmail');
-            const shareCopy = this.container.querySelector('#shareCopy');
+            const shareFacebook = document.querySelector('#shareFacebook');
+            const shareTwitter = document.querySelector('#shareTwitter');
+            const shareLinkedIn = document.querySelector('#shareLinkedIn');
+            const shareEmail = document.querySelector('#shareEmail');
+            const shareCopy = document.querySelector('#shareCopy');
 
             if (shareFacebook) shareFacebook.addEventListener('click', () => this.shareToFacebook());
             if (shareTwitter) shareTwitter.addEventListener('click', () => this.shareToTwitter());
@@ -1192,15 +1200,15 @@
             if (shareCopy) shareCopy.addEventListener('click', () => this.copyShareLink());
 
             // Copy buttons
-            const copyWidget = this.container.querySelector('#copyWidget');
-            const copyIframe = this.container.querySelector('#copyIframe');
+            const copyWidget = document.querySelector('#copyWidget');
+            const copyIframe = document.querySelector('#copyIframe');
 
             if (copyWidget) copyWidget.addEventListener('click', () => this.copyEmbedCode('widget'));
             if (copyIframe) copyIframe.addEventListener('click', () => this.copyEmbedCode('iframe'));
 
             // Close modals on outside click
-            const shareModal = this.container.querySelector('#shareModal');
-            const embedModal = this.container.querySelector('#embedModal');
+            const shareModal = document.querySelector('#shareModal');
+            const embedModal = document.querySelector('#embedModal');
 
             if (shareModal) {
                 shareModal.addEventListener('click', (e) => {
@@ -1491,8 +1499,8 @@
 
         // Modal functionality
         showShareModal() {
-            const modal = this.container.querySelector('#shareModal');
-            const shareUrl = this.container.querySelector('#shareUrl');
+            const modal = document.querySelector('#shareModal');
+            const shareUrl = document.querySelector('#shareUrl');
             if (modal && shareUrl) {
                 shareUrl.value = window.location.href;
                 modal.style.display = 'block';
@@ -1500,14 +1508,14 @@
         }
 
         hideShareModal() {
-            const modal = this.container.querySelector('#shareModal');
+            const modal = document.querySelector('#shareModal');
             if (modal) modal.style.display = 'none';
         }
 
         showEmbedModal() {
-            const modal = this.container.querySelector('#embedModal');
-            const widgetCode = this.container.querySelector('#widgetCode');
-            const iframeCode = this.container.querySelector('#iframeCode');
+            const modal = document.querySelector('#embedModal');
+            const widgetCode = document.querySelector('#widgetCode');
+            const iframeCode = document.querySelector('#iframeCode');
             
             if (modal && widgetCode && iframeCode) {
                 const baseUrl = window.location.origin;
@@ -1527,7 +1535,7 @@
         }
 
         hideEmbedModal() {
-            const modal = this.container.querySelector('#embedModal');
+            const modal = document.querySelector('#embedModal');
             if (modal) modal.style.display = 'none';
         }
 
@@ -1554,8 +1562,8 @@
         }
 
         async copyShareLink() {
-            const shareUrl = this.container.querySelector('#shareUrl');
-            const copyBtn = this.container.querySelector('#shareCopy');
+            const shareUrl = document.querySelector('#shareUrl');
+            const copyBtn = document.querySelector('#shareCopy');
             
             if (shareUrl && copyBtn) {
                 try {
@@ -1577,8 +1585,8 @@
         }
 
         async copyEmbedCode(type) {
-            const codeElement = this.container.querySelector(type === 'widget' ? '#widgetCode' : '#iframeCode');
-            const copyBtn = this.container.querySelector(type === 'widget' ? '#copyWidget' : '#copyIframe');
+            const codeElement = document.querySelector(type === 'widget' ? '#widgetCode' : '#iframeCode');
+            const copyBtn = document.querySelector(type === 'widget' ? '#copyWidget' : '#copyIframe');
             
             if (codeElement && copyBtn) {
                 try {