refactor
This commit is contained in:
JFH
@@ -1,69 +1,53 @@
|
||||
/* eslint-disable node/no-unpublished-import */
|
||||
// import DelegateInputLabelMixin from 'elix/src/base/DelegateInputLabelMixin.js';
|
||||
// import html from 'elix/src/core/html.js';
|
||||
import Input from 'elix/src/base/Input.js';
|
||||
import {defaultState} from 'elix/src/base/internal.js';
|
||||
import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
|
||||
// import ReactiveElement from 'elix/src/core/ReactiveElement.js';
|
||||
import {internal} from 'elix';
|
||||
import 'elix/define/Input.js';
|
||||
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
img {
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
position: relative;
|
||||
}
|
||||
span {
|
||||
bottom: 1px;
|
||||
right: -4px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/logo.svg" alt="icon" width="12" height="12" />
|
||||
<span id="label">label</span>
|
||||
<elix-input></elix-input>
|
||||
`;
|
||||
|
||||
/**
|
||||
* @class SeInput
|
||||
* @class SEInput
|
||||
*/
|
||||
class SeInput extends Input {
|
||||
export class SEInput extends HTMLElement {
|
||||
/**
|
||||
* @function get
|
||||
* @returns {PlainObject}
|
||||
*/
|
||||
get [defaultState] () {
|
||||
return Object.assign(super[defaultState], {
|
||||
label: '',
|
||||
src: '',
|
||||
inputsize: '100%',
|
||||
value: ''
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {PlainObject}
|
||||
*/
|
||||
get [internal.template] () {
|
||||
const result = super[internal.template];
|
||||
result.content.prepend(fragmentFrom.html`
|
||||
<label>
|
||||
<span class="icon_label">
|
||||
<img src="./images/logo.svg" alt="icon" width="18" height="18" />
|
||||
</span>
|
||||
</label>`.cloneNode(true));
|
||||
// change the style so it fits in our toolbar
|
||||
result.content.append(
|
||||
templateFrom.html`
|
||||
<style>
|
||||
[part~="input"] {
|
||||
margin-top: 5px;
|
||||
height: 23px;
|
||||
}
|
||||
.icon_label {
|
||||
float: left;
|
||||
padding-top: 3px;
|
||||
padding-right: 3px;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
`.content
|
||||
);
|
||||
return result;
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
// create the shadowDom and insert the template
|
||||
this._shadowRoot = this.attachShadow({mode: 'open'});
|
||||
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
||||
// locate the component
|
||||
this.$img = this._shadowRoot.querySelector('img');
|
||||
this.$label = this.shadowRoot.getElementById('label');
|
||||
this.$event = new CustomEvent('change');
|
||||
this.$input = this._shadowRoot.querySelector('elix-input');
|
||||
}
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['value', 'class', 'inputsize', 'label', 'src'];
|
||||
return ['value', 'label', 'src', 'size'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
@@ -74,103 +58,100 @@ class SeInput extends Input {
|
||||
*/
|
||||
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;
|
||||
this.$img.setAttribute('src', newValue);
|
||||
this.$label.remove();
|
||||
break;
|
||||
case 'inputsize':
|
||||
this.inputsize = newValue;
|
||||
case 'size':
|
||||
this.$input.setAttribute('size', newValue);
|
||||
break;
|
||||
case 'label':
|
||||
this.$label.textContent = newValue;
|
||||
this.$img.remove();
|
||||
break;
|
||||
case 'value':
|
||||
this.$input.value = newValue;
|
||||
break;
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`unknown attribute: ${name}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function [internal.render]
|
||||
* @param {PlainObject} changed
|
||||
* @returns {void}
|
||||
*/
|
||||
[internal.render] (changed) {
|
||||
super[internal.render](changed);
|
||||
// console.log(this, changed);
|
||||
if (this[internal.firstRender]) {
|
||||
// this.$img = this.shadowRoot.querySelector('img');
|
||||
this.$input = this.shadowRoot.getElementById('inner');
|
||||
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.style.width = this[internal.state].inputsize;
|
||||
}
|
||||
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
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get label () {
|
||||
return this[internal.state].label;
|
||||
return this.getAttribute('label');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function label
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set label (label) {
|
||||
this[internal.setState]({label});
|
||||
set label (value) {
|
||||
this.setAttribute('label', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get value () {
|
||||
return this.$input.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set value (value) {
|
||||
this.$input.value = value;
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get src () {
|
||||
return this.getAttribute('src');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set src (value) {
|
||||
this.setAttribute('src', value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get size () {
|
||||
return this.getAttribute('size');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set size (value) {
|
||||
this.setAttribute('size', value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
this.addEventListener('change', (e) => {
|
||||
e.preventDefault();
|
||||
this.value = e.target.value;
|
||||
});
|
||||
this.dispatchEvent(this.$event);
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-input', SeInput);
|
||||
customElements.define('se-input', SEInput);
|
||||
|
||||
Reference in New Issue
Block a user