#631 <div> ${i18next.t(‘tools.fit_to_layer_content’)} </div> would become <se-text text=“tools.fit_to_layer_content”><se-text>

master
agriyadev5 2021-09-22 18:17:15 +05:30
parent 755c375a9e
commit e7373064fa
3 changed files with 109 additions and 11 deletions

View File

@ -10,5 +10,6 @@ import './seMenuItem.js';
import './seList.js';
import './seListItem.js';
import './seColorPicker.js';
import './seSelect';
import './seSelect.js';
import './seText.js';

View File

@ -0,0 +1,97 @@
import { t } from '../locale.js';
const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
<style>
</style>
<div></div>
`;
/**
* @class SeText
*/
export class SeText extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
// locate the component
this.$div = this._shadowRoot.querySelector('div');
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return [ 'text', 'value', 'style' ];
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return;
switch (name) {
case 'text':
this.$div.setAttribute('title', t(newValue));
break;
case 'style':
this.$div.style = newValue;
break;
case 'value':
this.$div.value = newValue;
break;
default:
// eslint-disable-next-line no-console
console.error(`unknown attribute: ${name}`);
break;
}
}
/**
* @function get
* @returns {any}
*/
get text () {
return this.getAttribute('text');
}
/**
* @function set
* @returns {void}
*/
set text (value) {
this.setAttribute('text', value);
}
/**
* @function get
* @returns {any}
*/
get value () {
return this.value;
}
/**
* @function set
* @returns {void}
*/
set value (value) {
this.value = value;
}
/**
* @function connectedCallback
* @returns {void}
*/
connectedCallback () {
// capture shortcuts
}
}
// Register
customElements.define('se-text', SeText);

View File

@ -170,16 +170,16 @@ class BottomPanel {
<div id="tools_bottom">
<!-- Zoom buttons -->
<se-zoom id="zoom" src="zoom.svg" title="Change zoom level" inputsize="40px">
<div value="1000">1000</div>
<div value="400">400</div>
<div value="200">200</div>
<div value="100">100</div>
<div value="50">50</div>
<div value="25">25</div>
<div value="canvas">${i18next.t('tools.fit_to_canvas')}</div>
<div value="selection">${i18next.t('tools.fit_to_sel')}</div>
<div value="layer">${i18next.t('tools.fit_to_layer_content')}</div>
<div value="content">${i18next.t('tools.fit_to_all')}</div>
<se-text value="1000" text="1000"></se-text>
<se-text value="400" text="400"></se-text>
<se-text value="200" text="200"></se-text>
<se-text value="100" text="100"></se-text>
<se-text value="50" text="50"></se-text>
<se-text value="25" text="25"></se-text>
<se-text value="canvas" text="tools.fit_to_canvas"></se-text>
<se-text value="selection" text="tools.fit_to_sel"></se-text>
<se-text value="layer" text="tools.fit_to_layer_content"></se-text>"
<se-text value="content" text="tools.fit_to_all"></se-text>
</se-zoom>
<se-colorpicker id="fill_color" src="fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="stroke.svg" label="properties.stroke_color" type="stroke"></se-colorpicker>