Merge pull request #515 from OptimistikSAS/issues/101
#101 dialog i18n translation new approach changesmaster
JFH
GitHub
commit
a1723c3046
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = `
|
|||
<ul id="cmenu_canvas" class="contextMenu">
|
||||
<li>
|
||||
<a href="#cut" id="se-cut">
|
||||
#{svgEditor.i18next.t('tools.cut')}<span class="shortcut">META+X</span>
|
||||
<span class="shortcut">META+X</span>
|
||||
</a>
|
||||
</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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 = `
|
|||
<elix-dialog id="svg_prefs" aria-label="Editor Preferences" closed>
|
||||
<div id="svg_prefs_container">
|
||||
<div id="tool_prefs_back" class="toolbar_button">
|
||||
<button id="tool_prefs_save">
|
||||
#{svgEditor.i18next.t('common.ok')}
|
||||
</button>
|
||||
<button id="tool_prefs_cancel">
|
||||
#{svgEditor.i18next.t('common.cancel')}
|
||||
</button>
|
||||
<button id="tool_prefs_save"></button>
|
||||
<button id="tool_prefs_cancel"></button>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend id="svginfo_editor_prefs">#{svgEditor.i18next.t('config.editor_prefs')}</legend>
|
||||
<legend id="svginfo_editor_prefs"></legend>
|
||||
<label>
|
||||
<span id="svginfo_lang">#{svgEditor.i18next.t('config.language')}</span>
|
||||
<span id="svginfo_lang"></span>
|
||||
<!-- Source: https://en.wikipedia.org/wiki/Language_names -->
|
||||
<select id="lang_select">
|
||||
<option id="lang_ar" value="ar">العربية</option>
|
||||
|
|
@ -185,46 +180,46 @@ template.innerHTML = `
|
|||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_icons">#{svgEditor.i18next.t('config.icon_size')}</span>
|
||||
<span id="svginfo_icons"></span>
|
||||
<select id="iconsize">
|
||||
<option id="icon_small" value="s">#{svgEditor.i18next.t('config.icon_small')}</option>
|
||||
<option id="icon_medium" value="m" selected="selected">#{svgEditor.i18next.t('config.icon_medium')}</option>
|
||||
<option id="icon_large" value="l">#{svgEditor.i18next.t('config.icon_large')}</option>
|
||||
<option id="icon_xlarge" value="xl">#{svgEditor.i18next.t('config.icon_xlarge')}</option>
|
||||
<option id="icon_small" value="s"></option>
|
||||
<option id="icon_medium" value="m" selected="selected"></option>
|
||||
<option id="icon_large" value="l"></option>
|
||||
<option id="icon_xlarge" value="xl"></option>
|
||||
</select>
|
||||
</label>
|
||||
<fieldset id="change_background">
|
||||
<legend id="svginfo_change_background">#{svgEditor.i18next.t('config.background')}</legend>
|
||||
<legend id="svginfo_change_background"></legend>
|
||||
<div id="bg_blocks"></div>
|
||||
<label>
|
||||
<span id="svginfo_bg_url">#{svgEditor.i18next.t('common.url')}</span>
|
||||
<span id="svginfo_bg_url"></span>
|
||||
<input type="text" id="canvas_bg_url" />
|
||||
</label>
|
||||
<p id="svginfo_bg_note">#{svgEditor.i18next.t('config.editor_bg_note')}</p>
|
||||
<p id="svginfo_bg_note"></p>
|
||||
</fieldset>
|
||||
<fieldset id="change_grid">
|
||||
<legend id="svginfo_grid_settings">#{svgEditor.i18next.t('config.grid')}</legend>
|
||||
<legend id="svginfo_grid_settings"></legend>
|
||||
<label for="svginfo_snap_onoff">
|
||||
<span id="svginfo_snap_onoff">#{svgEditor.i18next.t('config.snapping_onoff')}</span>
|
||||
<span id="svginfo_snap_onoff"></span>
|
||||
<input type="checkbox" value="snapping_on" id="grid_snapping_on" />
|
||||
</label>
|
||||
<label for="grid_snapping_step">
|
||||
<span id="svginfo_snap_step">#{svgEditor.i18next.t('config.snapping_stepsize')}</span>
|
||||
<span id="svginfo_snap_step"></span>
|
||||
<input type="text" id="grid_snapping_step" size="3" value="10" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_grid_color">#{svgEditor.i18next.t('config.grid_color')}</span>
|
||||
<span id="svginfo_grid_color"></span>
|
||||
<input type="text" id="grid_color" size="3" value="#000" />
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset id="units_rulers">
|
||||
<legend id="svginfo_units_rulers">#{svgEditor.i18next.t('config.units_and_rulers')}</legend>
|
||||
<legend id="svginfo_units_rulers"></legend>
|
||||
<label>
|
||||
<span id="svginfo_rulers_onoff">#{svgEditor.i18next.t('config.show_rulers')}</span>
|
||||
<span id="svginfo_rulers_onoff"></span>
|
||||
<input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_unit">#{svgEditor.i18next.t('config.base_unit')}</span>
|
||||
<span id="svginfo_unit"></span>
|
||||
<select id="base_unit">
|
||||
<option value="px">Pixels</option>
|
||||
<option value="cm">Centimeters</option>
|
||||
|
|
@ -267,13 +262,39 @@ export class SeEditPrefsDialog extends HTMLElement {
|
|||
this.$showRulers = this._shadowRoot.querySelector('#show_rulers');
|
||||
this.$baseUnit = this._shadowRoot.querySelector('#base_unit');
|
||||
}
|
||||
/**
|
||||
* @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-editor_prefs', i18next.t('config.editor_prefs'));
|
||||
this.setAttribute('config-language', i18next.t('config.language'));
|
||||
this.setAttribute('config-icon_size', i18next.t('config.icon_size'));
|
||||
this.setAttribute('config-icon_small', i18next.t('config.icon_small'));
|
||||
this.setAttribute('config-icon_medium', i18next.t('config.icon_medium'));
|
||||
this.setAttribute('config-icon_large', i18next.t('config.icon_large'));
|
||||
this.setAttribute('config-icon_xlarge', i18next.t('config.icon_xlarge'));
|
||||
this.setAttribute('config-background', i18next.t('config.background'));
|
||||
this.setAttribute('common-url', i18next.t('common.url'));
|
||||
this.setAttribute('config-editor_bg_note', i18next.t('config.editor_bg_note'));
|
||||
this.setAttribute('config-grid', i18next.t('config.grid'));
|
||||
this.setAttribute('config-snapping_onoff', i18next.t('config.snapping_onoff'));
|
||||
this.setAttribute('config-snapping_stepsize', i18next.t('config.snapping_stepsize'));
|
||||
this.setAttribute('config-grid_color', i18next.t('config.grid_color'));
|
||||
this.setAttribute('config-units_and_rulers', i18next.t('config.units_and_rulers'));
|
||||
this.setAttribute('config-show_rulers', i18next.t('config.show_rulers'));
|
||||
this.setAttribute('config-base_unit', i18next.t('config.base_unit'));
|
||||
}
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
// eslint-disable-next-line max-len
|
||||
return [ 'dialog', 'lang', 'iconsize', 'canvasbg', 'bgurl', 'gridsnappingon', 'gridsnappingstep', 'gridcolor', 'showrulers', 'baseunit' ];
|
||||
return [ 'dialog', 'lang', 'iconsize', 'canvasbg', 'bgurl', 'gridsnappingon', 'gridsnappingstep', 'gridcolor', 'showrulers', 'baseunit', 'common-ok', 'common-cancel', 'config-editor_prefs', 'config-language', 'config-icon_size', 'config-icon_small', 'config-icon_medium', 'config-icon_large', 'config-icon_xlarge', 'config-background', 'common-url', 'config-editor_bg_note', 'config-grid', 'config-snapping_onoff', 'config-snapping_stepsize', 'config-grid_color', 'config-units_and_rulers', 'config-show_rulers', 'config-base_unit' ];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
|
|
@ -286,6 +307,7 @@ export class SeEditPrefsDialog extends HTMLElement {
|
|||
if (oldValue === newValue) return;
|
||||
const blocks = this.$bgBlocks.querySelectorAll('div');
|
||||
const curBg = 'cur_background';
|
||||
let node;
|
||||
switch (name) {
|
||||
case 'dialog':
|
||||
if (newValue === 'open') {
|
||||
|
|
@ -342,6 +364,80 @@ export class SeEditPrefsDialog extends HTMLElement {
|
|||
case 'baseunit':
|
||||
this.$baseUnit.value = newValue;
|
||||
break;
|
||||
case 'common-ok':
|
||||
this.$saveBtn.textContent = newValue;
|
||||
break;
|
||||
case 'common-cancel':
|
||||
this.$cancelBtn.textContent = newValue;
|
||||
break;
|
||||
case 'config-editor_prefs':
|
||||
node = this._shadowRoot.querySelector('#svginfo_editor_prefs');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-language':
|
||||
node = this._shadowRoot.querySelector('#svginfo_lang');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-icon_size':
|
||||
node = this._shadowRoot.querySelector('#svginfo_icons');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-icon_small':
|
||||
node = this._shadowRoot.querySelector('#icon_small');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-icon_medium':
|
||||
node = this._shadowRoot.querySelector('#icon_medium');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-icon_large':
|
||||
node = this._shadowRoot.querySelector('#icon_large');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-icon_xlarge':
|
||||
node = this._shadowRoot.querySelector('#icon_xlarge');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-background':
|
||||
node = this._shadowRoot.querySelector('#svginfo_change_background');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'common-url':
|
||||
node = this._shadowRoot.querySelector('#svginfo_bg_url');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-editor_bg_note':
|
||||
node = this._shadowRoot.querySelector('#svginfo_bg_note');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-grid':
|
||||
node = this._shadowRoot.querySelector('#svginfo_grid_settings');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-snapping_onoff':
|
||||
node = this._shadowRoot.querySelector('#svginfo_snap_onoff');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-snapping_stepsize':
|
||||
node = this._shadowRoot.querySelector('#svginfo_snap_step');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-grid_color':
|
||||
node = this._shadowRoot.querySelector('#svginfo_grid_color');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-units_and_rulers':
|
||||
node = this._shadowRoot.querySelector('#svginfo_units_rulers');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-show_rulers':
|
||||
node = this._shadowRoot.querySelector('#svginfo_rulers_onoff');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-base_unit':
|
||||
node = this._shadowRoot.querySelector('#svginfo_unit');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
/* gl#bals svgEditor */
|
||||
import './se-elix/define/NumberSpinBox.js';
|
||||
|
||||
const template = document.createElement('template');
|
||||
|
|
@ -58,9 +57,7 @@ template.innerHTML = `
|
|||
<div class="overlay"></div>
|
||||
<div id="dialog_container">
|
||||
<div id="dialog_content">
|
||||
<p class="se-select">
|
||||
#{svgEditor.i18next.t('ui.export_type_label')}
|
||||
</p>
|
||||
<p class="se-select" id="export_select"></p>
|
||||
<p class="se-select">
|
||||
<select id="se-storage-pref">
|
||||
<option value="PNG">PNG</option>
|
||||
|
|
@ -70,15 +67,11 @@ template.innerHTML = `
|
|||
<option value="PDF">PDF</option>
|
||||
</select>
|
||||
</p>
|
||||
<p id="se-quality">#{svgEditor.i18next.t('ui.quality')}<elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box></p>
|
||||
<p id="se-quality"><elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box></p>
|
||||
</div>
|
||||
<div id="dialog_buttons">
|
||||
<button id="export_ok">
|
||||
#{svgEditor.i18next.t('common.ok')}
|
||||
</button>
|
||||
<button id="export_cancel">
|
||||
#{svgEditor.i18next.t('common.cancel')}
|
||||
</button>
|
||||
<button id="export_ok"></button>
|
||||
<button id="export_cancel"></button>
|
||||
</div>
|
||||
</div>
|
||||
</elix-dialog>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
/* gl#bals svgEditor */
|
||||
import { isValidUnit } from '../../common/units.js';
|
||||
|
||||
const template = document.createElement('template');
|
||||
|
|
@ -71,46 +70,46 @@ template.innerHTML = `
|
|||
<elix-dialog id="svg_docprops" aria-label="Sample dialog" closed>
|
||||
<div id="svg_docprops_container">
|
||||
<div id="tool_docprops_back" class="toolbar_button">
|
||||
<button id="tool_docprops_save">#{svgEditor.i18next.t('common.ok')}</button>
|
||||
<button id="tool_docprops_cancel">#{svgEditor.i18next.t('common.cancel')}</button>
|
||||
<button id="tool_docprops_save"></button>
|
||||
<button id="tool_docprops_cancel"></button>
|
||||
</div>
|
||||
<fieldset id="svg_docprops_docprops">
|
||||
<legend id="svginfo_image_props">#{svgEditor.i18next.t('config.image_props')}</legend>
|
||||
<legend id="svginfo_image_props"></legend>
|
||||
<label>
|
||||
<span id="svginfo_title">#{svgEditor.i18next.t('config.doc_title')}</span>
|
||||
<span id="svginfo_title"></span>
|
||||
<input type="text" id="canvas_title" />
|
||||
</label>
|
||||
<fieldset id="change_resolution">
|
||||
<legend id="svginfo_dim">#{svgEditor.i18next.t('config.doc_dims')}</legend>
|
||||
<legend id="svginfo_dim"></legend>
|
||||
<label>
|
||||
<span id="svginfo_width">#{svgEditor.i18next.t('common.width')}</span>
|
||||
<span id="svginfo_width"></span>
|
||||
<input type="text" id="canvas_width" size="6" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_height">#{svgEditor.i18next.t('common.height')}</span>
|
||||
<span id="svginfo_height"></span>
|
||||
<input type="text" id="canvas_height" size="6" />
|
||||
</label>
|
||||
<label>
|
||||
<select id="resolution">
|
||||
<option id="selectedPredefined" selected="selected">#{svgEditor.i18next.t('config.select_predefined')}</option>
|
||||
<option id="selectedPredefined" selected="selected"></option>
|
||||
<option>640x480</option>
|
||||
<option>800x600</option>
|
||||
<option>1024x768</option>
|
||||
<option>1280x960</option>
|
||||
<option>1600x1200</option>
|
||||
<option id="fitToContent" value="content">#{svgEditor.i18next.t('tools.fitToContent')}</option>
|
||||
<option id="fitToContent" value="content"></option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset id="image_save_opts">
|
||||
<legend id="includedImages">#{svgEditor.i18next.t('config.included_images')}</legend>
|
||||
<legend id="includedImages"></legend>
|
||||
<label>
|
||||
<input type="radio" id="image_embed" name="image_opt" value="embed" checked="checked" />
|
||||
<span id="image_opt_embed">#{svgEditor.i18next.t('config.image_opt_embed')}</span>
|
||||
<span id="image_opt_embed"></span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" id="image_ref" name="image_opt" value="ref" />
|
||||
<span id="image_opt_ref">#{svgEditor.i18next.t('config.image_opt_ref')}</span>
|
||||
<span id="image_opt_ref"></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 = `
|
|||
<elix-dialog id="svg_source_editor" aria-label="SVG Source Editor" closed>
|
||||
<div id="svg_source_container">
|
||||
<div id="tool_source_back" class="toolbar_button">
|
||||
<button id="tool_source_save">
|
||||
#{svgEditor.i18next.t('tools.source_save')}
|
||||
</button>
|
||||
<button id="tool_source_cancel">
|
||||
#{svgEditor.i18next.t('common.cancel')}
|
||||
</button>
|
||||
<button id="tool_source_save"></button>
|
||||
<button id="tool_source_cancel"></button>
|
||||
</div>
|
||||
<div id="save_output_btns">
|
||||
<p id="copy_save_note">
|
||||
#{svgEditor.i18next.t('notification.source_dialog_note')}
|
||||
</p>
|
||||
<button id="copy_save_done">#{svgEditor.i18next.t('config.done')}</button>
|
||||
<p id="copy_save_note"></p>
|
||||
<button id="copy_save_done"></button>
|
||||
</div>
|
||||
<form>
|
||||
<textarea id="svg_source_textarea" spellcheck="false" rows="5" cols="80"></textarea>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue