Skip to content

Commit b18b51f

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#1098 task-3415840
1 parent a7219bb commit b18b51f

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
@@ -538,7 +538,8 @@ export class ThemeSelectionScreen extends ApplyConfiguratorScreen {
538538
const proms = [];
539539
this.uiService.block({delay: 700});
540540
themes.forEach((theme, idx) => {
541-
const svgEl = new DOMParser().parseFromString(theme.svg, "image/svg+xml").documentElement;
541+
const parsedSvg = new DOMParser().parseFromString(theme.svg, "image/svg+xml");
542+
const svgEl = this.translateSVG(parsedSvg).documentElement;
542543
for (const imgEl of svgEl.querySelectorAll("image")) {
543544
proms.push(new Promise((resolve, reject) => {
544545
imgEl.addEventListener("load", () => {
@@ -558,6 +559,157 @@ export class ThemeSelectionScreen extends ApplyConfiguratorScreen {
558559
});
559560
}
560561

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

0 commit comments

Comments
 (0)