Skip to content

Commit 30dda06

Browse files
dabo-odoodabo-odoo
committed
[FIX] website: theme selector in website creator translated
Before this change, when a user is creating a website, the three theme previews that appear at the last step are always in english, even if the user installed another language. Steps to reproduce: - Go into the user preferences and install any other language - Switch to that language - Install the website app and follow the creation steps => When you reach the theme preview step, the themes will be in english even if another language was selected After the change, the theme previews get translated and appear in the language chosen by the user. design-themes PR: odoo/design-themes#1052 task-3415840
1 parent f9ec272 commit 30dda06

File tree

1 file changed

+128
-1
lines changed

1 file changed

+128
-1
lines changed

‎addons/website/static/src/client_actions/configurator/configurator.js‎

Lines changed: 128 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -460,11 +460,138 @@ class ThemeSelectionScreen extends ApplyConfiguratorScreen {
460460

461461
onMounted(() => {
462462
this.state.themes.forEach((theme, idx) => {
463-
$(this.themeSVGPreviews[idx].el).append(theme.svg);
463+
const translatedSvg = this.translateSVG(theme.svg);
464+
$(this.themeSVGPreviews[idx].el).append(translatedSvg);
464465
});
465466
});
466467
}
467468

469+
translateSVG(svg) {
470+
const domParser = new DOMParser();
471+
const doc = domParser.parseFromString(svg, "image/svg+xml");
472+
doc.querySelectorAll("text").forEach((elem) => {
473+
const sanitizedTextContent = elem.textContent
474+
.trim()
475+
.split("\n")
476+
.map((word) => word.trim());
477+
var translatedTextContent = sanitizedTextContent.join(" ");
478+
switch (translatedTextContent) {
479+
case "Welcome":
480+
translatedTextContent = _t("Welcome");
481+
break;
482+
case "Welcome Message":
483+
translatedTextContent = _t("Welcome Message");
484+
break;
485+
case "A Welcome Message":
486+
translatedTextContent = _t("A Welcome Message");
487+
break;
488+
case "A Welcoming Message":
489+
translatedTextContent = _t("A Welcoming Message");
490+
break;
491+
case "Discover":
492+
translatedTextContent = _t("Discover");
493+
break;
494+
case "Section Title":
495+
translatedTextContent = _t("Section Title");
496+
break;
497+
case "Entry Title":
498+
translatedTextContent = _t("Entry Title");
499+
break;
500+
case "Team Member":
501+
translatedTextContent = _t("Team Member");
502+
break;
503+
case "A Section Title":
504+
translatedTextContent = _t("A Section Title");
505+
break;
506+
case "A Very Long Title":
507+
translatedTextContent = _t("A Very Long Title");
508+
break;
509+
case "A Big Title":
510+
translatedTextContent = _t("A Big Title");
511+
break;
512+
case "A Very Long Subtitle":
513+
translatedTextContent = _t("A Very Long Subtitle");
514+
break;
515+
case "Block Title":
516+
translatedTextContent = _t("Block Title");
517+
break;
518+
case "BLOCK":
519+
translatedTextContent = _t("BLOCK");
520+
break;
521+
case "TITLE":
522+
translatedTextContent = _t("TITLE");
523+
break;
524+
case "Feature #01":
525+
translatedTextContent = _t("Feature") + " #01";
526+
break;
527+
case "Feature #02":
528+
translatedTextContent = _t("Feature") + " #02";
529+
break;
530+
case "Feature #03":
531+
translatedTextContent = _t("Feature") + " #03";
532+
break;
533+
case "Section Entry":
534+
translatedTextContent = _t("Section Entry");
535+
break;
536+
case "Contact Us":
537+
translatedTextContent = _t("Contact Us");
538+
break;
539+
case "Contact":
540+
translatedTextContent = _t("Contact");
541+
break;
542+
case "Card Title":
543+
translatedTextContent = _t("Card Title");
544+
break;
545+
case "Call-To-Action Title":
546+
translatedTextContent = _t("Call-To-Action Title");
547+
break;
548+
case "Subtitle #01":
549+
translatedTextContent = _t("Subtitle") + " #01";
550+
break;
551+
case "Subtitle #02":
552+
translatedTextContent = _t("Subtitle") + " #02";
553+
break;
554+
}
555+
556+
/*
557+
* This code handles translating multiline phrases into languages
558+
* whose corresponding phrases have more words, while keeping the
559+
* same amount of lines
560+
*
561+
* Example: translating Welcome into Messaggio di
562+
* Message Benvenuto
563+
*
564+
* starting phrase = 2 lines, 2 words
565+
* translated phrase = 2 lines, 3 words
566+
*/
567+
if (sanitizedTextContent.length > 1) {
568+
const distributedTranslatedTextContent = [];
569+
const splitTranslatedTextContent = translatedTextContent.split(/\s/);
570+
const wordsPerLine = Math.ceil(
571+
splitTranslatedTextContent.length / sanitizedTextContent.length
572+
);
573+
574+
for (let i = 0; i < splitTranslatedTextContent.length; i += wordsPerLine) {
575+
distributedTranslatedTextContent.push(
576+
splitTranslatedTextContent.slice(i, i + wordsPerLine).join(" ")
577+
);
578+
}
579+
580+
distributedTranslatedTextContent.forEach((word, index) => {
581+
elem.querySelectorAll("tspan")[index].textContent = word;
582+
});
583+
} else {
584+
const tspanEl = elem.querySelector("tspan");
585+
if (tspanEl) {
586+
tspanEl.textContent = translatedTextContent;
587+
} else {
588+
elem.textContent = translatedTextContent;
589+
}
590+
}
591+
});
592+
return doc.getElementsByTagNameNS("http://www.w3.org/2000/svg", "svg").item(0);
593+
}
594+
468595
async chooseTheme(themeName) {
469596
await this.applyConfigurator(themeName);
470597
}

0 commit comments

Comments
 (0)