MooTools Mobile: оно «трогательно»!

Когда сообщество разработчиков обратилось к команде MooTools с просьбой о том, чтобы MooTools была добавлена основная функция прослушки класса событий, разработчики инструмента не опустили это из внимания. Сегодня MooTools поддерживает все события жестов и прикосновений. Но что если нам хотелось бы более расширенного функционала отслеживания мобильных событий, как например, определение направления переворота корпуса, или щепотку и так далее? Именно здесь нам на помощь приходит MooTools Mobile от Кристофа Пойера (Christoph Pojer). MooTools Mobile – это не совсем полноценная мобильная платформа, это больше похоже на набор инструментов для улучшения мобильных приложений. Давайте рассмотрим ресурсы, которые нам предоставляет MooTools Mobile.


Так как задача была поставлена профессионалам из команды MooTools, но классы событий, основанные на технологии touch, от Кристофа получились компактными и модульными. Каждый класс может быть найден в пределах технологии Touch.

Swipe

Используя технологию Touch/Swipe, вы можете определять направление движение пальца, а также начальные и конечные координаты:

// 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

Как видно в коде сверху, вы также можете настроить минимальные дистанции скольжения или отключить вертикальное скольжение.

Pinch

Touch/Pinch позволяет вам определять события, когда пользователь «щиплет» дисплей, и в данной функции тоже есть свои настройки:

// 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

Порог хранится внутри самих элементов, так что вы можете определить индивидуальные настройки для любого элемента.

Touchhold

Данное событие используется во всех мобильных операционных системах, так почему не встроить ее в браузер?

//  Listen for touchhold on anyElement
anyElement.addEvent("touchhold", function(event){
    // Event fires
});

Любой элемент может хранить в себе опциональное значение задержки перед запуском события Touchhold:

anyElement.store("touchhold:delay", 1000); // Default: 750

Максимум универсальности и минимум кода!

Расширения браузера

Кроме этих пользовательских touch-событий, MooTools Mobile также может предоставлять дополнительную информацию посредством параметров устройства в браузере:

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

Эти параметры дают вам возможность больше узнать о возможностях устройства!

С интенсивным развитием мобильных устройств, важно сделать так, чтобы ваш веб-сайт был максимально адаптирован под них. Подобная разработка от Кристофа – это всего лишь небольшой помощник, который понадобится разработчикам, чтобы максимально продуктивно адаптировать веб-приложения, основанные на MooTools.