Andrew Zambazos
378 lines
14 KiB
JavaScript
378 lines
14 KiB
JavaScript
/*
|
|
* Copyright (C) 2011 Google Inc. All Rights Reserved.
|
|
* Copyright (C) 2017 Sony Interactive Entertainment Inc.
|
|
*
|
|
* Redistribution and use in source and binary forms, with or without
|
|
* modification, are permitted provided that the following conditions
|
|
* are met:
|
|
* 1. Redistributions of source code must retain the above copyright
|
|
* notice, this list of conditions and the following disclaimer.
|
|
* 2. Redistributions in binary form must reproduce the above copyright
|
|
* notice, this list of conditions and the following disclaimer in the
|
|
* documentation and/or other materials provided with the distribution.
|
|
*
|
|
* THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
|
|
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
|
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
|
|
* CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
|
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
|
|
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
|
|
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
|
|
* OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
*/
|
|
|
|
WI.SoftContextMenu = class SoftContextMenu
|
|
{
|
|
constructor(items, parentMenu)
|
|
{
|
|
this._items = items;
|
|
this._parentMenu = parentMenu;
|
|
}
|
|
|
|
// Public
|
|
|
|
show(event)
|
|
{
|
|
const isSubMenu = !!this._parentMenu;
|
|
|
|
this._contextMenuElement = document.createElement("div");
|
|
this._contextMenuElement.className = "soft-context-menu";
|
|
this._contextMenuElement.style.left = event.pageX + "px";
|
|
this._contextMenuElement.style.top = event.pageY + "px";
|
|
this._contextMenuElement.tabIndex = 0;
|
|
this._contextMenuElement.addEventListener("keydown", this._menuKeyDown.bind(this), false);
|
|
for (let item of this._items)
|
|
this._contextMenuElement.appendChild(this._createMenuItem(item));
|
|
|
|
// Install glass pane capturing events.
|
|
if (!isSubMenu) {
|
|
this._glassPaneElement = document.createElement("div");
|
|
this._glassPaneElement.className = "soft-context-menu-glass-pane";
|
|
this._glassPaneElement.addEventListener("mousedown", this._glassPaneMouseDown.bind(this), false);
|
|
this._glassPaneElement.appendChild(this._contextMenuElement);
|
|
document.body.appendChild(this._glassPaneElement);
|
|
this._focus();
|
|
this._consumeEvent(event, true);
|
|
} else
|
|
this._parentGlassPaneElement().appendChild(this._contextMenuElement);
|
|
|
|
this._repositionMenuOnScreen(isSubMenu);
|
|
}
|
|
|
|
// Private
|
|
|
|
_consumeEvent(event, preventDefault)
|
|
{
|
|
event.stopImmediatePropagation();
|
|
|
|
if (preventDefault)
|
|
event.preventDefault();
|
|
|
|
event.handled = true;
|
|
}
|
|
|
|
_parentGlassPaneElement()
|
|
{
|
|
if (!this._parentMenu)
|
|
return null;
|
|
|
|
if (this._parentMenu._glassPaneElement)
|
|
return this._parentMenu._glassPaneElement;
|
|
|
|
return this._parentMenu._parentGlassPaneElement();
|
|
}
|
|
|
|
_createMenuItem(item)
|
|
{
|
|
if (item.type === "separator")
|
|
return this._createSeparator();
|
|
|
|
const checkmark = "\u2713";
|
|
const blackRightPointingTriangle = "\u25b6";
|
|
|
|
const menuItemElement = document.createElement("div");
|
|
menuItemElement.className = "item";
|
|
if (!item.enabled)
|
|
menuItemElement.classList.add("disabled");
|
|
|
|
const checkMarkElement = document.createElement("span");
|
|
checkMarkElement.textContent = item.checked ? checkmark : "";
|
|
checkMarkElement.className = "checkmark";
|
|
menuItemElement.appendChild(checkMarkElement);
|
|
|
|
const labelElement = document.createElement("span");
|
|
labelElement.textContent = item.label;
|
|
labelElement.className = "label";
|
|
menuItemElement.appendChild(labelElement);
|
|
|
|
if (item.type === "subMenu") {
|
|
const subMenuArrowElement = document.createElement("span");
|
|
subMenuArrowElement.textContent = blackRightPointingTriangle;
|
|
subMenuArrowElement.className = "submenu-arrow";
|
|
menuItemElement.appendChild(subMenuArrowElement);
|
|
|
|
menuItemElement._subItems = item.subItems;
|
|
} else
|
|
menuItemElement._actionId = item.id;
|
|
|
|
menuItemElement.addEventListener("contextmenu", this._menuItemContextMenu.bind(this), false);
|
|
menuItemElement.addEventListener("mousedown", this._menuItemMouseDown.bind(this), false);
|
|
menuItemElement.addEventListener("mouseup", this._menuItemMouseUp.bind(this), false);
|
|
menuItemElement.addEventListener("mouseover", this._menuItemMouseOver.bind(this), false);
|
|
menuItemElement.addEventListener("mouseout", this._menuItemMouseOut.bind(this), false);
|
|
|
|
return menuItemElement;
|
|
}
|
|
|
|
_createSeparator()
|
|
{
|
|
const separatorElement = document.createElement("div");
|
|
separatorElement.className = "separator";
|
|
separatorElement._isSeparator = true;
|
|
separatorElement.createChild("div", "line");
|
|
|
|
separatorElement.addEventListener("contextmenu", this._menuItemContextMenu.bind(this), false);
|
|
separatorElement.addEventListener("mousedown", this._menuItemMouseDown.bind(this), false);
|
|
separatorElement.addEventListener("mouseup", this._menuItemMouseUp.bind(this), false);
|
|
separatorElement.addEventListener("mouseover", this._menuItemMouseOver.bind(this), false);
|
|
|
|
return separatorElement;
|
|
}
|
|
|
|
_repositionMenuOnScreen(isSubMenu)
|
|
{
|
|
if (this._contextMenuElement.offsetLeft + this._contextMenuElement.offsetWidth > document.body.offsetWidth) {
|
|
if (isSubMenu) {
|
|
const parentContextMenuElement = this._parentMenu._contextMenuElement;
|
|
const leftOfParent = parentContextMenuElement.offsetLeft - this._contextMenuElement.offsetWidth + 2;
|
|
const fromParentRight = this._contextMenuElement.offsetLeft - this._contextMenuElement.offsetWidth + 2;
|
|
this._contextMenuElement.style.left = (leftOfParent >= 0 ? leftOfParent : fromParentRight) + "px";
|
|
} else {
|
|
const leftOfCursor = this._contextMenuElement.offsetLeft - this._contextMenuElement.offsetWidth;
|
|
const fromRightEdge = document.body.offsetWidth - this._contextMenuElement.offsetWidth;
|
|
this._contextMenuElement.style.left = (leftOfCursor >= 0 ? leftOfCursor : fromRightEdge) + "px";
|
|
}
|
|
}
|
|
|
|
if (this._contextMenuElement.offsetTop + this._contextMenuElement.offsetHeight > document.body.offsetHeight) {
|
|
const aboveCursor = this._contextMenuElement.offsetTop - this._contextMenuElement.offsetHeight;
|
|
const fromBottomEdge = document.body.offsetHeight - this._contextMenuElement.offsetHeight;
|
|
this._contextMenuElement.style.top = (!isSubMenu && aboveCursor >= 0 ? aboveCursor : fromBottomEdge) + "px";
|
|
}
|
|
}
|
|
|
|
_showSubMenu(menuItemElement)
|
|
{
|
|
if (menuItemElement._subMenuTimer) {
|
|
clearTimeout(menuItemElement._subMenuTimer);
|
|
menuItemElement._subMenuTimer = 0;
|
|
}
|
|
|
|
if (this._subMenu)
|
|
return;
|
|
|
|
this._subMenu = new WI.SoftContextMenu(menuItemElement._subItems, this);
|
|
this._subMenu.show({
|
|
pageX: this._contextMenuElement.offsetLeft + menuItemElement.offsetWidth,
|
|
pageY: this._contextMenuElement.offsetTop + menuItemElement.offsetTop - 4
|
|
});
|
|
}
|
|
|
|
_hideSubMenu()
|
|
{
|
|
if (!this._subMenu)
|
|
return;
|
|
|
|
this._subMenu._discardSubMenus();
|
|
this._focus();
|
|
}
|
|
|
|
_menuItemContextMenu(event)
|
|
{
|
|
// Prevent our non-native context menu from getting a native context menu on right-click.
|
|
this._consumeEvent(event, true);
|
|
}
|
|
|
|
_menuItemMouseDown(event)
|
|
{
|
|
// Prevent menu from disappearing before mouseup.
|
|
this._consumeEvent(event, true);
|
|
}
|
|
|
|
_menuItemMouseUp(event)
|
|
{
|
|
this._triggerAction(event.target, event);
|
|
this._consumeEvent(event);
|
|
}
|
|
|
|
_menuItemMouseOver(event)
|
|
{
|
|
this._highlightMenuItem(event.target._isSeparator ? null : event.target);
|
|
}
|
|
|
|
_menuItemMouseOut(event)
|
|
{
|
|
const shouldUnhighlight = !this._subMenu || !event.relatedTarget ||
|
|
this._contextMenuElement.contains(event.relatedTarget) ||
|
|
event.relatedTarget.classList.contains("soft-context-menu-glass-pane");
|
|
|
|
if (shouldUnhighlight)
|
|
this._highlightMenuItem(null);
|
|
}
|
|
|
|
_menuKeyDown(event)
|
|
{
|
|
switch (event.keyIdentifier) {
|
|
case "Up":
|
|
this._highlightPrevious();
|
|
break;
|
|
case "Down":
|
|
this._highlightNext();
|
|
break;
|
|
case "Left":
|
|
if (this._parentMenu) {
|
|
this._highlightMenuItem(null);
|
|
this._parentMenu._hideSubMenu();
|
|
}
|
|
break;
|
|
case "Enter":
|
|
if (!isEnterKey(event))
|
|
break;
|
|
// falls through
|
|
case "U+0020": // Space
|
|
if (this._highlightedMenuItemElement && !this._highlightedMenuItemElement._subItems)
|
|
this._triggerAction(this._highlightedMenuItemElement, event);
|
|
// falls through
|
|
case "Right":
|
|
if (this._highlightedMenuItemElement && this._highlightedMenuItemElement._subItems) {
|
|
this._showSubMenu(this._highlightedMenuItemElement);
|
|
this._subMenu._focus();
|
|
this._subMenu._highlightNext();
|
|
}
|
|
break;
|
|
case "U+001B": // Escape
|
|
this._discardMenu(true, event);
|
|
break;
|
|
}
|
|
this._consumeEvent(event, true);
|
|
}
|
|
|
|
_glassPaneMouseDown(event)
|
|
{
|
|
this._discardMenu(true, event);
|
|
this._consumeEvent(event);
|
|
}
|
|
|
|
_focus()
|
|
{
|
|
this._contextMenuElement.focus();
|
|
}
|
|
|
|
_triggerAction(menuItemElement, event)
|
|
{
|
|
if (!menuItemElement._subItems) {
|
|
this._discardMenu(true, event);
|
|
if (typeof menuItemElement._actionId === "number") {
|
|
WI.ContextMenu.contextMenuItemSelected(menuItemElement._actionId);
|
|
menuItemElement._actionId = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
this._showSubMenu(menuItemElement);
|
|
this._consumeEvent(event);
|
|
}
|
|
|
|
_highlightMenuItem(menuItemElement, skipSubMenuExpansion)
|
|
{
|
|
if (this._highlightedMenuItemElement === menuItemElement)
|
|
return;
|
|
|
|
this._hideSubMenu();
|
|
if (this._highlightedMenuItemElement) {
|
|
this._highlightedMenuItemElement.classList.remove("highlighted");
|
|
|
|
if (this._highlightedMenuItemElement._subItems && this._highlightedMenuItemElement._subMenuTimer) {
|
|
clearTimeout(this._highlightedMenuItemElement._subMenuTimer);
|
|
this._highlightedMenuItemElement._subMenuTimer = 0;
|
|
}
|
|
}
|
|
|
|
this._highlightedMenuItemElement = menuItemElement;
|
|
if (this._highlightedMenuItemElement) {
|
|
this._highlightedMenuItemElement.classList.add("highlighted");
|
|
this._contextMenuElement.focus();
|
|
|
|
if (!skipSubMenuExpansion && this._highlightedMenuItemElement._subItems && !this._highlightedMenuItemElement._subMenuTimer)
|
|
this._highlightedMenuItemElement._subMenuTimer = setTimeout(this._showSubMenu.bind(this, this._highlightedMenuItemElement), 150);
|
|
}
|
|
}
|
|
|
|
_highlightPrevious()
|
|
{
|
|
let menuItemElement = this._highlightedMenuItemElement ? this._highlightedMenuItemElement.previousSibling : this._contextMenuElement.lastChild;
|
|
|
|
while (menuItemElement && menuItemElement._isSeparator)
|
|
menuItemElement = menuItemElement.previousSibling;
|
|
|
|
if (menuItemElement)
|
|
this._highlightMenuItem(menuItemElement, true);
|
|
}
|
|
|
|
_highlightNext()
|
|
{
|
|
let menuItemElement = this._highlightedMenuItemElement ? this._highlightedMenuItemElement.nextSibling : this._contextMenuElement.firstChild;
|
|
|
|
while (menuItemElement && menuItemElement._isSeparator)
|
|
menuItemElement = menuItemElement.nextSibling;
|
|
|
|
if (menuItemElement)
|
|
this._highlightMenuItem(menuItemElement, true);
|
|
}
|
|
|
|
_discardMenu(closeParentMenus, event)
|
|
{
|
|
if (this._subMenu && !closeParentMenus)
|
|
return;
|
|
|
|
if (this._glassPaneElement) {
|
|
const glassPane = this._glassPaneElement;
|
|
this._glassPaneElement = null;
|
|
// This can re-enter discardMenu due to blur.
|
|
document.body.removeChild(glassPane);
|
|
|
|
if (this._parentMenu) {
|
|
this._parentMenu._subMenu = null;
|
|
if (closeParentMenus)
|
|
this._parentMenu._discardMenu(closeParentMenus, event);
|
|
}
|
|
|
|
if (event)
|
|
this._consumeEvent(event, true);
|
|
} else if (this._parentMenu && this._contextMenuElement.parentElement) {
|
|
this._discardSubMenus();
|
|
|
|
if (closeParentMenus)
|
|
this._parentMenu._discardMenu(closeParentMenus, event);
|
|
|
|
if (event)
|
|
this._consumeEvent(event, true);
|
|
}
|
|
}
|
|
|
|
_discardSubMenus()
|
|
{
|
|
if (this._subMenu)
|
|
this._subMenu._discardSubMenus();
|
|
|
|
if (this._contextMenuElement.parentElement)
|
|
this._contextMenuElement.parentElement.removeChild(this._contextMenuElement);
|
|
|
|
if (this._parentMenu)
|
|
this._parentMenu._subMenu = null;
|
|
}
|
|
};
|