Skip to content

Commit

Permalink
Makes touch handlers unique so that individual fingers are treated se…
Browse files Browse the repository at this point in the history 
…perately
  • Loading branch information
@stephband
stephband committed Oct 28, 2016
1 parent 21e1e8f commit 68e509d
Show file tree
Hide file tree
Showing 6 changed files with 399 additions and 114 deletions.
238 changes: 238 additions & 0 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"rules": {
"accessor-pairs": "error",
"array-bracket-spacing": [
"error",
"never"
],
"array-callback-return": "off",
"arrow-body-style": "error",
"arrow-parens": "error",
"arrow-spacing": "error",
"block-scoped-var": "off",
"block-spacing": ["error", "always"],
"brace-style": "off",
"callback-return": "error",
"camelcase": "off",
"class-methods-use-this": "error",
"comma-dangle": [
"error",
"only-multiline"
],
"comma-spacing": "off",
"comma-style": [
"error",
"last"
],
"complexity": ["error", 12],
"computed-property-spacing": [
"error",
"never"
],
"consistent-return": "off",
"consistent-this": "off",
"curly": "off",
"default-case": "error",
"dot-location": [
"error",
"property"
],
"dot-notation": "off",
"eol-last": ["error", "always"],
"eqeqeq": ["error", "always"],
"func-call-spacing": "error",
"func-names": "off",
"func-style": "off",
"generator-star-spacing": "error",
"global-require": "error",
"guard-for-in": "off",
"handle-callback-err": "error",
"id-blacklist": "error",
"id-length": "off",
"id-match": "error",
"indent": "off",
"init-declarations": "off",
"jsx-quotes": "error",
"key-spacing": "off",
"keyword-spacing": "off",
"line-comment-position": "error",
"linebreak-style": [
"error",
"unix"
],
"lines-around-comment": "error",
"lines-around-directive": "error",
"max-depth": "off",
"max-len": "off",
"max-lines": "off",
"max-nested-callbacks": "error",
"max-params": "off",
"max-statements": "off",
"max-statements-per-line": "off",
"multiline-ternary": "off",
"new-parens": "off",
"newline-after-var": "off",
"newline-before-return": "off",
"newline-per-chained-call": "off",
"no-alert": "error",
"no-array-constructor": "error",
"no-bitwise": "error",
"no-caller": "error",
"no-catch-shadow": "error",
"no-cond-assign": ["error", "except-parens"],
"no-confusing-arrow": "error",
"no-console": "warn",
"no-continue": "off",
"no-control-regex": "off",
"no-div-regex": "error",
"no-dupe-args": "error",
"no-duplicate-imports": "error",
"no-else-return": "error",
"no-empty": [
"error",
{
"allowEmptyCatch": true
}
],
"no-empty-function": "off",
"no-eq-null": "error",
"no-eval": "error",
"no-extend-native": "error",
"no-extra-bind": "error",
"no-extra-label": "error",
"no-extra-parens": "off",
"no-floating-decimal": "error",
"no-global-assign": "error",
"no-implicit-globals": "off",
"no-implied-eval": "error",
"no-inline-comments": "error",
"no-inner-declarations": ["error", "both"],
"no-invalid-this": "off",
"no-invalid-regexp": "error",
"no-iterator": "error",
"no-label-var": "error",
"no-labels": "error",
"no-lone-blocks": "error",
"no-lonely-if": "off",
"no-loop-func": "error",
"no-mixed-operators": "off",
"no-mixed-requires": "error",
"no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
"no-multi-spaces": "off",
"no-multi-str": "error",
"no-multiple-empty-lines": "off",
"no-negated-condition": "off",
"no-nested-ternary": "off",
"no-new": "off",
"no-new-func": "error",
"no-new-object": "error",
"no-new-require": "error",
"no-new-wrappers": "error",
"no-octal-escape": "error",
"no-param-reassign": "off",
"no-path-concat": "error",
"no-plusplus": "off",
"no-process-env": "error",
"no-process-exit": "error",
"no-proto": "error",
"no-prototype-builtins": "off",
"no-restricted-globals": "error",
"no-restricted-imports": "error",
"no-restricted-modules": "error",
"no-restricted-properties": "error",
"no-restricted-syntax": "error",
"no-return-assign": "off",
"no-script-url": "error",
"no-self-compare": "error",
"no-sequences": "off",
// This would be nice, but it reports names of closure params as shadows
"no-shadow": "off",
"no-shadow-restricted-names": "off",
"no-spaced-func": "error",
"no-sync": "error",
"no-tabs": "off",
"no-template-curly-in-string": "error",
"no-ternary": "off",
"no-throw-literal": "error",
"no-trailing-spaces": "off",
"no-undef-init": "error",
"no-undefined": "off",
"no-underscore-dangle": "off",
"no-unmodified-loop-condition": "off",
"no-unneeded-ternary": "error",
"no-unreachable": "error",
"no-unsafe-negation": "error",
"no-unused-expressions": "off",
"no-unused-vars": ["error", { "args": "none" }],
"no-use-before-define": "off",
"no-useless-call": "error",
"no-useless-computed-key": "error",
"no-useless-concat": "error",
"no-useless-constructor": "error",
"no-useless-escape": "error",
"no-useless-rename": "error",
"no-var": "off",
"no-void": "off",
"no-warning-comments": "off",
"no-whitespace-before-property": "error",
"no-with": "error",
"object-curly-newline": "off",
"object-curly-spacing": "off",
"object-property-newline": "off",
"object-shorthand": "off",
"one-var": "off",
"one-var-declaration-per-line": "off",
"operator-assignment": "off",
"operator-linebreak": [
"error",
"after"
],
"padded-blocks": "off",
"prefer-arrow-callback": "off",
"prefer-const": "error",
"prefer-numeric-literals": "error",
"prefer-reflect": "off",
"prefer-rest-params": "off",
"prefer-spread": "off",
"prefer-template": "off",
"quote-props": "off",
"quotes": "off",
"radix": [
"error",
"always"
],
"require-jsdoc": "off",
"rest-spread-spacing": "error",
"semi": "off",
"semi-spacing": "off",
"sort-imports": "error",
"sort-keys": "off",
"sort-vars": "off",
"space-before-blocks": "off",
"space-before-function-paren": "off",
"space-in-parens": [
"error",
"never"
],
"space-infix-ops": "off",
"space-unary-ops": "error",
"spaced-comment": "off",
"strict": "off",
"symbol-description": "error",
"template-curly-spacing": "error",
"unicode-bom": [
"error",
"never"
],
"valid-jsdoc": "error",
"vars-on-top": "off",
"wrap-iife": "off",
"wrap-regex": "off",
"yield-star-spacing": "error"
}
}
4 changes: 3 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/js/jquery-*
.testswarm
archived/
archived/
node_modules/*
.DS_Store
40 changes: 21 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,8 @@ <h3 class="text-4">Native DOM</h3>
{% highlight js %}
var node = document.querySelector('.mydiv');

// A movestart event must be bound and explicitly enabled
// A movestart event must be bound and explicitly
// enabled or other move events will not fire
node.addEventListener('movestart', function(e) {
e.enableMove();
});
Expand All @@ -108,8 +109,10 @@ <h3 class="text-4">Native DOM</h3>
node.addEventListener('moveend', function() {
// move is complete!
});{% endhighlight %}
<p><code>.enableMove()</code> is a necessary performance optimisation
(that works around the DOM's lack of event inspection).</p>
</div

><div class="grid-1/2 block">
<h3 class="text-4">jQuery</h3>
{% highlight js %}
Expand All @@ -122,7 +125,8 @@ <h3 class="text-4">jQuery</h3>
// move is complete!
});{% endhighlight %}
<p>(jQuery's special event system does the work of enabling
move events on movestart.)</p>
move events so there is no need to explicitly bind to
<code>movestart</code>.)</p>
</div>
</div>

Expand Down Expand Up @@ -150,8 +154,8 @@ <h2 id="why1">Why not just use mouse or touch events?</h2>
<h2 id="why2">What about drag events?</h2>

<p>Move events are designed to compliment drag events, where the two have different meanings: drag events are for transferring data while move events are for making interactive interfaces.
That said, <code>movestart</code>, <code>move</code> and <code>moveend</code> events deliberately echo <code>dragstart</code>, <code>drag</code> and <code>dragend</code> events, with one significant difference:
where the <code>drag</code> event fires continuously whether you have moved the pointer or not, the <code>move</code> event fires only after the pointer has been moved.</p>
That said, <code>movestart</code>, <code>move</code> and <code>moveend</code> events deliberately echo <code>dragstart</code>, <code>drag</code> and <code>dragend</code> events, with one main difference:
where the <code>drag</code> event fires continuously whether you have moved the pointer or not, the <code>move</code> event fires only after the pointer has been moved, and only on animation frames.</p>

<p>Where both a <code>dragstart</code> and any move event are bound to the same node, drag events are suppressed.</p>

Expand Down Expand Up @@ -398,29 +402,27 @@ <h3>Find me on...</h3>
(function(){
// Test for correct deltaX and deltaY values

var distX = 0, distY = 0, pageX = 0, pageY = 0;
var distX = 0, distY = 0, pageX = 0, pageY = 0, startX = 0, startY = 0;

box
.on('movestart', function(e) {
startX = e.startX;
startY = e.startY;
distX = e.distX;
distY = e.distY;
pageX = e.pageX;
pageY = e.pageY;
console.log('movestart e.startX:', e.startX, 'e.distX:', e.distX, 'e.pageX:', e.pageX);
console.log('movestart e.startY:', e.startY, 'e.distY:', e.distY, 'e.pageY:', e.pageY);
})
.on('move', function(e){
.on('move movend', function(e){
// All these statements should be true
console.assert(e.deltaX === e.distX - distX, 'move property not correct');
console.assert(e.deltaY === e.distY - distY, 'move property not correct');
console.assert(e.deltaX === e.pageX - pageX, 'move property not correct');
console.assert(e.deltaY === e.pageY - pageY, 'move property not correct');

if ((e.deltaX === e.distX - distX) +
(e.deltaY === e.distY - distY) +
(e.deltaX === e.pageX - pageX) +
(e.deltaY === e.pageY - pageY) !== 4) {
console.log('X', distX, e.distX, pageX, e.pageX, e.deltaX);
console.log('Y', distY, e.distY, pageY, e.pageY, e.deltaY);
}
console.assert(e.startX === startX, 'e.startX property not correct. Expected:', startX, 'Actual:', e.startX);
console.assert(e.startY === startY, 'e.startY property not correct. Expected:', startY, 'Actual:', e.startY);
console.assert(e.deltaX === e.distX - distX, 'e.deltaX property not correct. e.startX:', e.startX, 'e.distX:', e.distX, 'e.deltaX:', e.deltaX, 'e.pageX:', e.pageX);
console.assert(e.deltaY === e.distY - distY, 'e.deltaY property not correct. e.startY:', e.startY, 'e.distY:', e.distY, 'e.deltaY:', e.deltaY, 'e.pageY:', e.pageY);
console.assert(e.deltaX === e.pageX - pageX, 'e.pageX property not correct. e.startX:', e.startX, 'e.distX:', e.distX, 'e.deltaX:', e.deltaX, 'e.pageX:', e.pageX);
console.assert(e.deltaY === e.pageY - pageY, 'e.pageY property not correct. e.startY:', e.startY, 'e.distY:', e.distY, 'e.deltaY:', e.deltaY, 'e.pageY:', e.pageY);

distY = e.distY;
distX = e.distX;
Expand Down
Loading

0 comments on commit 68e509d

Please sign in to comment.