В этом материале рассмотрим библиотеку, которая поможет нам отслеживать силу нажатия на экран или тачпад устройства пользователя .
В этом материале рассмотрим библиотеку, которая поможет нам отслеживать силу нажатия на экран или тачпад устройства пользователя.
Как многие, наверное, знают, относительно недавно вышел ноутбук от Apple, имеющий тачпад, поддерживающий ForceTouch – технологию, которая позволяет отслеживать силу нажатия. Также вышел новый iPhone, где использована технология 3D Touch, которая делает то же самое, но уже на сенсорном дисплее устройства. Технология достаточно интересная, и в этом материале рассмотрим Pressure – javascript библиотеку, которая позволит использовать возможности этой технологии на сайтах.
Установка и настройка
Скачайте нужные файлы на GitHub, либо используйте npm или bower:
npm install pressure --save // npm
bower install pressure --save // bower
Используйте pressure в глобальной области видимости:
Pressure.set('#id-name', {
change: function(force){
this.innerHTML = force;
}
});
Или с browserify или CommonJS как установку.
var Pressure = require('pressure');
Pressure.set('#id-name', {
change: function(force){
this.innerHTML = force;
}
});
Использование
Заметьте, что ключевое слово this в каждом методе обратного вызова будет самостоятельным элементом, к которому применена сила.
Pressure.set('#element', {
start: function(){
// this вызван в начале
},
end: function(){
// this вызван в конце
},
startDeepPress: function(){
// this вызван на "сильное нажатие" / "глубокое нажатие", когда сила больше 0.5
},
endDeepPress: function(){
// this вызван в конце "сильного нажатия" / "глубокого нажатия"
},
change: function(force, event){
// this вызывается каждый раз, когда происходит изменение силы нажатия
// значение силы будет всегда в диапазоне от 0 до 1 на мобильных и настольных устройствах
},
unsupported: function(){
// this вызывается однажды, когда произведено нажатие на экран, но устройство или браузер не поддерживает технологию ForceTouch / 3D Touch
}
});
Итак, на этом все. Спасибо за внимание!
