diff --git a/dist/css/godo.css b/dist/css/godo.css index 4c792bc..0962a39 100644 --- a/dist/css/godo.css +++ b/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; } diff --git a/src-js/godo-menus-language.mjs b/src-js/godo-menus-language.mjs new file mode 100644 index 0000000..7659204 --- /dev/null +++ b/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]; +} diff --git a/src-js/godo-menus.mjs b/src-js/godo-menus.mjs index e091b17..1735e26 100644 --- a/src-js/godo-menus.mjs +++ b/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);