From 799e765621a7cad8decacdf842706c1cd6ebff1f Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Thu, 21 Jan 2021 19:33:06 +0530 Subject: [PATCH] #46 Move this jQuery component to a web component for graduate and picker components --- src/editor/components/index.js | 1 + .../components/seColorGraduatePicker.js | 306 ++++++++++++++++++ src/editor/index.html | 1 + 3 files changed, 308 insertions(+) create mode 100644 src/editor/components/seColorGraduatePicker.js diff --git a/src/editor/components/index.js b/src/editor/components/index.js index 8f16e993..120e116b 100644 --- a/src/editor/components/index.js +++ b/src/editor/components/index.js @@ -10,3 +10,4 @@ import './seMenuItem.js'; import './seList.js'; import './seListItem.js'; import './seColorPicker.js'; +import './seColorGraduatePicker.js'; diff --git a/src/editor/components/seColorGraduatePicker.js b/src/editor/components/seColorGraduatePicker.js new file mode 100644 index 00000000..dcf07daf --- /dev/null +++ b/src/editor/components/seColorGraduatePicker.js @@ -0,0 +1,306 @@ +/* eslint-disable node/no-unpublished-import */ +import 'elix/define/PopupButton.js'; +import PaintBox from './PaintBox.js'; + +const template = document.createElement('template'); +template.innerHTML = ` + + +
+ + +
+
+
+ + + +`; +/** + * @class SeColorPicker + */ +export class SeColorPicker 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)); + this.$logo = this._shadowRoot.getElementById('logo'); + this.$label = this._shadowRoot.getElementById('label'); + this.$block = this._shadowRoot.getElementById('block'); + this.paintBox = null; + this.$picker = this._shadowRoot.getElementById('picker'); + this.$color_picker = this._shadowRoot.getElementById('color_picker'); + this.$tabs = this._shadowRoot.querySelectorAll('.se-tabs'); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['label', 'src', 'type']; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + switch (name) { + case 'src': + this.$logo.setAttribute('src', newValue); + break; + case 'label': + this.setAttribute('title', newValue); + break; + case 'type': + this.$label.setAttribute('title', `Pick a ${newValue} Paint and Opacity`); + break; + default: + // eslint-disable-next-line no-console + console.error(`unknown attribute: ${name}`); + break; + } + } + /** + * @function get + * @returns {any} + */ + get label () { + return this.$label.getAttribute('title'); + } + + /** + * @function set + * @returns {void} + */ + set label (value) { + this.setAttribute('label', value); + } + /** + * @function get + * @returns {any} + */ + get type () { + return this.getAttribute('type'); + } + + /** + * @function set + * @returns {void} + */ + set type (value) { + this.setAttribute('type', value); + } + /** + * @function get + * @returns {any} + */ + get src () { + return this.getAttribute('src'); + } + + /** + * @function set + * @returns {void} + */ + set src (value) { + this.setAttribute('src', value); + } + + /** + * @param {PlainObject} svgCanvas + * @param {PlainObject} selectedElement + * @param {bool} apply + * @returns {void} + */ + update (svgCanvas, selectedElement, apply) { + const paint = this.paintBox.update(svgCanvas, selectedElement); + if (paint && apply) { + const changeEvent = new CustomEvent('change', {detail: { + paint + }}); + this.dispatchEvent(changeEvent); + } + } + /** + * @param {PlainObject} paint + * @returns {void} + */ + setPaint (paint) { + this.paintBox.setPaint(paint); + } + + /** + * @function connectedCallback + * @returns {void} + */ + connectedCallback () { + this.paintBox = new PaintBox(this.$block, this.type); + const self = this._shadowRoot; + const onTabsClickHandler = (e) => { + e.target.parentElement.querySelectorAll('.se-tabs').forEach((ev) => { + ev.classList.remove('jGraduate_tab_current'); + self.getElementById(ev.dataset.section).style.display = 'none'; + }); + e.target.classList.add('jGraduate_tab_current'); + self.getElementById(e.target.dataset.section).style.display = 'block'; + }; + for (let i = 0; i < this.$tabs.length; i++) { + this.$tabs[i].addEventListener('click', onTabsClickHandler, false); + } + } +} + +// Register +customElements.define('se-color-graduate-picker', SeColorPicker); diff --git a/src/editor/index.html b/src/editor/index.html index 57700aaa..e55cef9d 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -331,6 +331,7 @@ + —