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.
102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
class ButtonWidget extends BaseWidget {
|
|
$el;
|
|
#color = 'var(--prim)';
|
|
#fontSize = '45px';
|
|
#inline = true;
|
|
#pressed = false;
|
|
#touch = false;
|
|
|
|
constructor(data, renderer) {
|
|
super(data, renderer);
|
|
|
|
this.makeLayout({
|
|
type: 'button',
|
|
class: 'icon w_btn',
|
|
name: 'el',
|
|
text: "",
|
|
style: {
|
|
color: this.#color,
|
|
fill: this.#color,
|
|
fontSize: this.#fontSize,
|
|
width: 'unset',
|
|
},
|
|
events: {
|
|
click: () => this.set(2),
|
|
mousedown: () => {
|
|
if(this.#touch) return;
|
|
this.#pressed = true;
|
|
this.set(1);
|
|
},
|
|
mouseup: () => {
|
|
if(this.#touch || !this.#pressed) return;
|
|
this.#pressed = false;
|
|
this.set(0);
|
|
},
|
|
mouseleave: () => {
|
|
if(this.#touch || !this.#pressed) return;
|
|
this.#pressed = false;
|
|
this.set(0);
|
|
},
|
|
touchstart: () => {
|
|
this.#touch = true;
|
|
this.#pressed = true;
|
|
this.set(1);
|
|
},
|
|
touchend: () => {
|
|
this.#touch = false;
|
|
this.#pressed = false;
|
|
this.set(0);
|
|
},
|
|
},
|
|
});
|
|
|
|
this.update(data);
|
|
}
|
|
|
|
update(data) {
|
|
super.update(data);
|
|
|
|
if ('icon' in data) {
|
|
this.#setIcon(data.icon);
|
|
}
|
|
if ('color' in data) {
|
|
this.#color = intToCol(data.color);
|
|
|
|
this.$el.style.color = this.#color;
|
|
this.$el.style.fill = this.#color;
|
|
}
|
|
if ('fsize' in data) {
|
|
this.#fontSize = data.fsize + 'px';
|
|
|
|
const size = this.#fontSize;
|
|
this.$el.style.fontSize = size;
|
|
this.$el.style.width = this.#inline ? 'unset' : size;
|
|
}
|
|
if ('disable' in data) {
|
|
this.disable(this.$el, data.disable);
|
|
}
|
|
}
|
|
|
|
#setIcon(text) {
|
|
let icon = "";
|
|
this.$el.style.width = 'unset';
|
|
if (text) {
|
|
if (text.includes(".svg")) {
|
|
this.addFile(text, 'text', (data) => {
|
|
this.$el.innerHTML = data;
|
|
this.$el.style.width = this.#fontSize;
|
|
this.$el.style.fill = this.#color;
|
|
});
|
|
this.#inline = false;
|
|
return;
|
|
} else {
|
|
icon = getIcon(text);
|
|
}
|
|
}
|
|
this.$el.innerHTML = icon;
|
|
this.#inline = true;
|
|
}
|
|
}
|
|
|
|
Renderer.register('button', ButtonWidget);
|