diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index 588173a6..d923ef51 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -81,14 +81,17 @@ class EditorStartup { const newSeImgPropDialog = document.createElement('se-img-prop-dialog'); newSeImgPropDialog.setAttribute('id', 'se-img-prop'); document.body.append(newSeImgPropDialog); + newSeImgPropDialog.init(this.i18next); // editor prefences dialoag added to DOM const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog'); newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs'); document.body.append(newSeEditPrefsDialog); + newSeEditPrefsDialog.init(this.i18next); // canvas menu added to DOM const dialogBox = document.createElement('se-cmenu_canvas-dialog'); dialogBox.setAttribute('id', 'se-cmenu_canvas'); document.body.append(dialogBox); + dialogBox.init(this.i18next); // alertDialog added to DOM const alertBox = document.createElement('se-alert-dialog'); alertBox.setAttribute('id', 'se-alert-dialog'); @@ -101,6 +104,7 @@ class EditorStartup { const exportDialog = document.createElement('se-export-dialog'); exportDialog.setAttribute('id', 'se-export-dialog'); document.body.append(exportDialog); + exportDialog.init(this.i18next); } catch (err) { console.error(err); } diff --git a/src/editor/dialogs/cmenuDialog.js b/src/editor/dialogs/cmenuDialog.js index 70ade142..7416fc10 100644 --- a/src/editor/dialogs/cmenuDialog.js +++ b/src/editor/dialogs/cmenuDialog.js @@ -1,4 +1,3 @@ -/* gl#bals svgEditor */ const template = document.createElement('template'); // eslint-disable-next-line no-unsanitized/property template.innerHTML = ` @@ -68,53 +67,53 @@ template.innerHTML = ` @@ -145,12 +144,33 @@ export class SeCMenuDialog extends HTMLElement { this.$moveDownLink = this._shadowRoot.querySelector('#se-move-down'); this.$moveBackLink = this._shadowRoot.querySelector('#se-move-back'); } + /** + * @function init + * @param {any} name + * @returns {void} + */ + init (i18next) { + this.setAttribute('tools-cut', i18next.t('tools.cut')); + this.setAttribute('tools-copy', i18next.t('tools.copy')); + this.setAttribute('tools-paste', i18next.t('tools.paste')); + this.setAttribute('tools-paste_in_place', i18next.t('tools.paste_in_place')); + this.setAttribute('tools-delete', i18next.t('tools.delete')); + this.setAttribute('tools-group', i18next.t('tools.group')); + this.setAttribute('tools-ungroup', i18next.t('tools.ungroup')); + this.setAttribute('tools-move_front', i18next.t('tools.move_front')); + this.setAttribute('tools-move_up', i18next.t('tools.move_up')); + this.setAttribute('tools-move_down', i18next.t('tools.move_down')); + this.setAttribute('tools-move_back', i18next.t('tools.move_back')); + } /** * @function observedAttributes * @returns {any} observed */ static get observedAttributes () { - return [ 'disableallmenu', 'enablemenuitems', 'disablemenuitems' ]; + return [ 'disableallmenu', 'enablemenuitems', 'disablemenuitems', 'tools-cut', + 'tools-copy', 'tools-paste', 'tools-paste_in_place', 'tools-delete', 'tools-group', + 'tools-ungroup', 'tools-move_front', 'tools-move_up', 'tools-move_down', + 'tools-move_back' ]; } /** * @function attributeChangedCallback @@ -161,6 +181,7 @@ export class SeCMenuDialog extends HTMLElement { */ attributeChangedCallback (name, oldValue, newValue) { let eles = []; + let textnode; const sdowRoot = this._shadowRoot; switch (name) { case 'disableallmenu': @@ -185,6 +206,48 @@ export class SeCMenuDialog extends HTMLElement { selEle.parentElement.classList.add('disabled'); }); break; + case 'tools-cut': + textnode = document.createTextNode(newValue); + this.$cutLink.prepend(textnode); + break; + case 'tools-copy': + textnode = document.createTextNode(newValue); + this.$copyLink.prepend(textnode); + break; + case 'tools-paste': + this.$pasteLink.textContent = newValue; + break; + case 'tools-paste_in_place': + this.$pasteInPlaceLink.textContent = newValue; + break; + case 'tools-delete': + textnode = document.createTextNode(newValue); + this.$deleteLink.prepend(textnode); + break; + case 'tools-group': + textnode = document.createTextNode(newValue); + this.$groupLink.prepend(textnode); + break; + case 'tools-ungroup': + textnode = document.createTextNode(newValue); + this.$ungroupLink.prepend(textnode); + break; + case 'tools-move_front': + textnode = document.createTextNode(newValue); + this.$moveFrontLink.prepend(textnode); + break; + case 'tools-move_up': + textnode = document.createTextNode(newValue); + this.$moveUpLink.prepend(textnode); + break; + case 'tools-move_down': + textnode = document.createTextNode(newValue); + this.$moveDownLink.prepend(textnode); + break; + case 'tools-move_back': + textnode = document.createTextNode(newValue); + this.$moveBackLink.prepend(textnode); + break; default: // super.attributeChangedCallback(name, oldValue, newValue); break; diff --git a/src/editor/dialogs/cmenuLayersDialog.js b/src/editor/dialogs/cmenuLayersDialog.js index 7c6e3096..2fb31a8a 100644 --- a/src/editor/dialogs/cmenuLayersDialog.js +++ b/src/editor/dialogs/cmenuLayersDialog.js @@ -1,4 +1,3 @@ -/* gl#bals svgEditor */ const template = document.createElement('template'); // eslint-disable-next-line no-unsanitized/property template.innerHTML = ` @@ -93,12 +92,23 @@ export class SeCMenuLayerDialog extends HTMLElement { this.$mergeDownLink = this._shadowRoot.querySelector('#se-merge-down'); this.$mergeAllLink = this._shadowRoot.querySelector('#se-merge-all'); } + /** + * @function init + * @param {any} name + * @returns {void} + */ + init (i18next) { + this.setAttribute('layers-dupe', i18next.t('layers.dupe')); + this.setAttribute('layers-del', i18next.t('layers.del')); + this.setAttribute('layers-merge_down', i18next.t('layers.merge_down')); + this.setAttribute('layers-merge_all', i18next.t('layers.merge_all')); + } /** * @function observedAttributes * @returns {any} observed */ static get observedAttributes () { - return [ 'value', 'leftclick' ]; + return [ 'value', 'leftclick', 'layers-dupe', 'layers-del', 'layers-merge_down', 'layers-merge_all' ]; } /** * @function attributeChangedCallback @@ -117,6 +127,18 @@ export class SeCMenuLayerDialog extends HTMLElement { this._workarea = document.getElementById(this.source); } break; + case 'layers-dupe': + this.$duplicateLink.textContent = newValue; + break; + case 'layers-del': + this.$deleteLink.textContent = newValue; + break; + case 'layers-merge_down': + this.$mergeDownLink.textContent = newValue; + break; + case 'layers-merge_all': + this.$mergeAllLink.textContent = newValue; + break; default: // super.attributeChangedCallback(name, oldValue, newValue); break; diff --git a/src/editor/dialogs/editorPreferencesDialog.js b/src/editor/dialogs/editorPreferencesDialog.js index a286282a..3fa6db38 100644 --- a/src/editor/dialogs/editorPreferencesDialog.js +++ b/src/editor/dialogs/editorPreferencesDialog.js @@ -1,4 +1,3 @@ -/* gl#bals svgEditor */ const template = document.createElement('template'); // eslint-disable-next-line no-unsanitized/property template.innerHTML = ` @@ -149,17 +148,13 @@ template.innerHTML = `
- - + +
- #{svgEditor.i18next.t('config.editor_prefs')} +
- #{svgEditor.i18next.t('config.background')} +
-

#{svgEditor.i18next.t('config.editor_bg_note')}

+

- #{svgEditor.i18next.t('config.grid')} +
- #{svgEditor.i18next.t('config.units_and_rulers')} +
- - + +
@@ -103,12 +96,23 @@ export class SeExportDialog extends HTMLElement { this.$input = this._shadowRoot.querySelector('elix-number-spin-box'); this.value = 1; } + /** + * @function init + * @param {any} name + * @returns {void} + */ + init (i18next) { + this.setAttribute('common-ok', i18next.t('common.ok')); + this.setAttribute('common-cancel', i18next.t('common.cancel')); + this.setAttribute('ui-quality', i18next.t('ui.quality')); + this.setAttribute('ui-export_type_label', i18next.t('ui.export_type_label')); + } /** * @function observedAttributes * @returns {any} observed */ static get observedAttributes () { - return [ 'dialog' ]; + return [ 'dialog', 'common-ok', 'common-cancel', 'ui-quality', 'ui-export_type_label' ]; } /** * @function attributeChangedCallback @@ -119,6 +123,7 @@ export class SeExportDialog extends HTMLElement { */ attributeChangedCallback (name, oldValue, newValue) { // eslint-disable-next-line sonarjs/no-small-switch + let node; switch (name) { case 'dialog': if (newValue === 'open') { @@ -127,6 +132,20 @@ export class SeExportDialog extends HTMLElement { this.$dialog.close(); } break; + case 'common-ok': + this.$okBtn.textContent = newValue; + break; + case 'common-cancel': + this.$cancelBtn.textContent = newValue; + break; + case 'ui-quality': + node = this._shadowRoot.querySelector('#se-quality'); + node.prepend(newValue); + break; + case 'ui-export_type_label': + node = this._shadowRoot.querySelector('#export_select'); + node.textContent = newValue; + break; default: // super.attributeChangedCallback(name, oldValue, newValue); break; diff --git a/src/editor/dialogs/imagePropertiesDialog.js b/src/editor/dialogs/imagePropertiesDialog.js index 9a9d675a..aab3bce9 100644 --- a/src/editor/dialogs/imagePropertiesDialog.js +++ b/src/editor/dialogs/imagePropertiesDialog.js @@ -1,4 +1,3 @@ -/* gl#bals svgEditor */ import { isValidUnit } from '../../common/units.js'; const template = document.createElement('template'); @@ -71,46 +70,46 @@ template.innerHTML = `
- - + +
- #{svgEditor.i18next.t('config.image_props')} +
- #{svgEditor.i18next.t('config.doc_dims')} +
- #{svgEditor.i18next.t('config.included_images')} +
@@ -141,12 +140,36 @@ export class SeImgPropDialog extends HTMLElement { this.$imageOptRef = this._shadowRoot.querySelector('#image_ref'); this.$dialog = this._shadowRoot.querySelector('#svg_docprops'); } + /** + * @function init + * @param {any} name + * @returns {void} + */ + init (i18next) { + this.setAttribute('common-ok', i18next.t('common.ok')); + this.setAttribute('common-cancel', i18next.t('common.cancel')); + this.setAttribute('config-image_props', i18next.t('config.image_props')); + this.setAttribute('config-doc_title', i18next.t('config.doc_title')); + this.setAttribute('config-doc_dims', i18next.t('config.doc_dims')); + this.setAttribute('common-width', i18next.t('common.width')); + this.setAttribute('common-height', i18next.t('common.height')); + this.setAttribute('config-select_predefined', i18next.t('config.select_predefined')); + this.setAttribute('tools-fit-to-content', i18next.t('tools.fitToContent')); + this.setAttribute('config-included_images', i18next.t('config.included_images')); + this.setAttribute('config-image_opt_embed', i18next.t('config.image_opt_embed')); + this.setAttribute('config-image_opt_ref', i18next.t('config.image_opt_ref')); + } + /** * @function observedAttributes * @returns {any} observed */ static get observedAttributes () { - return [ 'title', 'width', 'height', 'save', 'dialog', 'embed' ]; + return [ 'title', 'width', 'height', 'save', 'dialog', 'embed', 'common-ok', + 'common-cancel', 'config-image_props', 'config-doc_title', 'config-doc_dims', + 'common-width', 'common-height', 'config-select_predefined', + 'tools-fit-to-content', 'config-included_images', 'config-image_opt_embed', + 'config-image_opt_ref' ]; } /** * @function attributeChangedCallback @@ -157,6 +180,7 @@ export class SeImgPropDialog extends HTMLElement { */ attributeChangedCallback (name, oldValue, newValue) { if (oldValue === newValue) return; + let node ; switch (name) { case 'title': this.$canvasTitle.value = newValue; @@ -209,6 +233,52 @@ export class SeImgPropDialog extends HTMLElement { } } break; + case 'common-ok': + this.$saveBtn.textContent = newValue; + break; + case 'common-cancel': + this.$cancelBtn.textContent = newValue; + break; + case 'config-image_props': + node = this._shadowRoot.querySelector('#svginfo_image_props'); + node.textContent = newValue; + break; + case 'config-doc_title': + node = this._shadowRoot.querySelector('#svginfo_title'); + node.textContent = newValue; + break; + case 'config-doc_dims': + node = this._shadowRoot.querySelector('#svginfo_dim'); + node.textContent = newValue; + break; + case 'common-width': + node = this._shadowRoot.querySelector('#svginfo_width'); + node.textContent = newValue; + break; + case 'common-height': + node = this._shadowRoot.querySelector('#svginfo_height'); + node.textContent = newValue; + break; + case 'config-select_predefined': + node = this._shadowRoot.querySelector('#selectedPredefined'); + node.textContent = newValue; + break; + case 'tools-fit-to-content': + node = this._shadowRoot.querySelector('#fitToContent'); + node.textContent = newValue; + break; + case 'config-included_images': + node = this._shadowRoot.querySelector('#includedImages'); + node.textContent = newValue; + break; + case 'config-image_opt_embed': + node = this._shadowRoot.querySelector('#image_opt_embed'); + node.textContent = newValue; + break; + case 'config-image_opt_ref': + node = this._shadowRoot.querySelector('#image_opt_ref'); + node.textContent = newValue; + break; default: super.attributeChangedCallback(name, oldValue, newValue); break; diff --git a/src/editor/dialogs/svgSourceDialog.js b/src/editor/dialogs/svgSourceDialog.js index 3e8c4bb5..39874645 100644 --- a/src/editor/dialogs/svgSourceDialog.js +++ b/src/editor/dialogs/svgSourceDialog.js @@ -1,4 +1,3 @@ -/* gl#bals svgEditor */ const template = document.createElement('template'); // eslint-disable-next-line no-unsanitized/property template.innerHTML = ` @@ -62,18 +61,12 @@ template.innerHTML = `
- - + +
-

- #{svgEditor.i18next.t('notification.source_dialog_note')} -

- +

+
@@ -101,12 +94,23 @@ export class SeSvgSourceEditorDialog extends HTMLElement { this.$copySec = this._shadowRoot.querySelector('#save_output_btns'); this.$applySec = this._shadowRoot.querySelector('#tool_source_back'); } + /** + * @function init + * @param {any} name + * @returns {void} + */ + init (i18next) { + this.setAttribute('tools-source_save', i18next.t('tools.source_save')); + this.setAttribute('common-cancel', i18next.t('common.cancel')); + this.setAttribute('notification-source_dialog_note', i18next.t('notification.source_dialog_note')); + this.setAttribute('config-done', i18next.t('config.done')); + } /** * @function observedAttributes * @returns {any} observed */ static get observedAttributes () { - return [ 'dialog', 'value', 'applysec', 'copysec' ]; + return [ 'dialog', 'value', 'applysec', 'copysec', 'tools-source_save', 'common-cancel', 'notification-source_dialog_note', 'config-done' ]; } /** * @function attributeChangedCallback @@ -117,6 +121,7 @@ export class SeSvgSourceEditorDialog extends HTMLElement { */ attributeChangedCallback (name, oldValue, newValue) { if (oldValue === newValue) return; + let node; switch (name) { case 'dialog': if (newValue === 'open') { @@ -144,6 +149,19 @@ export class SeSvgSourceEditorDialog extends HTMLElement { case 'value': this.$sourceTxt.value = newValue; break; + case 'tools-source_save': + this.$saveBtn.textContent = newValue; + break; + case 'common-cancel': + this.$cancelBtn.textContent = newValue; + break; + case 'notification-source_dialog_note': + node = this._shadowRoot.querySelector('#copy_save_note'); + node.textContent = newValue; + break; + case 'config-done': + this.$copyBtn.textContent = newValue; + break; default: super.attributeChangedCallback(name, oldValue, newValue); break; diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js index b374ea9a..34eac5be 100644 --- a/src/editor/panels/LayersPanel.js +++ b/src/editor/panels/LayersPanel.js @@ -150,11 +150,13 @@ class LayersPanel { menuMore.value = "layer_moreopts"; menuMore.setAttribute("leftclick", true); document.body.append(menuMore); + menuMore.init(i18next); const menuLayerBox = document.createElement("se-cmenu-layers"); menuLayerBox.setAttribute("id", "se-cmenu-layers-list"); menuLayerBox.value = "layerlist"; menuLayerBox.setAttribute("leftclick", false); document.body.append(menuLayerBox); + menuLayerBox.init(i18next); document .getElementById("layer_new") .addEventListener("click", this.newLayer.bind(this)); diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index 09edeb7d..0de43c49 100644 --- a/src/editor/panels/TopPanel.js +++ b/src/editor/panels/TopPanel.js @@ -990,6 +990,7 @@ class TopPanel { ); newSeEditorDialog.setAttribute("id", "se-svg-editor-dialog"); document.body.append(newSeEditorDialog); + newSeEditorDialog.init(i18next); // register action to top panel buttons $id("tool_source").addEventListener( "click",