When the community asked the MooTools team to add basic mobile event listening to MooTools’ Event class, we listened; today MooTools supports all touch and gesture events. What if we want more detailed mobile event listeners though, like swipe with direction, pinch, or touchhold events? That’s where Christoph Pojer’s excellent MooTools Mobile comes in. MooTools Mobile isn’t a full mobile framework, but rather a set of utilities to make catering to mobile a bit more…touching. Let’s have a look at the resources provided by MooTools Mobile!View DemoAs you’ve come to expect from members of the MooTools team, Christoph’s new Touch-based event classes are compact and modular. Each class will be found within the Touch path.SwipeBy using the Touch/Swipe resource, you can attain the direction of the swipe, as well as the start and end coordinates:
// Add the swipe event listener
anyElement.addEvent("swipe", function(event){
event.direction // "left" or "right"
event.start // {x: Number, y: Number} Swipe start position
event.end // {x: Number, y: Number} Swipe end position
});
// Configure minimal swipe distance and vertical swipe preferences
anyElement.store("swipe:distance", 30); // Default: 50
anyElement.store("swipe:cancelVertical", true); // Default: false
As you can see above, you may also configure minimum swipe distances and cancellation of vertical swipes.PinchThe Touch/Pinch resource allows you to listen for pinches, as well as configure the pinch threshold:
// Add a pinch event to anyElement
anyElement.addEvent("pinch", function(event){
event.pinch // "in" or "out"
});
// Store a custom threshold
anyElement.store("pinch:threshold", 0.3); // Default: 0.5; Amount of scaling to be done to fire the pinch event
The pinch threshold is stored within elements themselves so you may customize to fit any element.TouchholdThe touchhold event is used throughout all mobile operating systems, so why not implement touchhold within the browser?
// Listen for touchhold on anyElement
anyElement.addEvent("touchhold", function(event){
// Event fires
});
Any element may store an optional delay before the touchhold event fires:
anyElement.store("touchhold:delay", 1000); // Default: 750
Maximum versatility with minimal code!Browser Enhancements!Besides providing these custom touch events, MooTools Mobile provides additional information within the Browser object via a Device property:
Browser.Device // Object added to Browser
Browser.Device.name // ipad / iphone / ipod OR other
Browser.Device.ipad // true if on ipad
Browser.Device.iphone // true if on iphone
Browser.Device.ipod // true if on ipod
Browser.hasHighResolution // true on iPhone 4
Browser.isMobile // True on any platform that is not Windows / Linux / Mac
These properties give you further insight as to the device capabilities!View DemoWith mobile development booming for the foreseeable future, it’s important to make sure your site is as mobile-friendly as possible. Christoph’s mobile contribution is just the tiny helper developers may need to make their MooTools-powered web apps more mobile device-friendly. MooTools (Mobile) FTW!MooTools Mobile: It’s Touching! is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.
