From 2221f3a0b82e1f0e5063de76bf7c3a1f0012d672 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Wed, 18 Nov 2020 17:38:36 +0530 Subject: [PATCH 1/3] #sespinInput NumberSpinBox implement and se-spin-input webcomponenet added changes --- src/editor/components/index.js | 1 + src/editor/components/seSpinInput.js | 192 +++++++++++++++++++++++++++ src/editor/images/angle.svg | 4 + src/editor/index.html | 9 +- src/editor/svgedit.js | 36 ++--- 5 files changed, 215 insertions(+), 27 deletions(-) create mode 100644 src/editor/components/seSpinInput.js create mode 100644 src/editor/images/angle.svg diff --git a/src/editor/components/index.js b/src/editor/components/index.js index 72583d5d..07b104cf 100644 --- a/src/editor/components/index.js +++ b/src/editor/components/index.js @@ -3,3 +3,4 @@ import './seFlyingButton.js'; import './seExplorerButton.js'; import './seDropdown.js'; import './seInput.js'; +import './seSpinInput.js'; diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js new file mode 100644 index 00000000..c85ca23f --- /dev/null +++ b/src/editor/components/seSpinInput.js @@ -0,0 +1,192 @@ +/* eslint-disable node/no-unpublished-import */ +import NumberSpinBox from 'elix/define/NumberSpinBox.js'; +import {defaultState} from 'elix/src/base/internal.js'; +import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js'; +import {internal} from 'elix'; + +/** + * @class SeSpinInput + */ +class SeSpinInput extends NumberSpinBox { + /** + * @function get + * @returns {PlainObject} + */ + get [defaultState] () { + return Object.assign(super[defaultState], { + label: '', + src: '', + inputsize: '100%', + value: '', + min: 1, + step: 1 + }); + } + + /** + * @function get + * @returns {PlainObject} + */ + get [internal.template] () { + const result = super[internal.template]; + result.content.prepend(fragmentFrom.html` + `.cloneNode(true)); + // change the style so it fits in our toolbar + result.content.append( + templateFrom.html` + + `.content + ); + return result; + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['value', 'class', 'inputsize', 'label', 'src', 'min', 'max', 'step']; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + console.log({this: this, name, oldValue, newValue}); + switch (name) { + case 'label': + this.label = newValue; + break; + case 'src': + this.src = newValue; + break; + case 'inputsize': + this.inputsize = newValue; + break; + default: + super.attributeChangedCallback(name, oldValue, newValue); + break; + } + } + /** + * @function [internal.render] + * @param {PlainObject} changed + * @returns {void} + */ + [internal.render] (changed) { + super[internal.render](changed); + if (this[internal.firstRender]) { + this.$input = this.shadowRoot.getElementById('input'); + this.$label = this.shadowRoot.querySelector('label'); + this.$img = this.shadowRoot.querySelector('img'); + this.$span = this.shadowRoot.querySelector('span'); + this.$event = new CustomEvent('change'); + this.addEventListener('change', (e) => { + e.preventDefault(); + this.value = e.target.value; + }); + } + if (changed.inputsize) { + this.$input.shadowRoot.querySelector('[part~="input"]').style.width = this[internal.state].inputsize; + } + // TODO: label alignment issue problem. now hide label + this.$label.style.display = 'none'; + if (changed.src) { + if (this[internal.state].src !== '') { + this.$img.src = this[internal.state].src; + this.$img.style.display = 'block'; + } + } + if (changed.label) { + if (this[internal.state].label !== '') { + this.$span.prepend(this[internal.state].label); + this.$img.style.display = 'none'; + } + } + if (changed.value) { + this.dispatchEvent(this.$event); + } + } + /** + * @function inputsize + * @returns {string} inputsize + */ + get inputsize () { + return this[internal.state].inputsize; + } + /** + * @function inputsize + * @returns {void} + */ + set inputsize (inputsize) { + this[internal.setState]({inputsize}); + } + /** + * @function src + * @returns {string} src + */ + get src () { + return this[internal.state].src; + } + /** + * @function src + * @returns {void} + */ + set src (src) { + this[internal.setState]({src}); + } + /** + * @function label + * @returns {string} label + */ + get label () { + return this[internal.state].label; + } + /** + * @function label + * @returns {void} + */ + set label (label) { + this[internal.setState]({label}); + } +} + +// Register +customElements.define('se-spin-input', SeSpinInput); diff --git a/src/editor/images/angle.svg b/src/editor/images/angle.svg new file mode 100644 index 00000000..81a47b09 --- /dev/null +++ b/src/editor/images/angle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/editor/index.html b/src/editor/index.html index e4121c02..6e316f03 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -152,7 +152,7 @@
@@ -283,7 +283,7 @@
@@ -385,8 +385,7 @@