isleward/src/client/ui/templates/context/context.js

define([
	'js/system/events',
	'html!ui/templates/context/template',
	'css!ui/templates/context/styles',
	'html!ui/templates/context/templateItem'
], function (
	events,
	template,
	styles,
	templateItem
) {
	return {
		tpl: template,
		modal: true,

		config: null,

		postRender: function () {			
			this.onEvent('onContextMenu', this.onContextMenu.bind(this));
			this.onEvent('onHideContextMenu', this.onMouseDown.bind(this));
			this.onEvent('mouseDown', this.onMouseDown.bind(this));
			this.onEvent('onUiKeyDown', this.onUiKeyDown.bind(this));

			$('.ui-container').on('mouseup', this.onMouseDown.bind(this));
		},

		onContextMenu: function (config, e) {
			this.config = config;

			let container = this.el.find('.list')
				.empty();

			config.forEach((c, i) => {
				const text = (c.text || c);
				const hotkey = c.hotkey;
				const suffix = c.suffix;

				const html = templateItem
					.replace('$TEXT$', text);

				const row = $(html)
					.appendTo(container);

				if (hotkey)
					row.find('.hotkey').html(`(${hotkey})`);
				else if (suffix)
					row.find('.hotkey').html(`${suffix}`);

				if (c.callback) {
					row.on('click', this.onClick.bind(this, i, c.callback));
					row.on('click', events.emit.bind(events, 'onClickContextItem'));
				} else {
					row.addClass('no-hover');

					if (text.includes('---'))
						row.addClass('divider');
				}
			});

			const pos = {
				left: e.clientX,
				top: e.clientY
			};

			//Check for a customEvent, like long touch
			if (_.isIos()) {
				pos.left = e.detail.clientX;
				pos.top = e.detail.clientY;
			}

			pos['max-height'] = window.innerHeight - pos.top - 10;

			this.el
				.css(pos)
				.show();
		},

		onClick: function (index, callback) {
			this.el.hide();
			callback();
		},

		onMouseDown: function (e) {
			if (!this.el.is(':visible') || (e && (e.cancel || e.button === 2)))
				return;

			this.config = null;
			this.el.hide();
		},

		onUiKeyDown: function (keyEvent) {
			if (!this.config || !this.el.is(':visible'))
				return;

			const configEntry = this.config.find(({ hotkey }) => hotkey === keyEvent.key);
			if (!configEntry)
				return;

			configEntry.callback();
			keyEvent.consumed = true;
			this.el.hide();
		}
	};
});