diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index 96e4cb69..bd3c00e1 100644 --- a/lib/graph3d/Graph3d.js +++ b/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 diff --git a/lib/network/mixins/NavigationMixin.js b/lib/network/mixins/NavigationMixin.js index 557f33ee..24ca4195 100644 --- a/lib/network/mixins/NavigationMixin.js +++ b/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"; } diff --git a/lib/util.js b/lib/util.js index 363e42f5..c2559d18 100644 --- a/lib/util.js +++ b/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