Biblioteca de JavaScript para manejo táctil 3D-presión

Vista prévia

Descripción

Pressure es una librería JavaScript pura que proporciona una forma sencilla de detectar y manejar eventos 3D Touch (o Force Touch introducidos en nuevos Mac y iPhone 6S) en tu página web.

Funcionamiento

Para empezar, incluya el archivo de JavaScript pressure. js en el documento.

<script src="pressure.js"></script>

Recuperar un valor de cambio en todos los elementos que coinciden con el selector.

Pressure.change('#el1', function(force, event){

console.log(force);

// "this" is the element(s) returned by the closure

this.style.width = (200 * force + 200) + 'px';

this.innerHTML = force;
});

Recuperar un valor de cambio en solo los elementos que admiten Force Touch (nuevos Mac).

Pressure.changeForceTouch('#el2', function(force, event){

this.style.width = Math.max((200 * force), 200) + 'px';

this.innerHTML = force;
});

Recuperar un valor de cambio en solo los elementos que admiten 3D Touch (iPhone 6S & iPhone 6S Plus).

Pressure.change('#el3', function(force, event){

this.style.width = (200 * force + 200) + 'px';

this.innerHTML = force;
});

Ejemplo de método de cambio con un cierre de falla. Esta estructura se puede utilizar en cualquier método de presión. El bloque de fallas regresará con un "error" y un mensaje mostrando por qué el dispositivo no es compatible con 3D Touch y Force Touch.

var block = {

start: function(){

},


change: function(force, event){


this.style.width = ((200 * force) + 200) + 'px';


this.innerHTML = force;


this.style.backgroundColor = "rgb(" + parseInt(map(force, 0, 1, 255, 0)) + ",0," + parseInt(map(force, 0, 1, 0, 255)) +")";


this.style.color = force > 0.4 ? 'white' : 'black';

},


startDeepPress: function(event){


// this is called on "force click" / "deep press", aka once the force is greater than 0.5

},

endDeepPress: function(){


// this is called when the "force click" / "deep press" end

},


end: function(){


this.style.width = '200px';


this.innerHTML = 0;


this.style.backgroundColor = 'red';


this.style.color = 'black';

},


unsupported: function(){


console.log(this);


this.innerHTML = 'Your device / browser does not support this :(';

}
}

Pressure.set('#el1', block);
Pressure.setForceTouch('#el2', block);
Pressure.set3DTouch('#el3', block);

function map(x, in_min, in_max, out_min, out_max) {

return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

Registro de cambios

08/05/2018

• v2.1.2