The Tor Browser: browser/metro/base/content/NavButtonSlider.js@7e26c7da4463 (annotated)

browser/metro/base/content/NavButtonSlider.js@7e26c7da4463 (annotated)

browser/metro/base/content/NavButtonSlider.js

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/. */
 /*
  * 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;
     }
   },
 };