JS: add menus Language object (#59587)

dist/css/godo.css

@@ -91,10 +91,10 @@
   display: none;
 } 
 
-.menuicon.gras {
+.menuicon-b {
   font-weight: 900;
 }
-.menuicon.italique {
+.menuicon-i {
   font-weight: 600;
   font-style: italic;
 }

src-js/godo-menus-language.mjs

@@ -0,0 +1,62 @@
+// menus language
+const dLanguage = document.documentElement.lang.split('-')[0];
+const nLanguage = navigator.languages ? navigator.languages[0] : navigator.language || navigator.userLanguage;
+const language = (dLanguage) ? dLanguage : nLanguage;
+const godoLanguage = (language == "fr") ? language : "en";
+
+const languageContent = {
+	"a": {
+		en: {
+			icon: "a",
+			text: "link"
+		},
+		fr: {
+			icon: "a",
+			text: 'lien'
+		}
+	},
+	"b": {
+		en: {
+			icon: "B",
+			text: "bold"
+		},
+		fr: {
+			icon: "G",
+			text: "gras"
+		}
+	},
+	"h": {
+		en: {
+			icon: "H",
+			text: "Header"
+		},
+		fr: {
+			icon: "T",
+			text: "Titre"
+		}
+	},
+	"i": {
+		en: {
+			icon: "i",
+			text: "italic",
+		},
+		fr: {
+			icon: "i",
+			text: "italique"
+		}
+	},
+	"p": {
+		en: {
+			icon: "P",
+			text: "paragraph",
+		},
+		fr: {
+			icon: "P",
+			text: "paragraphe"
+		}
+	}
+}
+
+export default function getLanguage(content) {
+	return languageContent[content][godoLanguage];
+}

src-js/godo-menus.mjs

@@ -1,4 +1,5 @@
 import {toggleMark, setBlockType, wrapIn} from "prosemirror-commands";
+import getLanguage from "./godo-menus-language.mjs";
 
 class Menu {
   constructor(menu, editorView) {
@@ -11,11 +12,9 @@ class Menu {
     this.el.wrapper = document.createElement("div");
     this.el.wrapper.className = "menuicons";
     for (const item in this.items) {
-      // console.log(this.items[item].dom);
       this.el.wrapper.appendChild(this.items[item].dom);
     }
     this.el.appendChild(this.el.wrapper);
-    // if (this.name === "marks") this.el.hidden = true;
 
     this.update(editorView, null);
 
@@ -110,7 +109,7 @@ class Menu {
 
 function linkItem( type ) {
   return {
-    dom: icon("a", "lien"),
+    dom: icon("a"),
     run( state, dispatch, view ) {
       let chref = prompt("href");
       toggleMark(type, {href: chref})(state, dispatch);
@@ -121,12 +120,13 @@ function linkItem( type ) {
 
 
 // Helper function to create menu icons
-function icon( text, name ) {
+// id: defined in languageContent
+function icon(id) {
   let menuicon = document.createElement("button")
-  menuicon.className = "menuicon " + name;
+  menuicon.className = "menuicon menuicon-" + id;
   menuicon.setAttribute("type", "button");
-  menuicon.title = name;
-  menuicon.textContent = text;
+  menuicon.title = getLanguage(id).text;
+  menuicon.textContent = getLanguage(id).icon;
   return menuicon;
 }
 
@@ -134,7 +134,7 @@ function icon( text, name ) {
 function heading( level, type ) {
   return {
     run: setBlockType(type, {level}),
-    dom: icon("T" + level, "heading")
+    dom: icon("h")
   }
 }
 
@@ -145,7 +145,7 @@ function blocks( schema ) {
   let type, i = {};
 
   if (type = schema.nodes.paragraph) {
-    i.setP = {run: setBlockType(type), dom: icon("P", "paragraphe")};
+    i.setP = {run: setBlockType(type), dom: icon("p")};
   }
   if (type = schema.nodes.heading) {
     i.setH1 = heading(1, type);
@@ -164,9 +164,9 @@ function marks( schema ) {
   let type, i = {};
 
   if (type = schema.marks.strong)
-    i.toggleStrong = {run: toggleMark(type), dom: icon("G", "gras"), type};
+    i.toggleStrong = {run: toggleMark(type), dom: icon("b"), type};
   if (type = schema.marks.em)
-    i.toggleEm = {run: toggleMark(type), dom: icon('i', "italique"), type};
+    i.toggleEm = {run: toggleMark(type), dom: icon("i"), type};
   if (type = schema.marks.link)
     i.toggleLink = linkItem(type);