mobile[#1018]: Added a polyfill to allow ios to emit context menu on long press

src/client/js/app.js

@@ -11,7 +11,8 @@ require.config({
 		helpers: 'js/misc/helpers',
 		particles: 'plugins/pixi.particles.min',
 		pixi: 'https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min',
-		howler: 'https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.core.min'
+		howler: 'https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.core.min',
+		longPress: 'plugins/long.press.min'
 	},
 	shim: {
 		howler: {

src/client/js/main.js

@@ -30,16 +30,27 @@ define([
 		return () => requestAnimationFrame(updateMethod);
 	};
 
+	const loadLongPress = async () => {
+		return new Promise(res => {
+			require(['longPress'], res);
+		});
+	};
+
 	return {
 		hasFocus: true,
 
 		lastRender: 0,
 		msPerFrame: ~~(1000 / 60),
 
-		init: function () {
-			if (isMobile)			
+		init: async function () {
+			if (isMobile) {
 				$('.ui-container').addClass('mobile');
 
+				//If we're on an ios device, we need to load longPress since that polyfills contextmenu for us
+				if (_.isIos())
+					await loadLongPress();
+			}
+
 			client.init(this.onClientReady.bind(this));
 		},
 

src/client/js/misc/helpers.js

@@ -105,13 +105,23 @@ window._ = {
 
 		else 
 			cancelFullScreen.call(doc);
+	},
+
+	isIos: function () {
+		return (
+			[
+				'iPad Simulator',
+				'iPhone Simulator',
+				'iPod Simulator',
+				'iPad',
+				'iPhone',
+				'iPod'
+			].includes(navigator.platform) ||
+			(navigator.userAgent.includes('Mac') && 'ontouchend' in document)
+		);
 	}
 };
 
-define([
-	
-], function (
-	
-) {
+define([], function () {
 	return window._;
 });

src/client/plugins/long.press.min.js

@@ -0,0 +1,10 @@
+/*!
+* long-press-event - v2.2.2
+* Pure JavaScript long-press-event
+* https://github.com/john-doherty/long-press-event
+* @author John Doherty <www.johndoherty.info>
+* @license MIT
+*/
+define([], function () {
+	!function(e,t){"use strict";var n=null,a="ontouchstart"in e||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0,i=a?"touchstart":"mousedown",o=a?"touchend":"mouseup",m=a?"touchmove":"mousemove",u=0,r=0,s=10,c=10;function l(i){v(i);var m=i.target,u=parseInt(m.getAttribute("data-long-press-delay")||"1500",10);n=function(t,n){if(!(e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame&&e.mozCancelRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame))return e.setTimeout(t,n);var a=(new Date).getTime(),i={},o=function(){(new Date).getTime()-a>=n?t.call():i.value=requestAnimFrame(o)};return i.value=requestAnimFrame(o),i}(function(e){v();var n=a?e.touches[0].clientX:e.clientX,i=a?e.touches[0].clientY:e.clientY;this.dispatchEvent(new CustomEvent("contextmenu",{bubbles:!0,cancelable:!0,detail:{clientX:n,clientY:i}}))&&t.addEventListener(o,function e(n){t.removeEventListener(o,e,!0),function(e){e.stopImmediatePropagation(),e.preventDefault(),e.stopPropagation()}(n)},!0)}.bind(m,i),u)}function v(t){var a;(a=n)&&(e.cancelAnimationFrame?e.cancelAnimationFrame(a.value):e.webkitCancelAnimationFrame?e.webkitCancelAnimationFrame(a.value):e.webkitCancelRequestAnimationFrame?e.webkitCancelRequestAnimationFrame(a.value):e.mozCancelRequestAnimationFrame?e.mozCancelRequestAnimationFrame(a.value):e.oCancelRequestAnimationFrame?e.oCancelRequestAnimationFrame(a.value):e.msCancelRequestAnimationFrame?e.msCancelRequestAnimationFrame(a.value):clearTimeout(a)),n=null}"function"!=typeof e.CustomEvent&&(e.CustomEvent=function(e,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var a=t.createEvent("CustomEvent");return a.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),a},e.CustomEvent.prototype=e.Event.prototype),e.requestAnimFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t){e.setTimeout(t,1e3/60)},t.addEventListener(o,v,!0),t.addEventListener(m,function(e){var t=Math.abs(u-e.clientX),n=Math.abs(r-e.clientY);(t>=s||n>=c)&&v()},!0),t.addEventListener("wheel",v,!0),t.addEventListener("scroll",v,!0),t.addEventListener(i,function(e){u=e.clientX,r=e.clientY,l(e)},!0)}(window,document);
+});