github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#631 web component i18n implement new approach

Browse Source
This commit is contained in:
agriyadev5
2021-08-30 17:49:57 +05:30
parent a542ddd151
commit 704588889d
6 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/editor/MainMenu.js
View File

@@ -120,7 +120,7 @@ class MainMenu {
this.editor.configObj.curConfig.snappingStep = gridsnappingstep; this.editor.configObj.curConfig.snappingStep = gridsnappingstep;
this.editor.configObj.curConfig.gridColor = gridcolor; this.editor.configObj.curConfig.gridColor = gridcolor;
this.editor.configObj.curConfig.showRulers = showrulers; this.editor.configObj.curConfig.showRulers = showrulers;
$id('rulers').style.display = (this.editor.configObj.curConfig.showRulers) ? 'block' : 'none'; // $id("rulers").style.display = (this.editor.configObj.curConfig.showRulers) ? 'block' : 'none';
if (this.editor.configObj.curConfig.showRulers) { if (this.editor.configObj.curConfig.showRulers) {
this.editor.rulers.updateRulers(); this.editor.rulers.updateRulers();
} }
@@ -278,16 +278,15 @@ class MainMenu {
init() { init() {
// add Top panel // add Top panel
const template = document.createElement("template"); const template = document.createElement("template");
const { i18next } = this.editor;
const { imgPath } = this.editor.configObj.curConfig; const { imgPath } = this.editor.configObj.curConfig;
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
template.innerHTML = ` template.innerHTML = `
<se-menu id="main_button" label="SVG-Edit" src="${imgPath}/logo.svg" alt="logo"> <se-menu id="main_button" label="SVG-Edit" src="${imgPath}/logo.svg" alt="logo">
<se-menu-item id="tool_import" label="${i18next.t('tools.import_doc')}" src="${imgPath}/importImg.svg"></se-menu-item> <se-menu-item id="tool_import" label="tools.import_doc" src="${imgPath}/importImg.svg"></se-menu-item>
<se-menu-item id="tool_export" label="${i18next.t('tools.export_img')}" src="${imgPath}/export.svg"></se-menu-item> <se-menu-item id="tool_export" label="tools.export_img" src="${imgPath}/export.svg"></se-menu-item>
<se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="${imgPath}/docprop.svg"></se-menu-item> <se-menu-item id="tool_docprops" label="tools.docprops" shortcut="D" src="${imgPath}/docprop.svg"></se-menu-item>
<se-menu-item id="tool_editor_prefs" label="${i18next.t('config.editor_prefs')}" src="${imgPath}/editPref.svg"></se-menu-item> <se-menu-item id="tool_editor_prefs" label="config.editor_prefs" src="${imgPath}/editPref.svg"></se-menu-item>
<se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="${imgPath}/logo.svg"></se-menu-item> <se-menu-item id="tool_editor_homepage" label="tools.editor_homepage" src="${imgPath}/logo.svg"></se-menu-item>
</se-menu> </se-menu>
`; `;
$id('tools_top').prepend(template.content.cloneNode(true)); $id('tools_top').prepend(template.content.cloneNode(true));

4
src/editor/components/seMenuItem.js
View File

@@ -1,6 +1,6 @@
import 'elix/define/Menu.js'; import 'elix/define/Menu.js';
import 'elix/define/MenuItem.js'; import 'elix/define/MenuItem.js';
import { t } from '../locale.js';
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
<style> <style>
@@ -54,7 +54,7 @@ export class SeMenuItem extends HTMLElement {
break; break;
case 'label': case 'label':
shortcut = this.getAttribute('shortcut'); shortcut = this.getAttribute('shortcut');
this.$label.textContent = `${newValue} ${shortcut ? `(${shortcut})` : ''}`; this.$label.textContent = `${t(newValue)} ${shortcut ? `(${shortcut})` : ''}`;
break; break;
default: default:
// eslint-disable-next-line no-console // eslint-disable-next-line no-console

3
src/editor/extensions/ext-imagelib/ext-imagelib.js
View File

@@ -522,8 +522,9 @@ export default {
callback() { callback() {
// Add the button and its handler(s) // Add the button and its handler(s)
const buttonTemplate = document.createElement("template"); const buttonTemplate = document.createElement("template");
const key = name + `:buttons.0.title`;
buttonTemplate.innerHTML = ` buttonTemplate.innerHTML = `
<se-menu-item id="tool_imagelib" label="Image library" src="${imgPath}/library.svg"></se-menu-item> <se-menu-item id="tool_imagelib" label="${key}" src="${imgPath}/library.svg"></se-menu-item>
`; `;
insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true)); insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true));
$id('tool_imagelib').addEventListener("click", () => { $id('tool_imagelib').addEventListener("click", () => {

8
src/editor/extensions/ext-opensave/ext-opensave.js
View File

@@ -162,13 +162,13 @@ export default {
callback() { callback() {
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
const buttonTemplate = ` const buttonTemplate = `
<se-menu-item id="tool_clear" label="${svgEditor.i18next.t('opensave.new_doc')}" shortcut="N" src="${imgPath}/new.svg"></se-menu-item>`; <se-menu-item id="tool_clear" label="opensave.new_doc" shortcut="N" src="${imgPath}/new.svg"></se-menu-item>`;
svgCanvas.insertChildAtIndex($id('main_button'), buttonTemplate, 0); svgCanvas.insertChildAtIndex($id('main_button'), buttonTemplate, 0);
const openButtonTemplate = `<se-menu-item id="tool_open" label="${svgEditor.i18next.t('opensave.open_image_doc')}" src="${imgPath}/open.svg"></se-menu-item>`; const openButtonTemplate = `<se-menu-item id="tool_open" label="opensave.open_image_doc" src="${imgPath}/open.svg"></se-menu-item>`;
svgCanvas.insertChildAtIndex($id('main_button'), openButtonTemplate, 1); svgCanvas.insertChildAtIndex($id('main_button'), openButtonTemplate, 1);
const saveButtonTemplate = `<se-menu-item id="tool_save" label="${svgEditor.i18next.t('opensave.save_doc')}" shortcut="S" src="${imgPath}/saveImg.svg"></se-menu-item>`; const saveButtonTemplate = `<se-menu-item id="tool_save" label="opensave.save_doc" shortcut="S" src="${imgPath}/saveImg.svg"></se-menu-item>`;
svgCanvas.insertChildAtIndex($id('main_button'), saveButtonTemplate, 2); svgCanvas.insertChildAtIndex($id('main_button'), saveButtonTemplate, 2);
const saveAsButtonTemplate = `<se-menu-item id="tool_save_as" label="${svgEditor.i18next.t('opensave.save_as_doc')}" src="${imgPath}/saveImg.svg"></se-menu-item>`; const saveAsButtonTemplate = `<se-menu-item id="tool_save_as" label="opensave.save_as_doc" src="${imgPath}/saveImg.svg"></se-menu-item>`;
svgCanvas.insertChildAtIndex($id('main_button'), saveAsButtonTemplate, 3); svgCanvas.insertChildAtIndex($id('main_button'), saveAsButtonTemplate, 3);
// handler // handler
$id("tool_clear").addEventListener("click", clickClear.bind(this)); $id("tool_clear").addEventListener("click", clickClear.bind(this));

4
src/editor/locale.js
View File

@@ -86,3 +86,7 @@ export const putLocale = async function (givenParam, goodLangs) {
console.info(`Lang: ${i18next.t('lang')}`); console.info(`Lang: ${i18next.t('lang')}`);
return { langParam, i18next }; return { langParam, i18next };
}; };
export const t = function (key) {
return i18next.t(key);
};

16
src/editor/locale/lang.en.js
View File

@@ -72,8 +72,8 @@ export default {
text_contents: 'Change text contents', text_contents: 'Change text contents',
font_family: 'Change Font Family', font_family: 'Change Font Family',
font_size: 'Change Font Size', font_size: 'Change Font Size',
bold: 'Bold Text [B]', bold: 'Bold Text',
italic: 'Italic Text [I]', italic: 'Italic Text',
text_anchor_start: 'Align the text in start', text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle', text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end', text_anchor_end: 'Align the text in end',
@@ -129,21 +129,21 @@ export default {
mode_path: 'Path Tool', mode_path: 'Path Tool',
mode_text: 'Text Tool', mode_text: 'Text Tool',
mode_image: 'Image Tool', mode_image: 'Image Tool',
mode_zoom: 'Zoom Tool [Ctrl+Up/Down]', mode_zoom: 'Zoom Tool',
no_embed: 'NOTE: This image cannot be embedded. It will depend on this path to be displayed', no_embed: 'NOTE: This image cannot be embedded. It will depend on this path to be displayed',
undo: 'Undo [Z]', undo: 'Undo',
redo: 'Redo [Y]', redo: 'Redo',
tool_source: 'Edit Source', tool_source: 'Edit Source',
wireframe_mode: 'Wireframe Mode', wireframe_mode: 'Wireframe Mode',
clone: 'Duplicate Element(s) [D]', clone: 'Duplicate Element(s)',
del: 'Delete Element(s)', del: 'Delete Element(s)',
group_elements: 'Group Elements [G]', group_elements: 'Group Elements',
make_link: 'Make (hyper)link', make_link: 'Make (hyper)link',
set_link_url: 'Set link URL (leave empty to remove)', set_link_url: 'Set link URL (leave empty to remove)',
to_path: 'Convert to Path', to_path: 'Convert to Path',
reorient_path: 'Reorient path', reorient_path: 'Reorient path',
ungroup: 'Ungroup Elements', ungroup: 'Ungroup Elements',
docprops: 'Document Properties [D]', docprops: 'Document Properties',
editor_homepage: 'SVG-Edit Home Page', editor_homepage: 'SVG-Edit Home Page',
move_bottom: 'Send to Back', move_bottom: 'Send to Back',
move_top: 'Bring to Front', move_top: 'Bring to Front',