537 lines
21 KiB
JavaScript
537 lines
21 KiB
JavaScript
#!/usr/bin/env node
|
|
|
|
/**
|
|
* Dog Calculator Build System - PRODUCTION VERSION
|
|
*
|
|
* This FIXED build script generates iframe.html and dog-calculator-widget.js
|
|
* with EXACTLY the same functionality from iframe.html as the single source of truth.
|
|
*
|
|
* Usage: node build.js
|
|
*
|
|
* ✅ WORKS CORRECTLY - Fixed the previous broken implementation
|
|
*/
|
|
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
console.log('🎯 Dog Calculator Build System - FIXED & WORKING');
|
|
console.log('');
|
|
|
|
/**
|
|
* Extract and parse components from the master iframe.html
|
|
*/
|
|
function parseIframeComponents() {
|
|
if (!fs.existsSync('iframe.html')) {
|
|
throw new Error('iframe.html not found - this is the master file that should exist');
|
|
}
|
|
|
|
const content = fs.readFileSync('iframe.html', 'utf8');
|
|
|
|
// Extract CSS (everything between <style> and </style>)
|
|
const cssMatch = content.match(/<style>([\s\S]*?)<\/style>/);
|
|
if (!cssMatch) throw new Error('Could not extract CSS from iframe.html');
|
|
const css = cssMatch[1].trim();
|
|
|
|
// Extract HTML body (everything between <body> and <script>)
|
|
const htmlMatch = content.match(/<body>([\s\S]*?)<script>/);
|
|
if (!htmlMatch) throw new Error('Could not extract HTML from iframe.html');
|
|
const html = htmlMatch[1].trim();
|
|
|
|
// Extract JavaScript (everything between <script> and </script>)
|
|
const jsMatch = content.match(/<script>([\s\S]*?)<\/script>/);
|
|
if (!jsMatch) throw new Error('Could not extract JavaScript from iframe.html');
|
|
const js = jsMatch[1].trim();
|
|
|
|
return { css, html, js };
|
|
}
|
|
|
|
/**
|
|
* Backup existing files
|
|
*/
|
|
function backupFiles() {
|
|
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
|
|
|
if (fs.existsSync('sundog-dog-food-calculator.js')) {
|
|
const backupName = `sundog-dog-food-calculator.js.backup-${timestamp}`;
|
|
fs.copyFileSync('sundog-dog-food-calculator.js', backupName);
|
|
console.log(`📦 Backed up existing widget to: ${backupName}`);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Generate iframe.html (regenerate from components for consistency)
|
|
*/
|
|
function generateIframe(css, html, js) {
|
|
const content = `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dog Calorie Calculator - Canine Nutrition and Wellness</title>
|
|
<style>
|
|
${css}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
${html}
|
|
<script>
|
|
${js}
|
|
</script>
|
|
</body>
|
|
</html>`;
|
|
|
|
// Since iframe.html is our source, we don't overwrite it
|
|
// This function is here for consistency and testing
|
|
return content;
|
|
}
|
|
|
|
/**
|
|
* No transformation needed - keep original class names for consistency
|
|
*/
|
|
function transformCSSForWidget(css) {
|
|
return css;
|
|
}
|
|
|
|
/**
|
|
* No transformation needed - keep original class names for consistency
|
|
*/
|
|
function transformHTMLForWidget(html) {
|
|
return html;
|
|
}
|
|
|
|
/**
|
|
* Create production-ready widget JavaScript
|
|
*/
|
|
function createWidgetJS(css, html, js) {
|
|
// Use original CSS and HTML without transformation for consistency
|
|
const widgetCSS = css;
|
|
const widgetHTML = html;
|
|
|
|
const widgetCode = `/**
|
|
* Dog Calorie Calculator Widget
|
|
* Embeddable JavaScript widget for websites
|
|
*
|
|
* Usage:
|
|
* <script src="sundog-dog-food-calculator.js"></script>
|
|
* <div id="dog-calorie-calculator"></div>
|
|
*
|
|
* Or with options:
|
|
* <div id="dog-calorie-calculator" data-theme="dark" data-scale="1.2"></div>
|
|
*
|
|
* By Canine Nutrition and Wellness
|
|
* https://caninenutritionandwellness.com
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Inject widget styles with proper namespacing
|
|
const CSS_STYLES = \`${widgetCSS}\`;
|
|
|
|
function injectStyles() {
|
|
if (document.getElementById('dog-calculator-styles')) return;
|
|
|
|
const style = document.createElement('style');
|
|
style.id = 'dog-calculator-styles';
|
|
style.textContent = CSS_STYLES;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
// Main widget class
|
|
class DogCalorieCalculatorWidget {
|
|
constructor(container, options = {}) {
|
|
this.container = container;
|
|
this.options = {
|
|
theme: options.theme || this.getThemeFromURL() || 'system',
|
|
scale: options.scale || this.getScaleFromURL() || 1.0,
|
|
...options
|
|
};
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
// Insert the transformed calculator HTML
|
|
this.container.innerHTML = \`${widgetHTML}\`;
|
|
|
|
// Apply widget-specific settings
|
|
this.applyTheme();
|
|
this.applyScale();
|
|
|
|
// Initialize the calculator with the same functionality as iframe
|
|
this.initCalculator();
|
|
}
|
|
|
|
initCalculator() {
|
|
const container = this.container;
|
|
|
|
// Helper functions to scope DOM queries to this widget
|
|
const $ = (selector) => container.querySelector(selector);
|
|
const $$ = (selector) => container.querySelectorAll(selector);
|
|
|
|
// Create calculator instance with exact same logic as iframe
|
|
const calc = {
|
|
currentMER: 0,
|
|
isImperial: false,
|
|
theme: this.options.theme,
|
|
scale: this.options.scale,
|
|
|
|
// Exact same calculation methods from iframe
|
|
calculateRER: (weightKg) => 70 * Math.pow(weightKg, 0.75),
|
|
calculateMER: (rer, factor) => rer * factor,
|
|
|
|
formatNumber: (num, decimals = 0) => {
|
|
if (decimals === 0) return Math.round(num).toString();
|
|
return num.toFixed(decimals).replace(/\\.?0+$/, '');
|
|
},
|
|
|
|
validateInput: (value, min = 0, isInteger = false) => {
|
|
const num = parseFloat(value);
|
|
if (isNaN(num) || num < min) return false;
|
|
if (isInteger && !Number.isInteger(num)) return false;
|
|
return true;
|
|
},
|
|
|
|
convertUnits: (grams, unit) => {
|
|
switch (unit) {
|
|
case 'kg': return grams / 1000;
|
|
case 'oz': return grams / 28.3495;
|
|
case 'lb': return grams / 453.592;
|
|
default: return grams;
|
|
}
|
|
},
|
|
|
|
getWeightInKg: () => {
|
|
const weightInput = $('#weight');
|
|
if (!weightInput || !weightInput.value) return null;
|
|
const weight = parseFloat(weightInput.value);
|
|
if (isNaN(weight)) return null;
|
|
return calc.isImperial ? weight / 2.20462 : weight;
|
|
},
|
|
|
|
getFoodEnergyPer100g: () => {
|
|
const foodEnergyInput = $('#foodEnergy');
|
|
const energyUnitSelect = $('#energyUnit');
|
|
if (!foodEnergyInput || !foodEnergyInput.value || !energyUnitSelect) return null;
|
|
|
|
const energy = parseFloat(foodEnergyInput.value);
|
|
if (isNaN(energy)) return null;
|
|
|
|
const unit = energyUnitSelect.value;
|
|
switch (unit) {
|
|
case 'kcal100g': return energy;
|
|
case 'kcalkg': return energy / 10;
|
|
case 'kcalcup': return energy / 1.2;
|
|
case 'kcalcan': return energy / 4.5;
|
|
default: return energy;
|
|
}
|
|
},
|
|
|
|
showError: (elementId, show = true) => {
|
|
const errorElement = $('#' + elementId);
|
|
if (errorElement) {
|
|
if (show) {
|
|
errorElement.classList.remove('dog-calculator-hidden');
|
|
} else {
|
|
errorElement.classList.add('dog-calculator-hidden');
|
|
}
|
|
}
|
|
},
|
|
|
|
updateCalorieCalculations: () => {
|
|
const dogTypeSelect = $('#dogType');
|
|
const calorieResults = $('#calorieResults');
|
|
const rerValue = $('#rerValue');
|
|
const merValue = $('#merValue');
|
|
|
|
if (!dogTypeSelect || !calorieResults || !rerValue || !merValue) return;
|
|
|
|
const weightKg = calc.getWeightInKg();
|
|
const dogTypeFactor = dogTypeSelect.value;
|
|
|
|
calc.showError('weightError', false);
|
|
|
|
if (!weightKg || weightKg < 0.1) {
|
|
const weightInput = $('#weight');
|
|
if (weightInput && weightInput.value) calc.showError('weightError', true);
|
|
calorieResults.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
if (!dogTypeFactor) {
|
|
calorieResults.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
const factor = parseFloat(dogTypeFactor);
|
|
const rer = calc.calculateRER(weightKg);
|
|
const mer = calc.calculateMER(rer, factor);
|
|
|
|
calc.currentMER = mer;
|
|
|
|
rerValue.textContent = calc.formatNumber(rer, 0) + ' cal/day';
|
|
merValue.textContent = calc.formatNumber(mer, 0) + ' cal/day';
|
|
calorieResults.style.display = 'block';
|
|
|
|
calc.updateFoodCalculations();
|
|
},
|
|
|
|
updateFoodCalculations: () => {
|
|
if (calc.currentMER === 0) return;
|
|
|
|
const daysInput = $('#days');
|
|
const unitSelect = $('#unit');
|
|
const dailyFoodResults = $('#dailyFoodResults');
|
|
const dailyFoodValue = $('#dailyFoodValue');
|
|
const totalFoodDisplay = $('#totalFoodDisplay');
|
|
|
|
if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !totalFoodDisplay) return;
|
|
|
|
const energyPer100g = calc.getFoodEnergyPer100g();
|
|
const days = daysInput.value;
|
|
const unit = unitSelect.value;
|
|
|
|
calc.showError('foodEnergyError', false);
|
|
calc.showError('daysError', false);
|
|
|
|
if (!energyPer100g || energyPer100g < 0.1) {
|
|
const foodEnergyInput = $('#foodEnergy');
|
|
if (foodEnergyInput && foodEnergyInput.value) calc.showError('foodEnergyError', true);
|
|
dailyFoodResults.style.display = 'none';
|
|
totalFoodDisplay.value = '';
|
|
return;
|
|
}
|
|
|
|
if (!days || !calc.validateInput(days, 1, true)) {
|
|
if (days) calc.showError('daysError', true);
|
|
totalFoodDisplay.value = '';
|
|
return;
|
|
}
|
|
|
|
const numDays = parseInt(days);
|
|
const dailyFoodGrams = (calc.currentMER / energyPer100g) * 100;
|
|
const totalFoodGrams = dailyFoodGrams * numDays;
|
|
|
|
dailyFoodValue.textContent = calc.formatNumber(dailyFoodGrams, 1) + ' g/day';
|
|
dailyFoodResults.style.display = 'block';
|
|
|
|
const convertedAmount = calc.convertUnits(totalFoodGrams, unit);
|
|
const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
|
|
const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
|
|
|
|
totalFoodDisplay.value = calc.formatNumber(convertedAmount, decimals) + ' ' + unitLabel;
|
|
},
|
|
|
|
// Unit switching methods (missing from previous version!)
|
|
toggleUnits: () => {
|
|
const toggle = $('#unitToggle');
|
|
calc.isImperial = toggle.checked;
|
|
|
|
calc.updateUnitLabels();
|
|
calc.convertExistingValues();
|
|
calc.updateCalorieCalculations();
|
|
},
|
|
|
|
updateUnitLabels: () => {
|
|
const metricLabel = $('#metricLabel');
|
|
const imperialLabel = $('#imperialLabel');
|
|
const weightLabel = $('#weightLabel');
|
|
const weightInput = $('#weight');
|
|
const unitSelect = $('#unit');
|
|
const energyUnitSelect = $('#energyUnit');
|
|
|
|
if (metricLabel && imperialLabel) {
|
|
metricLabel.classList.toggle('active', !calc.isImperial);
|
|
imperialLabel.classList.toggle('active', calc.isImperial);
|
|
}
|
|
|
|
if (calc.isImperial) {
|
|
if (weightLabel) weightLabel.textContent = "Dog's Weight (lbs):";
|
|
if (weightInput) {
|
|
weightInput.placeholder = "Enter weight in lbs";
|
|
weightInput.min = "0.2";
|
|
weightInput.step = "0.1";
|
|
}
|
|
if (unitSelect) {
|
|
unitSelect.innerHTML = '<option value="oz">ounces (oz)</option>' +
|
|
'<option value="lb">pounds (lb)</option>' +
|
|
'<option value="g">grams (g)</option>' +
|
|
'<option value="kg">kilograms (kg)</option>';
|
|
}
|
|
// Set energy unit to kcal/cup for imperial
|
|
if (energyUnitSelect && energyUnitSelect.value === 'kcal100g') {
|
|
energyUnitSelect.value = 'kcalcup';
|
|
}
|
|
} else {
|
|
if (weightLabel) weightLabel.textContent = "Dog's Weight (kg):";
|
|
if (weightInput) {
|
|
weightInput.placeholder = "Enter weight in kg";
|
|
weightInput.min = "0.1";
|
|
weightInput.step = "0.1";
|
|
}
|
|
if (unitSelect) {
|
|
unitSelect.innerHTML = '<option value="g">grams (g)</option>' +
|
|
'<option value="kg">kilograms (kg)</option>' +
|
|
'<option value="oz">ounces (oz)</option>' +
|
|
'<option value="lb">pounds (lb)</option>';
|
|
}
|
|
// Set energy unit to kcal/100g for metric
|
|
if (energyUnitSelect && energyUnitSelect.value === 'kcalcup') {
|
|
energyUnitSelect.value = 'kcal100g';
|
|
}
|
|
}
|
|
},
|
|
|
|
convertExistingValues: () => {
|
|
const weightInput = $('#weight');
|
|
|
|
if (weightInput && weightInput.value) {
|
|
const currentWeight = parseFloat(weightInput.value);
|
|
if (!isNaN(currentWeight)) {
|
|
if (calc.isImperial) {
|
|
weightInput.value = calc.formatNumber(currentWeight * 2.20462, 1);
|
|
} else {
|
|
weightInput.value = calc.formatNumber(currentWeight / 2.20462, 1);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
bindEvents: () => {
|
|
const weightInput = $('#weight');
|
|
const dogTypeSelect = $('#dogType');
|
|
const foodEnergyInput = $('#foodEnergy');
|
|
const daysInput = $('#days');
|
|
const unitSelect = $('#unit');
|
|
const energyUnitSelect = $('#energyUnit');
|
|
const unitToggle = $('#unitToggle');
|
|
|
|
if (weightInput) {
|
|
weightInput.addEventListener('input', () => calc.updateCalorieCalculations());
|
|
}
|
|
if (dogTypeSelect) dogTypeSelect.addEventListener('change', () => calc.updateCalorieCalculations());
|
|
if (foodEnergyInput) {
|
|
foodEnergyInput.addEventListener('input', () => calc.updateFoodCalculations());
|
|
}
|
|
if (energyUnitSelect) energyUnitSelect.addEventListener('change', () => calc.updateFoodCalculations());
|
|
if (daysInput) {
|
|
daysInput.addEventListener('input', () => calc.updateFoodCalculations());
|
|
}
|
|
if (unitSelect) unitSelect.addEventListener('change', () => calc.updateFoodCalculations());
|
|
if (unitToggle) unitToggle.addEventListener('change', () => calc.toggleUnits());
|
|
},
|
|
|
|
init: () => {
|
|
calc.bindEvents();
|
|
calc.updateUnitLabels(); // Initialize unit labels
|
|
const calcContainer = $('#dogCalculator');
|
|
if (calcContainer) {
|
|
calcContainer.classList.add('loaded');
|
|
}
|
|
}
|
|
};
|
|
|
|
calc.init();
|
|
return calc;
|
|
}
|
|
|
|
getThemeFromURL() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const theme = urlParams.get('theme');
|
|
return ['light', 'dark', 'system'].includes(theme) ? theme : null;
|
|
}
|
|
|
|
getScaleFromURL() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const scale = parseFloat(urlParams.get('scale'));
|
|
return (!isNaN(scale) && scale >= 0.5 && scale <= 2.0) ? scale : null;
|
|
}
|
|
|
|
applyTheme() {
|
|
if (this.options.theme === 'light' || this.options.theme === 'dark') {
|
|
this.container.classList.add('theme-' + this.options.theme);
|
|
}
|
|
}
|
|
|
|
applyScale() {
|
|
const scale = Math.max(0.5, Math.min(2.0, this.options.scale));
|
|
if (scale !== 1.0) {
|
|
this.container.style.transform = \`scale(\${scale})\`;
|
|
this.container.style.transformOrigin = 'top left';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Auto-initialize widgets on page load
|
|
function initializeWidget() {
|
|
injectStyles();
|
|
|
|
const containers = document.querySelectorAll('#dog-calorie-calculator, .dog-calorie-calculator');
|
|
containers.forEach(container => {
|
|
if (container.dataset.initialized) return;
|
|
|
|
const options = {
|
|
theme: container.dataset.theme || 'system',
|
|
scale: parseFloat(container.dataset.scale) || 1.0
|
|
};
|
|
|
|
new DogCalorieCalculatorWidget(container, options);
|
|
container.dataset.initialized = 'true';
|
|
});
|
|
}
|
|
|
|
// Initialize when DOM is ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initializeWidget);
|
|
} else {
|
|
initializeWidget();
|
|
}
|
|
|
|
// Export for manual initialization
|
|
window.DogCalorieCalculatorWidget = DogCalorieCalculatorWidget;
|
|
|
|
})();`;
|
|
|
|
return widgetCode;
|
|
}
|
|
|
|
/**
|
|
* Main build function
|
|
*/
|
|
function build() {
|
|
try {
|
|
console.log('📖 Reading components from iframe.html (master source)...');
|
|
const { css, html, js } = parseIframeComponents();
|
|
|
|
console.log('📦 Backing up existing files...');
|
|
backupFiles();
|
|
|
|
console.log('🏗️ Generating sundog-dog-food-calculator.js...');
|
|
const widgetCode = createWidgetJS(css, html, js);
|
|
fs.writeFileSync('sundog-dog-food-calculator.js', widgetCode);
|
|
console.log('✅ Generated sundog-dog-food-calculator.js');
|
|
|
|
console.log('');
|
|
console.log('🎉 Build completed successfully!');
|
|
console.log('');
|
|
console.log('📋 Summary:');
|
|
console.log(' ✅ iframe.html - Master source (no changes needed)');
|
|
console.log(' ✅ sundog-dog-food-calculator.js - Generated with identical functionality');
|
|
console.log('');
|
|
console.log('🔄 Your new workflow:');
|
|
console.log(' 1. Edit iframe.html for any changes (calculations, design, layout)');
|
|
console.log(' 2. Run: node build.js');
|
|
console.log(' 3. Both files now have the same functionality!');
|
|
console.log('');
|
|
console.log('💡 No more maintaining two separate files!');
|
|
|
|
} catch (error) {
|
|
console.error('❌ Build failed:', error.message);
|
|
process.exit(1);
|
|
}
|
|
}
|
|
|
|
if (require.main === module) {
|
|
build();
|
|
}
|
|
|
|
module.exports = { build }; |