1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/metro/base/content/NavButtonSlider.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,217 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +/*
1.9 + * Handles nav overlay button positioning.
1.10 + */
1.11 +
1.12 +// minimum amount of movement using the mouse after which we cancel the button click handlers
1.13 +const kOnClickMargin = 3;
1.14 +
1.15 +const kNavButtonPref = "browser.display.overlaynavbuttons";
1.16 +
1.17 +var NavButtonSlider = {
1.18 + _back: document.getElementById("overlay-back"),
1.19 + _plus: document.getElementById("overlay-plus"),
1.20 + _mouseMoveStarted: false,
1.21 + _mouseDown: false,
1.22 + _yPos: -1,
1.23 +
1.24 + get back() {
1.25 + return this._back;
1.26 + },
1.27 +
1.28 + get plus() {
1.29 + return this._plus;
1.30 + },
1.31 +
1.32 + /*
1.33 + * custom dragger, see input.js
1.34 + */
1.35 +
1.36 + freeDrag: function freeDrag() {
1.37 + return true;
1.38 + },
1.39 +
1.40 + isDraggable: function isDraggable(aTarget, aContent) {
1.41 + return { x: false, y: true };
1.42 + },
1.43 +
1.44 + dragStart: function dragStart(aX, aY, aTarget, aScroller) {
1.45 + return true;
1.46 + },
1.47 +
1.48 + dragStop: function dragStop(aDx, aDy, aScroller) {
1.49 + return true;
1.50 + },
1.51 +
1.52 + dragMove: function dragMove(aDx, aDy, aScroller, aIsKenetic, aClientX, aClientY) {
1.53 + // Note if aIsKenetic is true this is synthetic movement,
1.54 + // we don't want that so return false.
1.55 + if (aIsKenetic) {
1.56 + return false;
1.57 + }
1.58 +
1.59 + this._updatePosition(aClientY);
1.60 +
1.61 + // return true if we moved, false otherwise. The result
1.62 + // is used in deciding if we should repaint between drags.
1.63 + return true;
1.64 + },
1.65 +
1.66 + /*
1.67 + * logic
1.68 + */
1.69 +
1.70 + init: function init() {
1.71 + // Touch drag support provided by input.js
1.72 + this._back.customDragger = this;
1.73 + this._plus.customDragger = this;
1.74 + Elements.browsers.addEventListener("ContentSizeChanged", this, true);
1.75 + let events = ["mousedown", "mouseup", "mousemove", "click", "touchstart", "touchmove", "touchend"];
1.76 + events.forEach(function (value) {
1.77 + this._back.addEventListener(value, this, true);
1.78 + this._plus.addEventListener(value, this, true);
1.79 + }, this);
1.80 +
1.81 + this._updateStops();
1.82 + this._updateVisibility();
1.83 + Services.prefs.addObserver(kNavButtonPref, this, false);
1.84 + },
1.85 +
1.86 + observe: function (aSubject, aTopic, aData) {
1.87 + if (aTopic == "nsPref:changed" && aData == kNavButtonPref) {
1.88 + this._updateVisibility();
1.89 + }
1.90 + },
1.91 +
1.92 + _updateVisibility: function () {
1.93 + if (Services.prefs.getBoolPref(kNavButtonPref)) {
1.94 + this._back.removeAttribute("hidden");
1.95 + this._plus.removeAttribute("hidden");
1.96 + } else {
1.97 + this._back.setAttribute("hidden", true);
1.98 + this._plus.setAttribute("hidden", true);
1.99 + }
1.100 + },
1.101 +
1.102 + _updateStops: function () {
1.103 + this._contentHeight = ContentAreaObserver.contentHeight;
1.104 + this._imageHeight = 118;
1.105 + this._topStop = this._imageHeight * .7;
1.106 + this._bottomStop = this._contentHeight - (this._imageHeight * .7);
1.107 +
1.108 + // Check to see if we need to move the slider into view
1.109 + if (this._yPos != -1 &&
1.110 + (this._topStop > this._yPos || this._bottomStop < this._yPos)) {
1.111 + this._back.style.top = "50%";
1.112 + this._plus.style.top = "50%";
1.113 + }
1.114 + },
1.115 +
1.116 + _getPosition: function _getPosition() {
1.117 + this._yPos = parseInt(getComputedStyle(this._back).top);
1.118 + },
1.119 +
1.120 + _setPosition: function _setPosition() {
1.121 + this._back.style.top = this._yPos + "px";
1.122 + this._plus.style.top = this._yPos + "px";
1.123 + },
1.124 +
1.125 + _updatePosition: function (aClientY) {
1.126 + if (this._topStop > aClientY || this._bottomStop < aClientY)
1.127 + return;
1.128 + this._yPos = aClientY;
1.129 + this._setPosition();
1.130 + },
1.131 +
1.132 + _updateOffset: function (aOffset) {
1.133 + let newPos = this._yPos + aOffset;
1.134 + if (this._topStop > newPos || this._bottomStop < newPos)
1.135 + return;
1.136 + this._yPos = newPos;
1.137 + this._setPosition();
1.138 + },
1.139 +
1.140 + /*
1.141 + * Events
1.142 + */
1.143 +
1.144 + handleEvent: function handleEvent(aEvent) {
1.145 + switch (aEvent.type) {
1.146 + case "ContentSizeChanged":
1.147 + this._updateStops();
1.148 + break;
1.149 +
1.150 + case "touchstart":
1.151 + if (aEvent.touches.length != 1)
1.152 + break;
1.153 + aEvent.preventDefault();
1.154 + aEvent = aEvent.touches[0];
1.155 + case "mousedown":
1.156 + this._getPosition();
1.157 + this._mouseDown = true;
1.158 + this._mouseMoveStarted = false;
1.159 + this._mouseY = aEvent.clientY;
1.160 + if (aEvent.originalTarget)
1.161 + aEvent.originalTarget.setCapture();
1.162 + this._back.setAttribute("mousedrag", true);
1.163 + this._plus.setAttribute("mousedrag", true);
1.164 + break;
1.165 +
1.166 + case "touchend":
1.167 + if (aEvent.touches.length != 0)
1.168 + break;
1.169 + this._mouseDown = false;
1.170 + this._back.removeAttribute("mousedrag");
1.171 + this._plus.removeAttribute("mousedrag");
1.172 + if (!this._mouseMoveStarted) {
1.173 + if (aEvent.originalTarget == this._back) {
1.174 + CommandUpdater.doCommand('cmd_back');
1.175 + } else {
1.176 + CommandUpdater.doCommand('cmd_newTab');
1.177 + }
1.178 + }
1.179 + break;
1.180 + case "mouseup":
1.181 + this._mouseDown = false;
1.182 + this._back.removeAttribute("mousedrag");
1.183 + this._plus.removeAttribute("mousedrag");
1.184 + break;
1.185 +
1.186 + case "touchmove":
1.187 + if (aEvent.touches.length != 1)
1.188 + break;
1.189 + aEvent = aEvent.touches[0];
1.190 + case "mousemove":
1.191 + // Check to be sure this is a drag operation
1.192 + if (!this._mouseDown) {
1.193 + return;
1.194 + }
1.195 + // Don't start a drag until we've passed a threshold
1.196 + let dy = aEvent.clientY - this._mouseY;
1.197 + if (!this._mouseMoveStarted && Math.abs(dy) < kOnClickMargin) {
1.198 + return;
1.199 + }
1.200 + // Start dragging via the mouse
1.201 + this._mouseMoveStarted = true;
1.202 + this._mouseY = aEvent.clientY;
1.203 + this._updateOffset(dy);
1.204 + break;
1.205 + case "click":
1.206 + // Don't invoke the click action if we've moved the buttons via the mouse.
1.207 + if (this._mouseMoveStarted) {
1.208 + return;
1.209 + }
1.210 + if (aEvent.originalTarget == this._back) {
1.211 + CommandUpdater.doCommand('cmd_back');
1.212 + } else {
1.213 + CommandUpdater.doCommand('cmd_newTab');
1.214 + }
1.215 + break;
1.216 + }
1.217 + },
1.218 +};
1.219 +
1.220 +
