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

Compare commits

base: dayowe:19416c7592f307872b0263d96085c93ad9e82936
Branches Tags
dayowe:dev
dayowe:clients/kaya
dayowe:simpler-structure
dayowe:master
dayowe:feat/build-script
..
compare: dayowe:69739c63a94a189d45c15e97e2e345be145a7274
Branches Tags
dayowe:clients/kaya
dayowe:simpler-structure
dayowe:master
dayowe:feat/build-script
dayowe:dev

No commits in common. "19416c7592f307872b0263d96085c93ad9e82936" and "69739c63a94a189d45c15e97e2e345be145a7274" have entirely different histories.
19416c7592 ... 69739c63a9

3 changed files with 264 additions and 259 deletions
Show Stats Expand all files Collapse all files

29
build.js
View File

@ -86,26 +86,31 @@ function generateIframe(css, html, js) {
} }
/** /**
* No transformation needed - keep original class names for consistency * Transform CSS classes from dog-calculator- to dog-calc-
*/ */
function transformCSSForWidget(css) { function transformCSSForWidget(css) {
return css; return css
.replace(/\.dog-calculator-/g, '.dog-calc-')
.replace(/#dog-calculator/g, '#dog-calc')
.replace(/dog-calculator-/g, 'dog-calc-');
} }
/** /**
* No transformation needed - keep original class names for consistency * Transform HTML for widget (class names and IDs)
*/ */
function transformHTMLForWidget(html) { function transformHTMLForWidget(html) {
return html; return html
.replace(/dog-calculator-/g, 'dog-calc-')
.replace(/id="dogCalculator"/g, 'id="dogCalc"');
} }
/** /**
* Create production-ready widget JavaScript * Create production-ready widget JavaScript
*/ */
function createWidgetJS(css, html, js) { function createWidgetJS(css, html, js) {
// Use original CSS and HTML without transformation for consistency // Transform CSS and HTML for widget namespacing
const widgetCSS = css; const widgetCSS = transformCSSForWidget(css);
const widgetHTML = html; const widgetHTML = transformHTMLForWidget(html);
const widgetCode = `/** const widgetCode = `/**
* Dog Calorie Calculator Widget * Dog Calorie Calculator Widget
@ -129,10 +134,10 @@ function createWidgetJS(css, html, js) {
const CSS_STYLES = \`${widgetCSS}\`; const CSS_STYLES = \`${widgetCSS}\`;
function injectStyles() { function injectStyles() {
if (document.getElementById('dog-calculator-styles')) return; if (document.getElementById('dog-calc-styles')) return;
const style = document.createElement('style'); const style = document.createElement('style');
style.id = 'dog-calculator-styles'; style.id = 'dog-calc-styles';
style.textContent = CSS_STYLES; style.textContent = CSS_STYLES;
document.head.appendChild(style); document.head.appendChild(style);
} }
@ -230,9 +235,9 @@ function createWidgetJS(css, html, js) {
const errorElement = $('#' + elementId); const errorElement = $('#' + elementId);
if (errorElement) { if (errorElement) {
if (show) { if (show) {
errorElement.classList.remove('dog-calculator-hidden'); errorElement.classList.remove('dog-calc-hidden');
} else { } else {
errorElement.classList.add('dog-calculator-hidden'); errorElement.classList.add('dog-calc-hidden');
} }
} }
}, },
@ -423,7 +428,7 @@ function createWidgetJS(css, html, js) {
init: () => { init: () => {
calc.bindEvents(); calc.bindEvents();
calc.updateUnitLabels(); // Initialize unit labels calc.updateUnitLabels(); // Initialize unit labels
const calcContainer = $('#dogCalculator'); const calcContainer = $('#dogCalc');
if (calcContainer) { if (calcContainer) {
calcContainer.classList.add('loaded'); calcContainer.classList.add('loaded');
} }

14
iframe.html
View File

@ -1036,19 +1036,19 @@
<span class="dog-calculator-modal-close" id="shareModalClose">&times;</span> <span class="dog-calculator-modal-close" id="shareModalClose">&times;</span>
<h3>Share Calculator</h3> <h3>Share Calculator</h3>
<div class="dog-calculator-share-buttons"> <div class="dog-calculator-share-buttons">
<button class="dog-calculator-share-btn dog-calculator-share-facebook plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-facebook" id="shareFacebook"> <button class="dog-calculator-share-btn dog-calculator-share-facebook" id="shareFacebook">
Facebook Facebook
</button> </button>
<button class="dog-calculator-share-btn dog-calculator-share-twitter plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-twitter" id="shareTwitter"> <button class="dog-calculator-share-btn dog-calculator-share-twitter" id="shareTwitter">
Twitter Twitter
</button> </button>
<button class="dog-calculator-share-btn dog-calculator-share-linkedin plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-linkedin" id="shareLinkedIn"> <button class="dog-calculator-share-btn dog-calculator-share-linkedin" id="shareLinkedIn">
LinkedIn LinkedIn
</button> </button>
<button class="dog-calculator-share-btn dog-calculator-share-email plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-email" id="shareEmail"> <button class="dog-calculator-share-btn dog-calculator-share-email" id="shareEmail">
Email Email
</button> </button>
<button class="dog-calculator-share-btn dog-calculator-share-copy plausible-event-name=Calculator+Usage plausible-event-action=calculator-share-copy-link" id="shareCopy"> <button class="dog-calculator-share-btn dog-calculator-share-copy" id="shareCopy">
Copy Link Copy Link
</button> </button>
</div> </div>
@ -1069,7 +1069,7 @@
<h4>⚡ JavaScript Widget</h4> <h4>⚡ JavaScript Widget</h4>
<div class="dog-calculator-code-container"> <div class="dog-calculator-code-container">
<pre><code id="widgetCode"></code></pre> <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"> <button class="dog-calculator-copy-btn" id="copyWidget">
Copy Copy
</button> </button>
</div> </div>
@ -1079,7 +1079,7 @@
<h4>🛡️ iframe Embed</h4> <h4>🛡️ iframe Embed</h4>
<div class="dog-calculator-code-container"> <div class="dog-calculator-code-container">
<pre><code id="iframeCode"></code></pre> <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"> <button class="dog-calculator-copy-btn" id="copyIframe">
Copy Copy
</button> </button>
</div> </div>

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

File diff suppressed because it is too large Load Diff