#101 dialogs i18n new approach changes

master
Agriya Dev5 2021-05-21 14:47:14 +05:30
parent 396a60f518
commit 94a98ca8f7
2 changed files with 65 additions and 19 deletions

View File

@ -87,11 +87,9 @@ class EditorStartup {
document.body.append(newSeEditPrefsDialog);
// canvas menu added to DOM
const dialogBox = document.createElement('se-cmenu_canvas-dialog');
dialogBox.setAttribute('id', 'se-cmenu_canvas');
// dialogBox.setAttribute('toolscut', this.i18next.t('tools.cut'));
dialogBox.setAttribute('id', 'se-cmenu_canvas');
document.body.append(dialogBox);
dialogBox.init(this.i18next);
console.log(dialogBox);
// alertDialog added to DOM
const alertBox = document.createElement('se-alert-dialog');
alertBox.setAttribute('id', 'se-alert-dialog');

View File

@ -73,48 +73,48 @@ template.innerHTML = `
</li>
<li>
<a href="#copy" id="se-copy">
#{svgEditor.i18next.t('tools.copy')}<span class="shortcut">META+C</span>
<span class="shortcut">META+C</span>
</a>
</li>
<li>
<a href="#paste" id="se-paste">#{svgEditor.i18next.t('tools.paste')}</a>
<a href="#paste" id="se-paste"></a>
</li>
<li>
<a href="#paste_in_place" id="se-paste-in-place">#{svgEditor.i18next.t('tools.paste_in_place')}</a>
<a href="#paste_in_place" id="se-paste-in-place"></a>
</li>
<li class="separator">
<a href="#delete" id="se-delete">
#{svgEditor.i18next.t('tools.delete')}<span class="shortcut">BACKSPACE</span>
<span class="shortcut">BACKSPACE</span>
</a>
</li>
<li class="separator">
<a href="#group" id="se-group">
#{svgEditor.i18next.t('tools.group')}<span class="shortcut">G</span>
<span class="shortcut">G</span>
</a>
</li>
<li>
<a href="#ungroup" id="se-ungroup">
#{svgEditor.i18next.t('tools.ungroup')}<span class="shortcut">G</span>
<span class="shortcut">G</span>
</a>
</li>
<li class="separator">
<a href="#move_front" id="se-move-front">
#{svgEditor.i18next.t('tools.move_front')}<span class="shortcut">CTRL+SHFT+]</span>
<span class="shortcut">CTRL+SHFT+]</span>
</a>
</li>
<li>
<a href="#move_up" id="se-move-up">
#{svgEditor.i18next.t('tools.move_up')}<span class="shortcut">CTRL+]</span>
<span class="shortcut">CTRL+]</span>
</a>
</li>
<li>
<a href="#move_down" id="se-move-down">
#{svgEditor.i18next.t('tools.move_down')}<span class="shortcut">CTRL+[</span>
<span class="shortcut">CTRL+[</span>
</a>
</li>
<li>
<a href="#move_back" id="se-move-back">
#{svgEditor.i18next.t('tools.move_back')}<span class="shortcut">CTRL+SHFT+[</span>
<span class="shortcut">CTRL+SHFT+[</span>
</a>
</li>
</ul>
@ -146,15 +146,24 @@ export class SeCMenuDialog extends HTMLElement {
this.$moveBackLink = this._shadowRoot.querySelector('#se-move-back');
}
init (i18next) {
console.log(i18next);
this.setAttribute('toolscut', 'a test');
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', 'toolscut' ];
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
@ -165,6 +174,7 @@ export class SeCMenuDialog extends HTMLElement {
*/
attributeChangedCallback (name, oldValue, newValue) {
let eles = [];
let textnode;
const sdowRoot = this._shadowRoot;
switch (name) {
case 'disableallmenu':
@ -189,9 +199,47 @@ export class SeCMenuDialog extends HTMLElement {
selEle.parentElement.classList.add('disabled');
});
break;
case 'toolscut':
var textnode = document.createTextNode(newValue);
this._shadowRoot.querySelector('#se-cut').prepend(textnode);
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);