├── examples
    ├── use-with-AMD
    │   ├── assets
    │   │   ├── bg.jpg
    │   │   └── style.css
    │   ├── index.html
    │   ├── main.js
    │   └── require.js
    ├── use-with-ES6
    │   ├── assets
    │   │   ├── bg.jpg
    │   │   └── style.css
    │   ├── package.json
    │   ├── index.html
    │   ├── main.js
    │   └── webpack-dev-server.config.js
    ├── use-with-<script>
    │   ├── assets
    │   │   ├── bg.jpg
    │   │   └── style.css
    │   ├── index.html
    │   └── main.js
    ├── use-with-CommonJS
    │   ├── assets
    │   │   ├── bg.jpg
    │   │   └── style.css
    │   ├── package.json
    │   ├── index.html
    │   ├── main.js
    │   └── webpack-dev-server.config.js
    └── homepage
    │   ├── index.html
    │   ├── main.js
    │   ├── assets
    │       └── style.css
    │   └── dist
    │       └── forcify.min.js
├── .gitignore
├── src
    ├── mouse.js
    ├── delegate.js
    ├── press.js
    ├── touch.js
    └── forcify.js
├── package.json
├── LICENSE
├── webpack.config.js
├── dist
    ├── forcify.min.js
    └── forcify.debug.js
└── README.md


/examples/use-with-AMD/assets/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Huxpro/forcify/HEAD/examples/use-with-AMD/assets/bg.jpg


--------------------------------------------------------------------------------
/examples/use-with-ES6/assets/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Huxpro/forcify/HEAD/examples/use-with-ES6/assets/bg.jpg


--------------------------------------------------------------------------------
/examples/use-with-<script>/assets/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Huxpro/forcify/HEAD/examples/use-with-<script>/assets/bg.jpg


--------------------------------------------------------------------------------
/examples/use-with-CommonJS/assets/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Huxpro/forcify/HEAD/examples/use-with-CommonJS/assets/bg.jpg


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | */node_modules
 4 | npm-debug.log
 5 | *.swp
 6 | *.sh
 7 | .sw*
 8 | .sass-cache/
 9 | */.sass-cache/
10 | *.css.map
11 | cordova/
12 | 


--------------------------------------------------------------------------------
/examples/use-with-ES6/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "forcify-example-es6",
 3 |   "version": "0.1.0",
 4 |   "description": "",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": ""
 8 |   },
 9 |   "scripts": {
10 |     "start": "webpack-dev-server --config webpack-dev-server.config.js --progress --host 0.0.0.0 --port 3020 --inline --colors"
11 |   },
12 |   "devDependencies": {
13 |     "babel-core": "^5.8.21",
14 |     "babel-loader": "^5.3.2",
15 |     "webpack": "^1.12.2",
16 |     "webpack-dev-server": "^1.10.1"
17 |   },
18 |   "dependencies": {
19 |     "forcify": "^0.1.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/use-with-CommonJS/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "forcify-example-commonjs",
 3 |   "version": "0.1.0",
 4 |   "description": "",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": ""
 8 |   },
 9 |   "scripts": {
10 |     "start": "webpack-dev-server --config webpack-dev-server.config.js --progress --host 0.0.0.0 --port 3020 --inline --colors"
11 |   },
12 |   "devDependencies": {
13 |     "babel-core": "^5.8.21",
14 |     "babel-loader": "^5.3.2",
15 |     "webpack": "^1.12.2",
16 |     "webpack-dev-server": "^1.10.1"
17 |   },
18 |   "dependencies": {
19 |     "forcify": "^0.1.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/mouse.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *  mouse.js
 3 |  *
 4 |  *  Mouse module of forcify.js
 5 |  *  created by @huxpro
 6 |  */
 7 | 
 8 | export default class Mouse{
 9 |     constructor(Forcify){
10 |         this.init(Forcify);
11 |     }
12 |     init(Forcify){
13 |         let fn = Forcify.prototype
14 | 
15 |         // if mouse support force
16 |         fn.handleMouseForce = function(_instance, nativeEvent){
17 |             // max value for trackpad is 3.0 compare to 1.0 on iOS
18 |             let force = nativeEvent.webkitForce/3;
19 |             let _e = {
20 |                 force,
21 |                 nativeEvent
22 |             };
23 |             _instance.invokeHandlers(_instance, _e)
24 |         }
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/examples/use-with-ES6/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Forcify.js | Demo</title>
 6 |     <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |     <link rel="stylesheet" type="text/css" href="assets/style.css">
 8 | </head>
 9 | <body>
10 |     <h1>Forcify</h1>
11 |     <p>Touch the sun, on every device.</p>
12 | 
13 |     <div id="background"></div>
14 |     <div id="forceMe"></div>
15 |     <div id="forceMe2"></div>
16 |     <div id="forceValue">Force: 0</div>
17 |     <div id="footer">
18 | 
19 |     <a href="http://github.com/huxpro/forcify">Github</a> |
20 |     <a href="http://huangxuan.me/">Hux</a></div>
21 | 
22 |     <script src="bundle.js"></script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/examples/use-with-CommonJS/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Forcify.js | Demo</title>
 6 |     <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |     <link rel="stylesheet" type="text/css" href="assets/style.css">
 8 | </head>
 9 | <body>
10 |     <h1>Forcify</h1>
11 |     <p>Touch the sun, on every device.</p>
12 | 
13 |     <div id="background"></div>
14 |     <div id="forceMe"></div>
15 |     <div id="forceMe2"></div>
16 |     <div id="forceValue">Force: 0</div>
17 |     <div id="footer">
18 | 
19 |     <a href="http://github.com/huxpro/forcify">Github</a> |
20 |     <a href="http://huangxuan.me/">Hux</a></div>
21 | 
22 |     <script src="bundle.js"></script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/examples/use-with-AMD/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Forcify.js | Demo</title>
 6 |     <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |     <link rel="stylesheet" type="text/css" href="assets/style.css">
 8 | </head>
 9 | <body>
10 |     <h1>Forcify</h1>
11 |     <p>Touch the sun, on every device.</p>
12 | 
13 |     <div id="background"></div>
14 |     <div id="forceMe"></div>
15 |     <div id="forceMe2"></div>
16 |     <div id="forceValue">Force: 0</div>
17 |     <div id="footer">
18 | 
19 |     <a href="http://github.com/huxpro/forcify">Github</a> |
20 |     <a href="http://huangxuan.me/">Hux</a></div>
21 | 
22 |     <script defer async src="require.js" data-main="main.js"></script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/examples/use-with-<script>/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Forcify.js | Demo</title>
 6 |     <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |     <link rel="stylesheet" type="text/css" href="assets/style.css">
 8 | </head>
 9 | <body>
10 |     <h1>Forcify</h1>
11 |     <p>Touch the sun, on every device.</p>
12 | 
13 |     <div id="background"></div>
14 |     <div id="forceMe"></div>
15 |     <div id="forceMe2"></div>
16 |     <div id="forceValue">Force: 0</div>
17 |     <div id="footer">
18 | 
19 |     <a href="http://github.com/huxpro/forcify">Github</a> |
20 |     <a href="http://huangxuan.me/">Hux</a></div>
21 | 
22 |     <script src="../../dist/forcify.min.js"></script>
23 |     <script src="main.js"></script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "forcify",
 3 |   "version": "0.2.4",
 4 |   "author": "Hux <huxpro@gmail.com>",
 5 |   "description": "Forcify is a JavaScript library help you polyfill 3D/Force Touch in any device.",
 6 |   "keywords": [
 7 |       "forcify",
 8 |       "3d touch",
 9 |       "force touch",
10 |       "force"
11 |   ],
12 |   "main": "dist/forcify.min.js",
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "https://github.com/Huxpro/forcify"
16 |   },
17 |   "bugs": "https://github.com/Huxpro/forcify/issues",
18 |   "homepage": "http://huangxuan.me/forcify",
19 |   "scripts": {
20 |     "build"     : "webpack --config webpack.config.js --progress --colors",
21 |     "build-dev" : "MODE=dev webpack --config webpack.config.js --progress --colors"
22 |   },
23 |   "devDependencies": {
24 |     "babel-core": "^5.8.21",
25 |     "babel-loader": "^5.3.2",
26 |     "webpack": "^1.12.2",
27 |     "webpack-dev-server": "^1.10.1"
28 |   },
29 |   "dependencies": {
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/examples/homepage/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Forcify.js</title>
 6 |     <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |     <link rel="stylesheet" type="text/css" href="assets/style.css">
 8 | </head>
 9 | <body>
10 |     <div class="inner">
11 |         <div id="bg">
12 |             <h1>Forcify</h1>
13 |             <p>Use Force Touch in any device, today.</p>
14 |             <p class="button">
15 |                 <a href="http://github.com/huxpro/forcify">Github</a>
16 |             </p>
17 |             <p class="footer">
18 |                 Copyright (c) 2015 <a href="http://huangxuan.me/about/#en">Hux</a>
19 |             </p>
20 |         </div>
21 |         <div id="forceMe"></div>
22 |         <p id="forceValue">Force: 0.0000</p>
23 | 
24 | 
25 |     </div>
26 | 
27 |     <script src="dist/forcify.min.js"></script>
28 |     <script src="main.js"></script>
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015-2015 Huang Xuan Hux
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/examples/use-with-ES6/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Forcify Example
 3 |  * use with ES6
 4 |  *
 5 |  *
 6 |  * this example use Babel to transform ES6 into ES5 code.
 7 |  */
 8 | 
 9 | 
10 | //Import Forcify
11 | import Forcify from 'forcify';
12 | 
13 | 
14 | 
15 | /**
16 |  * Cache Element
17 |  */
18 | let element             = document.getElementById('forceMe');
19 | let element2            = document.getElementById('forceMe2');
20 | let forceValueOutput    = document.getElementById('forceValue');
21 | let background          = document.getElementById('background');
22 | 
23 | 
24 | 
25 | /**
26 |  * Create Forcify Instances
27 |  */
28 | let qf = new Forcify(element);
29 | qf.on('force', (e) => {
30 |     renderElement(e.force, element)
31 | });
32 | 
33 | // Forcify support Muti-touch!
34 | let qf2 = new Forcify(element2);
35 | qf2.on('force', (e) => {
36 |     renderElement(e.force, element2)
37 | });
38 | 
39 | 
40 | 
41 | /**
42 |  * Render!
43 |  */
44 | function renderElement(forceValue, _element) {
45 |     // animate element
46 |     _element.style.webkitTransform = `translateX(-50%) translateY(-50%) scale(${(1 + forceValue * 1.5)})`;
47 | 
48 |     // blur background, only in iOS/OSX for performance reasons.
49 |     if(Forcify.detection.TOUCH3D || Forcify.detection.OSXFORCE){
50 |         background.style.webkitFilter = `blur(${forceValue * 30}px)`;
51 |     }
52 | 
53 |     // output force value
54 |     forceValueOutput.innerHTML = `Force: ${forceValue.toFixed(4)}`;
55 | }
56 | 


--------------------------------------------------------------------------------
/examples/use-with-<script>/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Forcify Example
 3 |  * use with <script>
 4 |  *
 5 |  * Forcify is injected to the window(global) this way
 6 |  * so feel free to invole it directly
 7 |  */
 8 | 
 9 | 
10 | 
11 | /**
12 |  * Cache Element
13 |  */
14 | var element             = document.getElementById('forceMe');
15 | var element2            = document.getElementById('forceMe2');
16 | var forceValueOutput    = document.getElementById('forceValue');
17 | var background          = document.getElementById('background');
18 | 
19 | 
20 | 
21 | /**
22 |  * Create Forcify Instances
23 |  */
24 | var qf = new Forcify(element);
25 | qf.on('force', function(e){
26 |     renderElement(e.force, element)
27 | });
28 | 
29 | // Forcify support Muti-touch!
30 | var qf2 = new Forcify(element2);
31 | qf2.on('force', function(e){
32 |     renderElement(e.force, element2)
33 | });
34 | 
35 | 
36 | 
37 | /**
38 |  * Render!
39 |  */
40 | function renderElement(forceValue, _element) {
41 |     // animate element
42 |     _element.style.webkitTransform =
43 |         'translateX(-50%) translateY(-50%) scale(' +
44 |         (1 + forceValue * 1.5) +
45 |         ')';
46 | 
47 |     // blur background, only in iOS/OSX for performance reasons.
48 |     if(Forcify.detection.TOUCH3D || Forcify.detection.OSXFORCE){
49 |         background.style.webkitFilter = 'blur(' + forceValue * 30 + 'px)';
50 |     }
51 | 
52 |     // output force value
53 |     forceValueOutput.innerHTML = 'Force: ' + forceValue.toFixed(4);
54 | }
55 | 


--------------------------------------------------------------------------------
/examples/homepage/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Forcify Homepage
 3 |  * offcial site
 4 |  *
 5 |  * created by @huxpro
 6 |  */
 7 | 
 8 | 
 9 | 
10 | /**
11 |  * Cache Element
12 |  */
13 |  var element             = document.getElementById('forceMe');
14 |  var forceValueOutput    = document.getElementById('forceValue');
15 |  var background          = document.getElementById('bg');
16 | 
17 | 
18 | 
19 | /**
20 |  * Create Forcify Instances
21 |  */
22 | var qf = new Forcify(element, {
23 |     LONG_PRESS_DELAY: 200,
24 |     LONG_PRESS_DURATION: 300
25 | });
26 | qf.on('force', function(e){
27 |     renderElement(e.force, element)
28 | });
29 | 
30 | 
31 | 
32 | /**
33 |  * Render!
34 |  */
35 | function renderElement(forceValue, _element) {
36 |     // animate element
37 |     _element.style.webkitTransform =
38 |         'translateX(-50%) translateY(-50%) scale(' +
39 |         (1 + forceValue * 1.5) +
40 |         ')';
41 | 
42 |     _element.style.opacity = String(1 - forceValue*0.5)
43 | 
44 |     // blur background only in latest iOS/OSX for performance reasons.
45 |     if(Forcify.detection.TOUCH3D || Forcify.detection.OSXFORCE){
46 |         background.style.webkitFilter = 'blur(' + forceValue * 10 + 'px)';
47 |     }
48 | 
49 |     // improve performance in others. (fakers)
50 |     if(!Forcify.detection.TOUCH3D && !Forcify.detection.OSXFORCE){
51 |         _element.style.webkitTransition = "all .1s"
52 |     }
53 | 
54 |     // output force value
55 |     forceValueOutput.innerHTML = 'Force: ' + forceValue.toFixed(4);
56 | }
57 | 


--------------------------------------------------------------------------------
/examples/use-with-CommonJS/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Forcify Example
 3 |  * use with CommonJS
 4 |  *
 5 |  * If you want to run CommonJS in browser, you need build tool
 6 |  * this example is built by webpack, you can use browserify as well.
 7 |  */
 8 | 
 9 | 
10 | //Require Forcify
11 | var Forcify = require('forcify')
12 | 
13 | 
14 | 
15 | /**
16 |  * Cache Element
17 |  */
18 | var element             = document.getElementById('forceMe');
19 | var element2            = document.getElementById('forceMe2');
20 | var forceValueOutput    = document.getElementById('forceValue');
21 | var background          = document.getElementById('background');
22 | 
23 | 
24 | 
25 | /**
26 |  * Create Forcify Instances
27 |  */
28 | var qf = new Forcify(element);
29 | qf.on('force', function(e){
30 |     renderElement(e.force, element)
31 | });
32 | 
33 | // Forcify support Muti-touch!
34 | var qf2 = new Forcify(element2);
35 | qf2.on('force', function(e){
36 |     renderElement(e.force, element2)
37 | });
38 | 
39 | 
40 | 
41 | /**
42 |  * Render!
43 |  */
44 | function renderElement(forceValue, _element) {
45 |     // animate element
46 |     _element.style.webkitTransform =
47 |         'translateX(-50%) translateY(-50%) scale(' +
48 |         (1 + forceValue * 1.5) +
49 |         ')';
50 | 
51 |     // blur background, only in iOS/OSX for performance reasons.
52 |     if(Forcify.detection.TOUCH3D || Forcify.detection.OSXFORCE){
53 |         background.style.webkitFilter = 'blur(' + forceValue * 30 + 'px)';
54 |     }
55 | 
56 |     // output force value
57 |     forceValueOutput.innerHTML = 'Force: ' + forceValue.toFixed(4);
58 | }
59 | 


--------------------------------------------------------------------------------
/examples/use-with-ES6/webpack-dev-server.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Webpack Config for Forcify Example - use with CommonJS.
 3 |  * created by @huxpro
 4 |  */
 5 | 
 6 | var webpack = require('webpack');
 7 | var path = require('path');
 8 | var buildPath = path.resolve(__dirname, 'build');
 9 | var nodeModulesPath = path.resolve(__dirname, 'node_modules');
10 | 
11 | var config = {
12 | 
13 |   entry: [
14 |     path.join(__dirname, '/main.js')
15 |   ],
16 | 
17 |   output: {
18 |     path: buildPath,    //Path of output file
19 |     filename: 'bundle.js'
20 |   },
21 | 
22 |   resolve: {
23 |     extensions: ["", ".js", ".jsx"]
24 |     //node_modules: ["web_modules", "node_modules"]  (Default Settings)
25 |   },
26 | 
27 |   //Server Configuration options
28 |   devServer:{
29 |     contentBase: '',  //Relative directory for base of server
30 |     devtool: 'eval',
31 |     inline: true,
32 |     port: 3020,       //Port Number
33 |     stats: {
34 |         colors: true,
35 |         cached: false,
36 |         exclude: [/node_modules[\\\/]/]
37 |     }
38 |   },
39 | 
40 |   devtool: 'source-map',
41 | 
42 |   plugins: [
43 |     //Allows error warnings but does not stop compiling. Will remove when eslint is added
44 |     new webpack.NoErrorsPlugin(),
45 |   ],
46 |   module: {
47 |     //Loaders to interpret non-vanilla javascript code as well as most other extensions including images and text.
48 |     loaders: [
49 |       {
50 |         test: /\.(js|jsx)$/,  //All .js and .jsx files
51 |         loaders: ['babel-loader?stage=0'],
52 |         exclude: [nodeModulesPath]
53 |       },
54 |     ]
55 |   },
56 | };
57 | 
58 | module.exports = config;
59 | 


--------------------------------------------------------------------------------
/examples/use-with-CommonJS/webpack-dev-server.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Webpack Config for Forcify Example - use with CommonJS.
 3 |  * created by @huxpro
 4 |  */
 5 | 
 6 | var webpack = require('webpack');
 7 | var path = require('path');
 8 | var buildPath = path.resolve(__dirname, 'build');
 9 | var nodeModulesPath = path.resolve(__dirname, 'node_modules');
10 | 
11 | var config = {
12 | 
13 |   entry: [
14 |     path.join(__dirname, '/main.js')
15 |   ],
16 | 
17 |   output: {
18 |     path: buildPath,    //Path of output file
19 |     filename: 'bundle.js'
20 |   },
21 | 
22 |   resolve: {
23 |     extensions: ["", ".js", ".jsx"]
24 |     //node_modules: ["web_modules", "node_modules"]  (Default Settings)
25 |   },
26 | 
27 |   //Server Configuration options
28 |   devServer:{
29 |     contentBase: '',  //Relative directory for base of server
30 |     devtool: 'eval',
31 |     inline: true,
32 |     port: 3020,       //Port Number
33 |     stats: {
34 |         colors: true,
35 |         cached: false,
36 |         exclude: [/node_modules[\\\/]/]
37 |     }
38 |   },
39 | 
40 |   devtool: 'source-map',
41 | 
42 |   plugins: [
43 |     //Allows error warnings but does not stop compiling. Will remove when eslint is added
44 |     new webpack.NoErrorsPlugin(),
45 |   ],
46 |   module: {
47 |     //Loaders to interpret non-vanilla javascript code as well as most other extensions including images and text.
48 |     loaders: [
49 |       {
50 |         test: /\.(js|jsx)$/,  //All .js and .jsx files
51 |         loaders: ['babel-loader?stage=0'],
52 |         exclude: [nodeModulesPath]
53 |       },
54 |     ]
55 |   },
56 | };
57 | 
58 | module.exports = config;
59 | 


--------------------------------------------------------------------------------
/examples/use-with-AMD/assets/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: orange;
 3 |   color: #FFF;
 4 |   font-family: -apple-system, 'Helvetica Neue', Arial;
 5 |   padding: 0;
 6 |   margin: 0;
 7 |   overflow: hidden;
 8 |   text-align: center;
 9 | }
10 | 
11 | a {
12 |   color: inherit;
13 |   text-decoration: none;
14 | }
15 | 
16 | h1 {
17 |   font-weight: 100;
18 |   font-size: 50px;
19 |   margin-bottom: 0;
20 | }
21 | 
22 | #background {
23 |   position: absolute;
24 |   top: 0;
25 |   left: 50%;
26 |   transform: translateX(-50%);
27 |   width: 100vw;
28 |   max-width: 414px;
29 |   min-width: 320px;
30 |   height: 100vh;
31 |   background-image: url(bg.jpg);
32 |   background-repeat: no-repeat;
33 |   background-position: top left;
34 |   background-size: 100% auto;
35 |   transition: -webkit-filter .1s;
36 |   z-index: -1;
37 | }
38 | 
39 | #forceMe, #forceMe2 {
40 |   width: 93px;
41 |   height: 93px;
42 |   background: rgba(255,255,255,0.7);
43 |   border-radius: 100%;
44 |   position: absolute;
45 |   top: 408px;
46 |   left: 50%;
47 |   -webkit-touch-callout: none;
48 |   -webkit-transform: translateX(-50%) translateY(-50%);
49 |   /*transition: -webkit-transform .1s;*/
50 | }
51 | 
52 | #forceMe2 {
53 |     transition: -webkit-transform .1s;
54 | }
55 | 
56 | #forceMe2{
57 |     top:150px;
58 | }
59 | @media (min-width: 414px) {
60 |   #forceMe {
61 |     top: 450px;
62 |   }
63 | }
64 | 
65 | #footer {
66 |   position: fixed;
67 |   bottom: 10px;
68 |   right: 10px;
69 |   width: 100%;
70 |   text-align: right;
71 | }
72 | 
73 | #forceValue {
74 |   position: fixed;
75 |   bottom: 10px;
76 |   left: 10px;
77 |   width: 100%;
78 |   text-align: left;
79 | }
80 | 


--------------------------------------------------------------------------------
/examples/use-with-ES6/assets/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: orange;
 3 |   color: #FFF;
 4 |   font-family: -apple-system, 'Helvetica Neue', Arial;
 5 |   padding: 0;
 6 |   margin: 0;
 7 |   overflow: hidden;
 8 |   text-align: center;
 9 | }
10 | 
11 | a {
12 |   color: inherit;
13 |   text-decoration: none;
14 | }
15 | 
16 | h1 {
17 |   font-weight: 100;
18 |   font-size: 50px;
19 |   margin-bottom: 0;
20 | }
21 | 
22 | #background {
23 |   position: absolute;
24 |   top: 0;
25 |   left: 50%;
26 |   transform: translateX(-50%);
27 |   width: 100vw;
28 |   max-width: 414px;
29 |   min-width: 320px;
30 |   height: 100vh;
31 |   background-image: url(bg.jpg);
32 |   background-repeat: no-repeat;
33 |   background-position: top left;
34 |   background-size: 100% auto;
35 |   transition: -webkit-filter .1s;
36 |   z-index: -1;
37 | }
38 | 
39 | #forceMe, #forceMe2 {
40 |   width: 93px;
41 |   height: 93px;
42 |   background: rgba(255,255,255,0.7);
43 |   border-radius: 100%;
44 |   position: absolute;
45 |   top: 408px;
46 |   left: 50%;
47 |   -webkit-touch-callout: none;
48 |   -webkit-transform: translateX(-50%) translateY(-50%);
49 |   /*transition: -webkit-transform .1s;*/
50 | }
51 | 
52 | #forceMe2 {
53 |     transition: -webkit-transform .1s;
54 | }
55 | 
56 | #forceMe2{
57 |     top:150px;
58 | }
59 | @media (min-width: 414px) {
60 |   #forceMe {
61 |     top: 450px;
62 |   }
63 | }
64 | 
65 | #footer {
66 |   position: fixed;
67 |   bottom: 10px;
68 |   right: 10px;
69 |   width: 100%;
70 |   text-align: right;
71 | }
72 | 
73 | #forceValue {
74 |   position: fixed;
75 |   bottom: 10px;
76 |   left: 10px;
77 |   width: 100%;
78 |   text-align: left;
79 | }
80 | 


--------------------------------------------------------------------------------
/examples/use-with-<script>/assets/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: orange;
 3 |   color: #FFF;
 4 |   font-family: -apple-system, 'Helvetica Neue', Arial;
 5 |   padding: 0;
 6 |   margin: 0;
 7 |   overflow: hidden;
 8 |   text-align: center;
 9 | }
10 | 
11 | a {
12 |   color: inherit;
13 |   text-decoration: none;
14 | }
15 | 
16 | h1 {
17 |   font-weight: 100;
18 |   font-size: 50px;
19 |   margin-bottom: 0;
20 | }
21 | 
22 | #background {
23 |   position: absolute;
24 |   top: 0;
25 |   left: 50%;
26 |   transform: translateX(-50%);
27 |   width: 100vw;
28 |   max-width: 414px;
29 |   min-width: 320px;
30 |   height: 100vh;
31 |   background-image: url(bg.jpg);
32 |   background-repeat: no-repeat;
33 |   background-position: top left;
34 |   background-size: 100% auto;
35 |   transition: -webkit-filter .1s;
36 |   z-index: -1;
37 | }
38 | 
39 | #forceMe, #forceMe2 {
40 |   width: 93px;
41 |   height: 93px;
42 |   background: rgba(255,255,255,0.7);
43 |   border-radius: 100%;
44 |   position: absolute;
45 |   top: 408px;
46 |   left: 50%;
47 |   -webkit-touch-callout: none;
48 |   -webkit-transform: translateX(-50%) translateY(-50%);
49 |   /*transition: -webkit-transform .1s;*/
50 | }
51 | 
52 | #forceMe2 {
53 |     transition: -webkit-transform .1s;
54 | }
55 | 
56 | #forceMe2{
57 |     top:150px;
58 | }
59 | @media (min-width: 414px) {
60 |   #forceMe {
61 |     top: 450px;
62 |   }
63 | }
64 | 
65 | #footer {
66 |   position: fixed;
67 |   bottom: 10px;
68 |   right: 10px;
69 |   width: 100%;
70 |   text-align: right;
71 | }
72 | 
73 | #forceValue {
74 |   position: fixed;
75 |   bottom: 10px;
76 |   left: 10px;
77 |   width: 100%;
78 |   text-align: left;
79 | }
80 | 


--------------------------------------------------------------------------------
/examples/use-with-CommonJS/assets/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: orange;
 3 |   color: #FFF;
 4 |   font-family: -apple-system, 'Helvetica Neue', Arial;
 5 |   padding: 0;
 6 |   margin: 0;
 7 |   overflow: hidden;
 8 |   text-align: center;
 9 | }
10 | 
11 | a {
12 |   color: inherit;
13 |   text-decoration: none;
14 | }
15 | 
16 | h1 {
17 |   font-weight: 100;
18 |   font-size: 50px;
19 |   margin-bottom: 0;
20 | }
21 | 
22 | #background {
23 |   position: absolute;
24 |   top: 0;
25 |   left: 50%;
26 |   transform: translateX(-50%);
27 |   width: 100vw;
28 |   max-width: 414px;
29 |   min-width: 320px;
30 |   height: 100vh;
31 |   background-image: url(bg.jpg);
32 |   background-repeat: no-repeat;
33 |   background-position: top left;
34 |   background-size: 100% auto;
35 |   transition: -webkit-filter .1s;
36 |   z-index: -1;
37 | }
38 | 
39 | #forceMe, #forceMe2 {
40 |   width: 93px;
41 |   height: 93px;
42 |   background: rgba(255,255,255,0.7);
43 |   border-radius: 100%;
44 |   position: absolute;
45 |   top: 408px;
46 |   left: 50%;
47 |   -webkit-touch-callout: none;
48 |   -webkit-transform: translateX(-50%) translateY(-50%);
49 |   /*transition: -webkit-transform .1s;*/
50 | }
51 | 
52 | #forceMe2 {
53 |     transition: -webkit-transform .1s;
54 | }
55 | 
56 | #forceMe2{
57 |     top:150px;
58 | }
59 | @media (min-width: 414px) {
60 |   #forceMe {
61 |     top: 450px;
62 |   }
63 | }
64 | 
65 | #footer {
66 |   position: fixed;
67 |   bottom: 10px;
68 |   right: 10px;
69 |   width: 100%;
70 |   text-align: right;
71 | }
72 | 
73 | #forceValue {
74 |   position: fixed;
75 |   bottom: 10px;
76 |   left: 10px;
77 |   width: 100%;
78 |   text-align: left;
79 | }
80 | 


--------------------------------------------------------------------------------
/examples/use-with-AMD/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Forcify Example
 3 |  * use with AMD
 4 |  *
 5 |  *
 6 |  * This example use Require.js to load AMD Module.
 7 |  */
 8 | 
 9 | 
10 | // Require Path Config
11 | require.config({
12 |     paths: {
13 |         Forcify: "../../dist/forcify.min"
14 |     }
15 | })
16 | 
17 | 
18 | // AMD Wrapper
19 | define(['Forcify'], function(Forcify){
20 | 
21 | 
22 | /**
23 |  * Cache Element
24 |  */
25 | var element             = document.getElementById('forceMe');
26 | var element2            = document.getElementById('forceMe2');
27 | var forceValueOutput    = document.getElementById('forceValue');
28 | var background          = document.getElementById('background');
29 | 
30 | 
31 | 
32 | /**
33 |  * Create Forcify Instances
34 |  */
35 | var qf = new Forcify(element);
36 | qf.on('force', function(e){
37 |     renderElement(e.force, element)
38 | });
39 | 
40 | // Forcify support Muti-touch!
41 | var qf2 = new Forcify(element2);
42 | qf2.on('force', function(e){
43 |     renderElement(e.force, element2)
44 | });
45 | 
46 | 
47 | 
48 | /**
49 |  * Render!
50 |  */
51 | function renderElement(forceValue, _element) {
52 |     // animate element
53 |     _element.style.webkitTransform =
54 |         'translateX(-50%) translateY(-50%) scale(' +
55 |         (1 + forceValue * 1.5) +
56 |         ')';
57 | 
58 |     // blur background, only in iOS/OSX for performance reasons.
59 |     if(Forcify.detection.TOUCH3D || Forcify.detection.OSXFORCE){
60 |         background.style.webkitFilter = 'blur(' + forceValue * 30 + 'px)';
61 |     }
62 | 
63 |     // output force value
64 |     forceValueOutput.innerHTML = 'Force: ' + forceValue.toFixed(4);
65 | }
66 | 
67 | 
68 | // Wrapper End.
69 | })
70 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Webpack Config for Forcify Build.
 3 |  * created by @huxpro
 4 |  */
 5 | 
 6 | var webpack         = require('webpack');
 7 | var path            = require('path');
 8 | var buildPath       = path.resolve(__dirname, 'dist');
 9 | var nodeModulesPath = path.resolve(__dirname, 'node_modules');
10 | var outputFileName  = process.env.MODE == 'dev' ?
11 |                         "forcify.debug.js" :
12 |                         "forcify.min.js"
13 | 
14 | var config = {
15 | 
16 |     entry: [
17 |         path.join(__dirname, '/src/forcify.js')
18 |     ],
19 | 
20 |     output: {
21 |         path: buildPath,            //Path of output file
22 |         filename: outputFileName,   //Name of output file
23 |         library: 'Forcify',         //Library Name
24 |         libraryTarget: 'umd'        //Target format
25 |     },
26 | 
27 |     resolve: {
28 |         extensions: ["", ".js", ".jsx"]
29 |         //node_modules: ["web_modules", "node_modules"]  (Default Settings)
30 |     },
31 | 
32 |     plugins: (process.env.MODE == 'dev')? [] : [
33 |         //Minify the bundle
34 |         new webpack.optimize.UglifyJsPlugin({
35 |             compress: {
36 |                 warnings: false,
37 |                 drop_console: true
38 |             }
39 |         }),
40 |         //Allows error warnings but does not stop compiling. Will remove when eslint is added
41 |         new webpack.NoErrorsPlugin()
42 |     ],
43 | 
44 |     module: {
45 |         loaders: [
46 |           {
47 |             test: /\.(js|jsx)$/, //All .js and .jsx files
48 |             loader: 'babel-loader?stage=0',
49 |             exclude: [nodeModulesPath]
50 |           }
51 |         ]
52 |     },
53 | };
54 | 
55 | module.exports = config;
56 | 


--------------------------------------------------------------------------------
/src/delegate.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *  delegate.js
 3 |  *
 4 |  *  Delegate module of forcify.js
 5 |  *  created by @huxpro
 6 |  */
 7 | 
 8 | export default class Delegate{
 9 |     constructor(Forcify){
10 |         this.init(Forcify);
11 |     }
12 |     init(Forcify){
13 |         function bindEvent(){
14 |             // event need to be delegated
15 |             let events = [
16 |                 'mousedown',
17 |                 'mouseup',
18 |                 'touchstart',
19 |                 'touchmove',
20 |                 'touchend',
21 |                 'webkitmouseforcewillbegin',
22 |                 'webkitmouseforcechanged'
23 |             ];
24 |             events.forEach((e) => {
25 |                 document.addEventListener(e, handleDelegate)
26 |             })
27 |         }
28 | 
29 |         function handleDelegate(nativeEvent){
30 |             // stop event propagation.
31 |             // check e.target only.
32 |             if(!Forcify.__EVENT_BOBBLE__){
33 |                 let _target = nativeEvent.target;
34 |                 let _uid = _target.__fuid__;
35 |                 emitByUID(_uid, nativeEvent)
36 |                 return;
37 |             }
38 | 
39 |             // support event bubble
40 |             // taversal e.path
41 |             let _path   = nativeEvent.path;
42 |             _path.forEach((ele) => {
43 |                 if(!ele.__fuid__) return;   // fuid is ensure > 0
44 |                 let _uid = ele.__fuid__;
45 |                 emitByUID(_uid, nativeEvent);
46 |             })
47 |         }
48 | 
49 |         function emitByUID(_uid, nativeEvent){
50 |             let caches = Forcify.cache;
51 |             // if element targeted is a registered Forcify Instance.
52 |             if (caches[_uid]) {
53 |                 // Target! Let's emit the event
54 |                 Forcify.emitEvent(caches[_uid], nativeEvent);
55 |             }
56 |         }
57 | 
58 |         bindEvent();
59 |     }
60 | }
61 | 


--------------------------------------------------------------------------------
/examples/homepage/assets/style.css:
--------------------------------------------------------------------------------
 1 | html, body{
 2 |     min-height: 100%;
 3 |     background: white; /* Old browsers */
 4 | }
 5 | 
 6 | *{
 7 |     -webkit-tap-highlight-color: transparent;
 8 | }
 9 | 
10 | body {
11 |     color: #6ca8fb;
12 |     font-family: -apple-system, 'Helvetica Neue', Arial;
13 |     padding: 0;
14 |     margin: 0;
15 |     overflow: hidden;
16 |     text-align: center;
17 | }
18 | 
19 | .inner{
20 |     height: 500px;
21 |     margin-top: -250px;
22 |     position: absolute;
23 |     top: 50%;
24 |     width: 100%;
25 | }
26 | .button{
27 |     display: block;
28 |     border: 1px solid #6ca8fb;
29 |     margin: 0 auto;
30 |     border-radius: 3px;
31 |     bottom: 55px;
32 |     left: 50%;
33 |     margin-left: -131px;
34 |     position: absolute;
35 | }
36 | 
37 | .button a{
38 |     display: block;
39 |     text-decoration: none;
40 |     width: 260px;
41 |     height: 40px;
42 |     line-height: 40px;
43 |     font-weight: 900;
44 | }
45 | 
46 | .footer{
47 |     position: absolute;
48 |     width: 100%;
49 |     bottom: 0px;
50 |     font-size: 13px;
51 | }
52 | 
53 | a {
54 |     color: inherit;
55 | }
56 | 
57 | h1 {
58 |     font-weight: 100;
59 |     font-size: 50px;
60 |     margin-bottom: 0;
61 | }
62 | 
63 | #background {
64 |     position: absolute;
65 |     top: 0;
66 |     left: 50%;
67 |     transform: translateX(-50%);
68 |     width: 100vw;
69 |     max-width: 414px;
70 |     min-width: 320px;
71 |     height: 100vh;
72 |     transition: -webkit-filter .1s;
73 |     z-index: -1;
74 | }
75 | 
76 | #forceMe {
77 |     z-index: 99;
78 |     width: 93px;
79 |     height: 93px;
80 |     background: rgba(108, 168, 251, 0.72);
81 |     opacity: 1;
82 |     border-radius: 100%;
83 |     position: absolute;
84 |     top: 235px;
85 |     left: 50%;
86 |     -webkit-touch-callout: none;
87 |     -webkit-transform: translateX(-50%) translateY(-50%);
88 |     /*transition: -webkit-transform .1s;*/
89 | }
90 | 
91 | #forceValue {
92 |     position: absolute;
93 |     top: 340px;
94 |     width: 100%;
95 |     text-align: center;
96 | }
97 | 


--------------------------------------------------------------------------------
/src/press.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *  press.js
 3 |  *
 4 |  *  Press module of forcify.js
 5 |  *  created by @huxpro
 6 |  */
 7 | 
 8 | export default class Press{
 9 |     constructor(Forcify){
10 |         this.init(Forcify);
11 |     }
12 |     init(Forcify){
13 |         let fn = Forcify.prototype
14 | 
15 |         // fallback to long press (mouse || touch)
16 |         fn.handlePress = function(_instance, nativeEvent){
17 | 
18 |             // if not fallback, early return everything.
19 |             if(!_instance.options.FALLBACK_TO_LONGPRESS) return;
20 | 
21 |             /**
22 |              * Start do fallback!
23 |              */
24 |             let delay       = _instance.options.LONG_PRESS_DELAY;
25 |             let duration    = _instance.options.LONG_PRESS_DURATION;
26 |             let type        = nativeEvent.type;
27 | 
28 |             // Press Down
29 |             if(type === "mousedown" || type === "touchstart"){
30 |                 _instance._pressTimeStamp = Date.now();
31 |                 _instance.timer = window.setTimeout(()=>{
32 |                     // Long Press!
33 |                     // Let's trigger fake Force now.
34 |                     _instance.repeatPushForceValue(_instance, nativeEvent)
35 |                 }, delay)
36 |             }
37 | 
38 |             // Press Up
39 |             if(type === 'mouseup' || type === "touchend"){
40 |                 window.clearTimeout(_instance.timer);
41 |                 if(Date.now() - _instance._pressTimeStamp > delay){
42 |                     // stop pushing
43 |                     _instance._pressTimeStamp = 0;
44 | 
45 |                     // reset force.
46 |                     let _e = {
47 |                         force: 0,
48 |                         nativeEvent
49 |                     };
50 |                     _instance.invokeHandlers(_instance, _e)
51 |                 }
52 |             }
53 |         }
54 | 
55 |         fn.repeatPushForceValue = function(_instance, nativeEvent){
56 |             // This pushing is repeating except:
57 |             //
58 |             //  - Force support is detected to true
59 |             if(Forcify.detection.TOUCH3D) return;
60 | 
61 |             //  - touchend or mouseup trigger (_pressTimeStamp is reset)
62 |             if(_instance._pressTimeStamp == 0) return;
63 | 
64 | 
65 |             /**
66 |              * Start Pushing procedure
67 |              */
68 |             console.log('start pushing...');
69 | 
70 |             let delay = _instance.options.LONG_PRESS_DELAY;
71 |             let duration = _instance.options.LONG_PRESS_DURATION;
72 | 
73 |             // calculate fake force value
74 |             let _ratio = ((Date.now() - _instance._pressTimeStamp) - delay)/duration;
75 |             // the max force value is 1
76 |             let _force = (_ratio >= 1) ? 1 : _ratio;
77 | 
78 |             // invoke event handlers
79 |             let _e = {
80 |                 force: _force,
81 |                 nativeEvent
82 |             };
83 |             _instance.invokeHandlers(_instance, _e)
84 | 
85 | 
86 |             /**
87 |              * repeat pushing...
88 |              */
89 |             window.setTimeout(_instance.repeatPushForceValue.bind(null, _instance, nativeEvent, delay), 20)
90 |         }
91 |     }
92 | }
93 | 


--------------------------------------------------------------------------------
/src/touch.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  *  touch.js
  3 |  *
  4 |  *  Touch module of forcify.js
  5 |  *  created by @huxpro
  6 |  */
  7 | 
  8 | export default class Touch{
  9 |     constructor(Forcify){
 10 |         this.init(Forcify);
 11 |     }
 12 |     init(Forcify){
 13 |         let fn = Forcify.prototype;
 14 |         fn.handleTouch = function(_instance, nativeEvent){
 15 |             let type = nativeEvent.type;
 16 | 
 17 |             // Forcify strictly limit every view respond to only one finger
 18 |             // So targetTouches always empty when touchend,
 19 |             // So we first deal with touchend
 20 |             if(type == "touchend"){
 21 |                 // reset touch ref
 22 |                 _instance.touch = null;
 23 |                 // also send to handlePress
 24 |                 _instance.handlePress(_instance, nativeEvent);
 25 |                 return;
 26 |             }
 27 | 
 28 |             /**
 29 |              * It's hard to judge if Force Touch is truly supported:
 30 |              *
 31 |              * Events from supported iPhone always begin with force:0,
 32 |              * Events from unsupport iPhone with iOS 9 also include force:0,
 33 |              * We never know if a iPhone is unsupported or just not be "force-touched"
 34 |              *
 35 |              * Events from Chrome Touchable-PC include only force:0, behave well.
 36 |              * Events from Chrome Emulator     include only force:1, not shim yet
 37 |              * Events from Chrome Mobile       include both force:1 and webkitForce:1,
 38 |              *
 39 |              * Events from Chrome Nexus5 provide a very weird force value,
 40 |              * which seems depend on the AREA of the finger touched to screen!
 41 |              *
 42 |              *
 43 |              * Soooooooooooo sad,
 44 |              * Forcify has to use a Dynamic Detection to try to shim them
 45 |              */
 46 | 
 47 | 
 48 |             /**
 49 |              * Shim weird browser
 50 |              */
 51 |             if (_instance.options.SHIM_WEIRD_BROWSER) {
 52 | 
 53 |                 // detect Weird Chrome
 54 |                 if( nativeEvent.targetTouches[0].force == 1 &&
 55 |                     nativeEvent.targetTouches[0].webkitForce == 1
 56 |                 ) Forcify.detection.WEIRD_CHROME = true;
 57 | 
 58 |                 // if it's Weird Chrome or Android(ensure unsupport now)
 59 |                 if(Forcify.detection.WEIRD_CHROME || Forcify.detection.ANDROID){
 60 |                     console.log("CHROME, send into handlePress..");
 61 |                     _instance.handlePress(_instance, nativeEvent);
 62 |                     return;
 63 |                 };
 64 |             }
 65 | 
 66 | 
 67 |             /**
 68 |              * Fallback to handlePress.
 69 |              */
 70 |             let _force = nativeEvent.targetTouches[0].force;
 71 | 
 72 |             // if 'force' props is undefined
 73 |             // let handlePress to handle unsupport devices
 74 |             if(typeof _force == "undefined"){
 75 |                 _instance.handlePress(_instance, nativeEvent);
 76 |                 return;
 77 |             }
 78 | 
 79 |             // seeing Nexus5, we had to abandon android.
 80 |             // would change if there is android devices support a real 3DTouch
 81 |             if(_force > 0 && _force < 1 && !Forcify.detection.ANDROID)
 82 |             Forcify.detection.TOUCH3D = true;
 83 | 
 84 | 
 85 |             // If forceValue == 0, Forcify sent events to handlePress
 86 |             // but keep handleTouch procedure (for pre-polling)
 87 |             // alert(nativeEvent.targetTouches[0].force)
 88 |             if(_force == "0"){
 89 |                 if(!Forcify.detection.TOUCH3D){
 90 |                     console.log("send into handlePress..");
 91 |                     _instance.handlePress(_instance, nativeEvent);
 92 |                 }
 93 |                 //not return
 94 |             }
 95 | 
 96 | 
 97 |             /**
 98 |              * All Test Passed, try to polling force value
 99 |              */
100 |             // Forcify support multi-touch in multi-view,
101 |             // But in one view we only use the first touch.
102 |             if(nativeEvent.targetTouches && nativeEvent.targetTouches.length > 1) return;
103 |             if(_instance.touch) return;                         // prevent repeat binding
104 |             _instance.touch = nativeEvent.targetTouches[0];     // get first
105 | 
106 |             // seeing we don't have `touchforcechange` event,
107 |             // so we need to do it ourselves with polling.
108 |             _instance.pollingTouchForce.bind(_instance.touch, _instance, nativeEvent)();
109 |         }
110 | 
111 |         fn.pollingTouchForce = function(_instance, nativeEvent){
112 |             /**
113 |              * Start Polling procedure
114 |              */
115 |             console.log('polling...');
116 | 
117 |             var touchEvent = this;
118 |             var force = 0;
119 |             let sendEvent = true;
120 | 
121 |             if(_instance.touch) {
122 |                 force = touchEvent.force;
123 |                 // dynamic detection real 3DTouch
124 |                 if(force > 0 && force < 1) Forcify.detection.TOUCH3D = true;
125 | 
126 |                 // repeat polling
127 |                 setTimeout(_instance.pollingTouchForce.bind(_instance.touch, _instance, nativeEvent), 10);
128 | 
129 |                 // a little hacking!!
130 |                 // if force == 0 passed to here,
131 |                 // this may well be a unsuppoted device provided force:0, such as iPhone5
132 |                 // but also probably a supported device with not "force" pressed.
133 |                 //
134 |                 // so we dont know and would NOT send force event:
135 |                 // for unsupport device, let handlePress fake it.
136 |                 // for supported device, event force:0 is useless until detected.
137 |                 if(force == 0 && !Forcify.detection.TOUCH3D){
138 |                     sendEvent = false;
139 |                 }
140 |             }else{
141 |                 // touchend trigger! sent 0; 
142 |                 force = 0;
143 |                 sendEvent = true;
144 |             }
145 | 
146 |             if(sendEvent){
147 |                 let _e = { force, nativeEvent };
148 |                 _instance.invokeHandlers(_instance, _e)
149 |             }
150 |         }
151 |     }
152 | }
153 | 


--------------------------------------------------------------------------------
/dist/forcify.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Forcify=t():e.Forcify=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=0;Object.extend=Object.assign?Object.assign:function(e,t){for(var n in t)e[n]=t[n];return e};var u=function(){function e(t,n){o(this,e),this.uid=++i,this.element=t,this.handlers={},this.touch=null,this.timer=null,this._pressTimeStamp=0;var r=Object.extend({},e.defaults);this.options=Object.extend(r,n),this.element.__fuid__=this.uid;var u=e.cache;u[this.uid]=this}return r(e,[{key:"on",value:function(e,t){var n=this.handlers;return n[e]=n[e]||[],n[e].push(t),this}},{key:"invokeHandlers",value:function(e,t){e.handlers.force.forEach(function(e){e(t)})}}]),e}();t["default"]=u,u.emitEvent=function(e,t){var n=t.type;if(t.preventDefault(),("touchend"==n||"touchmove"==n||"touchstart"==n)&&e.handleTouch(e,t),("webkitmouseforcewillbegin"==n||"webkitmouseforcechanged"==n)&&(u.detection.OSXFORCE=!0,e.handleMouseForce(e,t)),"mousedown"==n||"mouseup"==n){if(u.detection.OSXFORCE)return;e.handlePress(e,t)}},u.config=function(e){e.defaults&&(u.defaults=Object.extend(u.defaults,e.defaults))},u.cache={},u.__EVENT_BOBBLE__=!1,u.defaults={LONG_PRESS_DELAY:200,LONG_PRESS_DURATION:100,FALLBACK_TO_LONGPRESS:!0,SHIM_WEIRD_BROWSER:!0},u.detection={TOUCH3D:!1,OSXFORCE:!1,WEIRD_CHROME:!1,ANDROID:navigator.userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)},new(n(2))(u),new(n(3))(u),new(n(4))(u),new(n(5))(u),e.exports=t["default"]},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=function(){function e(t){n(this,e),this.init(t)}return o(e,[{key:"init",value:function(e){var t=e.prototype;t.handleTouch=function(t,n){var o=n.type;if("touchend"==o)return t.touch=null,void t.handlePress(t,n);if(t.options.SHIM_WEIRD_BROWSER&&(1==n.targetTouches[0].force&&1==n.targetTouches[0].webkitForce&&(e.detection.WEIRD_CHROME=!0),e.detection.WEIRD_CHROME||e.detection.ANDROID))return void t.handlePress(t,n);var r=n.targetTouches[0].force;return"undefined"==typeof r?void t.handlePress(t,n):(r>0&&1>r&&!e.detection.ANDROID&&(e.detection.TOUCH3D=!0),"0"==r&&(e.detection.TOUCH3D||t.handlePress(t,n)),void(n.targetTouches&&n.targetTouches.length>1||t.touch||(t.touch=n.targetTouches[0],t.pollingTouchForce.bind(t.touch,t,n)())))},t.pollingTouchForce=function(t,n){var o=this,r=0,i=!0;if(t.touch?(r=o.force,r>0&&1>r&&(e.detection.TOUCH3D=!0),setTimeout(t.pollingTouchForce.bind(t.touch,t,n),10),0!=r||e.detection.TOUCH3D||(i=!1)):(r=0,i=!0),i){var u={force:r,nativeEvent:n};t.invokeHandlers(t,u)}}}}]),e}();t["default"]=r,e.exports=t["default"]},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=function(){function e(t){n(this,e),this.init(t)}return o(e,[{key:"init",value:function(e){var t=e.prototype;t.handleMouseForce=function(e,t){var n=t.webkitForce/3,o={force:n,nativeEvent:t};e.invokeHandlers(e,o)}}}]),e}();t["default"]=r,e.exports=t["default"]},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=function(){function e(t){n(this,e),this.init(t)}return o(e,[{key:"init",value:function(e){var t=e.prototype;t.handlePress=function(e,t){if(e.options.FALLBACK_TO_LONGPRESS){var n=e.options.LONG_PRESS_DELAY,o=(e.options.LONG_PRESS_DURATION,t.type);if(("mousedown"===o||"touchstart"===o)&&(e._pressTimeStamp=Date.now(),e.timer=window.setTimeout(function(){e.repeatPushForceValue(e,t)},n)),("mouseup"===o||"touchend"===o)&&(window.clearTimeout(e.timer),Date.now()-e._pressTimeStamp>n)){e._pressTimeStamp=0;var r={force:0,nativeEvent:t};e.invokeHandlers(e,r)}}},t.repeatPushForceValue=function(t,n){if(!e.detection.TOUCH3D&&0!=t._pressTimeStamp){var o=t.options.LONG_PRESS_DELAY,r=t.options.LONG_PRESS_DURATION,i=(Date.now()-t._pressTimeStamp-o)/r,u=i>=1?1:i,a={force:u,nativeEvent:n};t.invokeHandlers(t,a),window.setTimeout(t.repeatPushForceValue.bind(null,t,n,o),20)}}}}]),e}();t["default"]=r,e.exports=t["default"]},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=function(){function e(t){n(this,e),this.init(t)}return o(e,[{key:"init",value:function(e){function t(){var e=["mousedown","mouseup","touchstart","touchmove","touchend","webkitmouseforcewillbegin","webkitmouseforcechanged"];e.forEach(function(e){document.addEventListener(e,n)})}function n(t){if(!e.__EVENT_BOBBLE__){var n=t.target,r=n.__fuid__;return void o(r,t)}var i=t.path;i.forEach(function(e){if(e.__fuid__){var n=e.__fuid__;o(n,t)}})}function o(t,n){var o=e.cache;o[t]&&e.emitEvent(o[t],n)}t()}}]),e}();t["default"]=r,e.exports=t["default"]}])});


--------------------------------------------------------------------------------
/examples/homepage/dist/forcify.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Forcify=t():e.Forcify=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=0;Object.extend=Object.assign?Object.assign:function(e,t){for(var n in t)e[n]=t[n];return e};var u=function(){function e(t,n){o(this,e),this.uid=++i,this.element=t,this.handlers={},this.touch=null,this.timer=null,this._pressTimeStamp=0;var r=Object.extend({},e.defaults);this.options=Object.extend(r,n),this.element.__fuid__=this.uid;var u=e.cache;u[this.uid]=this}return r(e,[{key:"on",value:function(e,t){var n=this.handlers;return n[e]=n[e]||[],n[e].push(t),this}},{key:"invokeHandlers",value:function(e,t){e.handlers.force.forEach(function(e){e(t)})}}]),e}();t["default"]=u,u.emitEvent=function(e,t){var n=t.type;if(t.preventDefault(),("touchend"==n||"touchmove"==n||"touchstart"==n)&&e.handleTouch(e,t),("webkitmouseforcewillbegin"==n||"webkitmouseforcechanged"==n)&&(u.detection.OSXFORCE=!0,e.handleMouseForce(e,t)),"mousedown"==n||"mouseup"==n){if(u.detection.OSXFORCE)return;e.handlePress(e,t)}},u.config=function(e){e.defaults&&(u.defaults=Object.extend(u.defaults,e.defaults))},u.cache={},u.__EVENT_BOBBLE__=!1,u.defaults={LONG_PRESS_DELAY:200,LONG_PRESS_DURATION:100,FALLBACK_TO_LONGPRESS:!0,SHIM_WEIRD_BROWSER:!0},u.detection={TOUCH3D:!1,OSXFORCE:!1,WEIRD_CHROME:!1,ANDROID:navigator.userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)},new(n(2))(u),new(n(3))(u),new(n(4))(u),new(n(5))(u),e.exports=t["default"]},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=function(){function e(t){n(this,e),this.init(t)}return o(e,[{key:"init",value:function(e){var t=e.prototype;t.handleTouch=function(t,n){var o=n.type;if("touchend"==o)return t.touch=null,void t.handlePress(t,n);if(t.options.SHIM_WEIRD_BROWSER&&(1==n.targetTouches[0].force&&1==n.targetTouches[0].webkitForce&&(e.detection.WEIRD_CHROME=!0),e.detection.WEIRD_CHROME||e.detection.ANDROID))return void t.handlePress(t,n);var r=n.targetTouches[0].force;return"undefined"==typeof r?void t.handlePress(t,n):(r>0&&1>r&&!e.detection.ANDROID&&(e.detection.TOUCH3D=!0),"0"==r&&(e.detection.TOUCH3D||t.handlePress(t,n)),void(n.targetTouches&&n.targetTouches.length>1||t.touch||(t.touch=n.targetTouches[0],t.pollingTouchForce.bind(t.touch,t,n)())))},t.pollingTouchForce=function(t,n){var o=this,r=0,i=!0;if(t.touch?(r=o.force,r>0&&1>r&&(e.detection.TOUCH3D=!0),setTimeout(t.pollingTouchForce.bind(t.touch,t,n),10),0!=r||e.detection.TOUCH3D||(i=!1)):(r=0,i=!0),i){var u={force:r,nativeEvent:n};t.invokeHandlers(t,u)}}}}]),e}();t["default"]=r,e.exports=t["default"]},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=function(){function e(t){n(this,e),this.init(t)}return o(e,[{key:"init",value:function(e){var t=e.prototype;t.handleMouseForce=function(e,t){var n=t.webkitForce/3,o={force:n,nativeEvent:t};e.invokeHandlers(e,o)}}}]),e}();t["default"]=r,e.exports=t["default"]},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=function(){function e(t){n(this,e),this.init(t)}return o(e,[{key:"init",value:function(e){var t=e.prototype;t.handlePress=function(e,t){if(e.options.FALLBACK_TO_LONGPRESS){var n=e.options.LONG_PRESS_DELAY,o=(e.options.LONG_PRESS_DURATION,t.type);if(("mousedown"===o||"touchstart"===o)&&(e._pressTimeStamp=Date.now(),e.timer=window.setTimeout(function(){e.repeatPushForceValue(e,t)},n)),("mouseup"===o||"touchend"===o)&&(window.clearTimeout(e.timer),Date.now()-e._pressTimeStamp>n)){e._pressTimeStamp=0;var r={force:0,nativeEvent:t};e.invokeHandlers(e,r)}}},t.repeatPushForceValue=function(t,n){if(!e.detection.TOUCH3D&&0!=t._pressTimeStamp){var o=t.options.LONG_PRESS_DELAY,r=t.options.LONG_PRESS_DURATION,i=(Date.now()-t._pressTimeStamp-o)/r,u=i>=1?1:i,a={force:u,nativeEvent:n};t.invokeHandlers(t,a),window.setTimeout(t.repeatPushForceValue.bind(null,t,n,o),20)}}}}]),e}();t["default"]=r,e.exports=t["default"]},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=function(){function e(t){n(this,e),this.init(t)}return o(e,[{key:"init",value:function(e){function t(){var e=["mousedown","mouseup","touchstart","touchmove","touchend","webkitmouseforcewillbegin","webkitmouseforcechanged"];e.forEach(function(e){document.addEventListener(e,n)})}function n(t){if(!e.__EVENT_BOBBLE__){var n=t.target,r=n.__fuid__;return void o(r,t)}var i=t.path;i.forEach(function(e){if(e.__fuid__){var n=e.__fuid__;o(n,t)}})}function o(t,n){var o=e.cache;o[t]&&e.emitEvent(o[t],n)}t()}}]),e}();t["default"]=r,e.exports=t["default"]}])});


--------------------------------------------------------------------------------
/src/forcify.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  *  forcify.js
  3 |  *
  4 |  *  Core of forcify.js
  5 |  *  created by @huxpro
  6 |  */
  7 | 
  8 | 
  9 | // uuid
 10 | let _uid = 0;
 11 | 
 12 | 
 13 | // polyfill
 14 | Object.extend = Object.assign ? Object.assign : (function(copy, src){
 15 |     for(let prop in src){
 16 |         copy[prop] = src[prop];
 17 |     }
 18 |     return copy;
 19 | })
 20 | 
 21 | 
 22 | /**
 23 |  * @class Forcify
 24 |  */
 25 | export default class Forcify{
 26 | 
 27 |     /**
 28 |      * @constructor                     create a new Forcify Object.
 29 |      * @param  {Node}   element         TODO: support Selector
 30 |      * @param  {Object} options         customize options
 31 |      * @return {Forcify}                Instance of Forcify, you can call it 'Forcify Object'
 32 |      */
 33 |     constructor(element, options){
 34 |         this.uid = ++_uid;              // uid
 35 |         this.element = element;         // cache element
 36 |         this.handlers = {};             // event handlers
 37 |         this.touch = null;              // unique touch id
 38 |         this.timer = null;              // unique press timer
 39 |         this._pressTimeStamp = 0;       // unique press-time stamp
 40 | 
 41 |         // Merge Instance Options.
 42 |         let _temp = Object.extend({}, Forcify.defaults)
 43 |         this.options = Object.extend(_temp, options);
 44 | 
 45 |         // Set uid to DOM object for cache use. Decrease time complexity
 46 |         this.element.__fuid__ = this.uid;
 47 | 
 48 |         // Cache forcify instance (this)
 49 |         let caches = Forcify.cache;
 50 |         caches[this.uid] = this;
 51 |     }
 52 | 
 53 |     /**
 54 |      * Bind event
 55 |      * @param  {String} event           Type of event
 56 |      * @param  {fn}     handler         Event handlers, TODO: support fn[]
 57 |      * @return {Forcify}
 58 |      */
 59 |     on(event, handler){
 60 |         let handlers = this.handlers;
 61 | 
 62 |         handlers[event] = handlers[event] || [];
 63 |         handlers[event].push(handler);
 64 | 
 65 |         return this;
 66 |     }
 67 | 
 68 |     /**
 69 |      * Invoke event handlers
 70 |      * @param  {Forcify} _instance
 71 |      * @param  {Object}  e              Forcify custom event object
 72 |      * @return {null}
 73 |      */
 74 |     invokeHandlers(_instance, e){
 75 |         //console.log(_instance);
 76 |         console.log(e);
 77 |         _instance.handlers['force'].forEach((fn) => {
 78 |             fn(e);
 79 |         })
 80 |     }
 81 | }
 82 | 
 83 | 
 84 | // Static Members
 85 | Forcify.emitEvent = function(_instance, nativeEvent){
 86 |     let force = 0;
 87 |     let type = nativeEvent.type;
 88 | 
 89 |     console.log('type: ' + type);
 90 |     console.log(nativeEvent);
 91 |     nativeEvent.preventDefault();           // !important
 92 | 
 93 |     // Event Recognizer
 94 |     if(type == "touchend" || type == "touchmove" || type == "touchstart"){
 95 |         _instance.handleTouch(_instance, nativeEvent);
 96 |     }
 97 | 
 98 |     if(type == 'webkitmouseforcewillbegin' || type == 'webkitmouseforcechanged'){
 99 |         Forcify.detection.OSXFORCE = true;       // if these event triggered, this is OSX.
100 |         _instance.handleMouseForce(_instance, nativeEvent);
101 |     }
102 |     if(type == 'mousedown' || type == 'mouseup'){
103 |         if(Forcify.detection.OSXFORCE) return;   // OSX should skip this
104 |         _instance.handlePress(_instance, nativeEvent);
105 |     }
106 | }
107 | 
108 | 
109 | /**
110 |  * Forcify global coniguration
111 |  * @param  {object} _config
112 |  */
113 | Forcify.config = function(_config){
114 |     // Merge config.defaults into Forcify.defaults
115 |     if(_config.defaults){
116 |         Forcify.defaults = Object.extend(Forcify.defaults, _config.defaults)
117 |     }
118 | }
119 | 
120 | 
121 | // Cache elements reference
122 | Forcify.cache = {}
123 | 
124 | 
125 | // whether event bobble, globally
126 | // inner options for now.
127 | Forcify.__EVENT_BOBBLE__ = false;
128 | 
129 | 
130 | // Default Options
131 | Forcify.defaults = {
132 |     /**
133 |      * Delay to trigger fake Force Touch
134 |      * @type {Number}
135 |      * @default 200(ms)
136 |      */
137 |     LONG_PRESS_DELAY : 200,
138 | 
139 |     /**
140 |      * Duration from MIN to MAX of the fake Force Touch
141 |      * @type {Number}
142 |      * @default 1000(ms)
143 |      */
144 |     LONG_PRESS_DURATION: 100,
145 | 
146 |     /**
147 |      * if Forcify fallback to long press on unsupport devices
148 |      * if set false, Forcify will not fallback 'force' to 'long press'
149 |      * @type {Boolean}
150 |      * @default true
151 |      */
152 |     FALLBACK_TO_LONGPRESS: true,
153 | 
154 |     /**
155 |      * Some browser, such as Chrome, provide a very weird force value.
156 |      * if set false, Forcify would not try to find and ignore those weird
157 |      * behavior.
158 |      * Which means your "Force Actions" may
159 |      *   - be triggered just by a click in some 'force: 1' devices.
160 |      *   - be influenced in device like Nexus5 to give a force in (0,1)
161 |      * @type {Boolean}
162 |      * @default true
163 |      */
164 |     SHIM_WEIRD_BROWSER: true
165 | }
166 | 
167 | 
168 | // Detections
169 | Forcify.detection = {
170 |     /**
171 |      * Unfortunately there is not a feature detection for 3DTouch so far, so Forcify use a dynamic detection to detect it
172 |      * If Forcify detects that force is support, all hacking stop
173 |      *
174 |      * @type {Boolean}
175 |      * @default false
176 |      */
177 |     TOUCH3D: false,
178 | 
179 |     /**
180 |      * OSX support real webkit force touch
181 |      *
182 |      * @type {Boolean}
183 |      * @default false
184 |      */
185 |     OSXFORCE: false,
186 | 
187 |     /**
188 |      * Chrome Mobile give any touchevent a 'force' property with value: 1.
189 |      * Forcify has to hack it.
190 |      * Forcify not detect Chrome by UA but behaviors.
191 |      *
192 |      * @type {Boolean}
193 |      * @default false
194 |      */
195 |     WEIRD_CHROME: false,
196 | 
197 |     /**
198 |      * Android performs really odd, which performs different in diff devices.
199 |      * Forcify has to use UA detection to handle them.
200 |      *
201 |      * @type {Boolean}
202 |      * @default false
203 |      */
204 |     ANDROID: navigator.userAgent.match(/(Android);?[\s\/]+([\d.]+)?/),
205 | }
206 | 
207 | 
208 | // import modules
209 | new (require('./touch'))(Forcify)
210 | new (require('./mouse'))(Forcify)
211 | new (require('./press'))(Forcify)
212 | new (require('./delegate'))(Forcify)
213 | 
214 | // debugging use.
215 | // window.Forcify = Forcify;
216 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Forcify
  2 | 
  3 | > Use **Force Touch** in any device, today.
  4 | 
  5 | # WARNING: This project is not actively maintained.
  6 | 
  7 | ## Intro
  8 | 
  9 | Forcify is a JavaScript library help you polyfill 3D/Force Touch in any device. All you need is just deal with the `e.force` value, dead simple:
 10 | 
 11 | ```javascript
 12 | var ele = document.querySelector('#force')
 13 | 
 14 | new Forcify(ele).on('force', (e) => {
 15 |     doSomething(e.force)
 16 | })
 17 | ```
 18 | 
 19 | Waaaaait! Can 3D/Force Touch, a hardware feature, be really polyfilled? No, but we can emulate it with Long Press!   
 20 | **Forcify can help you start supporting Force Touch feature to your app or site without hesitate.**   
 21 | 
 22 | [Check out demo in any unsupported device →](http://huangxuan.me/forcify)  
 23 | 
 24 | [Download Forcify.min.js (2.4kb not gzipped)](http://huangxuan.me/forcify/dist/forcify.min.js)
 25 | 
 26 | 
 27 | ## How Forcify Works?
 28 | 
 29 | 1. Forcify use a ***Dynamic Feature Detection*** to detect whether the 3D/Force Touch is really supported: **If true**, all hack stops, forcify just wrap the difference between *OSX Force Touch* and *iOS 3D Touch*, make things easier.
 30 | 2. If Forcify detect that ***Current Browser Behave Badly (not truly support but give a `!== 0` force value)***, Forcify would help you **shim these weird browser**, you would not get a wrong force value to mis-trigger your handlers.
 31 | 3. Finally, Forcify ***emulate a fake force event with LONG PRESS*** in any unsupported device as the **fallback**, to keep pushing events with a growing `force` value after long press triggered, which help your shortcut actions designed for Force Touch can be used in any other device.
 32 | 
 33 | Also, Forcify provide many options such as `FALLBACK_TO_LONGPRESS`, `LONG_PRESS_DELAY`, `LONG_PRESS_DURATION` and `SHIM_WEIRD_BROWSER` to let you customize it as you need, more on [Document](#document).
 34 | 
 35 | 
 36 | ## Why Forcify?
 37 | 
 38 | 3D/Force Touch release new `webkitForce` (Force Touch) and `force` (3D Touch) property to mouse and touch events. But, different browsers implement them in really different and weird way, let's have a quick glance:
 39 | 
 40 | Desktop:
 41 | 
 42 | Browser | support |`force` | `webkitForce` | `events`
 43 | ------- | ------- | ------ | ------------- | --------
 44 | OSX Safari | Force Touch | null  | 0 ~ 1 by Force | webkitmouseforce
 45 | OSX Safari | null        | null  | 0              | mouse
 46 | Chrome     | null        | null  | null           | mouse
 47 | Chrome Touchable-PC | null | 0   | null           | touch
 48 | 
 49 | Mobile:
 50 | 
 51 | Browser | support |`force` | `webkitForce` | `events`
 52 | ------- | ------- | ------ | ------------- | --------
 53 | iPhone Safari        | 3D Touch | 0 ~ 1 by Force       | null | touch
 54 | iPhone Safari        | null | 0                        | null | touch
 55 | Chrome Mobile        | null | 1                        | 1    | touch
 56 | Chrome Mobile Nexus5 | null | **0 ~ 1 by touch area!** | same | touch
 57 | Chrome Emulator      | null | 1                        | null | touch
 58 | Android Browser      | null | null                     | null | touch
 59 | 
 60 | 
 61 | 
 62 | As you see, even just supporting the real OSX Force Touch and iOS 3D Touch you need write twice, and it is not that easy as you thought:
 63 | 
 64 | - In OSX Safari we have awesome `webkitmouseforcewillbegin` and `webkitmouseforcechange` to get value every time changed directly.
 65 | - in iOS Safari we have old `touchdown`, `touchmove`, `touchup` only. We has to use *polling* to repeat poll the `force` value during the entire touch duration.
 66 | 
 67 | Things gonna worse when you look at **Chrome**. Chrome on all device nowadays haven't any Force Touch support, but It provide a tricky `!== 0` force value in many platform!
 68 | 
 69 | - In Chrome Mobile, we got `force=1` and `webkitForce=1`, which means your "Force Actions" would be ALWAYS triggered just by a click
 70 | * In Chrome on Nexus5, *unbelievable magic happen!*, the force value is given by the area your finger touch to the screen! This bad trick really make engineer awkwardly
 71 | 
 72 | That is why Forcify comes to help.
 73 | 
 74 | 
 75 | ## Document
 76 | 
 77 | > Check out `example/` to get a detailed example
 78 | 
 79 | ### Install
 80 | 
 81 | The simplest way to use Forcify is adding it to your HTML page with `<script>`:
 82 | 
 83 | ```html
 84 | <script src="https://unpkg.com/forcify/dist/forcify.min.js"></script>
 85 | ```
 86 | 
 87 | And you can also include Forcify in your JavaScript bundle with ES6, CommonJS or AMD syntax.
 88 | 
 89 | ```bash
 90 | $ npm install forcify --save
 91 | ```
 92 | 
 93 | ### Usage
 94 | 
 95 | Create a new Forcify instance, and use `on` to listen `force` event:
 96 | 
 97 | ```javascript
 98 | var ele  = document.querySelector('#force')
 99 | var $ele = new Forcify(ele)
100 | 
101 | // add event listener
102 | $ele.on('force', (e) => {
103 |     doSomething(e.force)
104 | })
105 | ```
106 | 
107 | You can pass `options` into the `Forcify` constructor to override [default options](#forcifydefaults):
108 | 
109 | ```javascript
110 | // only emit event in real supported device.
111 | var $noFallback = new Forcify(ele, {
112 |     FALLBACK_TO_LONGPRESS: false
113 | })
114 | 
115 | // I am sure there would be a mess watting for u
116 | var $noShim = new Forcify(ele, {
117 | 	SHIM_WEIRD_BROWSWR: false
118 | })
119 | 
120 | // not easy to trigger...
121 | var $longLongPress = new Forcify(ele, {
122 | 	LONG_PRESS_DELAY: 10000 	//ms
123 | })
124 | ```
125 | 
126 | Also, you can use `Forcify.config` to override default options globally
127 | 
128 | ```javascript
129 | // let's make duration of the force grow slower.
130 | Forcify.config({
131 | 	LONG_PRESS_DURATION: 500
132 | })
133 | 
134 | ```
135 | 
136 | ## API
137 | 
138 | 
139 | ### Forcify.defaults
140 | 
141 | Default options for Forcify instance.
142 | 
143 | ##### `LONG_PRESS_DELAY: 200`
144 | 
145 | - Type: `Number`
146 | - Default `200(ms)`
147 | - Delay to trigger fake Force Touch
148 | 
149 | 
150 | 
151 | ##### `LONG_PRESS_DURATION: 100`
152 | 
153 | * Type: `Number`
154 | * Default `1000(ms)`
155 | * Duration from MIN to MAX of the fake Force Touch
156 | 
157 | 
158 | 
159 | ##### `FALLBACK_TO_LONGPRESS: true`
160 | 
161 | * Type: `Boolean`
162 | * Default `true`
163 | * if Forcify fallback to long press on unsupport devices. if set false, Forcify will not fallback 'force' to 'long press'
164 | 
165 | 
166 | ##### `SHIM_WEIRD_BROWSER: true`
167 | 
168 | * Type: `Boolean`
169 | * Default `true`
170 | * Some browser, such as Chrome, provide a very weird force value.  if set false, Forcify would not try to find and ignore those weird behavior. Which means your "Force Actions" may
171 | 	- be triggered just by a click in some 'force: 1' devices.
172 | 	- be influenced in device like Nexus5 to give a force in (0,1)
173 | 
174 | 
175 | ### Forcify.detection
176 | 
177 | Object save the results of dynamic detection. All fields is `Boolean` type and default `false`.
178 | 
179 | ##### `TOUCH3D`
180 | 
181 | Unfortunately there is not a feature detection for 3DTouch so far, so Forcify use a dynamic detection to detect it.  
182 | If Forcify detects that force is support, all hacking stop.
183 | 
184 | 
185 | ##### `OSXFORCE`
186 | 
187 | OSX support real webkit force touch
188 | 
189 | 
190 | ##### `WEIRD_CHROME`
191 | 
192 | Chrome Mobile give any touchevent a 'force' property with value: 1.   
193 | Forcify has to hack it.  
194 | Forcify not detect Weird Chrome by UA but behaviors.
195 | 
196 | ## Known Issues 
197 | 
198 | - When user use a old Macbook without force touch but a Magic Trackpad 2 and switch between them.
199 | 
200 | ## Thanks
201 | 
202 | Special thank to:
203 | 
204 | - [This nice post about iOS9](http://www.mobilexweb.com/blog/ios9-safari-for-web-developers) inspired me to create Forcify.
205 | - [3D Touch Demo](https://github.com/freinbichler/3d-touch) by @freinbichler, which I used in my examples.
206 | 


--------------------------------------------------------------------------------
/examples/use-with-AMD/require.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  RequireJS 2.1.15 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
 3 |  Available via the MIT or new BSD license.
 4 |  see: http://github.com/jrburke/requirejs for details
 5 | */
 6 | var requirejs,require,define;
 7 | (function(ba){function G(b){return"[object Function]"===K.call(b)}function H(b){return"[object Array]"===K.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function T(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function t(b,c){return fa.call(b,c)}function m(b,c){return t(b,c)&&b[c]}function B(b,c){for(var d in b)if(t(b,d)&&c(b[d],d))break}function U(b,c,d,e){c&&B(c,function(c,g){if(d||!t(b,g))e&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
 8 | RegExp)?(b[g]||(b[g]={}),U(b[g],c,d,e)):b[g]=c});return b}function u(b,c){return function(){return c.apply(b,arguments)}}function ca(b){throw b;}function da(b){if(!b)return b;var c=ba;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,e){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=e;d&&(c.originalError=d);return c}function ga(b){function c(a,k,b){var f,l,c,d,e,g,i,p,k=k&&k.split("/"),h=j.map,n=h&&h["*"];if(a){a=a.split("/");l=a.length-1;j.nodeIdCompat&&
 9 | Q.test(a[l])&&(a[l]=a[l].replace(Q,""));"."===a[0].charAt(0)&&k&&(l=k.slice(0,k.length-1),a=l.concat(a));l=a;for(c=0;c<l.length;c++)if(d=l[c],"."===d)l.splice(c,1),c-=1;else if(".."===d&&!(0===c||1==c&&".."===l[2]||".."===l[c-1])&&0<c)l.splice(c-1,2),c-=2;a=a.join("/")}if(b&&h&&(k||n)){l=a.split("/");c=l.length;a:for(;0<c;c-=1){e=l.slice(0,c).join("/");if(k)for(d=k.length;0<d;d-=1)if(b=m(h,k.slice(0,d).join("/")))if(b=m(b,e)){f=b;g=c;break a}!i&&(n&&m(n,e))&&(i=m(n,e),p=c)}!f&&i&&(f=i,g=p);f&&(l.splice(0,
10 | g,f),a=l.join("/"))}return(f=m(j.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(k){if(k.getAttribute("data-requiremodule")===a&&k.getAttribute("data-requirecontext")===i.contextName)return k.parentNode.removeChild(k),!0})}function e(a){var k=m(j.paths,a);if(k&&H(k)&&1<k.length)return k.shift(),i.require.undef(a),i.makeRequire(null,{skipMap:!0})([a]),!0}function n(a){var k,c=a?a.indexOf("!"):-1;-1<c&&(k=a.substring(0,c),a=a.substring(c+1,a.length));return[k,a]}function p(a,
11 | k,b,f){var l,d,e=null,g=k?k.name:null,j=a,p=!0,h="";a||(p=!1,a="_@r"+(K+=1));a=n(a);e=a[0];a=a[1];e&&(e=c(e,g,f),d=m(r,e));a&&(e?h=d&&d.normalize?d.normalize(a,function(a){return c(a,g,f)}):-1===a.indexOf("!")?c(a,g,f):a:(h=c(a,g,f),a=n(h),e=a[0],h=a[1],b=!0,l=i.nameToUrl(h)));b=e&&!d&&!b?"_unnormalized"+(O+=1):"";return{prefix:e,name:h,parentMap:k,unnormalized:!!b,url:l,originalName:j,isDefine:p,id:(e?e+"!"+h:h)+b}}function s(a){var k=a.id,b=m(h,k);b||(b=h[k]=new i.Module(a));return b}function q(a,
12 | k,b){var f=a.id,c=m(h,f);if(t(r,f)&&(!c||c.defineEmitComplete))"defined"===k&&b(r[f]);else if(c=s(a),c.error&&"error"===k)b(c.error);else c.on(k,b)}function w(a,b){var c=a.requireModules,f=!1;if(b)b(a);else if(v(c,function(b){if(b=m(h,b))b.error=a,b.events.error&&(f=!0,b.emit("error",a))}),!f)g.onError(a)}function x(){R.length&&(ha.apply(A,[A.length,0].concat(R)),R=[])}function y(a){delete h[a];delete V[a]}function F(a,b,c){var f=a.map.id;a.error?a.emit("error",a.error):(b[f]=!0,v(a.depMaps,function(f,
13 | d){var e=f.id,g=m(h,e);g&&(!a.depMatched[d]&&!c[e])&&(m(b,e)?(a.defineDep(d,r[e]),a.check()):F(g,b,c))}),c[f]=!0)}function D(){var a,b,c=(a=1E3*j.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],l=[],g=!1,h=!0;if(!W){W=!0;B(V,function(a){var i=a.map,j=i.id;if(a.enabled&&(i.isDefine||l.push(a),!a.error))if(!a.inited&&c)e(j)?g=b=!0:(f.push(j),d(j));else if(!a.inited&&(a.fetched&&i.isDefine)&&(g=!0,!i.prefix))return h=!1});if(c&&f.length)return a=C("timeout","Load timeout for modules: "+f,null,
14 | f),a.contextName=i.contextName,w(a);h&&v(l,function(a){F(a,{},{})});if((!c||b)&&g)if((z||ea)&&!X)X=setTimeout(function(){X=0;D()},50);W=!1}}function E(a){t(r,a[0])||s(p(a[0],null,!0)).init(a[1],a[2])}function I(a){var a=a.currentTarget||a.srcElement,b=i.onScriptLoad;a.detachEvent&&!Y?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=i.onScriptError;(!a.detachEvent||Y)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function J(){var a;
15 | for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var W,Z,i,L,X,j={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},h={},V={},$={},A=[],r={},S={},aa={},K=1,O=1;L={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?r[a.map.id]=a.exports:a.exports=r[a.map.id]={}},module:function(a){return a.module?
16 | a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return m(j.config,a.map.id)||{}},exports:a.exports||(a.exports={})}}};Z=function(a){this.events=m($,a.id)||{};this.map=a;this.shim=m(j.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};Z.prototype={init:function(a,b,c,f){f=f||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=u(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=
17 | c;this.inited=!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],u(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
18 | this.map.url;S[a]||(S[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var f=this.exports,l=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(l)){if(this.events.error&&this.map.isDefine||g.onError!==ca)try{f=i.execCb(c,l,b,f)}catch(d){a=d}else f=i.execCb(c,l,b,f);this.map.isDefine&&void 0===f&&((b=this.module)?f=b.exports:this.usingExports&&
19 | (f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=l;this.exports=f;if(this.map.isDefine&&!this.ignore&&(r[c]=f,g.onResourceLoad))g.onResourceLoad(i,this.map,this.depMaps);y(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
20 | this.map,b=a.id,d=p(a.prefix);this.depMaps.push(d);q(d,"defined",u(this,function(f){var l,d;d=m(aa,this.map.id);var e=this.map.name,P=this.map.parentMap?this.map.parentMap.name:null,n=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(e=f.normalize(e,function(a){return c(a,P,!0)})||""),f=p(a.prefix+"!"+e,this.map.parentMap),q(f,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=m(h,f.id)){this.depMaps.push(f);
21 | if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else d?(this.map.url=i.nameToUrl(d),this.load()):(l=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),l.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(h,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),l.fromText=u(this,function(f,c){var d=a.name,e=p(d),P=M;c&&(f=c);P&&(M=!1);s(e);t(j.config,b)&&(j.config[d]=j.config[b]);try{g.exec(f)}catch(h){return w(C("fromtexteval",
22 | "fromText eval for "+b+" failed: "+h,h,[b]))}P&&(M=!0);this.depMaps.push(e);i.completeLoad(d);n([d],l)}),f.load(a.name,n,l,j))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,u(this,function(a,b){var c,f;if("string"===typeof a){a=p(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=m(L,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;q(a,"defined",u(this,function(a){this.defineDep(b,
23 | a);this.check()}));this.errback&&q(a,"error",u(this,this.errback))}c=a.id;f=h[c];!t(L,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,u(this,function(a){var b=m(h,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:j,contextName:b,registry:h,defined:r,urlFetched:S,defQueue:A,Module:Z,makeModuleMap:p,
24 | nextTick:g.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=j.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(j[b]||(j[b]={}),U(j[b],a,!0,!0)):j[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(aa[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),j.shim=b);a.packages&&v(a.packages,function(a){var b,
25 | a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(j.paths[b]=a.location);j.pkgs[b]=a.name+"/"+(a.main||"main").replace(ia,"").replace(Q,"")});B(h,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=p(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ba,arguments));return b||a.exports&&da(a.exports)}},makeRequire:function(a,e){function j(c,d,m){var n,q;e.enableBuildCallback&&(d&&G(d))&&(d.__requireJsBuild=
26 | !0);if("string"===typeof c){if(G(d))return w(C("requireargs","Invalid require call"),m);if(a&&t(L,c))return L[c](h[a.id]);if(g.get)return g.get(i,c,a,j);n=p(c,a,!1,!0);n=n.id;return!t(r,n)?w(C("notloaded",'Module name "'+n+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):r[n]}J();i.nextTick(function(){J();q=s(p(null,a));q.skipMap=e.skipMap;q.init(c,d,m,{enabled:!0});D()});return j}e=e||{};U(j,{isBrowser:z,toUrl:function(b){var d,e=b.lastIndexOf("."),k=b.split("/")[0];if(-1!==
27 | e&&(!("."===k||".."===k)||1<e))d=b.substring(e,b.length),b=b.substring(0,e);return i.nameToUrl(c(b,a&&a.id,!0),d,!0)},defined:function(b){return t(r,p(b,a,!1,!0).id)},specified:function(b){b=p(b,a,!1,!0).id;return t(r,b)||t(h,b)}});a||(j.undef=function(b){x();var c=p(b,a,!0),e=m(h,b);d(b);delete r[b];delete S[c.url];delete $[b];T(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&($[b]=e.events),y(b))});return j},enable:function(a){m(h,a.id)&&s(a).enable()},completeLoad:function(a){var b,
28 | c,d=m(j.shim,a)||{},g=d.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=m(h,a);if(!b&&!t(r,a)&&c&&!c.inited){if(j.enforceDefine&&(!g||!da(g)))return e(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,d.deps||[],d.exportsFn])}D()},nameToUrl:function(a,b,c){var d,e,h;(d=m(j.pkgs,a))&&(a=d);if(d=m(aa,a))return i.nameToUrl(d,b,c);if(g.jsExtRegExp.test(a))d=a+(b||"");else{d=j.paths;a=a.split("/");for(e=a.length;0<e;e-=1)if(h=a.slice(0,
29 | e).join("/"),h=m(d,h)){H(h)&&(h=h[0]);a.splice(0,e,h);break}d=a.join("/");d+=b||(/^data\:|\?/.test(d)||c?"":".js");d=("/"===d.charAt(0)||d.match(/^[\w\+\.\-]+:/)?"":j.baseUrl)+d}return j.urlArgs?d+((-1===d.indexOf("?")?"?":"&")+j.urlArgs):d},load:function(a,b){g.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ja.test((a.currentTarget||a.srcElement).readyState))N=null,a=I(a),i.completeLoad(a.id)},onScriptError:function(a){var b=I(a);if(!e(b.id))return w(C("scripterror",
30 | "Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var g,x,y,D,I,E,N,J,s,O,ka=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,la=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,Q=/\.js$/,ia=/^\.\//;x=Object.prototype;var K=x.toString,fa=x.hasOwnProperty,ha=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),ea=!z&&"undefined"!==typeof importScripts,ja=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,
31 | Y="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},q={},R=[],M=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;q=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(q=require,require=void 0);g=requirejs=function(b,c,d,e){var n,p="_";!H(b)&&"string"!==typeof b&&(n=b,H(c)?(b=c,c=d,d=e):b=[]);n&&n.context&&(p=n.context);(e=m(F,p))||(e=F[p]=g.s.newContext(p));n&&e.configure(n);return e.require(b,c,d)};g.config=function(b){return g(b)};
32 | g.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=g);g.version="2.1.15";g.jsExtRegExp=/^\/|:|\?|\.js$/;g.isBrowser=z;x=g.s={contexts:F,newContext:ga};g({});v(["toUrl","undef","defined","specified"],function(b){g[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=x.head=D.parentNode;g.onError=ca;g.createNode=function(b){var c=
33 | b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};g.load=function(b,c,d){var e=b&&b.config||{};if(z)return e=g.createNode(e,c,d),e.setAttribute("data-requirecontext",b.contextName),e.setAttribute("data-requiremodule",c),e.attachEvent&&!(e.attachEvent.toString&&0>e.attachEvent.toString().indexOf("[native code"))&&!Y?(M=!0,e.attachEvent("onreadystatechange",b.onScriptLoad)):
34 | (e.addEventListener("load",b.onScriptLoad,!1),e.addEventListener("error",b.onScriptError,!1)),e.src=d,J=e,D?y.insertBefore(e,D):y.appendChild(e),J=null,e;if(ea)try{importScripts(d),b.completeLoad(c)}catch(m){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,m,[c]))}};z&&!q.skipDataMain&&T(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(I=b.getAttribute("data-main"))return s=I,q.baseUrl||(E=s.split("/"),s=E.pop(),O=E.length?E.join("/")+"/":"./",q.baseUrl=
35 | O),s=s.replace(Q,""),g.jsExtRegExp.test(s)&&(s=I),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(ka,"").replace(la,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(M){if(!(e=J))N&&"interactive"===N.readyState||T(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return N=b}),e=N;e&&(b||
36 | (b=e.getAttribute("data-requiremodule")),g=F[e.getAttribute("data-requirecontext")])}(g?g.defQueue:R).push([b,c,d])};define.amd={jQuery:!0};g.exec=function(b){return eval(b)};g(q)}})(this);


--------------------------------------------------------------------------------
/dist/forcify.debug.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["Forcify"] = factory();
  8 | 	else
  9 | 		root["Forcify"] = factory();
 10 | })(this, function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | 
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | 
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId])
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | 
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			exports: {},
 25 | /******/ 			id: moduleId,
 26 | /******/ 			loaded: false
 27 | /******/ 		};
 28 | 
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | 
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.loaded = true;
 34 | 
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | 
 39 | 
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | 
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | 
 46 | /******/ 	// __webpack_public_path__
 47 | /******/ 	__webpack_require__.p = "";
 48 | 
 49 | /******/ 	// Load entry module and return exports
 50 | /******/ 	return __webpack_require__(0);
 51 | /******/ })
 52 | /************************************************************************/
 53 | /******/ ([
 54 | /* 0 */
 55 | /***/ function(module, exports, __webpack_require__) {
 56 | 
 57 | 	module.exports = __webpack_require__(1);
 58 | 
 59 | 
 60 | /***/ },
 61 | /* 1 */
 62 | /***/ function(module, exports, __webpack_require__) {
 63 | 
 64 | 	/**
 65 | 	 *  forcify.js
 66 | 	 *
 67 | 	 *  Core of forcify.js
 68 | 	 *  created by @huxpro
 69 | 	 */
 70 | 
 71 | 	// uuid
 72 | 	'use strict';
 73 | 
 74 | 	Object.defineProperty(exports, '__esModule', {
 75 | 	    value: true
 76 | 	});
 77 | 
 78 | 	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 79 | 
 80 | 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 81 | 
 82 | 	var _uid = 0;
 83 | 
 84 | 	// polyfill
 85 | 	Object.extend = Object.assign ? Object.assign : function (copy, src) {
 86 | 	    for (var prop in src) {
 87 | 	        copy[prop] = src[prop];
 88 | 	    }
 89 | 	    return copy;
 90 | 	};
 91 | 
 92 | 	/**
 93 | 	 * @class Forcify
 94 | 	 */
 95 | 
 96 | 	var Forcify = (function () {
 97 | 
 98 | 	    /**
 99 | 	     * @constructor                     create a new Forcify Object.
100 | 	     * @param  {Node}   element         TODO: support Selector
101 | 	     * @param  {Object} options         customize options
102 | 	     * @return {Forcify}                Instance of Forcify, you can call it 'Forcify Object'
103 | 	     */
104 | 
105 | 	    function Forcify(element, options) {
106 | 	        _classCallCheck(this, Forcify);
107 | 
108 | 	        this.uid = ++_uid; // uid
109 | 	        this.element = element; // cache element
110 | 	        this.handlers = {}; // event handlers
111 | 	        this.touch = null; // unique touch id
112 | 	        this.timer = null; // unique press timer
113 | 	        this._pressTimeStamp = 0; // unique press-time stamp
114 | 
115 | 	        // Merge Instance Options.
116 | 	        var _temp = Object.extend({}, Forcify.defaults);
117 | 	        this.options = Object.extend(_temp, options);
118 | 
119 | 	        // Set uid to DOM object for cache use. Decrease time complexity
120 | 	        this.element.__fuid__ = this.uid;
121 | 
122 | 	        // Cache forcify instance (this)
123 | 	        var caches = Forcify.cache;
124 | 	        caches[this.uid] = this;
125 | 	    }
126 | 
127 | 	    // Static Members
128 | 
129 | 	    /**
130 | 	     * Bind event
131 | 	     * @param  {String} event           Type of event
132 | 	     * @param  {fn}     handler         Event handlers, TODO: support fn[]
133 | 	     * @return {Forcify}
134 | 	     */
135 | 
136 | 	    _createClass(Forcify, [{
137 | 	        key: 'on',
138 | 	        value: function on(event, handler) {
139 | 	            var handlers = this.handlers;
140 | 
141 | 	            handlers[event] = handlers[event] || [];
142 | 	            handlers[event].push(handler);
143 | 
144 | 	            return this;
145 | 	        }
146 | 
147 | 	        /**
148 | 	         * Invoke event handlers
149 | 	         * @param  {Forcify} _instance
150 | 	         * @param  {Object}  e              Forcify custom event object
151 | 	         * @return {null}
152 | 	         */
153 | 	    }, {
154 | 	        key: 'invokeHandlers',
155 | 	        value: function invokeHandlers(_instance, e) {
156 | 	            //console.log(_instance);
157 | 	            console.log(e);
158 | 	            _instance.handlers['force'].forEach(function (fn) {
159 | 	                fn(e);
160 | 	            });
161 | 	        }
162 | 	    }]);
163 | 
164 | 	    return Forcify;
165 | 	})();
166 | 
167 | 	exports['default'] = Forcify;
168 | 	Forcify.emitEvent = function (_instance, nativeEvent) {
169 | 	    var force = 0;
170 | 	    var type = nativeEvent.type;
171 | 
172 | 	    console.log('type: ' + type);
173 | 	    console.log(nativeEvent);
174 | 	    nativeEvent.preventDefault(); // !important
175 | 
176 | 	    // Event Recognizer
177 | 	    if (type == "touchend" || type == "touchmove" || type == "touchstart") {
178 | 	        _instance.handleTouch(_instance, nativeEvent);
179 | 	    }
180 | 
181 | 	    if (type == 'webkitmouseforcewillbegin' || type == 'webkitmouseforcechanged') {
182 | 	        Forcify.detection.OSXFORCE = true; // if these event triggered, this is OSX.
183 | 	        _instance.handleMouseForce(_instance, nativeEvent);
184 | 	    }
185 | 	    if (type == 'mousedown' || type == 'mouseup') {
186 | 	        if (Forcify.detection.OSXFORCE) return; // OSX should skip this
187 | 	        _instance.handlePress(_instance, nativeEvent);
188 | 	    }
189 | 	};
190 | 
191 | 	/**
192 | 	 * Forcify global coniguration
193 | 	 * @param  {object} _config
194 | 	 */
195 | 	Forcify.config = function (_config) {
196 | 	    // Merge config.defaults into Forcify.defaults
197 | 	    if (_config.defaults) {
198 | 	        Forcify.defaults = Object.extend(Forcify.defaults, _config.defaults);
199 | 	    }
200 | 	};
201 | 
202 | 	// Cache elements reference
203 | 	Forcify.cache = {};
204 | 
205 | 	// whether event bobble, globally
206 | 	// inner options for now.
207 | 	Forcify.__EVENT_BOBBLE__ = false;
208 | 
209 | 	// Default Options
210 | 	Forcify.defaults = {
211 | 	    /**
212 | 	     * Delay to trigger fake Force Touch
213 | 	     * @type {Number}
214 | 	     * @default 200(ms)
215 | 	     */
216 | 	    LONG_PRESS_DELAY: 200,
217 | 
218 | 	    /**
219 | 	     * Duration from MIN to MAX of the fake Force Touch
220 | 	     * @type {Number}
221 | 	     * @default 1000(ms)
222 | 	     */
223 | 	    LONG_PRESS_DURATION: 100,
224 | 
225 | 	    /**
226 | 	     * if Forcify fallback to long press on unsupport devices
227 | 	     * if set false, Forcify will not fallback 'force' to 'long press'
228 | 	     * @type {Boolean}
229 | 	     * @default true
230 | 	     */
231 | 	    FALLBACK_TO_LONGPRESS: true,
232 | 
233 | 	    /**
234 | 	     * Some browser, such as Chrome, provide a very weird force value.
235 | 	     * if set false, Forcify would not try to find and ignore those weird
236 | 	     * behavior.
237 | 	     * Which means your "Force Actions" may
238 | 	     *   - be triggered just by a click in some 'force: 1' devices.
239 | 	     *   - be influenced in device like Nexus5 to give a force in (0,1)
240 | 	     * @type {Boolean}
241 | 	     * @default true
242 | 	     */
243 | 	    SHIM_WEIRD_BROWSER: true
244 | 	};
245 | 
246 | 	// Detections
247 | 	Forcify.detection = {
248 | 	    /**
249 | 	     * Unfortunately there is not a feature detection for 3DTouch so far, so Forcify use a dynamic detection to detect it
250 | 	     * If Forcify detects that force is support, all hacking stop
251 | 	     *
252 | 	     * @type {Boolean}
253 | 	     * @default false
254 | 	     */
255 | 	    TOUCH3D: false,
256 | 
257 | 	    /**
258 | 	     * OSX support real webkit force touch
259 | 	     *
260 | 	     * @type {Boolean}
261 | 	     * @default false
262 | 	     */
263 | 	    OSXFORCE: false,
264 | 
265 | 	    /**
266 | 	     * Chrome Mobile give any touchevent a 'force' property with value: 1.
267 | 	     * Forcify has to hack it.
268 | 	     * Forcify not detect Chrome by UA but behaviors.
269 | 	     *
270 | 	     * @type {Boolean}
271 | 	     * @default false
272 | 	     */
273 | 	    WEIRD_CHROME: false,
274 | 
275 | 	    /**
276 | 	     * Android performs really odd, which performs different in diff devices.
277 | 	     * Forcify has to use UA detection to handle them.
278 | 	     *
279 | 	     * @type {Boolean}
280 | 	     * @default false
281 | 	     */
282 | 	    ANDROID: navigator.userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
283 | 	};
284 | 
285 | 	// import modules
286 | 	new (__webpack_require__(2))(Forcify);
287 | 	new (__webpack_require__(3))(Forcify);
288 | 	new (__webpack_require__(4))(Forcify);
289 | 	new (__webpack_require__(5))(Forcify);
290 | 
291 | 	// debugging use.
292 | 	// window.Forcify = Forcify;
293 | 	module.exports = exports['default'];
294 | 
295 | /***/ },
296 | /* 2 */
297 | /***/ function(module, exports) {
298 | 
299 | 	/**
300 | 	 *  touch.js
301 | 	 *
302 | 	 *  Touch module of forcify.js
303 | 	 *  created by @huxpro
304 | 	 */
305 | 
306 | 	"use strict";
307 | 
308 | 	Object.defineProperty(exports, "__esModule", {
309 | 	    value: true
310 | 	});
311 | 
312 | 	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
313 | 
314 | 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
315 | 
316 | 	var Touch = (function () {
317 | 	    function Touch(Forcify) {
318 | 	        _classCallCheck(this, Touch);
319 | 
320 | 	        this.init(Forcify);
321 | 	    }
322 | 
323 | 	    _createClass(Touch, [{
324 | 	        key: "init",
325 | 	        value: function init(Forcify) {
326 | 	            var fn = Forcify.prototype;
327 | 	            fn.handleTouch = function (_instance, nativeEvent) {
328 | 	                var type = nativeEvent.type;
329 | 
330 | 	                // Forcify strictly limit every view respond to only one finger
331 | 	                // So targetTouches always empty when touchend,
332 | 	                // So we first deal with touchend
333 | 	                if (type == "touchend") {
334 | 	                    // reset touch ref
335 | 	                    _instance.touch = null;
336 | 	                    // also send to handlePress
337 | 	                    _instance.handlePress(_instance, nativeEvent);
338 | 	                    return;
339 | 	                }
340 | 
341 | 	                /**
342 | 	                 * It's hard to judge if Force Touch is truly supported:
343 | 	                 *
344 | 	                 * Events from supported iPhone always begin with force:0,
345 | 	                 * Events from unsupport iPhone with iOS 9 also include force:0,
346 | 	                 * We never know if a iPhone is unsupported or just not be "force-touched"
347 | 	                 *
348 | 	                 * Events from Chrome Touchable-PC include only force:0, behave well.
349 | 	                 * Events from Chrome Emulator     include only force:1, not shim yet
350 | 	                 * Events from Chrome Mobile       include both force:1 and webkitForce:1,
351 | 	                 *
352 | 	                 * Events from Chrome Nexus5 provide a very weird force value,
353 | 	                 * which seems depend on the AREA of the finger touched to screen!
354 | 	                 *
355 | 	                 *
356 | 	                 * Soooooooooooo sad,
357 | 	                 * Forcify has to use a Dynamic Detection to try to shim them
358 | 	                 */
359 | 
360 | 	                /**
361 | 	                 * Shim weird browser
362 | 	                 */
363 | 	                if (_instance.options.SHIM_WEIRD_BROWSER) {
364 | 
365 | 	                    // detect Weird Chrome
366 | 	                    if (nativeEvent.targetTouches[0].force == 1 && nativeEvent.targetTouches[0].webkitForce == 1) Forcify.detection.WEIRD_CHROME = true;
367 | 
368 | 	                    // if it's Weird Chrome or Android(ensure unsupport now)
369 | 	                    if (Forcify.detection.WEIRD_CHROME || Forcify.detection.ANDROID) {
370 | 	                        console.log("CHROME, send into handlePress..");
371 | 	                        _instance.handlePress(_instance, nativeEvent);
372 | 	                        return;
373 | 	                    };
374 | 	                }
375 | 
376 | 	                /**
377 | 	                 * Fallback to handlePress.
378 | 	                 */
379 | 	                var _force = nativeEvent.targetTouches[0].force;
380 | 
381 | 	                // if 'force' props is undefined
382 | 	                // let handlePress to handle unsupport devices
383 | 	                if (typeof _force == "undefined") {
384 | 	                    _instance.handlePress(_instance, nativeEvent);
385 | 	                    return;
386 | 	                }
387 | 
388 | 	                // seeing Nexus5, we had to abandon android.
389 | 	                // would change if there is android devices support a real 3DTouch
390 | 	                if (_force > 0 && _force < 1 && !Forcify.detection.ANDROID) Forcify.detection.TOUCH3D = true;
391 | 
392 | 	                // If forceValue == 0, Forcify sent events to handlePress
393 | 	                // but keep handleTouch procedure (for pre-polling)
394 | 	                // alert(nativeEvent.targetTouches[0].force)
395 | 	                if (_force == "0") {
396 | 	                    if (!Forcify.detection.TOUCH3D) {
397 | 	                        console.log("send into handlePress..");
398 | 	                        _instance.handlePress(_instance, nativeEvent);
399 | 	                    }
400 | 	                    //not return
401 | 	                }
402 | 
403 | 	                /**
404 | 	                 * All Test Passed, try to polling force value
405 | 	                 */
406 | 	                // Forcify support multi-touch in multi-view,
407 | 	                // But in one view we only use the first touch.
408 | 	                if (nativeEvent.targetTouches && nativeEvent.targetTouches.length > 1) return;
409 | 	                if (_instance.touch) return; // prevent repeat binding
410 | 	                _instance.touch = nativeEvent.targetTouches[0]; // get first
411 | 
412 | 	                // seeing we don't have `touchforcechange` event,
413 | 	                // so we need to do it ourselves with polling.
414 | 	                _instance.pollingTouchForce.bind(_instance.touch, _instance, nativeEvent)();
415 | 	            };
416 | 
417 | 	            fn.pollingTouchForce = function (_instance, nativeEvent) {
418 | 	                /**
419 | 	                 * Start Polling procedure
420 | 	                 */
421 | 	                console.log('polling...');
422 | 
423 | 	                var touchEvent = this;
424 | 	                var force = 0;
425 | 	                var sendEvent = true;
426 | 
427 | 	                if (_instance.touch) {
428 | 	                    force = touchEvent.force;
429 | 	                    // dynamic detection real 3DTouch
430 | 	                    if (force > 0 && force < 1) Forcify.detection.TOUCH3D = true;
431 | 
432 | 	                    // repeat polling
433 | 	                    setTimeout(_instance.pollingTouchForce.bind(_instance.touch, _instance, nativeEvent), 10);
434 | 
435 | 	                    // a little hacking!!
436 | 	                    // if force == 0 passed to here,
437 | 	                    // this may well be a unsuppoted device provided force:0, such as iPhone5
438 | 	                    // but also probably a supported device with not "force" pressed.
439 | 	                    //
440 | 	                    // so we dont know and would NOT send force event:
441 | 	                    // for unsupport device, let handlePress fake it.
442 | 	                    // for supported device, event force:0 is useless until detected.
443 | 	                    if (force == 0 && !Forcify.detection.TOUCH3D) {
444 | 	                        sendEvent = false;
445 | 	                    }
446 | 	                } else {
447 | 	                    // touchend trigger! sent 0;
448 | 	                    force = 0;
449 | 	                    sendEvent = true;
450 | 	                }
451 | 
452 | 	                if (sendEvent) {
453 | 	                    var _e = { force: force, nativeEvent: nativeEvent };
454 | 	                    _instance.invokeHandlers(_instance, _e);
455 | 	                }
456 | 	            };
457 | 	        }
458 | 	    }]);
459 | 
460 | 	    return Touch;
461 | 	})();
462 | 
463 | 	exports["default"] = Touch;
464 | 	module.exports = exports["default"];
465 | 
466 | /***/ },
467 | /* 3 */
468 | /***/ function(module, exports) {
469 | 
470 | 	/**
471 | 	 *  mouse.js
472 | 	 *
473 | 	 *  Mouse module of forcify.js
474 | 	 *  created by @huxpro
475 | 	 */
476 | 
477 | 	"use strict";
478 | 
479 | 	Object.defineProperty(exports, "__esModule", {
480 | 	    value: true
481 | 	});
482 | 
483 | 	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
484 | 
485 | 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
486 | 
487 | 	var Mouse = (function () {
488 | 	    function Mouse(Forcify) {
489 | 	        _classCallCheck(this, Mouse);
490 | 
491 | 	        this.init(Forcify);
492 | 	    }
493 | 
494 | 	    _createClass(Mouse, [{
495 | 	        key: "init",
496 | 	        value: function init(Forcify) {
497 | 	            var fn = Forcify.prototype;
498 | 
499 | 	            // if mouse support force
500 | 	            fn.handleMouseForce = function (_instance, nativeEvent) {
501 | 	                // max value for trackpad is 3.0 compare to 1.0 on iOS
502 | 	                var force = nativeEvent.webkitForce / 3;
503 | 	                var _e = {
504 | 	                    force: force,
505 | 	                    nativeEvent: nativeEvent
506 | 	                };
507 | 	                _instance.invokeHandlers(_instance, _e);
508 | 	            };
509 | 	        }
510 | 	    }]);
511 | 
512 | 	    return Mouse;
513 | 	})();
514 | 
515 | 	exports["default"] = Mouse;
516 | 	module.exports = exports["default"];
517 | 
518 | /***/ },
519 | /* 4 */
520 | /***/ function(module, exports) {
521 | 
522 | 	/**
523 | 	 *  press.js
524 | 	 *
525 | 	 *  Press module of forcify.js
526 | 	 *  created by @huxpro
527 | 	 */
528 | 
529 | 	"use strict";
530 | 
531 | 	Object.defineProperty(exports, "__esModule", {
532 | 	    value: true
533 | 	});
534 | 
535 | 	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
536 | 
537 | 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
538 | 
539 | 	var Press = (function () {
540 | 	    function Press(Forcify) {
541 | 	        _classCallCheck(this, Press);
542 | 
543 | 	        this.init(Forcify);
544 | 	    }
545 | 
546 | 	    _createClass(Press, [{
547 | 	        key: "init",
548 | 	        value: function init(Forcify) {
549 | 	            var fn = Forcify.prototype;
550 | 
551 | 	            // fallback to long press (mouse || touch)
552 | 	            fn.handlePress = function (_instance, nativeEvent) {
553 | 
554 | 	                // if not fallback, early return everything.
555 | 	                if (!_instance.options.FALLBACK_TO_LONGPRESS) return;
556 | 
557 | 	                /**
558 | 	                 * Start do fallback!
559 | 	                 */
560 | 	                var delay = _instance.options.LONG_PRESS_DELAY;
561 | 	                var duration = _instance.options.LONG_PRESS_DURATION;
562 | 	                var type = nativeEvent.type;
563 | 
564 | 	                // Press Down
565 | 	                if (type === "mousedown" || type === "touchstart") {
566 | 	                    _instance._pressTimeStamp = Date.now();
567 | 	                    _instance.timer = window.setTimeout(function () {
568 | 	                        // Long Press!
569 | 	                        // Let's trigger fake Force now.
570 | 	                        _instance.repeatPushForceValue(_instance, nativeEvent);
571 | 	                    }, delay);
572 | 	                }
573 | 
574 | 	                // Press Up
575 | 	                if (type === 'mouseup' || type === "touchend") {
576 | 	                    window.clearTimeout(_instance.timer);
577 | 	                    if (Date.now() - _instance._pressTimeStamp > delay) {
578 | 	                        // stop pushing
579 | 	                        _instance._pressTimeStamp = 0;
580 | 
581 | 	                        // reset force.
582 | 	                        var _e = {
583 | 	                            force: 0,
584 | 	                            nativeEvent: nativeEvent
585 | 	                        };
586 | 	                        _instance.invokeHandlers(_instance, _e);
587 | 	                    }
588 | 	                }
589 | 	            };
590 | 
591 | 	            fn.repeatPushForceValue = function (_instance, nativeEvent) {
592 | 	                // This pushing is repeating except:
593 | 	                //
594 | 	                //  - Force support is detected to true
595 | 	                if (Forcify.detection.TOUCH3D) return;
596 | 
597 | 	                //  - touchend or mouseup trigger (_pressTimeStamp is reset)
598 | 	                if (_instance._pressTimeStamp == 0) return;
599 | 
600 | 	                /**
601 | 	                 * Start Pushing procedure
602 | 	                 */
603 | 	                console.log('start pushing...');
604 | 
605 | 	                var delay = _instance.options.LONG_PRESS_DELAY;
606 | 	                var duration = _instance.options.LONG_PRESS_DURATION;
607 | 
608 | 	                // calculate fake force value
609 | 	                var _ratio = (Date.now() - _instance._pressTimeStamp - delay) / duration;
610 | 	                // the max force value is 1
611 | 	                var _force = _ratio >= 1 ? 1 : _ratio;
612 | 
613 | 	                // invoke event handlers
614 | 	                var _e = {
615 | 	                    force: _force,
616 | 	                    nativeEvent: nativeEvent
617 | 	                };
618 | 	                _instance.invokeHandlers(_instance, _e);
619 | 
620 | 	                /**
621 | 	                 * repeat pushing...
622 | 	                 */
623 | 	                window.setTimeout(_instance.repeatPushForceValue.bind(null, _instance, nativeEvent, delay), 20);
624 | 	            };
625 | 	        }
626 | 	    }]);
627 | 
628 | 	    return Press;
629 | 	})();
630 | 
631 | 	exports["default"] = Press;
632 | 	module.exports = exports["default"];
633 | 
634 | /***/ },
635 | /* 5 */
636 | /***/ function(module, exports) {
637 | 
638 | 	/**
639 | 	 *  delegate.js
640 | 	 *
641 | 	 *  Delegate module of forcify.js
642 | 	 *  created by @huxpro
643 | 	 */
644 | 
645 | 	'use strict';
646 | 
647 | 	Object.defineProperty(exports, '__esModule', {
648 | 	    value: true
649 | 	});
650 | 
651 | 	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
652 | 
653 | 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
654 | 
655 | 	var Delegate = (function () {
656 | 	    function Delegate(Forcify) {
657 | 	        _classCallCheck(this, Delegate);
658 | 
659 | 	        this.init(Forcify);
660 | 	    }
661 | 
662 | 	    _createClass(Delegate, [{
663 | 	        key: 'init',
664 | 	        value: function init(Forcify) {
665 | 	            function bindEvent() {
666 | 	                // event need to be delegated
667 | 	                var events = ['mousedown', 'mouseup', 'touchstart', 'touchmove', 'touchend', 'webkitmouseforcewillbegin', 'webkitmouseforcechanged'];
668 | 	                events.forEach(function (e) {
669 | 	                    document.addEventListener(e, handleDelegate);
670 | 	                });
671 | 	            }
672 | 
673 | 	            function handleDelegate(nativeEvent) {
674 | 	                // stop event propagation.
675 | 	                // check e.target only.
676 | 	                if (!Forcify.__EVENT_BOBBLE__) {
677 | 	                    var _target = nativeEvent.target;
678 | 	                    var _uid = _target.__fuid__;
679 | 	                    emitByUID(_uid, nativeEvent);
680 | 	                    return;
681 | 	                }
682 | 
683 | 	                // support event bubble
684 | 	                // taversal e.path
685 | 	                var _path = nativeEvent.path;
686 | 	                _path.forEach(function (ele) {
687 | 	                    if (!ele.__fuid__) return; // fuid is ensure > 0
688 | 	                    var _uid = ele.__fuid__;
689 | 	                    emitByUID(_uid, nativeEvent);
690 | 	                });
691 | 	            }
692 | 
693 | 	            function emitByUID(_uid, nativeEvent) {
694 | 	                var caches = Forcify.cache;
695 | 	                // if element targeted is a registered Forcify Instance.
696 | 	                if (caches[_uid]) {
697 | 	                    // Target! Let's emit the event
698 | 	                    Forcify.emitEvent(caches[_uid], nativeEvent);
699 | 	                }
700 | 	            }
701 | 
702 | 	            bindEvent();
703 | 	        }
704 | 	    }]);
705 | 
706 | 	    return Delegate;
707 | 	})();
708 | 
709 | 	exports['default'] = Delegate;
710 | 	module.exports = exports['default'];
711 | 
712 | /***/ }
713 | /******/ ])
714 | });
715 | ;


--------------------------------------------------------------------------------