@jxstjh/jhvideo
Version:
HTML5 jhvideo base on MPEG2-TS Stream Player
209 lines • 8.04 kB
JavaScript
/* Author: @UnrealSec */
var ContextMenu = /** @class */ (function () {
function ContextMenu(container, items) {
var _this = this;
this.container = container;
this.dom = null;
this.shown = false;
this.root = true;
this.parent = null;
this.submenus = [];
this.items = items;
this._onclick = function (e) {
if (_this.dom && e.target != _this.dom &&
e.target.parentElement != _this.dom &&
!e.target.classList.contains('item') &&
!e.target.parentElement.classList.contains('item')) {
e.stopPropagation();
_this.hideAll();
}
};
this._oncontextmenu = function (e) {
e.preventDefault();
if (e.target != _this.dom &&
e.target.parentElement != _this.dom &&
!e.target.classList.contains('item') &&
!e.target.parentElement.classList.contains('item')) {
_this.hideAll();
_this.show(e.clientX, e.clientY);
}
};
this._oncontextmenu_keydown = function (e) {
if (e.keyCode != 93)
return;
e.preventDefault();
_this.hideAll();
_this.show(e.clientX, e.clientY);
};
this._onblur = function (e) {
_this.hideAll();
};
}
ContextMenu.prototype.setMenu = function (items) {
this.items = items;
};
ContextMenu.prototype.getMenuDom = function () {
var menu = document.createElement('div');
menu.classList.add('context');
for (var _i = 0, _a = this.items; _i < _a.length; _i++) {
var item = _a[_i];
menu.appendChild(this.itemToDomEl(item));
}
return menu;
};
ContextMenu.prototype.itemToDomEl = function (data) {
var _this = this;
var item = document.createElement('div');
if (data === null) {
item.classList = 'separator';
return item;
}
if (data.hasOwnProperty('color') && /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(data.color.toString())) {
item.style.cssText = "color: ".concat(data.color);
}
item.classList.add('item');
var label = document.createElement('span');
label.classList = 'label';
label.innerText = data.hasOwnProperty('text') ? data['text'].toString() : '';
item.appendChild(label);
if (data.hasOwnProperty('disabled') && data['disabled']) {
item.classList.add('disabled');
}
else {
item.classList.add('enabled');
}
var hotkey = document.createElement('span');
hotkey.classList = 'hotkey';
hotkey.innerText = data.hasOwnProperty('hotkey') ? data['hotkey'].toString() : '';
item.appendChild(hotkey);
if (data.hasOwnProperty('subitems') && Array.isArray(data['subitems']) && data['subitems'].length > 0) {
var menu_1 = new ContextMenu(this.container, data['subitems']);
menu_1.root = false;
menu_1.parent = this;
var openSubItems = function (e) {
if (data.hasOwnProperty('disabled') && data['disabled'] == true)
return;
_this.hideSubMenus();
var x = _this.dom.offsetLeft + _this.dom.clientWidth + item.offsetLeft;
var y = _this.dom.offsetTop + item.offsetTop;
if (!menu_1.shown) {
menu_1.show(x, y);
}
else {
menu_1.hide();
}
};
this.submenus.push(menu_1);
item.classList.add('has-subitems');
item.addEventListener('click', openSubItems);
item.addEventListener('mousemove', openSubItems);
}
else if (data.hasOwnProperty('submenu') && data['submenu'] instanceof ContextMenu) {
var menu_2 = data['submenu'];
menu_2.root = false;
menu_2.parent = this;
var openSubItems = function (e) {
if (data.hasOwnProperty('disabled') && data['disabled'] == true)
return;
_this.hideSubMenus();
var x = _this.dom.offsetLeft + _this.dom.clientWidth + item.offsetLeft;
var y = _this.dom.offsetTop + item.offsetTop;
if (!menu_2.shown) {
menu_2.show(x, y);
}
else {
menu_2.hide();
}
};
this.submenus.push(menu_2);
item.classList.add('has-subitems');
item.addEventListener('click', openSubItems);
item.addEventListener('mousemove', openSubItems);
}
else {
item.addEventListener('click', function (e) {
_this.hideSubMenus();
if (item.classList.contains('disabled'))
return;
if (data.hasOwnProperty('onclick') && typeof data['onclick'] === 'function') {
var event_1 = {
handled: false,
item: item,
label: label,
hotkey: hotkey,
items: _this.items,
data: data
};
data['onclick'](event_1);
if (!event_1.handled) {
_this.hide();
}
}
else {
_this.hide();
}
});
item.addEventListener('mousemove', function (e) {
_this.hideSubMenus();
});
}
return item;
};
ContextMenu.prototype.hideAll = function () {
if (this.root && !this.parent) {
if (this.shown) {
this.hideSubMenus();
this.shown = false;
this.container.removeChild(this.dom);
if (this.parent && this.parent.shown) {
this.parent.hide();
}
}
return;
}
this.parent.hide();
};
ContextMenu.prototype.hide = function () {
if (this.dom && this.shown) {
this.shown = false;
this.hideSubMenus();
this.container.removeChild(this.dom);
if (this.parent && this.parent.shown) {
this.parent.hide();
}
}
};
ContextMenu.prototype.hideSubMenus = function () {
for (var _i = 0, _a = this.submenus; _i < _a.length; _i++) {
var menu = _a[_i];
if (menu.shown) {
menu.shown = false;
menu.container.removeChild(menu.dom);
}
menu.hideSubMenus();
}
};
ContextMenu.prototype.show = function (x, y) {
this.dom = this.getMenuDom();
this.dom.style.left = "".concat(x, "px");
this.dom.style.top = "".concat(y, "px");
this.shown = true;
this.container.appendChild(this.dom);
};
ContextMenu.prototype.install = function () {
this.container.addEventListener('contextmenu', this._oncontextmenu);
this.container.addEventListener('keydown', this._oncontextmenu_keydown);
this.container.addEventListener('click', this._onclick);
window.addEventListener('blur', this._onblur);
};
ContextMenu.prototype.uninstall = function () {
this.dom = null;
this.container.removeEventListener('contextmenu', this._oncontextmenu);
this.container.removeEventListener('keydown', this._oncontextmenu_keydown);
this.container.removeEventListener('click', this._onclick);
window.removeEventListener('blur', this._onblur);
};
return ContextMenu;
}());
export { ContextMenu };
//# sourceMappingURL=context.js.map