Skip to content

Commit efb2851

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#1100 task-3415840
1 parent b0f068f commit efb2851

File tree

1 file changed

+147
-1
lines changed

1 file changed

+147
-1
lines changed

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

Lines changed: 147 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -454,7 +454,8 @@ class ThemeSelectionScreen extends ApplyConfiguratorScreen {
454454
this.uiService.block();
455455
this.state.themes.forEach((theme, idx) => {
456456
// Transform the text svg into a svg element.
457-
const svgEl = new DOMParser().parseFromString(theme.svg, 'image/svg+xml').documentElement;
457+
const parsedSvg = new DOMParser().parseFromString(theme.svg, "image/svg+xml");
458+
const svgEl = this.translateSVG(parsedSvg).documentElement;
458459
for (const imgEl of svgEl.querySelectorAll('image')) {
459460
proms.push(new Promise((resolve, reject) => {
460461
imgEl.addEventListener('load', () => {
@@ -475,6 +476,151 @@ class ThemeSelectionScreen extends ApplyConfiguratorScreen {
475476
});
476477
}
477478

479+
translateSVG(doc) {
480+
doc.querySelectorAll("text").forEach((elem) => {
481+
const sanitizedTextContent = elem.textContent
482+
.trim()
483+
.split("\n")
484+
.map((word) => word.trim());
485+
var translatedTextContent = sanitizedTextContent.join(" ");
486+
switch (translatedTextContent) {
487+
case "Welcome":
488+
translatedTextContent = _t("Welcome");
489+
break;
490+
case "Welcome Message":
491+
translatedTextContent = _t("Welcome Message");
492+
break;
493+
case "A Welcome Message":
494+
translatedTextContent = _t("A Welcome Message");
495+
break;
496+
case "A Welcoming Message":
497+
translatedTextContent = _t("A Welcoming Message");
498+
break;
499+
case "Title":
500+
translatedTextContent = _t("Title");
501+
break;
502+
case "Second Title":
503+
translatedTextContent = _t("Second Title");
504+
break;
505+
case "Discover":
506+
translatedTextContent = _t("Discover");
507+
break;
508+
case "Section Title":
509+
translatedTextContent = _t("Section Title");
510+
break;
511+
case "Section longer title":
512+
translatedTextContent = _t("Section longer title");
513+
break;
514+
case "A longer section title":
515+
translatedTextContent = _t("A longer section title");
516+
break;
517+
case "Large section title":
518+
translatedTextContent = _t("Large section title");
519+
break;
520+
case "Entry Title":
521+
translatedTextContent = _t("Entry Title");
522+
break;
523+
case "Team Member":
524+
translatedTextContent = _t("Team Member");
525+
break;
526+
case "A Section Title":
527+
translatedTextContent = _t("A Section Title");
528+
break;
529+
case "A Very Long Title":
530+
translatedTextContent = _t("A Very Long Title");
531+
break;
532+
case "A Big Title":
533+
translatedTextContent = _t("A Big Title");
534+
break;
535+
case "A Very Long Subtitle":
536+
translatedTextContent = _t("A Very Long Subtitle");
537+
break;
538+
case "Block Title":
539+
translatedTextContent = _t("Block Title");
540+
break;
541+
case "BLOCK":
542+
translatedTextContent = _t("BLOCK");
543+
break;
544+
case "TITLE":
545+
translatedTextContent = _t("TITLE");
546+
break;
547+
case "Feature #01":
548+
translatedTextContent = _t("Feature") + " #01";
549+
break;
550+
case "Feature #02":
551+
translatedTextContent = _t("Feature") + " #02";
552+
break;
553+
case "Feature #03":
554+
translatedTextContent = _t("Feature") + " #03";
555+
break;
556+
case "Section Entry":
557+
translatedTextContent = _t("Section Entry");
558+
break;
559+
case "Contact":
560+
translatedTextContent = _t("Contact");
561+
break;
562+
case "Contact Us":
563+
translatedTextContent = _t("Contact Us");
564+
break;
565+
case "Contact Me":
566+
translatedTextContent = _t("Contact Me");
567+
break;
568+
case "Card Title":
569+
translatedTextContent = _t("Card Title");
570+
break;
571+
case "Call-To-Action Title":
572+
translatedTextContent = _t("Call-To-Action Title");
573+
break;
574+
case "Subtitle #01":
575+
translatedTextContent = _t("Subtitle") + " #01";
576+
break;
577+
case "Subtitle #02":
578+
translatedTextContent = _t("Subtitle") + " #02";
579+
break;
580+
case "LOGO":
581+
translatedTextContent = _t("LOGO");
582+
break;
583+
}
584+
585+
/*
586+
* This code handles translating multiline phrases into languages
587+
* whose corresponding phrases have more words, while keeping the
588+
* same amount of lines
589+
*
590+
* Example: translating Welcome into Messaggio di
591+
* Message Benvenuto
592+
*
593+
* starting phrase = 2 lines, 2 words
594+
* translated phrase = 2 lines, 3 words
595+
*/
596+
if (sanitizedTextContent.length > 1) {
597+
const distributedTranslatedTextContent = [];
598+
const splitTranslatedTextContent = translatedTextContent.split(/\s/);
599+
const wordsPerLine = Math.ceil(
600+
splitTranslatedTextContent.length / sanitizedTextContent.length
601+
);
602+
603+
for (let i = 0; i < splitTranslatedTextContent.length; i += wordsPerLine) {
604+
distributedTranslatedTextContent.push(
605+
splitTranslatedTextContent.slice(i, i + wordsPerLine).join(" ")
606+
);
607+
}
608+
609+
distributedTranslatedTextContent.forEach((word, index) => {
610+
elem.querySelectorAll("tspan")[index].textContent = word;
611+
});
612+
} else {
613+
const tspanEl = elem.querySelector("tspan");
614+
if (tspanEl) {
615+
tspanEl.textContent = translatedTextContent;
616+
} else {
617+
elem.textContent = translatedTextContent;
618+
}
619+
}
620+
});
621+
return doc;
622+
}
623+
478624
async chooseTheme(themeName) {
479625
await this.applyConfigurator(themeName);
480626
}

0 commit comments

Comments
 (0)