MooTools Mobile: It’s Touching!

By  on  
iPad, iPhone, iOS

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!

As 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.

Swipe

By 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.

Pinch

The 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.

Touchhold

The 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!

With 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!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Facebook-Style Modal Box Using MooTools

    In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect. The Imagery Facebook uses a funky sprite for their modal...

  • By
    WebSocket and Socket.IO

    My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push messages from client to server efficiently...

Discussion

  1. Alex

    Now I will be able to create a windows 8 like theme for wordpress :D

  2. Alex

    Something offtopic:
    I remember your MooTools articles had tenths of replies some long time ago.
    Something that’s rarely happens the last months.
    Why?

    • I’m not cool anymore! :)

    • Doc

      … or, with equal probability, the Internet wanderers have been eaten by a giant bunny rabbit with a laser on it’s forehead !

      Keep up the good work, and remember : gesture-able interfaces will revolutionize the way we create content, from fingerpainting to downright coding.

  3. MooTools seems to be losing some steam. I guess that might just be my personal perspective, but it seems to me that Dojo and jQuery are the biggest contenders for people’s loyalty. Personally I’ve always preferred jQuery. I’d love to get into Dojo more, but I haven’t created any larger web apps that really warranted it. All the examples on my JavaScript Blog either use no library or use jQuery.

  4. Anita Atyi

    I am very pleased w/ MooTools in mobile development but the arrival of iOS8 I experienced a big issue/problem.

    Using PhoneGap and moobile.js for mobile application development and on iOS 8 buttons and other components tap event listeners are not working.
    The setLabel function works, but the listener doesn’t fire when user taps on the button.

    Here is a sample code that is not working on iOS8 (iPhone5)

    this.view = Moobile.View.at('templates/main.html');
    this.button = this.view.getChildComponent('test-button');
    this.button.addEvent('tap', this.bound('testListener'));
    

    Everything works on iOS 7.
    (Cordova 3.5.0 , moobile-0.2.1.js, latest mootools-core and mootools-more)

    Thanks for your help!

    • Anita Atyi

      We have fixed it.

      This code caused the problem:

      Class.refactor(Moobile.ScrollView, {
      options: {
      scroller: 'IScroll'
      }
      });
      

      (It fixes Android scrolling issue.)

      We wrapped it with a condition for platform, and now tap event listener is correctly working.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!