playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Merge pull request #443 from twbs/fat-more-shit 

cleanup fingerblast and rebuid docs
pull/445/head
Jacob 11 years ago
parent
55a2c079d8 529edc0988
commit
186bdb398d
2 changed files with 204 additions and 215 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      docs/assets/js/docs.min.js
  2. 417
      docs/assets/js/fingerblast.js

2
docs/assets/js/docs.min.js vendored
View File

File diff suppressed because one or more lines are too long

417
docs/assets/js/fingerblast.js
Unescape View File

@ -5,267 +5,256 @@
/* jshint bitwise: false */ /* jshint bitwise: false */
/* global GLOBAL: true */ /* global GLOBAL: true */
function FingerBlast(element) { (function () {
'use strict';
this.element = typeof element === 'string' ? document.querySelector(element) : element;
this.listen();
}
FingerBlast.prototype = {
x: NaN,
y: NaN,
startDistance: NaN,
startAngle: NaN,
mouseIsDown: false, 'use strict';
listen: function () { function FingerBlast(element) {
'use strict'; this.element = typeof element === 'string' ? document.querySelector(element) : element;
var activate = this.activate.bind(this); if (this.element) {
var deactivate = this.deactivate.bind(this); this.listen();
}
}
function contains (element, ancestor) { FingerBlast.prototype = {
var descendants, index, descendant; x: NaN,
if ('compareDocumentPosition' in ancestor) { y: NaN,
return !!(ancestor.compareDocumentPosition(element) & 16);
} else if ('contains' in ancestor) { startDistance: NaN,
return ancestor !== element && ancestor.contains(element); startAngle: NaN,
} else {
for ((descendants = ancestor.getElementsByTagName('*')), index = 0; (descendant = descendants[index++]);) { mouseIsDown: false,
if (descendant === element) {
return true; listen: function () {
var activate = this.activate.bind(this);
var deactivate = this.deactivate.bind(this);
function contains (element, ancestor) {
var descendants, index, descendant;
if ('compareDocumentPosition' in ancestor) {
return !!(ancestor.compareDocumentPosition(element) & 16);
} else if ('contains' in ancestor) {
return ancestor !== element && ancestor.contains(element);
} else {
for ((descendants = ancestor.getElementsByTagName('*')), index = 0; (descendant = descendants[index++]);) {
if (descendant === element) {
return true;
}
} }
return false;
} }
return false;
} }
}
this.element.addEventListener('mouseover', function (e) { this.element.addEventListener('mouseover', function (e) {
var target = e.relatedTarget; var target = e.relatedTarget;
if (target !== this && !contains(target, this)) { if (target !== this && !contains(target, this)) {
activate(); activate();
} }
}); });
this.element.addEventListener('mouseout', function (e) { this.element.addEventListener('mouseout', function (e) {
var target = e.relatedTarget; var target = e.relatedTarget;
if (target !== this && !contains(target, this)) { if (target !== this && !contains(target, this)) {
deactivate(e); deactivate(e);
} }
}); });
}, },
activate: function () { activate: function () {
'use strict'; if (this.active) {
return;
}
this.element.addEventListener('mousedown', (this.touchStart = this.touchStart.bind(this)), true);
this.element.addEventListener('mousemove', (this.touchMove = this.touchMove.bind(this)), true);
this.element.addEventListener('mouseup', (this.touchEnd = this.touchEnd.bind(this)), true);
this.element.addEventListener('click', (this.click = this.click.bind(this)), true);
this.active = true;
},
deactivate: function (e) {
this.active = false;
if (this.mouseIsDown) {
this.touchEnd(e);
}
this.element.removeEventListener('mousedown', this.touchStart, true);
this.element.removeEventListener('mousemove', this.touchMove, true);
this.element.removeEventListener('mouseup', this.touchEnd, true);
this.element.removeEventListener('click', this.click, true);
},
click: function (e) {
if (e.synthetic) {
return;
}
e.preventDefault();
e.stopPropagation();
},
if (this.active) { touchStart: function (e) {
return; if (e.synthetic || /input|textarea/.test(e.target.tagName.toLowerCase())) {
} return;
this.element.addEventListener('mousedown', (this.touchStart = this.touchStart.bind(this)), true); }
this.element.addEventListener('mousemove', (this.touchMove = this.touchMove.bind(this)), true);
this.element.addEventListener('mouseup', (this.touchEnd = this.touchEnd.bind(this)), true);
this.element.addEventListener('click', (this.click = this.click.bind(this)), true);
this.active = true;
},
deactivate: function (e) {
'use strict';
this.active = false;
if (this.mouseIsDown) {
this.touchEnd(e);
}
this.element.removeEventListener('mousedown', this.touchStart, true);
this.element.removeEventListener('mousemove', this.touchMove, true);
this.element.removeEventListener('mouseup', this.touchEnd, true);
this.element.removeEventListener('click', this.click, true);
},
click: function (e) { this.mouseIsDown = true;
'use strict';
if (e.synthetic) { e.preventDefault();
return; e.stopPropagation();
}
e.preventDefault();
e.stopPropagation();
},
touchStart: function (e) { this.fireTouchEvents('touchstart', e);
'use strict'; },
if (e.synthetic || /input|textarea/.test(e.target.tagName.toLowerCase())) { touchMove: function (e) {
return; if (e.synthetic) {
} return;
}
this.mouseIsDown = true; e.preventDefault();
e.stopPropagation();
e.preventDefault(); this.move(e.clientX, e.clientY);
e.stopPropagation();
this.fireTouchEvents('touchstart', e); if (this.mouseIsDown) {
}, this.fireTouchEvents('touchmove', e);
}
},
touchMove: function (e) { touchEnd: function (e) {
'use strict'; if (e.synthetic) {
return;
}
if (e.synthetic) { this.mouseIsDown = false;
return;
}
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.move(e.clientX, e.clientY); this.fireTouchEvents('touchend', e);
if (this.mouseIsDown) { if (!this.target) {
this.fireTouchEvents('touchmove', e); return;
} }
},
touchEnd: function (e) { // Mobile Safari moves all the mouse events to fire after the touchend event.
'use strict'; this.target.dispatchEvent(this.createMouseEvent('mouseover', e));
this.target.dispatchEvent(this.createMouseEvent('mousemove', e));
this.target.dispatchEvent(this.createMouseEvent('mousedown', e));
},
if (e.synthetic) { fireTouchEvents: function (eventName, originalEvent) {
return; var events = [];
} var gestures = [];
this.mouseIsDown = false; if (!this.target) {
return;
}
e.preventDefault(); // Convert 'ontouch*' properties and attributes to listeners.
e.stopPropagation(); var onEventName = 'on' + eventName;
this.fireTouchEvents('touchend', e); if (onEventName in this.target) {
console.warn('Converting `' + onEventName + '` property to event listener.', this.target);
this.target.addEventListener(eventName, this.target[onEventName], false);
delete this.target[onEventName];
}
if (!this.target) { if (this.target.hasAttribute(onEventName)) {
return; console.warn('Converting `' + onEventName + '` attribute to event listener.', this.target);
} var handler = new GLOBAL.Function('event', this.target.getAttribute(onEventName));
this.target.addEventListener(eventName, handler, false);
this.target.removeAttribute(onEventName);
}
// Mobile Safari moves all the mouse events to fire after the touchend event. // Set up a new event with the coordinates of the finger.
this.target.dispatchEvent(this.createMouseEvent('mouseover', e)); var touch = this.createMouseEvent(eventName, originalEvent);
this.target.dispatchEvent(this.createMouseEvent('mousemove', e));
this.target.dispatchEvent(this.createMouseEvent('mousedown', e));
},
fireTouchEvents: function (eventName, originalEvent) { events.push(touch);
'use strict';
var events = []; // Figure out scale and rotation.
var gestures = []; if (events.length > 1) {
var x = events[0].pageX - events[1].pageX;
var y = events[0].pageY - events[1].pageY;
if (!this.target) { var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
return; var angle = Math.atan2(x, y) * (180 / Math.PI);
}
// Convert 'ontouch*' properties and attributes to listeners. var gestureName = 'gesturechange';
var onEventName = 'on' + eventName;
if (onEventName in this.target) { if (eventName === 'touchstart') {
console.warn('Converting `' + onEventName + '` property to event listener.', this.target); gestureName = 'gesturestart';
this.target.addEventListener(eventName, this.target[onEventName], false); this.startDistance = distance;
delete this.target[onEventName]; this.startAngle = angle;
} }
if (this.target.hasAttribute(onEventName)) { if (eventName === 'touchend') {
console.warn('Converting `' + onEventName + '` attribute to event listener.', this.target); gestureName = 'gestureend';
var handler = new GLOBAL.Function('event', this.target.getAttribute(onEventName)); }
this.target.addEventListener(eventName, handler, false);
this.target.removeAttribute(onEventName);
}
// Set up a new event with the coordinates of the finger. events.forEach(function(event) {
var touch = this.createMouseEvent(eventName, originalEvent); var gesture = this.createMouseEvent.call(event._finger, gestureName, event);
gestures.push(gesture);
}.bind(this));
events.push(touch); events.concat(gestures).forEach(function(event) {
event.scale = distance / this.startDistance;
event.rotation = this.startAngle - angle;
});
}
// Figure out scale and rotation. // Loop through the events array and fill in each touch array.
if (events.length > 1) { events.forEach(function(touch) {
var x = events[0].pageX - events[1].pageX; touch.touches = events.filter(function(e) {
var y = events[0].pageY - events[1].pageY; return ~e.type.indexOf('touch') && e.type !== 'touchend';
});
var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); touch.changedTouches = events.filter(function(e) {
var angle = Math.atan2(x, y) * (180 / Math.PI); return ~e.type.indexOf('touch') && e._finger.target === touch._finger.target;
});
var gestureName = 'gesturechange'; touch.targetTouches = touch.changedTouches.filter(function(e) {
return ~e.type.indexOf('touch') && e.type !== 'touchend';
});
});
if (eventName === 'touchstart') { // Then fire the events.
gestureName = 'gesturestart'; events.concat(gestures).forEach(function(event, i) {
this.startDistance = distance; event.identifier = i;
this.startAngle = angle; event._finger.target.dispatchEvent(event);
} });
},
if (eventName === 'touchend') { createMouseEvent: function (eventName, originalEvent) {
gestureName = 'gestureend'; var e = document.createEvent('MouseEvent');
}
events.forEach(function(event) { e.initMouseEvent(eventName, true, true,
var gesture = this.createMouseEvent.call(event._finger, gestureName, event); originalEvent.view, originalEvent.detail,
gestures.push(gesture); this.x || originalEvent.screenX, this.y || originalEvent.screenY,
}.bind(this)); this.x || originalEvent.clientX, this.y || originalEvent.clientY,
originalEvent.ctrlKey, originalEvent.shiftKey,
originalEvent.altKey, originalEvent.metaKey,
originalEvent.button, this.target || originalEvent.relatedTarget
);
events.concat(gestures).forEach(function(event) { e.synthetic = true;
event.scale = distance / this.startDistance; e._finger = this;
event.rotation = this.startAngle - angle;
});
}
// Loop through the events array and fill in each touch array. return e;
events.forEach(function(touch) { },
touch.touches = events.filter(function(e) {
return ~e.type.indexOf('touch') && e.type !== 'touchend';
});
touch.changedTouches = events.filter(function(e) { move: function (x, y) {
return ~e.type.indexOf('touch') && e._finger.target === touch._finger.target; if (isNaN(x) || isNaN(y)) {
}); this.target = null;
} else {
this.x = x;
this.y = y;
touch.targetTouches = touch.changedTouches.filter(function(e) { if (!this.mouseIsDown) {
return ~e.type.indexOf('touch') && e.type !== 'touchend'; this.target = document.elementFromPoint(x, y);
}); }
});
// Then fire the events.
events.concat(gestures).forEach(function(event, i) {
event.identifier = i;
event._finger.target.dispatchEvent(event);
});
},
createMouseEvent: function (eventName, originalEvent) {
'use strict';
var e = document.createEvent('MouseEvent');
e.initMouseEvent(eventName, true, true,
originalEvent.view, originalEvent.detail,
this.x || originalEvent.screenX, this.y || originalEvent.screenY,
this.x || originalEvent.clientX, this.y || originalEvent.clientY,
originalEvent.ctrlKey, originalEvent.shiftKey,
originalEvent.altKey, originalEvent.metaKey,
originalEvent.button, this.target || originalEvent.relatedTarget
);
e.synthetic = true;
e._finger = this;
return e;
},
move: function (x, y) {
'use strict';
if (isNaN(x) || isNaN(y)) {
this.target = null;
} else {
this.x = x;
this.y = y;
if (!this.mouseIsDown) {
this.target = document.elementFromPoint(x, y);
} }
} }
} };
};
window.FingerBlast = FingerBlast;
}());

Write Preview
Loading…
Cancel
Save