The Tor Browser: comparison browser/base/content/newtab/transformations.js

comparison: browser/base/content/newtab/transformations.js

browser/base/content/newtab/transformations.js

branch: TOR_BUG_9701
changeset 3: 141e0f1194b1

equal deleted inserted replaced

--1:000000000000
+:9d9b248f9b68
+#ifdef 0
+/* 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/. */
+#endif
+/**
+* This singleton allows to transform the grid by repositioning a site's node
+* in the DOM and by showing or hiding the node. It additionally provides
+* convenience methods to work with a site's DOM node.
+*/
+let gTransformation = {
+/**
+* Returns the width of the left and top border of a cell. We need to take it
+* into account when measuring and comparing site and cell positions.
+*/
+get _cellBorderWidths() {
+let cstyle = window.getComputedStyle(gGrid.cells[0].node, null);
+let widths = {
+left: parseInt(cstyle.getPropertyValue("border-left-width")),
+top: parseInt(cstyle.getPropertyValue("border-top-width"))
+};
+// Cache this value, overwrite the getter.
+Object.defineProperty(this, "_cellBorderWidths",
+{value: widths, enumerable: true});
+return widths;
+},
+/**
+* Gets a DOM node's position.
+* @param aNode The DOM node.
+* @return A Rect instance with the position.
+*/
+getNodePosition: function Transformation_getNodePosition(aNode) {
+let {left, top, width, height} = aNode.getBoundingClientRect();
+return new Rect(left + scrollX, top + scrollY, width, height);
+},
+/**
+* Fades a given node from zero to full opacity.
+* @param aNode The node to fade.
+* @param aCallback The callback to call when finished.
+*/
+fadeNodeIn: function Transformation_fadeNodeIn(aNode, aCallback) {
+this._setNodeOpacity(aNode, 1, function () {
+// Clear the style property.
+aNode.style.opacity = "";
+if (aCallback)
+aCallback();
+});
+},
+/**
+* Fades a given node from full to zero opacity.
+* @param aNode The node to fade.
+* @param aCallback The callback to call when finished.
+*/
+fadeNodeOut: function Transformation_fadeNodeOut(aNode, aCallback) {
+this._setNodeOpacity(aNode, 0, aCallback);
+},
+/**
+* Fades a given site from zero to full opacity.
+* @param aSite The site to fade.
+* @param aCallback The callback to call when finished.
+*/
+showSite: function Transformation_showSite(aSite, aCallback) {
+this.fadeNodeIn(aSite.node, aCallback);
+},
+/**
+* Fades a given site from full to zero opacity.
+* @param aSite The site to fade.
+* @param aCallback The callback to call when finished.
+*/
+hideSite: function Transformation_hideSite(aSite, aCallback) {
+this.fadeNodeOut(aSite.node, aCallback);
+},
+/**
+* Allows to set a site's position.
+* @param aSite The site to re-position.
+* @param aPosition The desired position for the given site.
+*/
+setSitePosition: function Transformation_setSitePosition(aSite, aPosition) {
+let style = aSite.node.style;
+let {top, left} = aPosition;
+style.top = top + "px";
+style.left = left + "px";
+},
+/**
+* Freezes a site in its current position by positioning it absolute.
+* @param aSite The site to freeze.
+*/
+freezeSitePosition: function Transformation_freezeSitePosition(aSite) {
+if (this._isFrozen(aSite))
+return;
+let style = aSite.node.style;
+let comp = getComputedStyle(aSite.node, null);
+style.width = comp.getPropertyValue("width")
+style.height = comp.getPropertyValue("height");
+aSite.node.setAttribute("frozen", "true");
+this.setSitePosition(aSite, this.getNodePosition(aSite.node));
+},
+/**
+* Unfreezes a site by removing its absolute positioning.
+* @param aSite The site to unfreeze.
+*/
+unfreezeSitePosition: function Transformation_unfreezeSitePosition(aSite) {
+if (!this._isFrozen(aSite))
+return;
+let style = aSite.node.style;
+style.left = style.top = style.width = style.height = "";
+aSite.node.removeAttribute("frozen");
+},
+/**
+* Slides the given site to the target node's position.
+* @param aSite The site to move.
+* @param aTarget The slide target.
+* @param aOptions Set of options (see below).
+*        unfreeze - unfreeze the site after sliding
+*        callback - the callback to call when finished
+*/
+slideSiteTo: function Transformation_slideSiteTo(aSite, aTarget, aOptions) {
+let currentPosition = this.getNodePosition(aSite.node);
+let targetPosition = this.getNodePosition(aTarget.node)
+let callback = aOptions && aOptions.callback;
+let self = this;
+function finish() {
+if (aOptions && aOptions.unfreeze)
+self.unfreezeSitePosition(aSite);
+if (callback)
+callback();
+}
+// We need to take the width of a cell's border into account.
+targetPosition.left += this._cellBorderWidths.left;
+targetPosition.top += this._cellBorderWidths.top;
+// Nothing to do here if the positions already match.
+if (currentPosition.left == targetPosition.left &&
+currentPosition.top == targetPosition.top) {
+finish();
+} else {
+this.setSitePosition(aSite, targetPosition);
+this._whenTransitionEnded(aSite.node, ["left", "top"], finish);
+}
+},
+/**
+* Rearranges a given array of sites and moves them to their new positions or
+* fades in/out new/removed sites.
+* @param aSites An array of sites to rearrange.
+* @param aOptions Set of options (see below).
+*        unfreeze - unfreeze the site after rearranging
+*        callback - the callback to call when finished
+*/
+rearrangeSites: function Transformation_rearrangeSites(aSites, aOptions) {
+let batch = [];
+let cells = gGrid.cells;
+let callback = aOptions && aOptions.callback;
+let unfreeze = aOptions && aOptions.unfreeze;
+aSites.forEach(function (aSite, aIndex) {
+// Do not re-arrange empty cells or the dragged site.
+if (!aSite || aSite == gDrag.draggedSite)
+return;
+let deferred = Promise.defer();
+batch.push(deferred.promise);
+let cb = deferred.resolve;
+if (!cells[aIndex])
+// The site disappeared from the grid, hide it.
+this.hideSite(aSite, cb);
+else if (this._getNodeOpacity(aSite.node) != 1)
+// The site disappeared before but is now back, show it.
+this.showSite(aSite, cb);
+else
+// The site's position has changed, move it around.
+this._moveSite(aSite, aIndex, {unfreeze: unfreeze, callback: cb});
+}, this);
+if (callback) {
+Promise.all(batch).then(callback);
+}
+},
+/**
+* Listens for the 'transitionend' event on a given node and calls the given
+* callback.
+* @param aNode The node that is transitioned.
+* @param aProperties The properties we'll wait to be transitioned.
+* @param aCallback The callback to call when finished.
+*/
+_whenTransitionEnded:
+function Transformation_whenTransitionEnded(aNode, aProperties, aCallback) {
+let props = new Set(aProperties);
+aNode.addEventListener("transitionend", function onEnd(e) {
+if (props.has(e.propertyName)) {
+aNode.removeEventListener("transitionend", onEnd);
+aCallback();
+}
+});
+},
+/**
+* Gets a given node's opacity value.
+* @param aNode The node to get the opacity value from.
+* @return The node's opacity value.
+*/
+_getNodeOpacity: function Transformation_getNodeOpacity(aNode) {
+let cstyle = window.getComputedStyle(aNode, null);
+return cstyle.getPropertyValue("opacity");
+},
+/**
+* Sets a given node's opacity.
+* @param aNode The node to set the opacity value for.
+* @param aOpacity The opacity value to set.
+* @param aCallback The callback to call when finished.
+*/
+_setNodeOpacity:
+function Transformation_setNodeOpacity(aNode, aOpacity, aCallback) {
+if (this._getNodeOpacity(aNode) == aOpacity) {
+if (aCallback)
+aCallback();
+} else {
+if (aCallback) {
+this._whenTransitionEnded(aNode, ["opacity"], aCallback);
+}
+aNode.style.opacity = aOpacity;
+}
+},
+/**
+* Moves a site to the cell with the given index.
+* @param aSite The site to move.
+* @param aIndex The target cell's index.
+* @param aOptions Options that are directly passed to slideSiteTo().
+*/
+_moveSite: function Transformation_moveSite(aSite, aIndex, aOptions) {
+this.freezeSitePosition(aSite);
+this.slideSiteTo(aSite, gGrid.cells[aIndex], aOptions);
+},
+/**
+* Checks whether a site is currently frozen.
+* @param aSite The site to check.
+* @return Whether the given site is frozen.
+*/
+_isFrozen: function Transformation_isFrozen(aSite) {
+return aSite.node.hasAttribute("frozen");
+}
+};