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}`);
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 {