Any thoughts on android/iOS functionality?

[jpierce]

I've been working on a small web app using EasyUI and really like it so far.  I tried it out on my (first gen) iPad and my 7 inch android tablet and overall it worked okay.  The app is main a big grid with context menus.

In android, it worked best in Chrome.  In fact, I could even tap and hold and it brought up the EasyUI context menu I had attached.  On the iPad, though, I couldn't figure out any way to trigger the context menu.  Perhaps EasyUI could have some code baked in to do this.  Of course, it might be tricky to make sure it doesn't cause other problems.  It didn't work so well in other browsers on android.  Dolphin was okay, but not the best looking.  And no context menu there.  And Firefox was a complete non-starter for my app.  Even though it worked fine pulling my data and loading it into the datagrid in Chrome/Dolphin, in FF it would always trigger the unresponsive script popup, but even telling it to wait wouldn't work.  It'd just never get rid of the popups and come back to the browser screen.

There there are the obvious difficulties due to needing certain elements to be larger on a tablet.  Everything just needed to be scaled a bit bigger.  Probably could use a custom theme for mobile devices - or just a variant of each of the existing themes.

I'm not trying to suggest EasyUI should be a totally mobile-aware component.  Mobile dev generally has different approaches than desktop dev.  But it's nice to do as much as you can to make your website navigable by people on mobile devices if it's at all possible.  Saves on having to maintain two totally different codebases.

[stworthy]

Try the code below to achieve context menu and double click on mobile devices.

Code:

(function($){
	var longTouchTimer = null;
	var dblTouchTimer = null;
	var isDblClick = false;
	
	function onTouchStart(e){
		if (!isDblClick){
			isDblClick = true;
			dblClickTimer = setTimeout(function(){
				isDblClick = false;
			}, 500);
		} else {
			if (e.touches.length == 1){
				clearTimeout(dblClickTimer);
				isDblClick = false;
				fire(e, 'dblclick');
				e.preventDefault();
			}
		}
		longTouchTimer = setTimeout(function(){
			fire(e, 'contextmenu');
		}, 1000);
		fire(e, 'mousedown');
	}
	function onTouchMove(e){
		if (longTouchTimer){
			clearTimeout(longTouchTimer);
		}
		fire(e, 'mousemove');
	}
	function onTouchEnd(e){
		if (longTouchTimer){
			clearTimeout(longTouchTimer);
		}
		fire(e, 'mouseup');
	}
	
	function fire(e, name){
		var event = new $.Event(name);
		event.pageX = e.changedTouches[0].pageX;
		event.pageY = e.changedTouches[0].pageY;
		$(e.target).trigger(event);
	}
	
	if (document.addEventListener){
		document.addEventListener("touchstart", onTouchStart, true);
		document.addEventListener("touchmove", onTouchMove, true);
		document.addEventListener("touchend", onTouchEnd, true);
	}
})(jQuery);

[pmjenn]

The suggestion works well for bringing up the Context Menu on a long touch on iOS. The problem is that iOS also uses the long touch to trigger a copy-n-paste feature. If it is not disabled, the conflict between the two features make this alternative approach impractical.

To disable the copy-n-paste feature, make sure to add the following properties on the appropriate elements in your CSS.

-webkit-touch-callout: none !important; /* disable targets <a>, <img> */
-webkit-user-select: none !important; /* disable text selection */