You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
3.7 KiB
JavaScript
139 lines
3.7 KiB
JavaScript
class InputWidget extends BaseWidget {
|
|
$el;
|
|
#changed;
|
|
#regex;
|
|
|
|
constructor(data, renderer) {
|
|
super(data, renderer);
|
|
|
|
this.makeLayout({
|
|
type: 'div',
|
|
class: 'w_inp_cont',
|
|
children: [
|
|
{
|
|
type: 'input',
|
|
class: 'w_inp',
|
|
name: 'el',
|
|
events: {
|
|
keydown: e => {
|
|
if (e.key == 'Enter') this.#send(true);
|
|
},
|
|
input: () => {
|
|
this.#changed = true;
|
|
},
|
|
focusout: () => {
|
|
this.#send();
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
this.$el.type = 'text';
|
|
|
|
this.update(data);
|
|
}
|
|
|
|
update(data) {
|
|
super.update(data);
|
|
if ('regex' in data) this.#regex = data.regex;
|
|
if ('color' in data) this.$el.style.boxShadow = '0px 2px 0px 0px ' + intToCol(data.color);
|
|
if ('value' in data) this.$el.value = data.value;
|
|
if ('maxlen' in data) this.$el.maxlength = Math.ceil(data.maxlen);
|
|
if ('disable' in data) this.disable(this.$el, data.disable);
|
|
}
|
|
|
|
#send(force = false) {
|
|
if (this.#regex) {
|
|
const r = new RegExp(this.#regex);
|
|
if (!r.test(this.$el.value)) {
|
|
showPopupError("Wrong text!");
|
|
return;
|
|
}
|
|
}
|
|
if (force || this.#changed) {
|
|
this.#changed = false;
|
|
this.set(this.$el.value);
|
|
}
|
|
}
|
|
}
|
|
|
|
Renderer.register('input', InputWidget);
|
|
|
|
|
|
class PassWidget extends BaseWidget {
|
|
$el;
|
|
#changed;
|
|
#regex;
|
|
|
|
constructor(data, renderer) {
|
|
super(data, renderer);
|
|
|
|
this.makeLayout({
|
|
type: 'div',
|
|
class: 'w_inp_cont',
|
|
children: [
|
|
{
|
|
type: 'input',
|
|
class: 'w_inp',
|
|
name: 'el',
|
|
events: {
|
|
keydown: e => {
|
|
if (e.key == 'Enter') this.#send(true);
|
|
},
|
|
input: () => {
|
|
this.#changed = true;
|
|
},
|
|
focusout: () => {
|
|
this.#send();
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'div',
|
|
class: 'btn_inp_block',
|
|
children: [
|
|
{
|
|
type: 'button',
|
|
class: 'icon w_eye',
|
|
text: '',
|
|
events: {
|
|
click: () => {
|
|
this.$el.type = this.$el.type == 'text' ? 'password' : 'text';
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
});
|
|
this.$el.type = 'password';
|
|
|
|
this.update(data);
|
|
}
|
|
|
|
update(data) {
|
|
super.update(data);
|
|
if ('regex' in data) this.#regex = data.regex;
|
|
if ('color' in data) this.$el.style.boxShadow = '0px 2px 0px 0px ' + intToCol(data.color);
|
|
if ('value' in data) this.$el.value = data.value;
|
|
if ('maxlen' in data) this.$el.maxlength = Math.ceil(data.maxlen);
|
|
if ('disable' in data) this.disable(this.$el, data.disable);
|
|
}
|
|
|
|
#send(force = false) {
|
|
if (this.#regex) {
|
|
const r = new RegExp(this.#regex);
|
|
if (!r.test(this.$el.value)) {
|
|
showPopupError("Wrong text!");
|
|
return;
|
|
}
|
|
}
|
|
if (force || this.#changed) {
|
|
this.#changed = false;
|
|
this.set(this.$el.value);
|
|
}
|
|
}
|
|
}
|
|
|
|
Renderer.register('pass', PassWidget);
|