dayowe/sundog-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove embedding and js widget

Browse Source
This commit is contained in:
Dayowe 2025-10-28 09:58:20 +01:00
parent 99b516d087
commit 90657f9aa4
9 changed files with 221 additions and 4898 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
README.md
View File

@ -1,6 +1,6 @@
# 🐕 Sundog Dog Food Calorie Calculator
A professional veterinary nutrition tool for calculating dogs' daily calorie requirements and food amounts. Features advanced multi-food source management, percentage locking, and detailed food amount breakdowns. Built for embedding on websites with complete brand protection options.
A professional veterinary nutrition tool for calculating dogs' daily calorie requirements and food amounts. Features advanced multi-food source management, percentage locking, and detailed food amount breakdowns. Distributed as a standalone page; third‑party embedding is no longer supported.
**By [Canine Nutrition and Wellness](https://caninenutritionandwellness.com)**
@ -28,10 +28,9 @@ A professional veterinary nutrition tool for calculating dogs' daily calorie req
- **Lock Indicators**: Visual indicators showing which percentages are locked
### User Experience
- **Scalable Widget**: Easily resize from 50% to 200% with data attributes
- **Scalable UI**: Resize from 50% to 200% via query params
- **Theme Support**: Light, dark, and system themes
- **Responsive Design**: Mobile-first, optimized layouts for all devices
- **Two Embedding Options**: JavaScript widget and iframe
- **Accessibility**: Full keyboard navigation and screen reader support
### Brand & Integration
@ -39,36 +38,16 @@ A professional veterinary nutrition tool for calculating dogs' daily calorie req
- **Professional Design**: Clean, veterinary-grade interface
- **Brand Protection**: Complete iframe isolation option
## 🚀 Quick Start
## 🚀 Usage
- Open `iframe.html` locally, or host it as a standalone page on your site.
- Embedding is allowed only on these domains: `caninenutritionandwellness.com`, `www.caninenutritionandwellness.com`.
- Use an iframe to embed on your site, for example:
### Option 1: JavaScript Widget (Recommended)
```html
<!-- Basic usage -->
<script src="https://yourdomain.com/sundog-dog-food-calculator.js"></script>
<div id="dog-calorie-calculator"></div>
<!-- With theme and scale options -->
<div id="dog-calorie-calculator" data-theme="dark" data-scale="0.8"></div>
```
### Option 2: iframe Embed
```html
<!-- Basic iframe -->
<iframe
src="https://yourdomain.com/iframe.html"
width="100%"
height="600"
frameborder="0"
title="Dog Calorie Calculator">
</iframe>
<!-- With theme and scale parameters -->
<iframe
src="https://yourdomain.com/iframe.html?theme=dark&scale=1.2"
width="100%"
height="600"
frameborder="0"
title="Dog Calorie Calculator">
src="https://embed.caninenutritionandwellness.com/dog-calorie-calculator/iframe.html?theme=light&scale=0.8"
width="100%" height="640" frameborder="0" title="Dog Calorie Calculator">
</iframe>
```
@ -134,7 +113,7 @@ Choose from three themes:
- `system` - Follows user's OS preference (default)
### Scale Options
Resize the widget from 50% to 200%:
Resize the interface from 50% to 200%:
- Range: `0.5` to `2.0`
- Default: `1.0` (100% size)
- Examples: `0.8` (80%), `1.2` (120%), `1.5` (150%)
@ -146,27 +125,21 @@ Support for regional differences:
- `kcal/cup` - US/Canada dry food
- `kcal/can` - US/Canada wet food
### Advanced JavaScript Usage
```javascript
new DogCalorieCalculatorWidget(container, {
theme: 'dark', // 'light', 'dark', 'system'
scale: 1.2 // 0.5 to 2.0
});
```
<!-- Embedding and external widget initialization are no longer supported. -->
## 🛠️ Development
### Build System
This project uses a single source of truth approach:
This project uses an organized source layout compiled into a single page:
- **Master Source**: `iframe.html` - Contains all functionality, styles, and calculations
- **Build Script**: `build.js` - Generates the widget from iframe.html
- **Generated Output**: `sundog-dog-food-calculator.js` - Embeddable widget
- **Sources**: `src/` (HTML, CSS, JS modules)
- **Build Script**: `build.js` - Generates `iframe.html` from `src/`
- **Output**: `iframe.html` - Standalone calculator page
### Development Workflow
1. **Make changes to `iframe.html`** - Edit calculations, design, layout, or functionality
1. **Make changes in `src/`** - Edit calculations, design, layout, or functionality
2. **Run the build script**: `node build.js`
3. **Done!** - Both iframe and widget now have identical functionality
3. **Done!** - `iframe.html` is regenerated
### Why This Approach?
- ✅ **Single Source of Truth** - No need to maintain two separate files
@ -175,18 +148,16 @@ This project uses a single source of truth approach:
- ✅ **No Sync Issues** - Build script ensures consistency
### Build Script Features
- Extracts CSS, HTML, and JavaScript from iframe.html
- Transforms CSS classes for widget namespacing (`dog-calculator-` → `dog-calc-`)
- Compiles CSS, HTML, and JavaScript from `src/`
- Preserves all functionality including unit switching and calculations
- Maintains theme and scale support via data attributes
- Maintains theme and scale support via URL query parameters
## 📁 Project Structure
```
├── iframe.html # 🎯 MASTER SOURCE - Edit this file
├── src/ # ✏️ Source (HTML/CSS/JS)
├── build.js # 🔧 Build script - Run after changes
├── sundog-dog-food-calculator.js # 📦 Generated widget (don't edit)
├── test-widget.html # 🧪 Test file for widget
├── iframe.html # 📦 Generated standalone page
└── README.md # 📖 This file
```
@ -217,71 +188,32 @@ Colors automatically adapt to light/dark themes via CSS custom properties.
| Working dog - heavy work | 5.0 | Intensive work |
| Senior dog | 1.1 | Reduced activity |
## 🔧 Technical Implementation
## 🔧 Technical Notes
- Standalone page with theme and scale controls via URL params.
- Embedding is allowlisted at runtime to your domains and should be enforced with server headers.
### JavaScript Widget Features
- **Auto-initialization**: Detects `#dog-calorie-calculator` containers
- **CSS Namespacing**: All classes prefixed with `dog-calc-`
- **Shadow DOM Ready**: Prepared for better style isolation
- **Real-time Validation**: Input validation with error messages
- **Mobile Optimized**: Responsive breakpoints and touch-friendly
### Server Headers (required for robust enforcement)
Configure your server or CDN to send this header on `iframe.html`:
### iframe Features
- **Auto-resize**: Communicates height changes to parent
- **Style Isolation**: Complete protection from host site CSS
- **Loading Animation**: Smooth fade-in when ready
- **Cross-origin Ready**: PostMessage communication for integration
```
Content-Security-Policy: frame-ancestors https://caninenutritionandwellness.com https://www.caninenutritionandwellness.com;
```
Optional legacy header (deprecated but harmless as a supplement):
```
X-Frame-Options: SAMEORIGIN
```
If you serve the calculator from a subdomain (e.g., `embed.caninenutritionandwellness.com`) and embed it on the root domain, prefer the CSP `frame-ancestors` directive above.
## 🚀 Deployment Guide
### 1. Host the Files
Upload these files to your web server:
- `sundog-dog-food-calculator.js` (for widget embedding)
- `iframe.html` (for iframe embedding)
### 2. Update URLs
Replace `https://yourdomain.com` in:
- `test-widget.html` examples
- `sundog-dog-food-calculator.js` comments
- This README
### 3. CDN Distribution (Optional)
For better performance, serve the widget script via CDN:
- Use CloudFlare, AWS CloudFront, or similar
- Enable CORS headers for cross-origin requests
- Set appropriate cache headers (1 day for updates)
### 4. Analytics Integration
Add tracking to understand usage:
```javascript
// Track widget interactions
document.addEventListener('DOMContentLoaded', function() {
// Track when calculator is used
document.addEventListener('change', function(e) {
if (e.target.closest('.dog-calc-widget')) {
gtag('event', 'calculator_interaction', {
'event_category': 'dog_calculator',
'event_label': e.target.id
});
}
});
});
```
### Deployment
Host `iframe.html` (e.g., on `embed.caninenutritionandwellness.com`) and embed via iframe on your approved domains.
## 🔒 Brand Protection
### JavaScript Widget Risks
Users can override your styling with:
```css
.dog-calc-footer { display: none !important; }
```
### iframe Protection
Your branding is completely protected in iframe mode. Users cannot:
- Remove your footer link
- Modify your styling
- Access your content with JavaScript
Embedding is disabled to protect branding and ensure consistent presentation.
## 📱 Mobile Optimization
@ -353,9 +285,8 @@ This calculator is provided for educational and professional use. The formulas a
## 🔗 Links
- **Website**: [caninenutritionandwellness.com](https://caninenutritionandwellness.com)
- **Widget Demo**: Open `test-widget.html` in your browser
- **Standalone**: Open `iframe.html` in your browser
---
**Built with ❤️ for canine nutrition professionals**
**Built with ❤️ for canine nutrition professionals**

17
build.js
View File

@ -3,8 +3,8 @@
/**
* Dog Calculator Build System - ORGANIZED VERSION
*
* This build script generates iframe.html and sundog-dog-food-calculator.js
* from organized source files in the src/ directory.
* This build script generates iframe.html from organized source files
* in the src/ directory.
*
* Source structure:
* - src/index.html - HTML template
@ -15,7 +15,6 @@
*
* Output files:
* - iframe.html - Standalone calculator page
* - sundog-dog-food-calculator.js - Embeddable widget
*
* Usage: node build.js
*/
@ -85,7 +84,7 @@ function backupFiles() {
}
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
const filesToBackup = ['iframe.html', 'sundog-dog-food-calculator.js'];
const filesToBackup = ['iframe.html'];
filesToBackup.forEach(file => {
if (fs.existsSync(file)) {
@ -299,10 +298,7 @@ function build() {
fs.writeFileSync('iframe.html', iframeContent);
console.log(' ✅ Generated iframe.html');
// Generate widget
const widgetCode = createWidgetJS(css, html, js);
fs.writeFileSync('sundog-dog-food-calculator.js', widgetCode);
console.log(' ✅ Generated sundog-dog-food-calculator.js');
// Embeddable widget generation removed (embedding no longer supported)
console.log('');
console.log('🎉 Build completed successfully!');
@ -317,12 +313,11 @@ function build() {
console.log('');
console.log(' Generated files:');
console.log(' • iframe.html - Standalone calculator');
console.log(' • sundog-dog-food-calculator.js - Embeddable widget');
console.log('');
console.log('🔄 Your workflow:');
console.log(' 1. Edit organized files in src/');
console.log(' 2. Run: node build.js');
console.log(' 3. Both output files are regenerated!');
console.log(' 3. Output file is regenerated!');
console.log('');
console.log('💡 Clean, organized structure - easy to maintain!');
@ -338,4 +333,4 @@ if (require.main === module) {
build();
}
module.exports = { build };
module.exports = { build };

339
iframe.html
View File

@ -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">&times;</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>

7
src/css/main.css
View File

@ -15,7 +15,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);
@ -321,10 +321,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;

140
src/css/themes.css
View File

@ -160,10 +160,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 {
@ -366,10 +363,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 {
@ -411,13 +405,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;
}
@ -429,19 +428,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 {
@ -527,74 +526,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 {
@ -620,28 +552,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) {
@ -668,28 +579,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 */

33
src/index.html
View File

@ -143,9 +143,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">
@ -181,33 +178,5 @@
</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">&times;</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>

159
src/js/calculator.js
View File

@ -60,10 +60,8 @@
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);
}
@ -899,14 +897,10 @@
// 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');
@ -921,16 +915,10 @@
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) => {
@ -938,11 +926,7 @@
});
}
if (embedModal) {
embedModal.addEventListener('click', (e) => {
if (e.target === embedModal) this.hideEmbedModal();
});
}
// Embed modal removed
}
toggleUnits() {
@ -1223,7 +1207,6 @@
calorieResults.style.display = 'block';
this.updateFoodCalculations();
this.sendHeightToParent();
}
updateCupsButtonState() {
@ -1687,9 +1670,8 @@
}
}
foodAmountsSection.style.display = 'block';
this.sendHeightToParent();
foodAmountsSection.style.display = 'block';
this.sendHeightToParent();
}
getFoodSourceEnergyPer100g(foodSource) {
@ -1715,13 +1697,18 @@
}
}
// 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, {
@ -1730,18 +1717,25 @@
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
@ -1750,50 +1744,25 @@
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);
@ -1840,30 +1809,40 @@
}
}
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();
});

4236
sundog-dog-food-calculator.js
View File

File diff suppressed because it is too large Load Diff

37
test-widget.html
View File

@ -1,37 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget Test</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f5f5f5;
}
.test-container {
background: white;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>Dog Calculator Widget Test</h1>
<div class="test-container">
<h2>Test 1: Basic Widget</h2>
<div class="dog-calorie-calculator" data-theme="light" data-scale="0.9"></div>
</div>
<div class="test-container">
<h2>Test 2: Dark Theme Widget</h2>
<div class="dog-calorie-calculator" data-theme="dark" data-scale="0.5"></div>
</div>
<script src="sundog-dog-food-calculator.js"></script>
</body>
</html>