Update
This commit is contained in:
Dayowe
parent
38ea3669cf
commit
954321fe6f
@ -619,6 +619,185 @@
|
||||
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
|
||||
@ -718,10 +897,10 @@
|
||||
</div>
|
||||
|
||||
<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
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
@ -732,6 +911,66 @@
|
||||
</a>
|
||||
</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">×</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">×</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
|
||||
@ -804,6 +1043,53 @@
|
||||
if (unitSelect) unitSelect.addEventListener('change', () => this.updateFoodCalculations());
|
||||
|
||||
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() {
|
||||
@ -957,6 +1243,9 @@
|
||||
}
|
||||
|
||||
formatNumber(num, decimals = 0) {
|
||||
if (decimals === 0) {
|
||||
return Math.round(num).toString();
|
||||
}
|
||||
return num.toFixed(decimals).replace(/\.?0+$/, '');
|
||||
}
|
||||
|
||||
@ -1076,6 +1365,115 @@
|
||||
|
||||
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
|
||||
|
||||
1066
iframe.html
1066
iframe.html
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user