The Tor Browser: comparison browser/metro/modules/CrossSlide.jsm

--1:000000000000
+:9ac7a36d4373
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License, v. 2.0. If a copy of the MPL was not distributed with this
+* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+this.EXPORTED_SYMBOLS = ["CrossSlide"];
+// needs DPI adjustment?
+let CrossSlideThresholds = {
+SELECTIONSTART: 25,
+SPEEDBUMPSTART: 30,
+SPEEDBUMPEND: 50,
+REARRANGESTART: 80
+};
+// see: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.input.crossslidingstate.ASPx
+let CrossSlidingState = {
+STARTED:  0,
+DRAGGING: 1,
+SELECTING: 2,
+SELECT_SPEED_BUMPING: 3,
+SPEED_BUMPING: 4,
+REARRANGING: 5,
+COMPLETED: 6
+};
+let CrossSlidingStateNames = [
+'started',
+'dragging',
+'selecting',
+'selectSpeedBumping',
+'speedBumping',
+'rearranging',
+'completed'
+];
+// --------------------------------
+// module helpers
+//
+function isSelectable(aElement) {
+// placeholder logic
+return aElement.nodeName == 'richgriditem' && aElement.hasAttribute("value");
+}
+function withinCone(aLen, aHeight) {
+// check pt falls within 45deg either side of the cross axis
+return aLen > aHeight;
+}
+function getScrollAxisFromElement(aElement) {
+// keeping it simple - just return apparent scroll axis for the document
+let win = aElement.ownerDocument.defaultView;
+let scrollX = win.scrollMaxX,
+scrollY = win.scrollMaxY;
+// determine scroll axis from scrollable content when possible
+if (scrollX || scrollY)
+return scrollX >= scrollY ? 'x' : 'y';
+// fall back to guessing at scroll axis from document aspect ratio
+let docElem = aElement.ownerDocument.documentElement;
+return  docElem.clientWidth >= docElem.clientHeight ?
+'x' : 'y';
+}
+function pointFromTouchEvent(aEvent) {
+let touch = aEvent.touches[0];
+return { x: touch.clientX, y: touch.clientY };
+}
+// This damping function has these important properties:
+// f(0) = 0
+// f'(0) = 1
+// limit as x -> Infinity of f(x) = 1
+function damp(aX) {
+return 2 / (1 + Math.exp(-2 * aX)) - 1;
+}
+function speedbump(aDelta, aStart, aEnd) {
+let x = Math.abs(aDelta);
+if (x <= aStart)
+return aDelta;
+let sign = aDelta / x;
+let d = aEnd - aStart;
+let damped = damp((x - aStart) / d);
+return sign * (aStart + (damped * d));
+}
+this.CrossSlide = {
+// -----------------------
+// Gesture constants
+Thresholds: CrossSlideThresholds,
+State: CrossSlidingState,
+StateNames: CrossSlidingStateNames,
+// -----------------------
+speedbump: speedbump
+};
+function CrossSlideHandler(aNode, aThresholds) {
+this.node = aNode;
+this.thresholds = Object.create(CrossSlideThresholds);
+// apply per-instance threshold configuration
+if (aThresholds) {
+for(let key in aThresholds)
+this.thresholds[key] = aThresholds[key];
+}
+aNode.addEventListener("touchstart", this, false);
+aNode.addEventListener("touchmove", this, false);
+aNode.addEventListener("touchend", this, false);
+aNode.addEventListener("touchcancel", this, false);
+aNode.ownerDocument.defaultView.addEventListener("scroll", this, false);
+}
+CrossSlideHandler.prototype = {
+node: null,
+drag: null,
+getCrossSlideState: function(aCrossAxisDistance, aScrollAxisDistance) {
+if (aCrossAxisDistance <= 0) {
+return CrossSlidingState.STARTED;
+}
+if (aCrossAxisDistance < this.thresholds.SELECTIONSTART) {
+return CrossSlidingState.DRAGGING;
+}
+if (aCrossAxisDistance < this.thresholds.SPEEDBUMPSTART) {
+return CrossSlidingState.SELECTING;
+}
+if (aCrossAxisDistance < this.thresholds.SPEEDBUMPEND) {
+return CrossSlidingState.SELECT_SPEED_BUMPING;
+}
+if (aCrossAxisDistance < this.thresholds.REARRANGESTART) {
+return CrossSlidingState.SPEED_BUMPING;
+}
+// out of bounds cross-slide
+return -1;
+},
+handleEvent: function handleEvent(aEvent) {
+switch (aEvent.type) {
+case "touchstart":
+this._onTouchStart(aEvent);
+break;
+case "touchmove":
+this._onTouchMove(aEvent);
+break;
+case "scroll":
+case "touchcancel":
+this.cancel(aEvent);
+break;
+case "touchend":
+this._onTouchEnd(aEvent);
+break;
+}
+},
+cancel: function(aEvent){
+this._fireProgressEvent("cancelled", aEvent);
+this.drag = null;
+},
+_onTouchStart: function onTouchStart(aEvent){
+if (aEvent.touches.length > 1)
+return;
+let touch = aEvent.touches[0];
+// cross-slide is a single touch gesture
+// the top target is the one we need here, touch.target not relevant
+let target = aEvent.target;
+if (!isSelectable(target))
+return;
+let scrollAxis = getScrollAxisFromElement(target);
+this.drag = {
+scrollAxis: scrollAxis,
+crossAxis: (scrollAxis=='x') ? 'y' : 'x',
+origin: pointFromTouchEvent(aEvent),
+state: -1
+};
+},
+_onTouchMove: function(aEvent){
+if (!this.drag) {
+return;
+}
+if (aEvent.touches.length!==1) {
+// cancel if another touch point gets involved
+return this.cancel(aEvent);
+}
+let startPt = this.drag.origin;
+let endPt = this.drag.position = pointFromTouchEvent(aEvent);
+let scrollAxis = this.drag.scrollAxis,
+crossAxis = this.drag.crossAxis;
+// distance from the origin along the axis perpendicular to scrolling
+let crossAxisDistance = Math.abs(endPt[crossAxis] - startPt[crossAxis]);
+// distance along the scrolling axis
+let scrollAxisDistance = Math.abs(endPt[scrollAxis] - startPt[scrollAxis]);
+let currState = this.drag.state;
+let newState = this.getCrossSlideState(crossAxisDistance, scrollAxisDistance);
+switch (newState) {
+case -1 :
+// dodgy input/out of bounds
+return this.cancel(aEvent);
+case CrossSlidingState.STARTED :
+break;
+case CrossSlidingState.DRAGGING :
+if (scrollAxisDistance > this.thresholds.SELECTIONSTART) {
+// looks like a pan/scroll was intended
+return this.cancel(aEvent);
+}
+// else fall-thru'
+case CrossSlidingState.SELECTING :
+case CrossSlidingState.SELECT_SPEED_BUMPING :
+case CrossSlidingState.SPEED_BUMPING :
+// we're committed to a cross-slide gesture,
+// so going out of bounds at this point means aborting
+if (!withinCone(crossAxisDistance, scrollAxisDistance)) {
+return this.cancel(aEvent);
+}
+// we're mid-gesture, consume this event
+aEvent.stopPropagation();
+break;
+}
+if (currState !== newState) {
+this.drag.state = newState;
+this._fireProgressEvent( CrossSlidingStateNames[newState], aEvent );
+}
+},
+_onTouchEnd: function(aEvent){
+if (!this.drag)
+return;
+if (this.drag.state < CrossSlidingState.SELECTING) {
+return this.cancel(aEvent);
+}
+this._fireProgressEvent("completed", aEvent);
+this._fireSelectEvent(aEvent);
+this.drag = null;
+},
+/**
+* Dispatches a custom Event on the drag node.
+* @param aEvent The source event.
+* @param aType The event type.
+*/
+_fireProgressEvent: function CrossSliding_fireEvent(aState, aEvent) {
+if (!this.drag)
+return;
+let event = this.node.ownerDocument.createEvent("Events");
+let crossAxisName = this.drag.crossAxis;
+event.initEvent("MozCrossSliding", true, true);
+event.crossSlidingState = aState;
+if ('position' in this.drag) {
+event.position = this.drag.position;
+if (crossAxisName) {
+event.direction = crossAxisName;
+if('origin' in this.drag) {
+event.delta = this.drag.position[crossAxisName] - this.drag.origin[crossAxisName];
+}
+}
+}
+aEvent.target.dispatchEvent(event);
+},
+/**
+* Dispatches a custom Event on the given target node.
+* @param aEvent The source event.
+*/
+_fireSelectEvent: function SelectTarget_fireEvent(aEvent) {
+let event = this.node.ownerDocument.createEvent("Events");
+event.initEvent("MozCrossSlideSelect", true, true);
+event.position = this.drag.position;
+aEvent.target.dispatchEvent(event);
+}
+};
+this.CrossSlide.Handler = CrossSlideHandler;

The Tor Browser / file comparison

comparison: browser/metro/modules/CrossSlide.jsm

browser/metro/modules/CrossSlide.jsm