(cache) Pressure.js

Current Browser/Device Support

iPhone 6s (safari)
iPhone 6s Plus (safari)
MacBook 2015 (safari)
13" MacBook Pro 2015 (safari)
15" MacBook Pro 2015 (safari)
Magic Trackpad 2 (safari)
(future devices and browser that support force will be added when they come out)

If you are not using one of the devices / browsers listed above, here is a gif to show it in action.

Examples

1. Pressure Change

The best part about Pressure is that is uses a single API that works on both Force Touch and 3D Touch. (note: Apple currently only has support for desktop and mobile safari, but luckily with pressure you can test for that)

Targets All

Targets ONLY Force Touch

Targets ONLY 3D Touch

2. Unblur Photo

The harder you press on the button the less blurry the image will become.

(try pressing with variable amounts of pressure)

3. Text Size

The harder you press on the text, the bigger it gets. This could be useful for accessibility on online articles.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

4. Rotating Square

The harder you press on the button, the farther the image will spin.

(try pressing with variable amounts of pressure)

5. "Deep" or Force Press

Press hard on the button, a "Deep" or Force press will occur and launch a bootstrap popover.

1. Installation

Pressure is really simple to install, you can use npm or bower, or head over to the github and download the repo itself. All you need is the pressure.min.js or the pressure.js file.

bower

bower install pressure --save

npm

npm install pressure --save

2. Setup

You can use pressure with browserify, debowerify, or anything that uses CommonJS to include packages. Pressure can be used normally if no module object exists.

// Regular
Pressure.set('#test', {
  change: function(force, event){
    console.log(force);
  }
});

// Browserify, Debowerify, CommonJS
var Pressure = require('pressure');

Pressure.set('#test', {
  change: function(force, event){
    console.log(force);
  }
});

3. Usage

Pressure has a really simple method signature. The first argument is the element(s) you are targeting and the second argument is an object with optional callback functions.

Click Me

// target all links
Pressure.set('a', {});

// pass in jQuery elements
var elements = $('.dogs');
Pressure.set(elements, {});

// pass in element list or single element
var elements2 = document.querySelectorAll('.cats');
Pressure.set(elements2, {});
var elements3 = document.getElementById('cat');
Pressure.set(elements3, {});

// element with the 'stuart' ID being selected and calling the 'change' callback
Pressure.set('#stuart', {
  change: function(force, event){
    // the force value is passed back as well as the full event
    this.innerHTML = force;
  }
});

Pro Tip: "force" is a value passed back by the "change" function and is a value from 0 to 1. On Mac it is converted from a 1 to 3 scale to a 0 to 1 scale so it can be used in a consistent manner.

This example uses all of the methods available to you in the callback object.

Pressure.set('#element', {
  start: function(){
    // this is called on force start
  },
  end: function(){
    // this is called on force end
  },
  startDeepPress: function(){
    // 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
  },
  change: function(force, event){
    // this is called every time there is a change in pressure
  },
  unsupported: function(){
    // this is called once there is a touch on the element and the device or browser does not support Force or 3D touch
  }
});

4. Device Targeting

With Pressure, the standard Pressure.set() targets all devices, but you can target just 3D or Force touch seperaratly using Pressure.set3DTouch() and Pressure.setForceTouch().

Click Me On an iPhone 6s

Pressure.set3DTouch('#element-3d', {
  change: function(force, event){
    this.innerHTML = force + 'on an iphone';
  }
});

Click Me On a Mac with Force Touch

Pressure.setForceTouch('#element-force', {
  change: function(force, event){
    this.innerHTML = force + 'on a Mac';
  }
});

5. Helper

You can use Pressure.map() to map a value from one range of values to another. It takes 5 params: Pressure.map(inputValue, inputValueMin, inputValueMax, mapToMin, mapToMax); Here is a good write up on how this works in the Processing framework: Map Function

Pressure.set('#element', {
  change: function(force, event){
    // this takes the force, given that the force can range from 0 to 1, and maps that force value on a 100 to 200 range
    this.style.width = Pressure.map(force, 0, 1, 100, 200);
  }
});