60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
|
let Items = [];
|
||
|
|
let Open = false;
|
||
|
|
|
||
|
|
function CreateMenu(data) {
|
||
|
|
Items = [];
|
||
|
|
for (let i = 0; i < data.length; i++) {
|
||
|
|
let e = "";
|
||
|
|
let header = data[i].header ? data[i].header : "";
|
||
|
|
let text = data[i].text ? data[i].text : "";
|
||
|
|
let icon = data[i].icon ? data[i].icon : "";
|
||
|
|
let color = data[i].color ? data[i].color: "";
|
||
|
|
|
||
|
|
e = $(`
|
||
|
|
<div class="item" onclick="MenuSelect(${i})">
|
||
|
|
<div class="menu-icon">
|
||
|
|
<span style="color:${color};"><i class="${icon}"></i></span>
|
||
|
|
</div>
|
||
|
|
<div class="menu-text">
|
||
|
|
<div class="header">${header}</div>
|
||
|
|
<div class="text">${text}</div>
|
||
|
|
</div>
|
||
|
|
</div>`
|
||
|
|
);
|
||
|
|
Items[i] = data[i];
|
||
|
|
$('#menu-items').append(e);
|
||
|
|
}
|
||
|
|
Open = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('message', (event) => {
|
||
|
|
if (event.data.action === 'menu-open' && event.data.data != null) {
|
||
|
|
CreateMenu(event.data.data)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener("keydown", function(ev) {
|
||
|
|
let key_pressed = ev.key;
|
||
|
|
let valid_keys = ['Escape'];
|
||
|
|
|
||
|
|
if (valid_keys.includes(key_pressed) && Open) {
|
||
|
|
switch (key_pressed) {
|
||
|
|
case 'Escape':
|
||
|
|
MenuClose()
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function MenuClose() {
|
||
|
|
$.post('https://ps-ui/menuClose', JSON.stringify({"ok":true}));
|
||
|
|
$(".item").remove();
|
||
|
|
Open = false
|
||
|
|
}
|
||
|
|
|
||
|
|
function MenuSelect(id) {
|
||
|
|
let data = Items[id];
|
||
|
|
$.post(`https://ps-ui/MenuSelect`, JSON.stringify({"data":data, "ok":true}));
|
||
|
|
MenuClose();
|
||
|
|
}
|