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:27:21 +02:00
parent 38ea3669cf
commit 954321fe6f
2 changed files with 1404 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -619,6 +619,185 @@
color: #7fa464; color: #7fa464;
} }
} }
/* Modal Styles */
.dog-calc-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.dog-calc-modal-content {
position: relative;
background-color: #ffffff;
margin: 5% auto;
padding: 30px;
border: 1px solid #e8e3ed;
border-radius: 12px;
width: 90%;
max-width: 500px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
animation: slideIn 0.3s ease;
}
.dog-calc-modal-embed {
max-width: 700px;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dog-calc-modal-close {
position: absolute;
right: 20px;
top: 20px;
font-size: 28px;
font-weight: 300;
color: #6f3f6d;
cursor: pointer;
transition: color 0.2s ease;
}
.dog-calc-modal-close:hover {
color: #f19a5f;
}
.dog-calc-modal h3 {
margin: 0 0 24px 0;
color: #6f3f6d;
font-size: 1.5rem;
}
/* Share Modal */
.dog-calc-share-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.dog-calc-share-btn {
padding: 12px 16px;
border: none;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
color: white;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
}
.dog-calc-share-facebook { background: #1877f2; }
.dog-calc-share-facebook:hover { background: #1664d1; transform: translateY(-1px); }
.dog-calc-share-twitter { background: #1da1f2; }
.dog-calc-share-twitter:hover { background: #1991da; transform: translateY(-1px); }
.dog-calc-share-linkedin { background: #0a66c2; }
.dog-calc-share-linkedin:hover { background: #084d95; transform: translateY(-1px); }
.dog-calc-share-email { background: #6f3f6d; }
.dog-calc-share-email:hover { background: #5a3357; transform: translateY(-1px); }
.dog-calc-share-copy { background: #f19a5f; }
.dog-calc-share-copy:hover { background: #e87741; transform: translateY(-1px); }
.dog-calc-share-url input {
flex: 1;
padding: 10px 16px;
border: 1px solid #e8e3ed;
border-radius: 6px;
font-size: 0.9rem;
font-family: monospace;
background: #f8f5fa;
color: #6f3f6d;
}
/* Embed Modal */
.dog-calc-embed-options {
display: flex;
flex-direction: column;
gap: 24px;
}
.dog-calc-embed-option {
border: 1px solid #e8e3ed;
border-radius: 8px;
padding: 20px;
background: #fcfafd;
}
.dog-calc-embed-option h4 {
margin: 0 0 8px 0;
color: #6f3f6d;
font-size: 1.1rem;
}
.dog-calc-embed-option p {
margin: 0 0 16px 0;
color: #635870;
font-size: 0.9rem;
}
.dog-calc-code-container {
position: relative;
background: #312b3b;
border-radius: 6px;
overflow: hidden;
}
.dog-calc-code-container pre {
margin: 0;
padding: 16px;
overflow-x: auto;
}
.dog-calc-code-container code {
color: #f5f3f7;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.85rem;
line-height: 1.4;
}
.dog-calc-copy-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 6px 12px;
background: #f19a5f;
color: white;
border: none;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.dog-calc-copy-btn:hover { background: #e87741; }
.dog-calc-copy-btn.copied { background: #7fa464; }
.dog-calc-copy-btn.copied:hover { background: #7fa464; }
`; `;
// Widget HTML template // Widget HTML template
@ -718,10 +897,10 @@
</div> </div>
<div class="dog-calc-action-buttons"> <div class="dog-calc-action-buttons">
<button class="dog-calc-btn dog-calc-btn-share" onclick="alert('Share functionality not available in widget mode')"> <button class="dog-calc-btn dog-calc-btn-share" id="shareBtn">
Share Share
</button> </button>
<button class="dog-calc-btn dog-calc-btn-embed" onclick="alert('Embed functionality not available in widget mode')"> <button class="dog-calc-btn dog-calc-btn-embed" id="embedBtn">
Embed Embed
</button> </button>
</div> </div>
@ -732,6 +911,66 @@
</a> </a>
</div> </div>
</div> </div>
<!-- Share Modal -->
<div id="shareModal" class="dog-calc-modal" style="display: none;">
<div class="dog-calc-modal-content">
<span class="dog-calc-modal-close" id="shareModalClose">&times;</span>
<h3>Share Calculator</h3>
<div class="dog-calc-share-buttons">
<button class="dog-calc-share-btn dog-calc-share-facebook" id="shareFacebook">
Facebook
</button>
<button class="dog-calc-share-btn dog-calc-share-twitter" id="shareTwitter">
Twitter
</button>
<button class="dog-calc-share-btn dog-calc-share-linkedin" id="shareLinkedIn">
LinkedIn
</button>
<button class="dog-calc-share-btn dog-calc-share-email" id="shareEmail">
Email
</button>
<button class="dog-calc-share-btn dog-calc-share-copy" id="shareCopy">
Copy Link
</button>
</div>
<div class="dog-calc-share-url">
<input type="text" id="shareUrl" readonly>
</div>
</div>
</div>
<!-- Embed Modal -->
<div id="embedModal" class="dog-calc-modal" style="display: none;">
<div class="dog-calc-modal-content dog-calc-modal-embed">
<span class="dog-calc-modal-close" id="embedModalClose">&times;</span>
<h3>Embed Calculator</h3>
<div class="dog-calc-embed-options">
<div class="dog-calc-embed-option">
<h4>JavaScript Widget (Recommended)</h4>
<p>SEO-friendly, responsive, integrates with your site's design</p>
<div class="dog-calc-code-container">
<pre><code id="widgetCode"></code></pre>
<button class="dog-calc-copy-btn" id="copyWidget">
Copy
</button>
</div>
</div>
<div class="dog-calc-embed-option">
<h4>iframe Embed (Brand Protected)</h4>
<p>Complete style isolation, your branding stays intact</p>
<div class="dog-calc-code-container">
<pre><code id="iframeCode"></code></pre>
<button class="dog-calc-copy-btn" id="copyIframe">
Copy
</button>
</div>
</div>
</div>
</div>
</div>
`; `;
// Calculator class // Calculator class
@ -804,6 +1043,53 @@
if (unitSelect) unitSelect.addEventListener('change', () => this.updateFoodCalculations()); if (unitSelect) unitSelect.addEventListener('change', () => this.updateFoodCalculations());
if (unitToggle) unitToggle.addEventListener('change', () => this.toggleUnits()); if (unitToggle) unitToggle.addEventListener('change', () => this.toggleUnits());
// Modal event listeners
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());
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');
if (shareFacebook) shareFacebook.addEventListener('click', () => this.shareToFacebook());
if (shareTwitter) shareTwitter.addEventListener('click', () => this.shareToTwitter());
if (shareLinkedIn) shareLinkedIn.addEventListener('click', () => this.shareToLinkedIn());
if (shareEmail) shareEmail.addEventListener('click', () => this.shareViaEmail());
if (shareCopy) shareCopy.addEventListener('click', () => this.copyShareLink());
// Copy buttons
const copyWidget = this.container.querySelector('#copyWidget');
const copyIframe = this.container.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');
if (shareModal) {
shareModal.addEventListener('click', (e) => {
if (e.target === shareModal) this.hideShareModal();
});
}
if (embedModal) {
embedModal.addEventListener('click', (e) => {
if (e.target === embedModal) this.hideEmbedModal();
});
}
} }
toggleUnits() { toggleUnits() {
@ -957,6 +1243,9 @@
} }
formatNumber(num, decimals = 0) { formatNumber(num, decimals = 0) {
if (decimals === 0) {
return Math.round(num).toString();
}
return num.toFixed(decimals).replace(/\.?0+$/, ''); return num.toFixed(decimals).replace(/\.?0+$/, '');
} }
@ -1076,6 +1365,115 @@
totalFoodDisplay.value = this.formatNumber(convertedAmount, decimals) + ' ' + unitLabel; totalFoodDisplay.value = this.formatNumber(convertedAmount, decimals) + ' ' + unitLabel;
} }
// Modal functionality
showShareModal() {
const modal = this.container.querySelector('#shareModal');
const shareUrl = this.container.querySelector('#shareUrl');
if (modal && shareUrl) {
shareUrl.value = window.location.href;
modal.style.display = 'block';
}
}
hideShareModal() {
const modal = this.container.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');
if (modal && widgetCode && iframeCode) {
const baseUrl = window.location.origin;
const theme = this.theme !== 'system' ? ` data-theme="${this.theme}"` : '';
widgetCode.textContent = `<script src="${baseUrl}/dog-calculator-widget.js"></script>
<div id="dog-calorie-calculator"${theme}></div>`;
iframeCode.textContent = `<iframe src="${baseUrl}/iframe.html${this.theme !== 'system' ? '?theme=' + this.theme : ''}"
width="100%" height="600"
frameborder="0"
title="Dog Calorie Calculator">
</iframe>`;
modal.style.display = 'block';
}
}
hideEmbedModal() {
const modal = this.container.querySelector('#embedModal');
if (modal) modal.style.display = 'none';
}
shareToFacebook() {
const url = encodeURIComponent(window.location.href);
window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
}
shareToTwitter() {
const url = encodeURIComponent(window.location.href);
const text = encodeURIComponent('Check out this useful dog calorie calculator!');
window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank', 'width=600,height=400');
}
shareToLinkedIn() {
const url = encodeURIComponent(window.location.href);
window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'width=600,height=400');
}
shareViaEmail() {
const subject = encodeURIComponent('Dog Calorie Calculator');
const body = encodeURIComponent(`Check out this useful dog calorie calculator: ${window.location.href}`);
window.location.href = `mailto:?subject=${subject}&body=${body}`;
}
async copyShareLink() {
const shareUrl = this.container.querySelector('#shareUrl');
const copyBtn = this.container.querySelector('#shareCopy');
if (shareUrl && copyBtn) {
try {
await navigator.clipboard.writeText(shareUrl.value);
const originalText = copyBtn.textContent;
copyBtn.textContent = 'Copied!';
copyBtn.classList.add('copied');
setTimeout(() => {
copyBtn.textContent = originalText;
copyBtn.classList.remove('copied');
}, 2000);
} catch (err) {
// Fallback for older browsers
shareUrl.select();
document.execCommand('copy');
}
}
}
async copyEmbedCode(type) {
const codeElement = this.container.querySelector(type === 'widget' ? '#widgetCode' : '#iframeCode');
const copyBtn = this.container.querySelector(type === 'widget' ? '#copyWidget' : '#copyIframe');
if (codeElement && copyBtn) {
try {
await navigator.clipboard.writeText(codeElement.textContent);
const originalText = copyBtn.textContent;
copyBtn.textContent = 'Copied!';
copyBtn.classList.add('copied');
setTimeout(() => {
copyBtn.textContent = originalText;
copyBtn.classList.remove('copied');
}, 2000);
} catch (err) {
// Fallback for older browsers
console.log('Copy fallback needed');
}
}
}
} }
// Auto-initialize widget // Auto-initialize widget

1066
iframe.html
View File

File diff suppressed because it is too large Load Diff