Skip to content

Commit 492f86f

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 2e528f1 commit 492f86f

File tree

1 file changed

+150
-1
lines changed

1 file changed

+150
-1
lines changed

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

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

0 commit comments

Comments
 (0)