Remove embedding and js widget
This commit is contained in:
Dayowe
+87
-252
@@ -25,7 +25,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden; /* hide internal scrollbars; parent resizes iframe */
|
||||
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
@@ -331,10 +331,7 @@
|
||||
color: #9f5999;
|
||||
}
|
||||
|
||||
.dog-calculator-btn-embed:hover {
|
||||
border-color: var(--success-color);
|
||||
color: var(--success-color);
|
||||
}
|
||||
/* Embed button removed */
|
||||
|
||||
.dog-calculator-footer {
|
||||
text-align: center;
|
||||
@@ -729,10 +726,7 @@
|
||||
color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-btn-embed:hover {
|
||||
border-color: var(--success-color);
|
||||
color: var(--success-color);
|
||||
}
|
||||
/* Embed button removed */
|
||||
|
||||
/* Dark theme feeding configuration styles */
|
||||
.dog-calculator-container.theme-dark .dog-calculator-feeding-config {
|
||||
@@ -935,10 +929,7 @@
|
||||
color: #f19a5f;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-btn-embed:hover {
|
||||
border-color: var(--success-color);
|
||||
color: var(--success-color);
|
||||
}
|
||||
/* Embed button removed */
|
||||
|
||||
/* System theme feeding configuration styles in dark mode */
|
||||
.dog-calculator-container.theme-system .dog-calculator-feeding-config {
|
||||
@@ -980,13 +971,18 @@
|
||||
|
||||
/* Modal Styles */
|
||||
.dog-calculator-modal {
|
||||
display: none;
|
||||
display: none; /* set to flex via JS when opened */
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto; /* allow modal content scroll if needed */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -998,19 +994,19 @@
|
||||
.dog-calculator-modal-content {
|
||||
position: relative;
|
||||
background-color: var(--bg-secondary);
|
||||
margin: 5% auto;
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh; /* ensure it fits viewport */
|
||||
overflow: auto;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.dog-calculator-modal-embed {
|
||||
max-width: 700px;
|
||||
}
|
||||
/* Embed modal removed */
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
@@ -1096,74 +1092,7 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Embed Modal */
|
||||
.dog-calculator-embed-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.dog-calculator-embed-option {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #fcfafd;
|
||||
}
|
||||
|
||||
.dog-calculator-embed-option h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.dog-calculator-embed-option p {
|
||||
margin: 0 0 16px 0;
|
||||
color: var(--text-label);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Default (light theme) code containers */
|
||||
.dog-calculator-code-container {
|
||||
position: relative;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dog-calculator-code-container pre {
|
||||
margin: 0;
|
||||
padding: 16px 60px 16px 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.dog-calculator-code-container code {
|
||||
color: var(--text-primary);
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dog-calculator-copy-btn {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
padding: 6px 10px;
|
||||
background: #f19a5f;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-family: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dog-calculator-copy-btn:hover { background: #e87741; }
|
||||
.dog-calculator-copy-btn.copied { background: var(--success-color); }
|
||||
.dog-calculator-copy-btn.copied:hover { background: var(--success-color); }
|
||||
/* Embed UI removed */
|
||||
|
||||
/* Dark theme modal styles */
|
||||
.dog-calculator-container.theme-dark .dog-calculator-modal-content {
|
||||
@@ -1189,28 +1118,7 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-embed-option {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-embed-option h4 {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-embed-option p {
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
/* Dark theme code containers - different from embed option background */
|
||||
.dog-calculator-container.theme-dark .dog-calculator-code-container {
|
||||
background: #1a1621;
|
||||
border-color: #2a2330;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-dark .dog-calculator-code-container code {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
/* Embed UI removed for dark theme */
|
||||
|
||||
/* System theme modal styles */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -1237,28 +1145,7 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-embed-option {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-embed-option h4 {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-embed-option p {
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
/* System theme code containers - different from embed option background */
|
||||
.dog-calculator-container.theme-system .dog-calculator-code-container {
|
||||
background: #1a1621;
|
||||
border-color: #2a2330;
|
||||
}
|
||||
|
||||
.dog-calculator-container.theme-system .dog-calculator-code-container code {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
/* Embed UI removed for system theme */
|
||||
}
|
||||
|
||||
/* Multi-Food Source Styles */
|
||||
@@ -2219,9 +2106,6 @@
|
||||
<button class="dog-calculator-btn dog-calculator-btn-share" id="shareBtn">
|
||||
Share
|
||||
</button>
|
||||
<button class="dog-calculator-btn dog-calculator-btn-embed" id="embedBtn">
|
||||
Embed
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dog-calculator-footer">
|
||||
@@ -2257,35 +2141,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Embed Modal -->
|
||||
<div id="embedModal" class="dog-calculator-modal" style="display: none;">
|
||||
<div class="dog-calculator-modal-content dog-calculator-modal-embed">
|
||||
<span class="dog-calculator-modal-close" id="embedModalClose">×</span>
|
||||
<h3>⚡ Embed the Calculator</h3>
|
||||
|
||||
<div class="dog-calculator-embed-options">
|
||||
<div class="dog-calculator-embed-option">
|
||||
<h4>⚡ JavaScript Widget</h4>
|
||||
<div class="dog-calculator-code-container">
|
||||
<pre><code id="widgetCode"></code></pre>
|
||||
<button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-js" id="copyWidget">
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dog-calculator-embed-option">
|
||||
<h4>🛡️ iframe Embed</h4>
|
||||
<div class="dog-calculator-code-container">
|
||||
<pre><code id="iframeCode"></code></pre>
|
||||
<button class="dog-calculator-copy-btn plausible-event-name=Calculator+Usage plausible-event-action=calculator-embed-iframe" id="copyIframe">
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
/**
|
||||
@@ -2362,10 +2218,8 @@ const CALCULATOR_CONFIG = {
|
||||
container.style.transform = `scale(${clampedScale})`;
|
||||
container.style.transformOrigin = 'top center';
|
||||
|
||||
// Adjust container to account for scaling
|
||||
// Recalculate height for parent without adding artificial margins
|
||||
setTimeout(() => {
|
||||
const actualHeight = container.offsetHeight * clampedScale;
|
||||
container.style.marginBottom = `${(clampedScale - 1) * container.offsetHeight}px`;
|
||||
this.sendHeightToParent();
|
||||
}, 100);
|
||||
}
|
||||
@@ -3201,14 +3055,10 @@ const CALCULATOR_CONFIG = {
|
||||
|
||||
// Modal event listeners
|
||||
const shareBtn = document.getElementById('shareBtn');
|
||||
const embedBtn = document.getElementById('embedBtn');
|
||||
const shareModalClose = document.getElementById('shareModalClose');
|
||||
const embedModalClose = document.getElementById('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 = document.getElementById('shareFacebook');
|
||||
@@ -3223,16 +3073,10 @@ const CALCULATOR_CONFIG = {
|
||||
if (shareEmail) shareEmail.addEventListener('click', () => this.shareViaEmail());
|
||||
if (shareCopy) shareCopy.addEventListener('click', () => this.copyShareLink());
|
||||
|
||||
// Copy buttons
|
||||
const copyWidget = document.getElementById('copyWidget');
|
||||
const copyIframe = document.getElementById('copyIframe');
|
||||
|
||||
if (copyWidget) copyWidget.addEventListener('click', () => this.copyEmbedCode('widget'));
|
||||
if (copyIframe) copyIframe.addEventListener('click', () => this.copyEmbedCode('iframe'));
|
||||
// Embed copy buttons removed (embedding disabled)
|
||||
|
||||
// Close modals on outside click
|
||||
const shareModal = document.getElementById('shareModal');
|
||||
const embedModal = document.getElementById('embedModal');
|
||||
|
||||
if (shareModal) {
|
||||
shareModal.addEventListener('click', (e) => {
|
||||
@@ -3240,11 +3084,7 @@ const CALCULATOR_CONFIG = {
|
||||
});
|
||||
}
|
||||
|
||||
if (embedModal) {
|
||||
embedModal.addEventListener('click', (e) => {
|
||||
if (e.target === embedModal) this.hideEmbedModal();
|
||||
});
|
||||
}
|
||||
// Embed modal removed
|
||||
}
|
||||
|
||||
toggleUnits() {
|
||||
@@ -3525,7 +3365,6 @@ const CALCULATOR_CONFIG = {
|
||||
calorieResults.style.display = 'block';
|
||||
|
||||
this.updateFoodCalculations();
|
||||
this.sendHeightToParent();
|
||||
}
|
||||
|
||||
updateCupsButtonState() {
|
||||
@@ -3989,9 +3828,8 @@ const CALCULATOR_CONFIG = {
|
||||
}
|
||||
}
|
||||
|
||||
foodAmountsSection.style.display = 'block';
|
||||
|
||||
this.sendHeightToParent();
|
||||
foodAmountsSection.style.display = 'block';
|
||||
this.sendHeightToParent();
|
||||
}
|
||||
|
||||
getFoodSourceEnergyPer100g(foodSource) {
|
||||
@@ -4017,13 +3855,18 @@ const CALCULATOR_CONFIG = {
|
||||
}
|
||||
}
|
||||
|
||||
// Iframe auto-resize for allowed embeddings
|
||||
setupIframeResize() {
|
||||
// Send height to parent window for iframe auto-resize
|
||||
this.sendHeightToParent();
|
||||
// Only when embedded in an iframe
|
||||
if (window.top === window.self) return;
|
||||
|
||||
// Monitor for content changes that might affect height
|
||||
// Initial send once UI is ready
|
||||
setTimeout(() => this.sendHeightToParent(), 50);
|
||||
|
||||
// Monitor for content/attribute changes
|
||||
const observer = new MutationObserver(() => {
|
||||
setTimeout(() => this.sendHeightToParent(), 100);
|
||||
clearTimeout(this._resizeTimer);
|
||||
this._resizeTimer = setTimeout(() => this.sendHeightToParent(), 100);
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
@@ -4032,18 +3875,25 @@ const CALCULATOR_CONFIG = {
|
||||
attributes: true
|
||||
});
|
||||
|
||||
// Send height on window resize
|
||||
// On viewport resize
|
||||
window.addEventListener('resize', () => this.sendHeightToParent());
|
||||
}
|
||||
|
||||
sendHeightToParent() {
|
||||
const height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
|
||||
if (window.parent && window.parent !== window) {
|
||||
window.parent.postMessage({
|
||||
type: 'dogCalculatorResize',
|
||||
height: height
|
||||
}, '*');
|
||||
if (!(window.parent && window.parent !== window)) return;
|
||||
const container = document.getElementById('dogCalculator');
|
||||
// Prefer visual height including transform scaling
|
||||
let height = 0;
|
||||
if (container) {
|
||||
const rect = container.getBoundingClientRect();
|
||||
height = Math.ceil(rect.height);
|
||||
} else {
|
||||
height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
|
||||
}
|
||||
window.parent.postMessage({
|
||||
type: 'dogCalculatorResize',
|
||||
height: height
|
||||
}, '*');
|
||||
}
|
||||
|
||||
// Modal functionality
|
||||
@@ -4052,50 +3902,25 @@ const CALCULATOR_CONFIG = {
|
||||
const shareUrl = document.getElementById('shareUrl');
|
||||
if (modal && shareUrl) {
|
||||
shareUrl.value = window.location.href;
|
||||
modal.style.display = 'block';
|
||||
// Use flex so content is centered within modal viewport
|
||||
modal.style.display = 'flex';
|
||||
// Sync modal scroll position with current page scroll so content is visible
|
||||
try { modal.scrollTop = window.scrollY || document.documentElement.scrollTop || 0; } catch (e) {}
|
||||
// Ensure the modal is visible even when the page is scrolled
|
||||
// by recalculating parent iframe height (defensive)
|
||||
this.sendHeightToParent();
|
||||
}
|
||||
}
|
||||
|
||||
hideShareModal() {
|
||||
const modal = document.getElementById('shareModal');
|
||||
if (modal) modal.style.display = 'none';
|
||||
this.sendHeightToParent();
|
||||
}
|
||||
|
||||
showEmbedModal() {
|
||||
const modal = document.getElementById('embedModal');
|
||||
const widgetCode = document.getElementById('widgetCode');
|
||||
const iframeCode = document.getElementById('iframeCode');
|
||||
|
||||
if (modal && widgetCode && iframeCode) {
|
||||
// Build embed URL
|
||||
const baseUrl = window.location.protocol + '//embed.' + window.location.hostname;
|
||||
|
||||
// Create widget code using createElement to avoid quote issues
|
||||
const scriptTag = document.createElement('script');
|
||||
scriptTag.src = baseUrl + '/dog-calorie-calculator/dog-food-calculator-widget.js';
|
||||
const divTag = document.createElement('div');
|
||||
divTag.id = 'dog-calorie-calculator';
|
||||
|
||||
const widgetHtml = scriptTag.outerHTML + '\n' + divTag.outerHTML;
|
||||
widgetCode.textContent = widgetHtml;
|
||||
|
||||
// Create iframe code using createElement
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = baseUrl + '/dog-calorie-calculator/iframe.html';
|
||||
iframe.width = '100%';
|
||||
iframe.height = '600';
|
||||
iframe.frameBorder = '0';
|
||||
iframe.title = 'Dog Calorie Calculator';
|
||||
|
||||
iframeCode.textContent = iframe.outerHTML;
|
||||
modal.style.display = 'block';
|
||||
}
|
||||
}
|
||||
// Embed modal removed (embedding disabled)
|
||||
|
||||
hideEmbedModal() {
|
||||
const modal = document.getElementById('embedModal');
|
||||
if (modal) modal.style.display = 'none';
|
||||
}
|
||||
// Embed modal removed (embedding disabled)
|
||||
|
||||
shareToFacebook() {
|
||||
const url = encodeURIComponent(window.location.href);
|
||||
@@ -4142,31 +3967,41 @@ const CALCULATOR_CONFIG = {
|
||||
}
|
||||
}
|
||||
|
||||
async copyEmbedCode(type) {
|
||||
const codeElement = document.getElementById(type === 'widget' ? 'widgetCode' : 'iframeCode');
|
||||
const copyBtn = document.getElementById(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');
|
||||
}
|
||||
}
|
||||
}
|
||||
// Embed code copy removed (embedding disabled)
|
||||
}
|
||||
|
||||
// Initialize calculator when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Allow embedding only from approved parent hosts
|
||||
if (window.top !== window.self) {
|
||||
const allowedHosts = ['caninenutritionandwellness.com', 'www.caninenutritionandwellness.com'];
|
||||
let parentAllowed = false;
|
||||
|
||||
// Prefer document.referrer when available
|
||||
try {
|
||||
if (document.referrer) {
|
||||
const r = new URL(document.referrer);
|
||||
parentAllowed = allowedHosts.includes(r.hostname);
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
// Fallback: Chrome's ancestorOrigins (may be empty or absent)
|
||||
if (!parentAllowed && window.location.ancestorOrigins && window.location.ancestorOrigins.length) {
|
||||
parentAllowed = Array.from(window.location.ancestorOrigins).some((originStr) => {
|
||||
try {
|
||||
const o = new URL(originStr);
|
||||
return allowedHosts.includes(o.hostname);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!parentAllowed) {
|
||||
document.body.innerHTML = '<div style="max-width:720px;margin:40px auto;padding:16px;border:1px solid #ddd;border-radius:8px;font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:#333;line-height:1.5;text-align:center;">Embedding of this calculator is only allowed on caninenutritionandwellness.com.</div>';
|
||||
return;
|
||||
}
|
||||
}
|
||||
new DogCalorieCalculator();
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user