-
This commit is contained in:
@@ -5,136 +5,6 @@
|
||||
<meta charset="UTF-8" />
|
||||
<title>RktPlayer - A music player</title>
|
||||
<script src="../../webui-wire/js/menu.js"></script>
|
||||
<script>
|
||||
window._web_wire_popup_menu = function(menu, x = -1, y = -1, kind = 'popup') {
|
||||
if (menu.id == '#f') { menu.id = null; }
|
||||
let menu_id = (kind == 'popup') ? '@@popup-menu@@' : '@@menubar@@';
|
||||
let submenu_els = [];
|
||||
let triggerMenuItem;
|
||||
let clearPopupMenu = function() {
|
||||
if (kind == 'popup') {
|
||||
let el = document.getElementById(menu_id);
|
||||
if (el !== null) {
|
||||
el.innerHTML = '';
|
||||
el.style.display = 'none';
|
||||
}
|
||||
if (menu.id !== null) {
|
||||
// Delay this trigger, because one could have choosen a menu item and we want this
|
||||
// to be triggered before the clear command is send.
|
||||
// But if no menu item has been selected, the clear command should
|
||||
// eventually be send.
|
||||
setTimeout(function () {
|
||||
console.log("Sending clear trigger for menu clearance : " + menu.id);
|
||||
let obj = { evt: 'menu-item-choosen', item: menu.id };
|
||||
window._web_wire_put_evt(obj);
|
||||
}, 250);
|
||||
}
|
||||
} else {
|
||||
// hide all submenus
|
||||
submenu_els.forEach(function (el) { el.style.display = 'none'; });
|
||||
}
|
||||
};
|
||||
triggerMenuItem = function(id) {
|
||||
console.log("Triggering menu item : " + id);
|
||||
let obj = { evt: 'menu-item-choosen', item: id };
|
||||
window._web_wire_put_evt(obj);
|
||||
};
|
||||
let showSubMenu = function(menu_el, item_el, el, parent_type) {
|
||||
if (parent_type == 'menu') {
|
||||
el.style.display = 'flex';
|
||||
let rect = item_el.getBoundingClientRect();
|
||||
let r = rect.left;
|
||||
let t = rect.height;
|
||||
el.style.left = r + 'px';
|
||||
el.style.top = t + 'px';
|
||||
} else {
|
||||
el.style.display = "flex";
|
||||
let rect = menu_el.getBoundingClientRect();
|
||||
let irect =item_el.getBoundingClientRect();
|
||||
let r = rect.width + 5;
|
||||
let t = irect.y - rect.y;
|
||||
el.style.left = r + "px";
|
||||
el.style.top = t + "px";
|
||||
}
|
||||
};
|
||||
let hideSubMenu = function(el) { el.style.display = "none"; };
|
||||
let makePopupMenu = function(el, menu, visible, type) {
|
||||
let i;
|
||||
let N = menu.length;
|
||||
for(i = 0; i < N; i++) {
|
||||
let item = menu[i];
|
||||
let item_el = document.createElement("div");
|
||||
item_el.id = item.id;
|
||||
item_el.classList.add("menu-item");
|
||||
let item_el_icon = document.createElement('span');
|
||||
item_el_icon.classList.add("menu-icon");
|
||||
if (item.icon) {
|
||||
let icon_img = document.createElement('img');
|
||||
icon_img.setAttribute('src', item.icon);
|
||||
item_el_icon.appendChild(icon_img);
|
||||
}
|
||||
if (item.separator) {
|
||||
item_el.classList.add("separator");
|
||||
}
|
||||
let item_el_name = document.createElement('span');
|
||||
item_el_name.classList.add('menu-name');
|
||||
item_el_name.innerHTML = item.name;
|
||||
let item_el_submenu = document.createElement('span');
|
||||
item_el_submenu.classList.add('menu-submenu');
|
||||
if (item.submenu) {
|
||||
if (type == 'submenu' || kind == 'popup') {
|
||||
item_el_submenu.innerHTML = '>';
|
||||
}
|
||||
item_el.setAttribute('type', 'submenu');
|
||||
let submenu_el = document.createElement("div");
|
||||
submenu_els.push(submenu_el);
|
||||
submenu_el.classList.add("submenu");
|
||||
submenu_el.classList.add("menu");
|
||||
item_el.appendChild(submenu_el);
|
||||
submenu_el.style.display = 'none';
|
||||
makePopupMenu(submenu_el, item.submenu.menu, false, 'submenu');
|
||||
item_el.addEventListener('mouseenter', function () { showSubMenu(el, item_el, submenu_el, type); });
|
||||
item_el.addEventListener('mouseleave', function () { hideSubMenu(submenu_el); });
|
||||
} else {
|
||||
item_el.setAttribute('type', 'item');
|
||||
item_el.addEventListener('click', function() { triggerMenuItem(item.id); });
|
||||
}
|
||||
item_el.appendChild(item_el_icon);
|
||||
item_el.appendChild(item_el_name);
|
||||
item_el.appendChild(item_el_submenu);
|
||||
el.appendChild(item_el);
|
||||
}
|
||||
};
|
||||
let el = document.getElementById(menu_id);
|
||||
if (el === null) {
|
||||
el = document.createElement("div");
|
||||
el.id = menu_id;
|
||||
el.classList.add((kind == 'popup') ? "popup-menu" : "menubar");
|
||||
if (kind == 'popup') {
|
||||
el.classList.add("menu");
|
||||
document.body.appendChild(el);
|
||||
} else {
|
||||
document.body.prepend(el);
|
||||
}
|
||||
} else {
|
||||
el.innerHTML = '';
|
||||
}
|
||||
makePopupMenu(el, menu.menu, true, 'menu');
|
||||
el.style.left = x + "px";
|
||||
el.style.top = y + "px";
|
||||
el.style.display = "flex";
|
||||
let clearer_f = function() {
|
||||
clearPopupMenu();
|
||||
document.body.removeEventListener('click', clearer_f);
|
||||
document.body.removeEventListener('contextmenu', clearer_f);
|
||||
};
|
||||
document.body.addEventListener('click', clearer_f);
|
||||
document.body.addEventListener('contextmenu', clearer_f);
|
||||
};
|
||||
window._web_wire_menu = function(menubar) {
|
||||
window._web_wire_popup_menu(menubar, -1, -1, 'menubar');
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="pane">
|
||||
|
||||
Reference in New Issue
Block a user