@ne1410s/menu
Version:
Lightweight ES context menu.
451 lines (434 loc) • 22.3 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ne_menu = {}));
})(this, (function (exports) { 'use strict';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
function __spreadArray(to, from, pack) {
if (arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var ChainedQuery = /** @class */ (function () {
function ChainedQuery(mapper) {
var sources = [];
for (var _i = 1; _i < arguments.length; _i++) {
sources[_i - 1] = arguments[_i];
}
var _this = this;
this.mapper = mapper;
this._items = [];
this.get = function (index) { return _this._items[index]; };
this.add.apply(this, sources);
}
Object.defineProperty(ChainedQuery.prototype, "targets", {
get: function () {
return this._items.filter(function (it) { return it instanceof EventTarget; }).map(function (it) { return it; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(ChainedQuery.prototype, "elements", {
get: function () {
return this._items.filter(function (it) { return it instanceof Element; }).map(function (it) { return it; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(ChainedQuery.prototype, "nodes", {
get: function () {
return this._items.filter(function (it) { return it instanceof Node; }).map(function (it) { return it; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(ChainedQuery.prototype, "containers", {
get: function () {
return this._items.map(function (it) { return it; }).filter(function (p) { return typeof p.append === 'function'; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(ChainedQuery.prototype, "length", {
get: function () {
return this._items.length;
},
enumerable: false,
configurable: true
});
ChainedQuery.prototype.add = function () {
var _a;
var sources = [];
for (var _i = 0; _i < arguments.length; _i++) {
sources[_i] = arguments[_i];
}
(_a = this._items).push.apply(_a, this.mapper.Map(sources));
return this;
};
// TODO: This must not fall over if trying to perform an action
// on an inappropriate type. eg setting an attribute on window, or
// trying to query a non-parent node..
ChainedQuery.prototype.each = function (func) {
this._items.forEach(function (item, i) { return func(item, i); });
return this;
};
ChainedQuery.prototype.prop = function (name, value) {
return this.each(function (item) {
if (name in item) {
item[name] = value;
}
});
};
//#region Targets
ChainedQuery.prototype.fire = function (eventName, detail) {
var evt = new CustomEvent(eventName, { detail: detail });
this.targets.forEach(function (t) { return t.dispatchEvent(evt); });
return this;
};
ChainedQuery.prototype.on = function (eventNames, func) {
var evts = eventNames.split(ChainedQuery.WHITESPACE_RGX);
this.targets.forEach(function (t) {
evts.forEach(function (name) { return t.addEventListener(name, func); });
});
return this;
};
//#endregion
//#region Elements
ChainedQuery.prototype.attr = function (name, value, ns) {
this.elements.forEach(function (elem) {
if (value != null)
elem.setAttributeNS(ns, name, value);
else
elem.removeAttributeNS(ns, name);
});
return this;
};
ChainedQuery.prototype.toggle = function (className, doSet) {
this.elements.forEach(function (elem) {
var force = typeof doSet === 'function' ? doSet(elem) : !!doSet;
elem.classList.toggle(className, force);
});
return this;
};
//#endregion
//#region Nodes
ChainedQuery.prototype.empty = function () {
this.nodes.forEach(function (n) {
while (n.firstChild) {
n.removeChild(n.firstChild);
}
});
return this;
};
ChainedQuery.prototype.remove = function () {
return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this._items.filter(function (it) {
var handle = it instanceof Node;
if (handle)
it.parentNode.removeChild(it);
return !handle;
}), false)))();
};
//#endregion
//#region Containers
ChainedQuery.prototype.append = function () {
var sources = [];
for (var _i = 0; _i < arguments.length; _i++) {
sources[_i] = arguments[_i];
}
this.appendIn.apply(this, sources);
return this;
};
ChainedQuery.prototype.appendIn = function () {
var _this = this;
var sources = [];
for (var _i = 0; _i < arguments.length; _i++) {
sources[_i] = arguments[_i];
}
return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this.containers.reduce(function (acc, parent) {
var nodes = new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, _this.mapper], sources, false)))().nodes;
parent.append.apply(parent, nodes);
acc.push.apply(acc, nodes);
return acc;
}, []), false)))();
};
ChainedQuery.prototype.find = function (selector) {
return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this.containers.reduce(function (acc, parent) {
acc.push.apply(acc, Array.from(parent.querySelectorAll(selector)));
return acc;
}, []), false)))();
};
ChainedQuery.prototype.first = function (selector) {
return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this.containers.map(function (parent) { return parent.querySelector(selector); }).filter(function (found) { return !!found; }), false)))();
};
ChainedQuery.WHITESPACE_RGX = /\s+/;
return ChainedQuery;
}());
var SourceMapper = /** @class */ (function () {
function SourceMapper() {
}
SourceMapper.prototype.Map = function (sources) {
return sources.reduce(function (acc, item) {
if (typeof item === 'string') {
acc.push.apply(acc, (SourceMapper.NAIVE_HTML_RGX.test(item)
? SourceMapper.MapHTML(item)
: SourceMapper.MapSelector(item)));
}
else if (item.tag)
acc.push(SourceMapper.MapParam(item));
else if (item instanceof Node)
acc.push(item);
else if (item instanceof EventTarget)
acc.push(item);
else if (item instanceof ChainedQuery)
item.each(function (i) { return acc.push(i); });
else
console.warn('Unrecognised item:', item);
return acc;
}, []);
};
SourceMapper.MapHTML = function (html) {
var template = document.createElement('template');
template.innerHTML = html;
return Array.from(template.content.childNodes);
};
SourceMapper.MapSelector = function (selector) {
return Array.from(document.querySelectorAll(selector));
};
SourceMapper.MapParam = function (p) {
var n = document.createElement(p.tag);
if (p.text)
n.textContent = p.text;
for (var key in p.attr || {}) {
if (p.attr[key] != null) {
n.setAttribute(key, p.attr[key]);
}
}
for (var key in p.evts || {}) {
if (typeof p.evts[key] === 'function') {
n.addEventListener(key, p.evts[key]);
}
}
return n;
};
SourceMapper.NAIVE_HTML_RGX = /^\s*<.*>\s*$/m;
return SourceMapper;
}());
var mapper = new SourceMapper();
function q() {
var input = [];
for (var _i = 0; _i < arguments.length; _i++) {
input[_i] = arguments[_i];
}
return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, mapper], input, false)))();
}
class CustomElementBase extends HTMLElement {
constructor(css, html, mode = 'closed') {
super();
this.root = this.attachShadow({ mode });
this.root.innerHTML = html;
const style = document.createElement('style');
style.textContent = css;
this.root.appendChild(style);
}
}
function decode(b64) {
const bIndex = (b64 + '').indexOf('base64,');
return bIndex === -1 ? b64 : window.atob(b64.substring(bIndex + 7));
}
function reduceCss(cssIn) {
return cssIn
.replace(/\s+/g, ' ')
.replace(/([,{}:;])\s/g, '$1')
.replace(/\s([{])/g, '$1');
}
function reduceHtml(htmlIn) {
return htmlIn.replace(/\s+/g, ' ').replace(/(^|>)\s+(<|$)/g, '$1$2');
}
var markupUrl = "data:text/html;base64,PHNsb3Q+PC9zbG90Pg0KPHVsIGNsYXNzPSJ0b3AiPjwvdWw+DQo=";
var stylesUrl = "data:text/css;base64,dWwsDQpsaSB7DQogIHBhZGRpbmc6IDA7DQogIG1hcmdpbjogMDsNCiAgZm9udDogaW5oZXJpdDsNCn0NCnNsb3QsDQpsaS5zcGxpdCAuaWNvbiB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoudG9wOm5vdCgub3BlbiksDQp1bDpub3QoLnRvcCkgew0KICB2aXNpYmlsaXR5OiBoaWRkZW47DQp9DQoNCnVsIHsNCiAgYm9yZGVyOiB2YXIoLS1ib3JkZXIsIDFweCBzb2xpZCAjYmJiKTsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmcsICNmZmYpOw0KICBib3gtc2hhZG93OiB2YXIoLS1ib3gtc2hhZG93LCAycHggMnB4IDNweCAjODg4KTsNCiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAwLjZzOw0KICB6LWluZGV4OiA5OTk5OTk5Ow0KfQ0KDQoudG9wIHsNCiAgcG9zaXRpb246IGZpeGVkOw0KICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZSwgMC42NXJlbSk7DQogIHVzZXItc2VsZWN0OiBub25lOw0KfQ0KDQouaWNvbi5sZWZ0IHsNCiAgbGVmdDogMWVtOw0KICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNTAlLCAtNTAlKTsNCn0NCi5pY29uLnJpZ2h0IHsNCiAgcmlnaHQ6IDFlbTsNCiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoNTAlLCAtNTAlKTsNCn0NCi5pY29uIHsNCiAgbWF4LXdpZHRoOiAxZW07DQogIG1heC1oZWlnaHQ6IDFlbTsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICB0b3A6IDUwJTsNCiAgbGluZS1oZWlnaHQ6IDA7DQp9DQoNCmxpID4gcDpub3QoOmVtcHR5KSB7DQogIG1hcmdpbjogMCAxZW07DQogIHdoaXRlLXNwYWNlOiBub3dyYXA7DQp9DQpsaS5kaXNhYmxlZCB7DQogIGNvbG9yOiB2YXIoLS1kaXNhYmxlZC1mZywgI2JiYik7DQp9DQpsaS5zcGxpdCB7DQogIGJvcmRlci10b3A6IHZhcigtLXNwbGl0LWJvcmRlciwgdmFyKC0tYm9yZGVyLCAxcHggc29saWQgI2JiYikpOw0KICBwYWRkaW5nOiAwOw0KICBtYXJnaW46IDAuM2VtOw0KfQ0KbGkuc3BsaXQ6Zmlyc3QtY2hpbGQsDQpsaS5zcGxpdDpsYXN0LWNoaWxkLA0KbGkuc3BsaXQgKyBsaS5zcGxpdCB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQpsaS5ob3Zlcjpub3QoLmRpc2FiZWQpOm5vdCguc3BsaXQpIHsNCiAgYmFja2dyb3VuZDogdmFyKC0taG92ZXItaXRlbS1iZywgI2JiYik7DQp9DQoudG9wLm9wZW4gbGkuaG92ZXIgPiB1bCB7DQogIHZpc2liaWxpdHk6IHZpc2libGU7DQp9DQpsaSB7DQogIG1hcmdpbjogMC4yZW0gMDsNCiAgcGFkZGluZzogMC41ZW0gMWVtOw0KICBkaXNwbGF5OiBmbGV4Ow0KICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47DQogIHRleHQtYWxpZ246IGxlZnQ7DQogIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgY3Vyc29yOiBkZWZhdWx0Ow0KICBjb2xvcjogdmFyKC0tZmcsICMwMDApOw0KfQ0KDQpsaS5ncm91cDo6YWZ0ZXIgew0KICBjb250ZW50OiAnXDI1YjYnOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMC42NWVtOw0KICByaWdodDogMDsNCiAgdG9wOiA1MCU7DQogIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpOw0KfQ0KDQp1bDpub3QoLnRvcCkgew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGxlZnQ6IDEwMCU7DQogIHRvcDogLTAuMjVlbTsNCn0NCg0KdWwubmVzdGxlIHsNCiAgbGVmdDogMC41ZW07DQogIHRvcDogMTAwJTsNCn0NCg==";
class NeMenu extends CustomElementBase {
constructor() {
super(NeMenu.Css, NeMenu.Html);
this.top = this.root.querySelector('ul');
}
connectedCallback() {
if (!this._connected) {
setTimeout(() => this.reload());
q(this.parentNode).on('contextmenu', (e) => this.onParentContext(e));
q(this, this.parentNode).on('contextmenu wheel', (e) => {
e.preventDefault();
e.stopPropagation();
});
q(this).on('mousedown', (e) => e.stopPropagation());
q(window).on('mousedown resize wheel', () => this.close());
this._connected = true;
}
}
/** Opens the menu. */
open() {
// close all menus
const doc = this.parentElement.getRootNode();
doc.querySelectorAll('ne14-menu').forEach((m) => m.close());
// style this one as open
this.top.classList.add('open');
q(this).fire('menuopen');
}
/** Closes the menu. */
close() {
if (this.top.classList.contains('open')) {
this.top.classList.remove('open');
q(this).fire('menuclose');
}
}
/** Reloads active contents based on client dom. */
reload() {
q(this.top)
.empty()
.append(...this.walk(this, false));
}
onParentContext(event) {
if (this.isConnected) {
// update position (y)
const y = event.clientY;
const height = this.top.offsetHeight;
const posY = y + height + 2 > window.innerHeight ? y - height : y;
this.top.style.top = `${Math.max(0, posY)}px`;
// update position (x)
const x = event.clientX;
const width = this.top.offsetWidth;
const posX = x + width + 2 > window.innerWidth ? x - width : x;
this.top.style.left = `${Math.max(0, posX)}px`;
// open
this.open();
}
}
walk(ul, parentDisabled, ref = '') {
let levelItemNo = 0;
return Array.from(ul.children)
.filter((c) => c instanceof HTMLLIElement &&
!c.classList.contains('hidden') &&
(c.textContent || c.classList.contains('split')))
.reduce((acc, li) => {
var _a, _b, _c;
const children = Array.from(li.children).map((el) => el);
const a = children.find((n) => n instanceof HTMLAnchorElement);
const ul = children.find((n) => n instanceof HTMLUListElement);
const isSplit = li.classList.contains('split');
const isGrouper = !isSplit && ul && ul.querySelector('li');
const isDisabled = !isSplit && (parentDisabled || li.classList.contains('disabled'));
const aChildren = Array.from((a === null || a === void 0 ? void 0 : a.children) || []).map((el) => el);
const imgs = children
.concat(aChildren)
.filter((n) => n instanceof HTMLImageElement)
.map((n) => n);
if (!isSplit)
levelItemNo++;
const classes = [];
if (isSplit)
classes.push('split');
else {
if (isDisabled)
classes.push('disabled');
if (isGrouper)
classes.push('group');
if ((a === null || a === void 0 ? void 0 : a.target) === '_blank')
classes.push('click-out');
else if (a)
classes.push('click-in');
}
const bestTextNode = [...children, li].find((c) => c.innerText);
const bestText = isSplit ? null : ((_a = bestTextNode === null || bestTextNode === void 0 ? void 0 : bestTextNode.innerText) !== null && _a !== void 0 ? _a : `Item ${levelItemNo}`);
const shortcut = isSplit || isGrouper ? null : li.getAttribute('aria-keyshortcuts');
const liRef = `${ref}${levelItemNo}`;
const eventDetail = { ref: liRef, title: bestText, origin: a || li };
const handleClick = () => {
if (!isDisabled && !isGrouper && !isSplit) {
eventDetail.origin.click();
q(this).fire('itemselect', eventDetail);
this.close();
}
};
const handleMouseEnter = (e) => {
if (!isDisabled && !isSplit) {
const domLi = e.target;
if (isGrouper) {
const domUl = Array.from(domLi.children).find((n) => n instanceof HTMLUListElement);
const liRect = domLi.getBoundingClientRect();
domUl.classList.toggle('nestle', liRect.right + domUl.clientWidth + 2 > window.innerWidth);
}
domLi.classList.add('hover');
q(this).fire('itemhover', eventDetail);
}
};
const handleMouseLeave = (e) => {
if (!isDisabled && !isSplit) {
e.target.classList.remove('hover');
q(this).fire('itemunhover', eventDetail);
}
};
const $domItem = q({ tag: 'li' })
.attr('class', classes.length ? classes.join(' ') : null)
.attr('aria-keyshortcuts', shortcut)
.on('click contextmenu', handleClick)
.on('mouseenter', handleMouseEnter)
.on('mouseleave', handleMouseLeave);
const charLeft = li.dataset.charLeft;
const charRight = li.dataset.charRight;
const imgLeft = imgs.find((i) => !i.classList.contains('right'));
const imgRight = imgs.find((i) => i.classList.contains('right'));
if (!isSplit && !isGrouper && bestText) {
if (NeMenu.CHAR_REF_REGEX.test(charLeft))
$domItem.append(`<span class='icon left'>&#x${charLeft};</span>`);
else if (charLeft)
console.warn(`ne14-menu: Bad hex code '${charLeft}' to left of '${bestText}'.`);
else if (imgLeft)
$domItem.append(`<img class='icon left' src='${imgLeft.src}'/>`);
if (NeMenu.CHAR_REF_REGEX.test(charRight))
$domItem.append(`<span class='icon right'>&#x${charRight};</span>`);
else if (charRight)
console.warn(`ne14-menu: Bad hex code '${charRight}' to right of '${bestText}'.`);
else if (imgRight)
$domItem.append(`<img class='icon right' src='${imgRight.src}'/>`);
}
if (bestText)
$domItem.append({ tag: 'p', text: bestText });
if (shortcut)
$domItem.append({ tag: 'p', text: shortcut });
if (isGrouper)
$domItem.appendIn({ tag: 'ul' }).append(...this.walk(ul, isDisabled, `${liRef}-`));
// Do not push two consecutive splits
if (!isSplit || !((_c = (_b = acc[acc.length - 1]) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.contains('split'))) {
acc.push($domItem.elements[0]);
}
return acc;
}, []);
}
}
NeMenu.Css = reduceCss(decode(stylesUrl));
NeMenu.Html = reduceHtml(decode(markupUrl));
NeMenu.CHAR_REF_REGEX = /^[0-9a-f]{4,5}$/i;
if ('customElements' in window) {
window.customElements.define('ne14-menu', NeMenu);
}
exports.ContextMenu = NeMenu;
}));