Do not transform class names

This commit is contained in:
Dayowe 2025-06-15 22:39:41 +02:00
parent 69739c63a9
commit ed7205a9c2

View File

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