Merge branch '1018-ios-context' into 'master'

Resolve "Can’t open context menu for items in inventory on iOS"

Closes #1018

See merge request Isleward/isleward!496

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")||"500",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);
+});

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

@@ -57,11 +57,19 @@ define([
 				}
 			});
 
+			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;
+			}
+
 			this.el
-				.css({
-					left: e.clientX,
-					top: e.clientY
-				})
+				.css(pos)
 				.show();
 		},
 

src/client/ui/templates/options/options.js

@@ -26,6 +26,8 @@ define([
 		modal: true,
 		hasClose: true,
 
+		isFlex: true,
+
 		postRender: function () {
 			this.onEvent('onOpenOptions', this.show.bind(this));
 

src/client/ui/templates/options/styles.less

@@ -5,6 +5,7 @@
 	width: 400px;
 	background-color: @blackC;
 	border: 5px solid @blackB;
+	flex-direction: column;
 
 	> .heading {
 		color: @blueA;
@@ -23,6 +24,8 @@
 
 	.bottom {
 		padding: 10px;
+		height: 100%;
+		overflow-y: auto;
 
 		.list {
 			display: flex;
@@ -149,6 +152,8 @@
 }
 
 .mobile .uiOptions {
+	max-height: 100%;
+
 	.item.screen {
 		display: none;
 	}