Quick tip: long press on Firefox OS

One of the most natural actions in modern smartphones is the longpress, which has become sort of the equivalent of the right click for mobile, with users expecting additional options to pop up at a longer than normal press.

When I jumped into Firefox OS I had to switch my mentality from ‘native’ to web, where there is not (yet) any default “onlongpress” event, with forces us to get a little creative. I tried with some libraries and plugins but none worked as expected on the phone, so I decided to stop looking for a lazy way and do it with simple JavaScript and timers. Turns out it is super simple:

First add a button, like I do here using some jQuery, and set its “ontouchstart” and “ontouchend” to two different functions:

$("some_element").prepend('<button ontouchstart="PressDown(this)" ontouchend="ReleaseUp(this)" >'+something+'</button>');

Now, the key is to use a time event on the PressDown function that executes whatever you expect the long press to do and cancels the event on ReleaseUp. You can use a share boolean variable to choose if you execute some other short press code or not. Let me show you:

function PressDown(e){
PressTime=false;
Timer=setTimeout(function(){
PressTime=true;
// long press code goes here
},1000);
}

function ReleaseUp(e){
if(!PressTime){
clearTimeout(Timer);
// short press
}
}

Simple and easy.

The thing is, you won’t be able to test this on the Firefox OS simulator, since the current version reacts to click events and not to touch events. How can we test this without a phone?

In cases such as this one I recommend the use of modernizr, a JavaScript library that allows devs to test for features in whatever your code is running on and take different decisions appropriately  in CSS or JavaScript. You can create a custom .js file which tests only for the functionalities we need, like the presence of a touch screens in this case which is a function listed under misc in the download section.

After importing modernizr it is just a matter of testing for touch and creating a diferent button for each case:

if (Modernizr.touch){
$("#"some_element"").prepend('<button ontouchstart="PressDown(this)" ontouchend="ReleaseUp(this)" >'+something+'</button>');
}else{
$("#"some_element"").prepend('<button onmousedown="PressDown(this)" onmouseup="ReleaseUp(this)" >'+something+'</button>');
}

Very simple

Advertisements

An upcoming web developer and android app-maker with an interest on using reliable tech in creative ways, open source projects and start-ups.

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: