From e7373064faca07cb9b337194c581dfe1991cc532 Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Wed, 22 Sep 2021 18:17:15 +0530
Subject: [PATCH] =?UTF-8?q?#631=20<div>=20${i18next.t(=E2=80=98tools.fit?=
 =?UTF-8?q?=5Fto=5Flayer=5Fcontent=E2=80=99)}=20</div>=20would=20become=20?=
 =?UTF-8?q?<se-text=20text=3D=E2=80=9Ctools.fit=5Fto=5Flayer=5Fcontent?=
 =?UTF-8?q?=E2=80=9D><se-text>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/components/index.js   |  3 +-
 src/editor/components/seText.js  | 97 ++++++++++++++++++++++++++++++++
 src/editor/panels/BottomPanel.js | 20 +++----
 3 files changed, 109 insertions(+), 11 deletions(-)
 create mode 100644 src/editor/components/seText.js

diff --git a/src/editor/components/index.js b/src/editor/components/index.js
index e59f23c2..01644416 100644
--- a/src/editor/components/index.js
+++ b/src/editor/components/index.js
@@ -10,5 +10,6 @@ import './seMenuItem.js';
 import './seList.js';
 import './seListItem.js';
 import './seColorPicker.js';
-import './seSelect';
+import './seSelect.js';
+import './seText.js';
 
diff --git a/src/editor/components/seText.js b/src/editor/components/seText.js
new file mode 100644
index 00000000..179a4763
--- /dev/null
+++ b/src/editor/components/seText.js
@@ -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);
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index d6b63844..07790e55 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -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>