From b364daf19323085c7515ec77166691fed5d114a6 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Sat, 22 May 2021 11:13:21 +0530 Subject: [PATCH 1/4] #102 components i18n new approach changes --- src/editor/components/sePalette.js | 33 +++++++++++++++++++++++++++--- src/editor/panels/BottomPanel.js | 1 + 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/editor/components/sePalette.js b/src/editor/components/sePalette.js index 1272a7c2..66844a1a 100644 --- a/src/editor/components/sePalette.js +++ b/src/editor/components/sePalette.js @@ -1,5 +1,4 @@ /* eslint-disable max-len */ -/* gl#bals svgEditor */ const palette = [ // Todo: Make into configuration item? 'none', '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff', @@ -78,8 +77,7 @@ template.innerHTML = ` } } -
+
@@ -127,6 +125,35 @@ export class SEPalette extends HTMLElement { }); } + /** + * @function init + * @param {any} name + * @returns {void} + */ + init (i18next) { + this.setAttribute('ui-palette_info', i18next.t('ui.palette_info')); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return [ 'ui-palette_info' ]; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + let node; + if (name === 'ui-palette_info') { + node = this._shadowRoot.querySelector('#palette_holder'); + node.setAttribute('title', newValue); + } + } /** * @function connectedCallback * @returns {void} diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index 34191440..0e46d1be 100644 --- a/src/editor/panels/BottomPanel.js +++ b/src/editor/panels/BottomPanel.js @@ -215,6 +215,7 @@ class BottomPanel { `; this.editor.$svgEditor.append(template.content.cloneNode(true)); $id('palette').addEventListener('change', this.handlePalette.bind(this)); + $id('palette').init(i18next); const { curConfig } = this.editor.configObj; $id('fill_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initFill.color })); $id('stroke_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initStroke.color })); From 61957b7d4e375f7a62bf2df70be2efa8d4d031a5 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Sat, 22 May 2021 11:37:56 +0530 Subject: [PATCH 2/4] #102 components i18n new approach changes --- src/editor/components/seColorPicker.js | 16 +++++++++++++--- src/editor/panels/BottomPanel.js | 2 ++ 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js index 9fe6f888..10d2aad0 100644 --- a/src/editor/components/seColorPicker.js +++ b/src/editor/components/seColorPicker.js @@ -1,5 +1,4 @@ /* eslint-disable max-len */ -/* gl#bals svgEditor */ import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js'; import PaintBox from './PaintBox.js'; @@ -643,7 +642,7 @@ div.jGraduate_Slider img {
- +
@@ -669,12 +668,20 @@ export class SeColorPicker extends HTMLElement { this.$picker = this._shadowRoot.getElementById('picker'); this.$color_picker = this._shadowRoot.getElementById('color_picker'); } + /** + * @function init + * @param {any} name + * @returns {void} + */ + init (i18next) { + this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color')); + } /** * @function observedAttributes * @returns {any} observed */ static get observedAttributes () { - return [ 'label', 'src', 'type' ]; + return [ 'label', 'src', 'type', 'config-change_xxx_color' ]; } /** * @function attributeChangedCallback @@ -695,6 +702,9 @@ export class SeColorPicker extends HTMLElement { case 'type': this.$label.setAttribute('title', 'config.pick_paint_opavity'); break; + case 'config-change_xxx_color': + this.$label.setAttribute('title', newValue); + break; default: // eslint-disable-next-line no-console console.error(`unknown attribute: ${name}`); diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index 0e46d1be..ad7e521b 100644 --- a/src/editor/panels/BottomPanel.js +++ b/src/editor/panels/BottomPanel.js @@ -227,6 +227,8 @@ class BottomPanel { $id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt)); $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt)); $id('opacity').addEventListener('change', this.handleOpacity.bind(this)); + $id('fill_color').init(i18next); + $id('stroke_color').init(i18next); } /** * @type {module} From fc2e1fa0381bfc36d9d0d1c4349381bafc9843bc Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Sat, 22 May 2021 12:53:36 +0530 Subject: [PATCH 3/4] #102 coponent i18n new approach changes --- .../components/jgraduate/jQuery.jGraduate.js | 72 ++++++++++--------- .../components/jgraduate/jQuery.jPicker.js | 38 +++++----- src/editor/components/seColorPicker.js | 5 +- 3 files changed, 60 insertions(+), 55 deletions(-) diff --git a/src/editor/components/jgraduate/jQuery.jGraduate.js b/src/editor/components/jgraduate/jQuery.jGraduate.js index 6e14a3bd..22ef3182 100644 --- a/src/editor/components/jgraduate/jQuery.jGraduate.js +++ b/src/editor/components/jgraduate/jQuery.jGraduate.js @@ -1,7 +1,6 @@ /* eslint-disable no-loop-func */ /* eslint-disable prefer-destructuring */ /* eslint-disable no-unsanitized/property */ -/* gl#bals svgEditor */ /** * @file jGraduate 0.4 * @@ -189,7 +188,7 @@ function mkElem (name, attrs, newparent) { * @param {external:jQuery.fn.jGraduate.CancelCallback} [cancelCallback] Called with no arguments when Cancel is pressed * @returns {external:jQuery} */ -export function jGraduateMethod (elem, options, okCallback, cancelCallback) { +export function jGraduateMethod (elem, options, okCallback, cancelCallback, i18next) { const $this = elem, $settings = Object.assign({}, jGraduateDefaults, options || {}), id = $this.getAttribute('id'), @@ -237,9 +236,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { $this.classList.add('jGraduate_Picker'); // eslint-disable-next-line no-unsanitized/property $this.innerHTML = `
    -
  • #svgEditor.i18next.t('config.jgraduate_solid_color')}
    • -
  • #svgEditor.i18next.t('config.jgraduate_linear_gradient')}
    • -
  • #svgEditor.i18next.t('config.jgraduate_radial_gradient')}
    • +
  • ${i18next.t('config.jgraduate_solid_color')}
    • +
  • ${i18next.t('config.jgraduate_linear_gradient')}
    • +
  • ${i18next.t('config.jgraduate_radial_gradient')}
@@ -256,88 +255,88 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
- +
- + - +
- +
- + - +
- +
- + - +
- +
-
+
- + - +
- +
- -
+ +
- -
+ +
- -
+ +
- +
- -
+ +
- - + +
`; const div = document.createElement('div'); div.innerHTML = html; @@ -637,7 +636,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { }, null, function () { $this.querySelector('#jGraduate_LightBox').style.display = 'none'; $this.querySelector('#' + id + '_jGraduate_stopPicker').style.display = 'none'; - }); + }, + i18next + ); }); const jqStopEls = curGradient.querySelectorAll('stop'); for (const jqStopEl of jqStopEls) { @@ -1197,7 +1198,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { okClicked(); }, null, - function () { cancelClicked(); } + function () { cancelClicked(); }, + i18next ); // JFH !!!! diff --git a/src/editor/components/jgraduate/jQuery.jPicker.js b/src/editor/components/jgraduate/jQuery.jPicker.js index 61b0190f..b4f6ce55 100755 --- a/src/editor/components/jgraduate/jQuery.jPicker.js +++ b/src/editor/components/jgraduate/jQuery.jPicker.js @@ -603,7 +603,7 @@ const { Color, List, ColorMethods } = jPicker; // local copies for YUI compresso * @param {module:jPicker.CancelCallback} [cancelCallback] * @returns {void} */ -export function jPickerMethod (elem, options, commitCallback, liveCallback, cancelCallback) { +export function jPickerMethod (elem, options, commitCallback, liveCallback, cancelCallback, i18next) { let sets = mergeDeep({}, jPickerDefaults); // local copies for YUI compressor sets = mergeDeep(sets, options); @@ -632,7 +632,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc content.innerHTML = `     -   +     `; that.insertAdjacentElement('afterend', content); @@ -1331,39 +1331,39 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc

${win.title || 'config.jpicker_title'}

   
      
- #svgEditor.i18next.t('config.jpicker_new_color')}
  
#svgEditor.i18next.t('config.jpicker_current_color')} -
+ ${i18next.t('config.jpicker_new_color')}
  
${i18next.t('config.jpicker_current_color')} +
- -  ° + +  ° - -  % + +  % -

-  %

+

+  %

- - + + - - + + - - + + - ${win.alphaSupport ? `` : ' '} - ${win.alphaSupport ? ` %` : ' '} + ${win.alphaSupport ? `` : ' '} + ${win.alphaSupport ? ` %` : ' '} - ${win.alphaSupport ? `` : ' '} + ${win.alphaSupport ? `` : ' '} `; if (win.expandable) { diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js index 10d2aad0..55570939 100644 --- a/src/editor/components/seColorPicker.js +++ b/src/editor/components/seColorPicker.js @@ -665,6 +665,7 @@ export class SeColorPicker extends HTMLElement { this.$label = this._shadowRoot.getElementById('label'); this.$block = this._shadowRoot.getElementById('block'); this.paintBox = null; + this.i18next = null; this.$picker = this._shadowRoot.getElementById('picker'); this.$color_picker = this._shadowRoot.getElementById('color_picker'); } @@ -674,6 +675,7 @@ export class SeColorPicker extends HTMLElement { * @returns {void} */ init (i18next) { + this.i18next = i18next; this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color')); } /** @@ -807,7 +809,8 @@ export class SeColorPicker extends HTMLElement { }, () => { this.$color_picker.style.display = 'none'; - } + }, + this.i18next ); }); } From 93dadb387b927bab53e6dbf3d3f9f56342a4e77d Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Sat, 22 May 2021 16:21:42 +0530 Subject: [PATCH 4/4] #102 extension storage i18n new approach changes --- .../extensions/ext-storage/ext-storage.js | 1 + .../extensions/ext-storage/storageDialog.js | 74 +++++++++++++------ 2 files changed, 54 insertions(+), 21 deletions(-) diff --git a/src/editor/extensions/ext-storage/ext-storage.js b/src/editor/extensions/ext-storage/ext-storage.js index 9495c890..d75e985e 100644 --- a/src/editor/extensions/ext-storage/ext-storage.js +++ b/src/editor/extensions/ext-storage/ext-storage.js @@ -83,6 +83,7 @@ export default { const storageBox = document.createElement('se-storage-dialog'); storageBox.setAttribute('id', 'se-storage-dialog'); document.body.append(storageBox); + storageBox.init(svgEditor.i18next); // manage the change in the storageDialog diff --git a/src/editor/extensions/ext-storage/storageDialog.js b/src/editor/extensions/ext-storage/storageDialog.js index 92f4a2af..93333678 100644 --- a/src/editor/extensions/ext-storage/storageDialog.js +++ b/src/editor/extensions/ext-storage/storageDialog.js @@ -1,15 +1,5 @@ /* eslint-disable max-len */ -/* globals svgEditor */ const template = document.createElement('template'); -const notification = svgEditor.i18next.t('notification.editorPreferencesMsg'); -const prefs_and_content = svgEditor.i18next.t('properties.prefs_and_content'); -const prefs_only = svgEditor.i18next.t('properties.prefs_only'); -const no_prefs_or_content = svgEditor.i18next.t('properties.no_prefs_or_content'); -const remember_this_choice = svgEditor.i18next.t('tools.remember_this_choice'); -const remember_this_choice_title = svgEditor.i18next.t('tools.remember_this_choice_title'); -const ok = svgEditor.i18next.t('common.ok'); -const cancel = svgEditor.i18next.t('common.cancel'); -// eslint-disable-next-line no-unsanitized/property template.innerHTML = `