The Tor Browser / file revision

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

 /*

  * Handles nav overlay button positioning.

  */

 // minimum amount of movement using the mouse after which we cancel the button click handlers

 const kOnClickMargin = 3;

 const kNavButtonPref = "browser.display.overlaynavbuttons";

 var NavButtonSlider = {

   _back: document.getElementById("overlay-back"),

   _plus: document.getElementById("overlay-plus"),

   _mouseMoveStarted: false,

   _mouseDown: false,

   _yPos: -1,

   get back() {

     return this._back;

   },

   get plus() {

     return this._plus;

   },

   /*

    * custom dragger, see input.js

    */

   freeDrag: function freeDrag() {

     return true;

   },

   isDraggable: function isDraggable(aTarget, aContent) {

     return { x: false, y: true };

   },

   dragStart: function dragStart(aX, aY, aTarget, aScroller) {

     return true;

   },

   dragStop: function dragStop(aDx, aDy, aScroller) {

     return true;

   },

   dragMove: function dragMove(aDx, aDy, aScroller, aIsKenetic, aClientX, aClientY) {

     // Note if aIsKenetic is true this is synthetic movement,

     // we don't want that so return false.

     if (aIsKenetic) {

       return false;

     }

     this._updatePosition(aClientY);

     // return true if we moved, false otherwise. The result

     // is used in deciding if we should repaint between drags.

     return true;

   },

   /*

    * logic

    */

   init: function init() {

     // Touch drag support provided by input.js

     this._back.customDragger = this;

     this._plus.customDragger = this;

     Elements.browsers.addEventListener("ContentSizeChanged", this, true);

     let events = ["mousedown", "mouseup", "mousemove", "click", "touchstart", "touchmove", "touchend"];

     events.forEach(function (value) {

       this._back.addEventListener(value, this, true);

       this._plus.addEventListener(value, this, true);

     }, this);

     this._updateStops();

     this._updateVisibility();

     Services.prefs.addObserver(kNavButtonPref, this, false);

   },

   observe: function (aSubject, aTopic, aData) {

     if (aTopic == "nsPref:changed" && aData == kNavButtonPref) {

       this._updateVisibility();

     }

   },

   _updateVisibility: function () {

     if (Services.prefs.getBoolPref(kNavButtonPref)) {

       this._back.removeAttribute("hidden");

       this._plus.removeAttribute("hidden");

     } else {

       this._back.setAttribute("hidden", true);

       this._plus.setAttribute("hidden", true);

     }

   },

   _updateStops: function () {

     this._contentHeight = ContentAreaObserver.contentHeight;

     this._imageHeight = 118;

     this._topStop = this._imageHeight * .7;

     this._bottomStop = this._contentHeight - (this._imageHeight * .7);

     // Check to see if we need to move the slider into view

     if (this._yPos != -1 &&

         (this._topStop > this._yPos || this._bottomStop < this._yPos)) {

       this._back.style.top = "50%";

       this._plus.style.top = "50%";

     }

   },

   _getPosition: function _getPosition() {

     this._yPos = parseInt(getComputedStyle(this._back).top);

   },

   _setPosition: function _setPosition() {

     this._back.style.top = this._yPos + "px";

     this._plus.style.top = this._yPos + "px";

   },

   _updatePosition: function (aClientY) {

     if (this._topStop > aClientY || this._bottomStop < aClientY)

       return;

     this._yPos = aClientY;

     this._setPosition();

   },

   _updateOffset: function (aOffset) {

     let newPos = this._yPos + aOffset;

     if (this._topStop > newPos || this._bottomStop < newPos)

       return;

     this._yPos = newPos;

     this._setPosition();

   },

   /*

    * Events

    */

   handleEvent: function handleEvent(aEvent) {

     switch (aEvent.type) {

       case "ContentSizeChanged":

         this._updateStops();

         break;

       case "touchstart":

         if (aEvent.touches.length != 1)

           break;

         aEvent.preventDefault();

         aEvent = aEvent.touches[0];

       case "mousedown":

         this._getPosition();

         this._mouseDown = true;

         this._mouseMoveStarted = false;

         this._mouseY = aEvent.clientY;

         if (aEvent.originalTarget)

           aEvent.originalTarget.setCapture();

         this._back.setAttribute("mousedrag", true);

         this._plus.setAttribute("mousedrag", true);

         break;

       case "touchend":

         if (aEvent.touches.length != 0)

           break;

         this._mouseDown = false;

         this._back.removeAttribute("mousedrag");

         this._plus.removeAttribute("mousedrag");

         if (!this._mouseMoveStarted) {

           if (aEvent.originalTarget == this._back) {

             CommandUpdater.doCommand('cmd_back');

           } else {

             CommandUpdater.doCommand('cmd_newTab');

           }

         }

         break;

       case "mouseup":

         this._mouseDown = false;

         this._back.removeAttribute("mousedrag");

         this._plus.removeAttribute("mousedrag");

         break;

       case "touchmove":

         if (aEvent.touches.length != 1)

           break;

         aEvent = aEvent.touches[0];

       case "mousemove":

         // Check to be sure this is a drag operation

         if (!this._mouseDown) {

           return;

         }

         // Don't start a drag until we've passed a threshold

         let dy = aEvent.clientY - this._mouseY;

         if (!this._mouseMoveStarted && Math.abs(dy) < kOnClickMargin) {

           return;

         }

         // Start dragging via the mouse

         this._mouseMoveStarted = true;

         this._mouseY = aEvent.clientY;

         this._updateOffset(dy);

         break;

       case "click":

         // Don't invoke the click action if we've moved the buttons via the mouse.

         if (this._mouseMoveStarted) {

           return;

         }

         if (aEvent.originalTarget == this._back) {

            CommandUpdater.doCommand('cmd_back');

         } else {

            CommandUpdater.doCommand('cmd_newTab');

         }

         break;

     }

   },

 };