3D Touch Library For JavaScript – Forceify

Preview:

Description:

Forceify is the fastest, smartest and cross-device 3D Touch library for JavaScript to detect force level and deep press events.

How to use it:

Install & download the Forceify library.

# NPM
$ npm install forceify --save

Import the Forceify module into your project.

// ES 6
import Forceify from 'forceify';
// CommonJS:
const Forceify = require('forceify');

The example usages.

// Helpers function
var forceMe = document.querySelector('#forceMe');
// Lerp array (simple)
var steppize = function (force, args) {
var m = Math.round(force * (args.length - 1))
return args[m];
};
// Returns state of deep-press (aka Force Click)
var isDeepPress = function (force) {
  return force > ( 1 / 3 );
}
// Check if there CSS3 3D-mode available?
var is3D = 'perspective' in forceMe.style || 'webkitPerspective' in forceMe.style || 'mozPerspective' in forceMe.style || 'MsPerspective' in forceMe.style || 'msPerspective' in forceMe.style || 'OPerspective' in forceMe.style;
var __webkitTransform = 'webkitTransform' in forceMe.style ? 'webkitTransform' : 'transform';
// Setting cross-browser CSS3 Transform set helper
var setTransform = function (elem, transform) {
  elem.style[__webkitTransform] = transform;
}
// Node selector
var forceValue = document.querySelector('#forceValue');
// Initialize the instance
new Forceify(forceMe).onForce(function(ev) {
  var force = ev.force;
  var scale = 1 + (force * 1.5);
  var transform = 'translate(-50%, -50%) scale(' + scale + ')';
  setTransform(forceMe, transform);
  var color = 'rgb(' + ((255 * force) | 0) + ', ' + 204 + ', ' + (255 - (255 * force) | 0) + ')';
  forceMe.style.backgroundColor = color;
  forceValue.innerHTML = 'Force: ' + ((force * 10000) | 0) / 10000 + ', Deep Press:&nbsp;<span style="color:' + color + ';font-weight:' + steppize(force, [100, 200, 300, 400, 500, 600, 700, 800, 900]) + '">' + (isDeepPress(force) ? 'Yes' : 'No') + '</span>';
});

API methods.

const instance = new Forceify(forceMe)
// addEventListener alternative
instance.on
// returns true if it's touch-device and runs on non-Chrome browser
instance.isIOS3DTouch
// returns true if it's Chrome browser
instance.isChrome
// returns true if it's Apple device's
instance.isMacOSForceTouch
forceInstance.isIOS
// returns true if it's mouse-powered device
instance.isMouse