116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
var PageList: PageList = {
|
|
elements: {
|
|
container: document.querySelector('.pageselector')
|
|
},
|
|
|
|
order: null,
|
|
|
|
firstRender: true,
|
|
|
|
render(pagelist: PageListItem[]) {
|
|
var list = ce('div', 'list');
|
|
|
|
PageList.order = pagelist.map((page) => {
|
|
return page.pageID;
|
|
});
|
|
|
|
pagelist.forEach((pagelistitem, index) => {
|
|
var pageitem = ce('div', 'pageitem', { pageID: pagelistitem.pageID });
|
|
var name = ce('div', 'name', null, pagelistitem.name);
|
|
pageitem.appendChild(name);
|
|
var move = ce('div', 'move');
|
|
|
|
var up = ce('div', [
|
|
'moveitem',
|
|
'up'
|
|
]);
|
|
up.appendChild(ce('img', 'normal', { src: '/stc/icon/up.png' }));
|
|
up.appendChild(ce('img', 'selected', { src: '/stc/icon/up_gray.png' }));
|
|
var down = ce('div', [
|
|
'moveitem',
|
|
'down'
|
|
]);
|
|
down.appendChild(ce('img', 'normal', { src: '/stc/icon/down.png' }));
|
|
down.appendChild(ce('img', 'selected', { src: '/stc/icon/down_gray.png' }));
|
|
up.onclick = (e: MouseEvent) => {
|
|
e.stopPropagation();
|
|
|
|
var current = PageList.order.indexOf(pagelistitem.pageID);
|
|
var newIndex = Math.max(current - 1, 0);
|
|
|
|
PageList.order.splice(current, 1);
|
|
PageList.order.splice(newIndex, 0, pagelistitem.pageID);
|
|
|
|
socket.emit('page', 'setorder', PageList.order);
|
|
};
|
|
down.onclick = (e: MouseEvent) => {
|
|
e.stopPropagation();
|
|
|
|
var current = PageList.order.indexOf(pagelistitem.pageID);
|
|
var newIndex = Math.max(current + 1, 0);
|
|
|
|
PageList.order.splice(current, 1);
|
|
PageList.order.splice(newIndex, 0, pagelistitem.pageID);
|
|
|
|
socket.emit('page', 'setorder', PageList.order);
|
|
};
|
|
move.appendChild(up);
|
|
move.appendChild(down);
|
|
pageitem.appendChild(move);
|
|
pageitem.onclick = () => {
|
|
PageHandler.request(pagelistitem.pageID, index);
|
|
};
|
|
list.appendChild(pageitem);
|
|
|
|
if (PageHandler.currentPageID == pagelistitem.pageID) {
|
|
PageHandler.request(pagelistitem.pageID, index);
|
|
}
|
|
});
|
|
|
|
var existing = PageList.elements.container.querySelector('.list');
|
|
if (existing) existing.parentElement.removeChild(existing);
|
|
PageList.elements.container.appendChild(list);
|
|
},
|
|
|
|
select(pageID: string): boolean {
|
|
var selectedFound = false;
|
|
PageList.elements.container.querySelectorAll('.pageitem').forEach((item: HTMLDivElement) => {
|
|
var itemPageID = item.getAttribute('pageID');
|
|
if (itemPageID == pageID) {
|
|
item.classList.add('selected');
|
|
selectedFound = true;
|
|
} else item.classList.remove('selected');
|
|
});
|
|
|
|
if (selectedFound) {
|
|
history.pushState(null, null, `/pages/${pageID}`);
|
|
TabController.setTitle(`Page ${pageID}`);
|
|
}
|
|
return selectedFound;
|
|
},
|
|
|
|
updateName(pageID: string, name: string) {
|
|
var item = PageList.elements.container.querySelector(`.pageitem[pageid="${pageID}"]`);
|
|
if (item) {
|
|
var nameElement: HTMLDivElement = item.querySelector('.name');
|
|
nameElement.innerText = name;
|
|
}
|
|
}
|
|
};
|
|
|
|
interface PageList {
|
|
elements: {
|
|
container: HTMLDivElement;
|
|
};
|
|
firstRender: boolean;
|
|
order: string[];
|
|
|
|
render: (pagelist: PageListItem[]) => void;
|
|
select: (pageID: string) => boolean;
|
|
updateName: (pageID: string, name: string) => void;
|
|
}
|
|
interface PageListItem {
|
|
pageID: string;
|
|
name: string;
|
|
}
|