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.
72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
class TabsWidget extends BaseWidget {
|
|
$el;
|
|
$ul;
|
|
|
|
constructor(data, renderer) {
|
|
super(data, renderer);
|
|
|
|
this.makeLayout({
|
|
type: 'div',
|
|
class: 'w_tabs',
|
|
name: 'el',
|
|
children: [
|
|
{
|
|
type: 'ul',
|
|
name: 'ul',
|
|
events: {
|
|
wheel: e => {
|
|
e.preventDefault();
|
|
this.$ul.scrollLeft += e.deltaY;
|
|
},
|
|
click: e => {
|
|
if (this.$el.getAttribute("disabled")) return;
|
|
const tabId = e.target.dataset.tabId;
|
|
if (tabId === undefined) return;
|
|
this.set(tabId);
|
|
this.#change(tabId, false);
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
|
|
this.disable(this.$el, data.disable);
|
|
this.update(data);
|
|
waitFrame().then(() => this.#change(data.value ?? 0));
|
|
}
|
|
|
|
update(data) {
|
|
super.update(data);
|
|
|
|
if ('text' in data) {
|
|
const tabs = [];
|
|
if (data.text) {
|
|
const labels = data.text.split(/[,;]/);
|
|
for (const i in labels) {
|
|
const $i = createElement(null, {
|
|
type: 'li',
|
|
text: labels[i].trim(),
|
|
});
|
|
$i.dataset.tabId = i;
|
|
tabs.push($i);
|
|
}
|
|
}
|
|
this.$ul.replaceChildren(...tabs);
|
|
}
|
|
if ('value' in data) this.#change(Number(data.value));
|
|
if ('color' in data) this.$ul.style.setProperty('--active-item-color', intToCol(data.color));
|
|
}
|
|
|
|
#change(num, move = true) {
|
|
const list = this.$ul.children;
|
|
for (let i = 0; i < list.length; i++) {
|
|
if (i == num) list[i].classList.add('w_tab_act');
|
|
else list[i].classList.remove('w_tab_act');
|
|
}
|
|
if (move) this.$ul.scrollLeft = this.$ul.scrollWidth * num / list.length;
|
|
}
|
|
}
|
|
|
|
Renderer.register('tabs', TabsWidget);
|