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:43:47 +02:00
parent 45c243eb0b
commit e84481ecb1
1 changed files with 50 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -800,76 +800,92 @@
.dog-calc-copy-btn.copied:hover { background: #7fa464; } .dog-calc-copy-btn.copied:hover { background: #7fa464; }
/* Dark theme modal styles */ /* Dark theme modal styles */
.dog-calc-theme-dark .dog-calc-modal-content,
.dog-calc-widget.dog-calc-theme-dark .dog-calc-modal-content { .dog-calc-widget.dog-calc-theme-dark .dog-calc-modal-content {
background-color: #24202d; background-color: #24202d;
border-color: #433c4f; border-color: #433c4f;
} }
.dog-calc-theme-dark .dog-calc-modal h3,
.dog-calc-widget.dog-calc-theme-dark .dog-calc-modal h3 { .dog-calc-widget.dog-calc-theme-dark .dog-calc-modal h3 {
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-theme-dark .dog-calc-modal-close,
.dog-calc-widget.dog-calc-theme-dark .dog-calc-modal-close { .dog-calc-widget.dog-calc-theme-dark .dog-calc-modal-close {
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-theme-dark .dog-calc-modal-close:hover,
.dog-calc-widget.dog-calc-theme-dark .dog-calc-modal-close:hover { .dog-calc-widget.dog-calc-theme-dark .dog-calc-modal-close:hover {
color: #f19a5f; color: #f19a5f;
} }
.dog-calc-theme-dark .dog-calc-share-url input,
.dog-calc-widget.dog-calc-theme-dark .dog-calc-share-url input { .dog-calc-widget.dog-calc-theme-dark .dog-calc-share-url input {
background: #312b3b; background: #312b3b;
border-color: #433c4f; border-color: #433c4f;
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-theme-dark .dog-calc-embed-option,
.dog-calc-widget.dog-calc-theme-dark .dog-calc-embed-option { .dog-calc-widget.dog-calc-theme-dark .dog-calc-embed-option {
background: #312b3b; background: #312b3b;
border-color: #433c4f; border-color: #433c4f;
} }
.dog-calc-theme-dark .dog-calc-embed-option h4,
.dog-calc-widget.dog-calc-theme-dark .dog-calc-embed-option h4 { .dog-calc-widget.dog-calc-theme-dark .dog-calc-embed-option h4 {
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-theme-dark .dog-calc-embed-option p,
.dog-calc-widget.dog-calc-theme-dark .dog-calc-embed-option p { .dog-calc-widget.dog-calc-theme-dark .dog-calc-embed-option p {
color: #b8b0c2; color: #b8b0c2;
} }
/* System theme modal styles */ /* System theme modal styles */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.dog-calc-theme-system .dog-calc-modal-content,
.dog-calc-widget.dog-calc-theme-system .dog-calc-modal-content { .dog-calc-widget.dog-calc-theme-system .dog-calc-modal-content {
background-color: #24202d; background-color: #24202d;
border-color: #433c4f; border-color: #433c4f;
} }
.dog-calc-theme-system .dog-calc-modal h3,
.dog-calc-widget.dog-calc-theme-system .dog-calc-modal h3 { .dog-calc-widget.dog-calc-theme-system .dog-calc-modal h3 {
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-theme-system .dog-calc-modal-close,
.dog-calc-widget.dog-calc-theme-system .dog-calc-modal-close { .dog-calc-widget.dog-calc-theme-system .dog-calc-modal-close {
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-theme-system .dog-calc-modal-close:hover,
.dog-calc-widget.dog-calc-theme-system .dog-calc-modal-close:hover { .dog-calc-widget.dog-calc-theme-system .dog-calc-modal-close:hover {
color: #f19a5f; color: #f19a5f;
} }
.dog-calc-theme-system .dog-calc-share-url input,
.dog-calc-widget.dog-calc-theme-system .dog-calc-share-url input { .dog-calc-widget.dog-calc-theme-system .dog-calc-share-url input {
background: #312b3b; background: #312b3b;
border-color: #433c4f; border-color: #433c4f;
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-theme-system .dog-calc-embed-option,
.dog-calc-widget.dog-calc-theme-system .dog-calc-embed-option { .dog-calc-widget.dog-calc-theme-system .dog-calc-embed-option {
background: #312b3b; background: #312b3b;
border-color: #433c4f; border-color: #433c4f;
} }
.dog-calc-theme-system .dog-calc-embed-option h4,
.dog-calc-widget.dog-calc-theme-system .dog-calc-embed-option h4 { .dog-calc-widget.dog-calc-theme-system .dog-calc-embed-option h4 {
color: #f5f3f7; color: #f5f3f7;
} }
.dog-calc-theme-system .dog-calc-embed-option p,
.dog-calc-widget.dog-calc-theme-system .dog-calc-embed-option p { .dog-calc-widget.dog-calc-theme-system .dog-calc-embed-option p {
color: #b8b0c2; color: #b8b0c2;
} }
@ -1025,7 +1041,6 @@
<div class="dog-calc-embed-options"> <div class="dog-calc-embed-options">
<div class="dog-calc-embed-option"> <div class="dog-calc-embed-option">
<h4>JavaScript Widget</h4> <h4>JavaScript Widget</h4>
<p>SEO-friendly, responsive, integrates with your site's design</p>
<div class="dog-calc-code-container"> <div class="dog-calc-code-container">
<pre><code id="widgetCode"></code></pre> <pre><code id="widgetCode"></code></pre>
<button class="dog-calc-copy-btn" id="copyWidget"> <button class="dog-calc-copy-btn" id="copyWidget">
@ -1035,8 +1050,7 @@
</div> </div>
<div class="dog-calc-embed-option"> <div class="dog-calc-embed-option">
<h4>iframe Embed (Brand Protected)</h4> <h4>iframe Embed</h4>
<p></p>
<div class="dog-calc-code-container"> <div class="dog-calc-code-container">
<pre><code id="iframeCode"></code></pre> <pre><code id="iframeCode"></code></pre>
<button class="dog-calc-copy-btn" id="copyIframe"> <button class="dog-calc-copy-btn" id="copyIframe">
@ -1078,6 +1092,25 @@
injectHTML() { injectHTML() {
this.container.innerHTML = widgetTemplate; this.container.innerHTML = widgetTemplate;
// Move modals to document body for proper positioning and theme inheritance
this.moveModalsToBody();
}
moveModalsToBody() {
const shareModal = this.container.querySelector('#shareModal');
const embedModal = this.container.querySelector('#embedModal');
if (shareModal) {
shareModal.remove();
shareModal.classList.add(`dog-calc-theme-${this.theme}`);
document.body.appendChild(shareModal);
}
if (embedModal) {
embedModal.remove();
embedModal.classList.add(`dog-calc-theme-${this.theme}`);
document.body.appendChild(embedModal);
}
} }
applyTheme() { applyTheme() {
@ -1089,6 +1122,20 @@
// Apply new theme class // Apply new theme class
widget.classList.add(`dog-calc-theme-${this.theme}`); widget.classList.add(`dog-calc-theme-${this.theme}`);
// Also apply theme to modals if they exist
const shareModal = document.querySelector('#shareModal');
const embedModal = document.querySelector('#embedModal');
if (shareModal) {
shareModal.classList.remove('dog-calc-theme-light', 'dog-calc-theme-dark', 'dog-calc-theme-system');
shareModal.classList.add(`dog-calc-theme-${this.theme}`);
}
if (embedModal) {
embedModal.classList.remove('dog-calc-theme-light', 'dog-calc-theme-dark', 'dog-calc-theme-system');
embedModal.classList.add(`dog-calc-theme-${this.theme}`);
}
} }
bindEvents() { bindEvents() {