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

Update

Browse Source
This commit is contained in:
Dayowe 2025-06-08 22:46:43 +02:00
parent e84481ecb1
commit aff9fb8721
1 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
dog-food-calculator-widget.js
View File

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