Moved some util functions to util.js

lib/graph3d/Graph3d.js

@@ -1,6 +1,7 @@
 var Emitter = require('emitter-component');
 var DataSet = require('../DataSet');
 var DataView = require('../DataView');
+var util = require('../util');
 var Point3d = require('./Point3d');
 var Point2d = require('./Point2d');
 var Filter = require('./Filter');
@@ -768,11 +769,11 @@ Graph3d.prototype.create = function () {
   var ontooltip = function (event) {me._onTooltip(event);};
   // TODO: these events are never cleaned up... can give a 'memory leakage'
 
-  G3DaddEventListener(this.frame.canvas, 'keydown', onkeydown);
-  G3DaddEventListener(this.frame.canvas, 'mousedown', onmousedown);
-  G3DaddEventListener(this.frame.canvas, 'touchstart', ontouchstart);
-  G3DaddEventListener(this.frame.canvas, 'mousewheel', onmousewheel);
-  G3DaddEventListener(this.frame.canvas, 'mousemove', ontooltip);
+  util.addEventListener(this.frame.canvas, 'keydown', onkeydown);
+  util.addEventListener(this.frame.canvas, 'mousedown', onmousedown);
+  util.addEventListener(this.frame.canvas, 'touchstart', ontouchstart);
+  util.addEventListener(this.frame.canvas, 'mousewheel', onmousewheel);
+  util.addEventListener(this.frame.canvas, 'mousemove', ontooltip);
 
   // add the new graph to the container element
   this.containerElement.appendChild(this.frame);
@@ -1987,9 +1988,9 @@ Graph3d.prototype._onMouseDown = function(event) {
   var me = this;
   this.onmousemove = function (event) {me._onMouseMove(event);};
   this.onmouseup   = function (event) {me._onMouseUp(event);};
-  G3DaddEventListener(document, 'mousemove', me.onmousemove);
-  G3DaddEventListener(document, 'mouseup', me.onmouseup);
-  G3DpreventDefault(event);
+  util.addEventListener(document, 'mousemove', me.onmousemove);
+  util.addEventListener(document, 'mouseup', me.onmouseup);
+  util.preventDefault(event);
 };
 
 
@@ -2035,7 +2036,7 @@ Graph3d.prototype._onMouseMove = function (event) {
   var parameters = this.getCameraPosition();
   this.emit('cameraPositionChange', parameters);
 
-  G3DpreventDefault(event);
+  util.preventDefault(event);
 };
 
 
@@ -2049,9 +2050,9 @@ Graph3d.prototype._onMouseUp = function (event) {
   this.leftButtonDown = false;
 
   // remove event listeners here
-  G3DremoveEventListener(document, 'mousemove', this.onmousemove);
-  G3DremoveEventListener(document, 'mouseup',   this.onmouseup);
-  G3DpreventDefault(event);
+  util.removeEventListener(document, 'mousemove', this.onmousemove);
+  util.removeEventListener(document, 'mouseup',   this.onmouseup);
+  util.preventDefault(event);
 };
 
 /**
@@ -2060,8 +2061,8 @@ Graph3d.prototype._onMouseUp = function (event) {
  */
 Graph3d.prototype._onTooltip = function (event) {
   var delay = 300; // ms
-  var mouseX = getMouseX(event) - getAbsoluteLeft(this.frame);
-  var mouseY = getMouseY(event) - getAbsoluteTop(this.frame);
+  var mouseX = getMouseX(event) - util.getAbsoluteLeft(this.frame);
+  var mouseY = getMouseY(event) - util.getAbsoluteTop(this.frame);
 
   if (!this.showTooltip) {
     return;
@@ -2114,8 +2115,8 @@ Graph3d.prototype._onTouchStart = function(event) {
   var me = this;
   this.ontouchmove = function (event) {me._onTouchMove(event);};
   this.ontouchend  = function (event) {me._onTouchEnd(event);};
-  G3DaddEventListener(document, 'touchmove', me.ontouchmove);
-  G3DaddEventListener(document, 'touchend', me.ontouchend);
+  util.addEventListener(document, 'touchmove', me.ontouchmove);
+  util.addEventListener(document, 'touchend', me.ontouchend);
 
   this._onMouseDown(event);
 };
@@ -2133,8 +2134,8 @@ Graph3d.prototype._onTouchMove = function(event) {
 Graph3d.prototype._onTouchEnd = function(event) {
   this.touchDown = false;
 
-  G3DremoveEventListener(document, 'touchmove', this.ontouchmove);
-  G3DremoveEventListener(document, 'touchend',   this.ontouchend);
+  util.removeEventListener(document, 'touchmove', this.ontouchmove);
+  util.removeEventListener(document, 'touchend',   this.ontouchend);
 
   this._onMouseUp(event);
 };
@@ -2179,7 +2180,7 @@ Graph3d.prototype._onWheel = function(event) {
   // Prevent default actions caused by mouse wheel.
   // That might be ugly, but we handle scrolls somehow
   // anyway, so don't bother here..
-  G3DpreventDefault(event);
+  util.preventDefault(event);
 };
 
 /**
@@ -2371,85 +2372,6 @@ Graph3d.prototype._hideTooltip = function () {
   }
 };
 
-
-/**
- * Add and event listener. Works for all browsers
- * @param {Element}   element  An html element
- * @param {string}    action   The action, for example 'click',
- *                 without the prefix 'on'
- * @param {function}  listener   The callback function to be executed
- * @param {boolean}   useCapture
- */
-G3DaddEventListener = function(element, action, listener, useCapture) {
-  if (element.addEventListener) {
-    if (useCapture === undefined)
-      useCapture = false;
-
-    if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
-      action = 'DOMMouseScroll';  // For Firefox
-    }
-
-    element.addEventListener(action, listener, useCapture);
-  } else {
-    element.attachEvent('on' + action, listener);  // IE browsers
-  }
-};
-
-/**
- * Remove an event listener from an element
- * @param {Element}    element   An html dom element
- * @param {string}     action  The name of the event, for example 'mousedown'
- * @param {function}   listener  The listener function
- * @param {boolean}    useCapture
- */
-G3DremoveEventListener = function(element, action, listener, useCapture) {
-  if (element.removeEventListener) {
-    // non-IE browsers
-    if (useCapture === undefined)
-      useCapture = false;
-
-    if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
-      action = 'DOMMouseScroll';  // For Firefox
-    }
-
-    element.removeEventListener(action, listener, useCapture);
-  } else {
-    // IE browsers
-    element.detachEvent('on' + action, listener);
-  }
-};
-
-/**
- * Stop event propagation
- */
-G3DstopPropagation = function(event) {
-  if (!event)
-    event = window.event;
-
-  if (event.stopPropagation) {
-    event.stopPropagation();  // non-IE browsers
-  }
-  else {
-    event.cancelBubble = true;  // IE browsers
-  }
-};
-
-
-/**
- * Cancels the event if it is cancelable, without stopping further propagation of the event.
- */
-G3DpreventDefault = function (event) {
-  if (!event)
-    event = window.event;
-
-  if (event.preventDefault) {
-    event.preventDefault();  // non-IE browsers
-  }
-  else {
-    event.returnValue = false;  // IE browsers
-  }
-};
-
 /**
  * @constructor Slider
  *
@@ -2741,9 +2663,9 @@ Slider.prototype._onMouseDown = function(event) {
   var me = this;
   this.onmousemove = function (event) {me._onMouseMove(event);};
   this.onmouseup   = function (event) {me._onMouseUp(event);};
-  G3DaddEventListener(document, 'mousemove', this.onmousemove);
-  G3DaddEventListener(document, 'mouseup',   this.onmouseup);
-  G3DpreventDefault(event);
+  util.addEventListener(document, 'mousemove', this.onmousemove);
+  util.addEventListener(document, 'mouseup',   this.onmouseup);
+  util.preventDefault(event);
 };
 
 
@@ -2779,7 +2701,7 @@ Slider.prototype._onMouseMove = function (event) {
 
   this.setIndex(index);
 
-  G3DpreventDefault();
+  util.preventDefault();
 };
 
 
@@ -2787,10 +2709,10 @@ Slider.prototype._onMouseUp = function (event) {
   this.frame.style.cursor = 'auto';
 
   // remove event listeners
-  G3DremoveEventListener(document, 'mousemove', this.onmousemove);
-  G3DremoveEventListener(document, 'mouseup', this.onmouseup);
+  util.removeEventListener(document, 'mousemove', this.onmousemove);
+  util.removeEventListener(document, 'mouseup', this.onmouseup);
 
-  G3DpreventDefault();
+  util.preventDefault();
 };
 
 
@@ -2798,39 +2720,6 @@ Slider.prototype._onMouseUp = function (event) {
 /**--------------------------------------------------------------------------**/
 
 
-
-/**
- * Retrieve the absolute left value of a DOM element
- * @param {Element} elem  A dom element, for example a div
- * @return {Number} left    The absolute left position of this element
- *                in the browser page.
- */
-getAbsoluteLeft = function(elem) {
-  var left = 0;
-  while( elem !== null ) {
-    left += elem.offsetLeft;
-    left -= elem.scrollLeft;
-    elem = elem.offsetParent;
-  }
-  return left;
-};
-
-/**
- * Retrieve the absolute top value of a DOM element
- * @param {Element} elem  A dom element, for example a div
- * @return {Number} top     The absolute top position of this element
- *                in the browser page.
- */
-getAbsoluteTop = function(elem) {
-  var top = 0;
-  while( elem !== null ) {
-    top += elem.offsetTop;
-    top -= elem.scrollTop;
-    elem = elem.offsetParent;
-  }
-  return top;
-};
-
 /**
  * Get the horizontal mouse position from a mouse event
  * @param {Event} event

lib/network/mixins/NavigationMixin.js

@@ -1,3 +1,5 @@
+var util = require('../../util');
+
 exports._cleanNavigation = function() {
   // clean up previous navigation items
   var wrapper = document.getElementById('network-navigation_wrapper');
@@ -52,23 +54,6 @@ exports._stopMovement = function() {
 };
 
 
-/**
- * stops the actions performed by page up and down etc.
- *
- * @param event
- * @private
- */
-exports._preventDefault = function(event) {
-  if (event !== undefined) {
-    if (event.preventDefault) {
-      event.preventDefault();
-    } else {
-      event.returnValue = false;
-    }
-  }
-};
-
-
 /**
  * move the screen up
  * By using the increments, instead of adding a fixed number to the translation, we keep fluent and
@@ -80,7 +65,7 @@ exports._preventDefault = function(event) {
 exports._moveUp = function(event) {
   this.yIncrement = this.constants.keyboard.speed.y;
   this.start(); // if there is no node movement, the calculation wont be done
-  this._preventDefault(event);
+  util.preventDefault(event);
   if (this.navigationDivs) {
     this.navigationDivs['up'].className += " active";
   }
@@ -94,7 +79,7 @@ exports._moveUp = function(event) {
 exports._moveDown = function(event) {
   this.yIncrement = -this.constants.keyboard.speed.y;
   this.start(); // if there is no node movement, the calculation wont be done
-  this._preventDefault(event);
+  util.preventDefault(event);
   if (this.navigationDivs) {
     this.navigationDivs['down'].className += " active";
   }
@@ -108,7 +93,7 @@ exports._moveDown = function(event) {
 exports._moveLeft = function(event) {
   this.xIncrement = this.constants.keyboard.speed.x;
   this.start(); // if there is no node movement, the calculation wont be done
-  this._preventDefault(event);
+  util.preventDefault(event);
   if (this.navigationDivs) {
     this.navigationDivs['left'].className += " active";
   }
@@ -122,7 +107,7 @@ exports._moveLeft = function(event) {
 exports._moveRight = function(event) {
   this.xIncrement = -this.constants.keyboard.speed.y;
   this.start(); // if there is no node movement, the calculation wont be done
-  this._preventDefault(event);
+  util.preventDefault(event);
   if (this.navigationDivs) {
     this.navigationDivs['right'].className += " active";
   }
@@ -136,7 +121,7 @@ exports._moveRight = function(event) {
 exports._zoomIn = function(event) {
   this.zoomIncrement = this.constants.keyboard.speed.zoom;
   this.start(); // if there is no node movement, the calculation wont be done
-  this._preventDefault(event);
+  util.preventDefault(event);
   if (this.navigationDivs) {
     this.navigationDivs['zoomIn'].className += " active";
   }
@@ -150,7 +135,7 @@ exports._zoomIn = function(event) {
 exports._zoomOut = function() {
   this.zoomIncrement = -this.constants.keyboard.speed.zoom;
   this.start(); // if there is no node movement, the calculation wont be done
-  this._preventDefault(event);
+  util.preventDefault(event);
   if (this.navigationDivs) {
     this.navigationDivs['zoomOut'].className += " active";
   }

lib/util.js

@@ -566,6 +566,20 @@ exports.removeEventListener = function(element, action, listener, useCapture) {
   }
 };
 
+/**
+ * Cancels the event if it is cancelable, without stopping further propagation of the event.
+ */
+exports.preventDefault = function (event) {
+  if (!event)
+    event = window.event;
+
+  if (event.preventDefault) {
+    event.preventDefault();  // non-IE browsers
+  }
+  else {
+    event.returnValue = false;  // IE browsers
+  }
+};
 
 /**
  * Get HTML element which is the target of the event