zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#101 dialogs i18n new approach implement

master
Agriya Dev5 2021-05-21 18:03:19 +05:30
parent 94a98ca8f7
commit c60d1bf645
5 changed files with 240 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/editor/EditorStartup.js
View File

@ -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);
}

5
src/editor/dialogs/cmenuDialog.js
View File

@ -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'));

145
src/editor/dialogs/editorPreferencesDialog.js
View File

@ -149,17 +149,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 +181,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 +263,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 +308,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 +365,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;

42
src/editor/dialogs/exportDialog.js
View File

@ -58,9 +58,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 +68,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 +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;

93
src/editor/dialogs/imagePropertiesDialog.js
View File

@ -71,46 +71,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 +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;