From c60d1bf645824ca157a7f8ce912d4347a9c0194b Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Fri, 21 May 2021 18:03:19 +0530 Subject: [PATCH] #101 dialogs i18n new approach implement --- src/editor/EditorStartup.js | 3 + src/editor/dialogs/cmenuDialog.js | 5 + src/editor/dialogs/editorPreferencesDialog.js | 145 +++++++++++++++--- src/editor/dialogs/exportDialog.js | 42 +++-- src/editor/dialogs/imagePropertiesDialog.js | 93 +++++++++-- 5 files changed, 240 insertions(+), 48 deletions(-) diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index 34872fd2..d923ef51 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -81,10 +81,12 @@ 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'); @@ -102,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 08affc07..b3eeb25d 100644 --- a/src/editor/dialogs/cmenuDialog.js +++ b/src/editor/dialogs/cmenuDialog.js @@ -145,6 +145,11 @@ 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')); diff --git a/src/editor/dialogs/editorPreferencesDialog.js b/src/editor/dialogs/editorPreferencesDialog.js index a286282a..868be581 100644 --- a/src/editor/dialogs/editorPreferencesDialog.js +++ b/src/editor/dialogs/editorPreferencesDialog.js @@ -149,17 +149,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 +97,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 +124,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 +133,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..197e15ed 100644 --- a/src/editor/dialogs/imagePropertiesDialog.js +++ b/src/editor/dialogs/imagePropertiesDialog.js @@ -71,46 +71,46 @@ template.innerHTML = `
- - + +
- #{svgEditor.i18next.t('config.image_props')} +
- #{svgEditor.i18next.t('config.doc_dims')} +
- #{svgEditor.i18next.t('config.included_images')} +
@@ -141,12 +141,32 @@ 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 +177,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 +230,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;