The Tor Browser: browser/metro/modules/CrossSlide.jsm@7e26c7da4463 (annotated)

browser/metro/modules/CrossSlide.jsm@7e26c7da4463 (annotated)

browser/metro/modules/CrossSlide.jsm

Wed, 31 Dec 2014 06:55:50 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:55:50 +0100
changeset 2: 7e26c7da4463
permissions: -rw-r--r--

Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2

 /* 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 / annotate

browser/metro/modules/CrossSlide.jsm@7e26c7da4463 (annotated)

browser/metro/modules/CrossSlide.jsm