142 lines
3.1 KiB
TypeScript
142 lines
3.1 KiB
TypeScript
var PageHandler: PageHandler = {
|
|
elements: {
|
|
pagename: document.querySelector('.pagename'),
|
|
left: document.querySelector('.pageselector').querySelector('.box.left'),
|
|
right: document.querySelector('.pageselector').querySelector('.box.right'),
|
|
add: document.querySelector('.pageselector').querySelector('.box.add')
|
|
},
|
|
|
|
currentPageID: null,
|
|
currentPage: null,
|
|
currentIndex: null,
|
|
|
|
request(pageID: string, index: number) {
|
|
socket.emit('page', 'request', pageID, (err?: string, page?: Page_Config) => {
|
|
if (err) UndeckedNotification(`Error whilst getting page ${pageID}: ${err}`, 'error', 5000);
|
|
else {
|
|
PageHandler.currentIndex = index;
|
|
PageHandler.render(page);
|
|
}
|
|
});
|
|
},
|
|
|
|
render(page: Page_Config) {
|
|
KeyHandler.clear();
|
|
|
|
PageHandler.currentPageID = page.pageID;
|
|
PageHandler.currentPage = page;
|
|
|
|
PageList.select(page.pageID);
|
|
|
|
PageHandler.elements.pagename.value = page.name;
|
|
PageHandler.elements.pagename.removeAttribute('disabled');
|
|
|
|
for (var y in page.keys) {
|
|
for (var x in page.keys[y]) {
|
|
KeyHandler.render(x, y, page.keys[y][x]);
|
|
}
|
|
}
|
|
},
|
|
|
|
listeners() {
|
|
PageHandler.elements.pagename.oninput = () => {
|
|
if (PageHandler.currentPageID != null && PageHandler.elements.pagename.value.length > 0) {
|
|
socket.emit('page', 'setname', PageHandler.currentPageID, PageHandler.elements.pagename.value);
|
|
}
|
|
};
|
|
|
|
PageHandler.elements.add.onclick = () => {
|
|
var pageName = prompt('New page name', 'Untitled page');
|
|
if (pageName && pageName.length > 0) {
|
|
socket.emit('page', 'create', pageName);
|
|
}
|
|
};
|
|
|
|
PageHandler.elements.left.onclick = () => {
|
|
var selected = document.querySelector('.pageitem.selected');
|
|
if (selected && selected.previousElementSibling) (<HTMLElement>selected.previousElementSibling).click();
|
|
};
|
|
|
|
PageHandler.elements.right.onclick = () => {
|
|
var selected = document.querySelector('.pageitem.selected');
|
|
if (selected && selected.nextElementSibling) (<HTMLElement>selected.nextElementSibling).click();
|
|
};
|
|
}
|
|
};
|
|
|
|
PageHandler.listeners();
|
|
|
|
interface PageHandler {
|
|
elements: {
|
|
pagename: HTMLInputElement;
|
|
|
|
left: HTMLDivElement;
|
|
right: HTMLDivElement;
|
|
add: HTMLDivElement;
|
|
};
|
|
|
|
currentPageID: string;
|
|
currentPage: Page_Config;
|
|
currentIndex: number;
|
|
|
|
request: (pageID: string, index: number) => void;
|
|
render: (page: Page_Config) => void;
|
|
listeners: () => void;
|
|
}
|
|
|
|
interface Page_Config {
|
|
pageID: string;
|
|
name?: string;
|
|
|
|
keys?: Page_Config_Keys;
|
|
}
|
|
|
|
interface Page_Config_Keys {
|
|
'0'?: {
|
|
'0'?: Page_Key;
|
|
'1'?: Page_Key;
|
|
'2'?: Page_Key;
|
|
'3'?: Page_Key;
|
|
'4'?: Page_Key;
|
|
'5'?: Page_Key;
|
|
'6'?: Page_Key;
|
|
'7'?: Page_Key;
|
|
'8'?: Page_Key;
|
|
};
|
|
'1'?: {
|
|
'0'?: Page_Key;
|
|
'1'?: Page_Key;
|
|
'2'?: Page_Key;
|
|
'3'?: Page_Key;
|
|
'4'?: Page_Key;
|
|
'5'?: Page_Key;
|
|
'6'?: Page_Key;
|
|
'7'?: Page_Key;
|
|
'8'?: Page_Key;
|
|
};
|
|
'2'?: {
|
|
'0'?: Page_Key;
|
|
'1'?: Page_Key;
|
|
'2'?: Page_Key;
|
|
'3'?: Page_Key;
|
|
'4'?: Page_Key;
|
|
'5'?: Page_Key;
|
|
'6'?: Page_Key;
|
|
'7'?: Page_Key;
|
|
'8'?: Page_Key;
|
|
};
|
|
'3'?: {
|
|
'0'?: Page_Key;
|
|
'1'?: Page_Key;
|
|
'2'?: Page_Key;
|
|
'3'?: Page_Key;
|
|
'4'?: Page_Key;
|
|
'5'?: Page_Key;
|
|
'6'?: Page_Key;
|
|
'7'?: Page_Key;
|
|
'8'?: Page_Key;
|
|
};
|
|
}
|
|
|
|
type Icon = '';
|