Skip to content

Commit 18197a6

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#1099 task-3415840
1 parent 1aee8b0 commit 18197a6

File tree

1 file changed

+153
-1
lines changed

1 file changed

+153
-1
lines changed

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

Lines changed: 153 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -551,7 +551,8 @@ export class ThemeSelectionScreen extends ApplyConfiguratorScreen {
551551
const proms = [];
552552
this.uiService.block({delay: 700});
553553
themes.forEach((theme, idx) => {
554-
const svgEl = new DOMParser().parseFromString(theme.svg, "image/svg+xml").documentElement;
554+
const parsedSvg = new DOMParser().parseFromString(theme.svg, "image/svg+xml");
555+
const svgEl = this.translateSVG(parsedSvg).documentElement;
555556
for (const imgEl of svgEl.querySelectorAll("image")) {
556557
proms.push(new Promise((resolve, reject) => {
557558
imgEl.addEventListener("load", () => {
@@ -571,6 +572,157 @@ export class ThemeSelectionScreen extends ApplyConfiguratorScreen {
571572
});
572573
}
573574

575+
translateSVG(doc) {
576+
doc.querySelectorAll("text").forEach((elem) => {
577+
const sanitizedTextContent = elem.textContent
578+
.trim()
579+
.split("\n")
580+
.map((word) => word.trim());
581+
var translatedTextContent = sanitizedTextContent.join(" ");
582+
switch (translatedTextContent) {
583+
case "Welcome":
584+
translatedTextContent = _t("Welcome");
585+
break;
586+
case "Welcome Message":
587+
translatedTextContent = _t("Welcome Message");
588+
break;
589+
case "A Welcome Message":
590+
translatedTextContent = _t("A Welcome Message");
591+
break;
592+
case "A Welcoming Message":
593+
translatedTextContent = _t("A Welcoming Message");
594+
break;
595+
case "Title":
596+
translatedTextContent = _t("Title");
597+
break;
598+
case "Welcome Title":
599+
translatedTextContent = _t("Welcome Title");
600+
break;
601+
case "Second Title":
602+
translatedTextContent = _t("Second Title");
603+
break;
604+
case "Discover":
605+
translatedTextContent = _t("Discover");
606+
break;
607+
case "Section Title":
608+
translatedTextContent = _t("Section Title");
609+
break;
610+
case "Section longer title":
611+
translatedTextContent = _t("Section longer title");
612+
break;
613+
case "A longer section title":
614+
translatedTextContent = _t("A longer section title");
615+
break;
616+
case "Large section title":
617+
translatedTextContent = _t("Large section title");
618+
break;
619+
case "Entry Title":
620+
translatedTextContent = _t("Entry Title");
621+
break;
622+
case "Team Member":
623+
translatedTextContent = _t("Team Member");
624+
break;
625+
case "A Section Title":
626+
translatedTextContent = _t("A Section Title");
627+
break;
628+
case "A Very Long Title":
629+
translatedTextContent = _t("A Very Long Title");
630+
break;
631+
case "A Big Title":
632+
translatedTextContent = _t("A Big Title");
633+
break;
634+
case "A Very Long Subtitle":
635+
translatedTextContent = _t("A Very Long Subtitle");
636+
break;
637+
case "Block Title":
638+
translatedTextContent = _t("Block Title");
639+
break;
640+
case "BLOCK":
641+
translatedTextContent = _t("BLOCK");
642+
break;
643+
case "TITLE":
644+
translatedTextContent = _t("TITLE");
645+
break;
646+
case "Feature #01":
647+
translatedTextContent = _t("Feature") + " #01";
648+
break;
649+
case "Feature #02":
650+
translatedTextContent = _t("Feature") + " #02";
651+
break;
652+
case "Feature #03":
653+
translatedTextContent = _t("Feature") + " #03";
654+
break;
655+
case "Section Entry":
656+
translatedTextContent = _t("Section Entry");
657+
break;
658+
case "Contact":
659+
translatedTextContent = _t("Contact");
660+
break;
661+
case "Contact Us":
662+
translatedTextContent = _t("Contact Us");
663+
break;
664+
case "Contact Me":
665+
translatedTextContent = _t("Contact Me");
666+
break;
667+
case "Card Title":
668+
translatedTextContent = _t("Card Title");
669+
break;
670+
case "Call-To-Action Title":
671+
translatedTextContent = _t("Call-To-Action Title");
672+
break;
673+
case "Subtitle #01":
674+
translatedTextContent = _t("Subtitle") + " #01";
675+
break;
676+
case "Subtitle #02":
677+
translatedTextContent = _t("Subtitle") + " #02";
678+
break;
679+
case "“A quote about your services”":
680+
translatedTextContent = "“" + _t("A quote about your services") + "”";
681+
break;
682+
case "LOGO":
683+
translatedTextContent = _t("LOGO");
684+
break;
685+
}
686+
687+
/*
688+
* This code handles translating multiline phrases into languages
689+
* whose corresponding phrases have more words, while keeping the
690+
* same amount of lines
691+
*
692+
* Example: translating Welcome into Messaggio di
693+
* Message Benvenuto
694+
*
695+
* starting phrase = 2 lines, 2 words
696+
* translated phrase = 2 lines, 3 words
697+
*/
698+
if (sanitizedTextContent.length > 1) {
699+
const distributedTranslatedTextContent = [];
700+
const splitTranslatedTextContent = translatedTextContent.split(/\s/);
701+
const wordsPerLine = Math.ceil(
702+
splitTranslatedTextContent.length / sanitizedTextContent.length
703+
);
704+
705+
for (let i = 0; i < splitTranslatedTextContent.length; i += wordsPerLine) {
706+
distributedTranslatedTextContent.push(
707+
splitTranslatedTextContent.slice(i, i + wordsPerLine).join(" ")
708+
);
709+
}
710+
711+
distributedTranslatedTextContent.forEach((word, index) => {
712+
elem.querySelectorAll("tspan")[index].textContent = word;
713+
});
714+
} else {
715+
const tspanEl = elem.querySelector("tspan");
716+
if (tspanEl) {
717+
tspanEl.textContent = translatedTextContent;
718+
} else {
719+
elem.textContent = translatedTextContent;
720+
}
721+
}
722+
});
723+
return doc;
724+
}
725+
574726
async chooseTheme(themeName) {
575727
await this.applyConfigurator(themeName);
576728
}

0 commit comments

Comments
 (0)