- Fixed manipulation bar for mobile.

HISTORY.md

@@ -13,6 +13,7 @@ http://visjs.org
 - Added request redraw for certain internal processes to reduce number of draw calls.
 - Added pull request for usage of Icons. Thanks @Dude9177!
 - Allow hierarchical view to be set in setOptions.
+- Fixed manipulation bar for mobile.
 
 ### Graph2d
 
@@ -21,6 +22,7 @@ http://visjs.org
 ### Timeline
 
 - Fixed not property initializing with a DataView for groups.
+- Merged add custom timebar functionality, thanks @aytech!
 
 
 ## 2015-02-11, version 3.10.0

dist/vis.css

@@ -613,9 +613,8 @@ div.network-manipulationDiv {
 div.network-manipulation-editMode {
   position:absolute;
   left: 0;
-  top: 0;
+  top: 15px;
   height: 30px;
-  margin-top:20px;
 }
 
 div.network-manipulation-closeDiv {
@@ -641,7 +640,9 @@ div.network-manipulation-closeDiv:hover {
   opacity: 0.6;
 }
 
-span.network-manipulationUI {
+div.network-manipulationUI {
+    position:relative;
+    top:-7px;
   font-family: verdana;
   font-size: 12px;
   -moz-border-radius: 15px;
@@ -650,7 +651,7 @@ span.network-manipulationUI {
   background-position: 0px 0px;
   background-repeat:no-repeat;
   height:24px;
-  margin: -14px 0px 0px 10px;
+  margin: 0px 0px 0px 10px;
   vertical-align:middle;
   cursor: pointer;
   padding: 0px 8px 0px 8px;
@@ -662,57 +663,57 @@ span.network-manipulationUI {
   user-select: none;
 }
 
-span.network-manipulationUI:hover {
+div.network-manipulationUI:hover {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
 }
 
-span.network-manipulationUI:active {
+div.network-manipulationUI:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
 }
 
-span.network-manipulationUI.back {
+div.network-manipulationUI.back {
   background-image: url("img/network/backIcon.png");
 }
 
-span.network-manipulationUI.none:hover {
+div.network-manipulationUI.none:hover {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
   cursor: default;
 }
-span.network-manipulationUI.none:active {
+div.network-manipulationUI.none:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
 }
-span.network-manipulationUI.none {
+div.network-manipulationUI.none {
   padding: 0;
 }
-span.network-manipulationUI.notification{
+div.network-manipulationUI.notification{
   margin: 2px;
   font-weight: bold;
 }
 
-span.network-manipulationUI.add {
+div.network-manipulationUI.add {
   background-image: url("img/network/addNodeIcon.png");
 }
 
-span.network-manipulationUI.edit {
+div.network-manipulationUI.edit {
   background-image: url("img/network/editIcon.png");
 }
 
-span.network-manipulationUI.edit.editmode {
+div.network-manipulationUI.edit.editmode {
   background-color: #fcfcfc;
   border-style:solid;
   border-width:1px;
   border-color: #cccccc;
 }
 
-span.network-manipulationUI.connect {
+div.network-manipulationUI.connect {
   background-image: url("img/network/connectIcon.png");
 }
 
-span.network-manipulationUI.delete {
+div.network-manipulationUI.delete {
   background-image: url("img/network/deleteIcon.png");
 }
 /* top right bottom left */
-span.network-manipulationLabel {
+div.network-manipulationLabel {
   margin: 0px 0px 0px 23px;
   line-height: 25px;
 }

lib/network/Network.js

@@ -245,7 +245,8 @@ function Network (container, data, options) {
   
   this.hoverObj = {nodes:{},edges:{}};
   this.controlNodesActive = false;
-  this.navigationHammers = {existing:[], _new: []};
+  this.navigationHammers = [];
+  this.manipulationHammers = [];
 
   // animation properties
   this.animationSpeed = 1/this.renderRefreshRate;

lib/network/css/network-manipulation.css

@@ -22,9 +22,8 @@ div.network-manipulationDiv {
 div.network-manipulation-editMode {
   position:absolute;
   left: 0;
-  top: 0;
+  top: 15px;
   height: 30px;
-  margin-top:20px;
 }
 
 div.network-manipulation-closeDiv {
@@ -50,7 +49,9 @@ div.network-manipulation-closeDiv:hover {
   opacity: 0.6;
 }
 
-span.network-manipulationUI {
+div.network-manipulationUI {
+    position:relative;
+    top:-7px;
   font-family: verdana;
   font-size: 12px;
   -moz-border-radius: 15px;
@@ -59,7 +60,7 @@ span.network-manipulationUI {
   background-position: 0px 0px;
   background-repeat:no-repeat;
   height:24px;
-  margin: -14px 0px 0px 10px;
+  margin: 0px 0px 0px 10px;
   vertical-align:middle;
   cursor: pointer;
   padding: 0px 8px 0px 8px;
@@ -71,57 +72,57 @@ span.network-manipulationUI {
   user-select: none;
 }
 
-span.network-manipulationUI:hover {
+div.network-manipulationUI:hover {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
 }
 
-span.network-manipulationUI:active {
+div.network-manipulationUI:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
 }
 
-span.network-manipulationUI.back {
+div.network-manipulationUI.back {
   background-image: url("img/network/backIcon.png");
 }
 
-span.network-manipulationUI.none:hover {
+div.network-manipulationUI.none:hover {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
   cursor: default;
 }
-span.network-manipulationUI.none:active {
+div.network-manipulationUI.none:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
 }
-span.network-manipulationUI.none {
+div.network-manipulationUI.none {
   padding: 0;
 }
-span.network-manipulationUI.notification{
+div.network-manipulationUI.notification{
   margin: 2px;
   font-weight: bold;
 }
 
-span.network-manipulationUI.add {
+div.network-manipulationUI.add {
   background-image: url("img/network/addNodeIcon.png");
 }
 
-span.network-manipulationUI.edit {
+div.network-manipulationUI.edit {
   background-image: url("img/network/editIcon.png");
 }
 
-span.network-manipulationUI.edit.editmode {
+div.network-manipulationUI.edit.editmode {
   background-color: #fcfcfc;
   border-style:solid;
   border-width:1px;
   border-color: #cccccc;
 }
 
-span.network-manipulationUI.connect {
+div.network-manipulationUI.connect {
   background-image: url("img/network/connectIcon.png");
 }
 
-span.network-manipulationUI.delete {
+div.network-manipulationUI.delete {
   background-image: url("img/network/deleteIcon.png");
 }
 /* top right bottom left */
-span.network-manipulationLabel {
+div.network-manipulationLabel {
   margin: 0px 0px 0px 23px;
   line-height: 25px;
 }

lib/network/mixins/ManipulationMixin.js

@@ -1,6 +1,7 @@
 var util = require('../../util');
 var Node = require('../Node');
 var Edge = require('../Edge');
+var Hammer = require('../../module/hammer');
 
 /**
  * clears the toolbar div element of children
@@ -11,6 +12,8 @@ exports._clearManipulatorBar = function() {
   this._recursiveDOMDelete(this.manipulationDiv);
   this.manipulationDOM = {};
 
+  this._cleanManipulatorHammers();
+
   this._manipulationReleaseOverload = function () {};
   delete this.sectors['support']['nodes']['targetNode'];
   delete this.sectors['support']['nodes']['targetViaNode'];
@@ -18,6 +21,17 @@ exports._clearManipulatorBar = function() {
   this.freezeSimulationEnabled = false;
 };
 
+
+exports._cleanManipulatorHammers = function() {
+  // clean hammer bindings
+  if (this.manipulationHammers.length != 0) {
+    for (var i = 0; i < this.manipulationHammers.length; i++) {
+      this.manipulationHammers[i].dispose();
+    }
+    this.manipulationHammers = [];
+  }
+};
+
 /**
  * Manipulation UI temporarily overloads certain functions to extend or replace them. To be able to restore
  * these functions to their original functionality, we saved them in this.cachedFunctions.
@@ -48,13 +62,12 @@ exports._toggleEditMode = function() {
     toolbar.style.display="block";
     closeDiv.style.display="block";
     editModeDiv.style.display="none";
-    closeDiv.onclick = this._toggleEditMode.bind(this);
+    this._bindHammerToDiv(closeDiv,'_toggleEditMode');
   }
   else {
     toolbar.style.display="none";
     closeDiv.style.display="none";
     editModeDiv.style.display="block";
-    closeDiv.onclick = null;
   }
   this._createManipulatorBar()
 };
@@ -70,6 +83,8 @@ exports._createManipulatorBar = function() {
     this.off('select', this.boundFunction);
   }
 
+  this._cleanManipulatorHammers();
+
   var locale = this.constants.locales[this.constants.locale];
 
   if (this.edgeBeingEdited !== undefined) {
@@ -96,9 +111,10 @@ exports._createManipulatorBar = function() {
       this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
     }
 
-    this.manipulationDOM['addNodeSpan'] = document.createElement('span');
+    this.manipulationDOM['addNodeSpan'] = document.createElement('div');
     this.manipulationDOM['addNodeSpan'].className = 'network-manipulationUI add';
-    this.manipulationDOM['addNodeLabelSpan'] = document.createElement('span');
+
+    this.manipulationDOM['addNodeLabelSpan'] = document.createElement('div');
     this.manipulationDOM['addNodeLabelSpan'].className = 'network-manipulationLabel';
     this.manipulationDOM['addNodeLabelSpan'].innerHTML = locale['addNode'];
     this.manipulationDOM['addNodeSpan'].appendChild(this.manipulationDOM['addNodeLabelSpan']);
@@ -106,9 +122,9 @@ exports._createManipulatorBar = function() {
     this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
     this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
 
-    this.manipulationDOM['addEdgeSpan'] = document.createElement('span');
+    this.manipulationDOM['addEdgeSpan'] = document.createElement('div');
     this.manipulationDOM['addEdgeSpan'].className = 'network-manipulationUI connect';
-    this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('div');
     this.manipulationDOM['addEdgeLabelSpan'].className = 'network-manipulationLabel';
     this.manipulationDOM['addEdgeLabelSpan'].innerHTML = locale['addEdge'];
     this.manipulationDOM['addEdgeSpan'].appendChild(this.manipulationDOM['addEdgeLabelSpan']);
@@ -121,9 +137,9 @@ exports._createManipulatorBar = function() {
       this.manipulationDOM['seperatorLineDiv2'] = document.createElement('div');
       this.manipulationDOM['seperatorLineDiv2'].className = 'network-seperatorLine';
 
-      this.manipulationDOM['editNodeSpan'] = document.createElement('span');
+      this.manipulationDOM['editNodeSpan'] = document.createElement('div');
       this.manipulationDOM['editNodeSpan'].className = 'network-manipulationUI edit';
-      this.manipulationDOM['editNodeLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['editNodeLabelSpan'] = document.createElement('div');
       this.manipulationDOM['editNodeLabelSpan'].className = 'network-manipulationLabel';
       this.manipulationDOM['editNodeLabelSpan'].innerHTML = locale['editNode'];
       this.manipulationDOM['editNodeSpan'].appendChild(this.manipulationDOM['editNodeLabelSpan']);
@@ -135,9 +151,9 @@ exports._createManipulatorBar = function() {
       this.manipulationDOM['seperatorLineDiv3'] = document.createElement('div');
       this.manipulationDOM['seperatorLineDiv3'].className = 'network-seperatorLine';
 
-      this.manipulationDOM['editEdgeSpan'] = document.createElement('span');
+      this.manipulationDOM['editEdgeSpan'] = document.createElement('div');
       this.manipulationDOM['editEdgeSpan'].className = 'network-manipulationUI edit';
-      this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('div');
       this.manipulationDOM['editEdgeLabelSpan'].className = 'network-manipulationLabel';
       this.manipulationDOM['editEdgeLabelSpan'].innerHTML = locale['editEdge'];
       this.manipulationDOM['editEdgeSpan'].appendChild(this.manipulationDOM['editEdgeLabelSpan']);
@@ -149,9 +165,9 @@ exports._createManipulatorBar = function() {
       this.manipulationDOM['seperatorLineDiv4'] = document.createElement('div');
       this.manipulationDOM['seperatorLineDiv4'].className = 'network-seperatorLine';
 
-      this.manipulationDOM['deleteSpan'] = document.createElement('span');
+      this.manipulationDOM['deleteSpan'] = document.createElement('div');
       this.manipulationDOM['deleteSpan'].className = 'network-manipulationUI delete';
-      this.manipulationDOM['deleteLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['deleteLabelSpan'] = document.createElement('div');
       this.manipulationDOM['deleteLabelSpan'].className = 'network-manipulationLabel';
       this.manipulationDOM['deleteLabelSpan'].innerHTML = locale['del'];
       this.manipulationDOM['deleteSpan'].appendChild(this.manipulationDOM['deleteLabelSpan']);
@@ -160,20 +176,20 @@ exports._createManipulatorBar = function() {
       this.manipulationDiv.appendChild(this.manipulationDOM['deleteSpan']);
     }
 
-
     // bind the icons
-    this.manipulationDOM['addNodeSpan'].onclick = this._createAddNodeToolbar.bind(this);
-    this.manipulationDOM['addEdgeSpan'].onclick = this._createAddEdgeToolbar.bind(this);
+    this._bindHammerToDiv(this.manipulationDOM['addNodeSpan'],'_createAddNodeToolbar');
+    this._bindHammerToDiv(this.manipulationDOM['addEdgeSpan'],'_createAddEdgeToolbar');
+    this._bindHammerToDiv(this.closeDiv,'_toggleEditMode');
+
     if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-      this.manipulationDOM['editNodeSpan'].onclick = this._editNode.bind(this);
+      this._bindHammerToDiv(this.manipulationDOM['editNodeSpan'],'_editNode');
     }
     else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-      this.manipulationDOM['editEdgeSpan'].onclick = this._createEditEdgeToolbar.bind(this);
+      this._bindHammerToDiv(this.manipulationDOM['editEdgeSpan'],'_createEditEdgeToolbar');
     }
     if (this._selectionIsEmpty() == false) {
-      this.manipulationDOM['deleteSpan'].onclick = this._deleteSelected.bind(this);
+      this._bindHammerToDiv(this.manipulationDOM['deleteSpan'],'_deleteSelected');
     }
-    this.closeDiv.onclick = this._toggleEditMode.bind(this);
 
     var me = this;
     this.boundFunction = me._createManipulatorBar;
@@ -184,20 +200,26 @@ exports._createManipulatorBar = function() {
       this.editModeDiv.removeChild(this.editModeDiv.firstChild);
     }
 
-    this.manipulationDOM['editModeSpan'] = document.createElement('span');
+    this.manipulationDOM['editModeSpan'] = document.createElement('div');
     this.manipulationDOM['editModeSpan'].className = 'network-manipulationUI edit editmode';
-    this.manipulationDOM['editModeLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['editModeLabelSpan'] = document.createElement('div');
     this.manipulationDOM['editModeLabelSpan'].className = 'network-manipulationLabel';
     this.manipulationDOM['editModeLabelSpan'].innerHTML = locale['edit'];
     this.manipulationDOM['editModeSpan'].appendChild(this.manipulationDOM['editModeLabelSpan']);
 
     this.editModeDiv.appendChild(this.manipulationDOM['editModeSpan']);
 
-    this.manipulationDOM['editModeSpan'].onclick = this._toggleEditMode.bind(this);
+    this._bindHammerToDiv(this.manipulationDOM['editModeSpan'],'_toggleEditMode');
   }
 };
 
 
+exports._bindHammerToDiv = function(domElement, funct) {
+  var hammer = Hammer(domElement, {prevent_default: true});
+  hammer.on('touch', this[funct].bind(this));
+  this.manipulationHammers.push(hammer);
+}
+
 
 /**
  * Create the toolbar for adding Nodes
@@ -214,9 +236,9 @@ exports._createAddNodeToolbar = function() {
   var locale = this.constants.locales[this.constants.locale];
 
   this.manipulationDOM = {};
-  this.manipulationDOM['backSpan'] = document.createElement('span');
+  this.manipulationDOM['backSpan'] = document.createElement('div');
   this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
-  this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['backLabelSpan'] = document.createElement('div');
   this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
   this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
   this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
@@ -224,9 +246,9 @@ exports._createAddNodeToolbar = function() {
   this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
   this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
 
-  this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionSpan'] = document.createElement('div');
   this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
-  this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionLabelSpan'] = document.createElement('div');
   this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
   this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['addDescription'];
   this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
@@ -236,7 +258,7 @@ exports._createAddNodeToolbar = function() {
   this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
   // bind the icon
-  this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
+  this._bindHammerToDiv(this.manipulationDOM['backSpan'],'_createManipulatorBar');
 
   // we use the boundFunction so we can reference it when we unbind it from the "select" event.
   var me = this;
@@ -267,9 +289,9 @@ exports._createAddEdgeToolbar = function() {
   this.blockConnectingEdgeSelection = true;
 
   this.manipulationDOM = {};
-  this.manipulationDOM['backSpan'] = document.createElement('span');
+  this.manipulationDOM['backSpan'] = document.createElement('div');
   this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
-  this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['backLabelSpan'] = document.createElement('div');
   this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
   this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
   this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
@@ -277,9 +299,9 @@ exports._createAddEdgeToolbar = function() {
   this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
   this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
 
-  this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionSpan'] = document.createElement('div');
   this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
-  this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionLabelSpan'] = document.createElement('div');
   this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
   this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['edgeDescription'];
   this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
@@ -289,7 +311,7 @@ exports._createAddEdgeToolbar = function() {
   this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
   // bind the icon
-  this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
+  this._bindHammerToDiv(this.manipulationDOM['backSpan'],'_createManipulatorBar');
 
   // we use the boundFunction so we can reference it when we unbind it from the "select" event.
   var me = this;
@@ -332,9 +354,9 @@ exports._createEditEdgeToolbar = function() {
   var locale = this.constants.locales[this.constants.locale];
 
   this.manipulationDOM = {};
-  this.manipulationDOM['backSpan'] = document.createElement('span');
+  this.manipulationDOM['backSpan'] = document.createElement('div');
   this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
-  this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['backLabelSpan'] = document.createElement('div');
   this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
   this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
   this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
@@ -342,9 +364,9 @@ exports._createEditEdgeToolbar = function() {
   this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
   this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
 
-  this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionSpan'] = document.createElement('div');
   this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
-  this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+  this.manipulationDOM['descriptionLabelSpan'] = document.createElement('div');
   this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
   this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['editEdgeDescription'];
   this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
@@ -354,7 +376,7 @@ exports._createEditEdgeToolbar = function() {
   this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
   // bind the icon
-  this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
+  this._bindHammerToDiv(this.manipulationDOM['backSpan'],'_createManipulatorBar');
 
   // temporarily overload functions
   this.cachedFunctions["_handleTouch"]      = this._handleTouch;

lib/network/mixins/NavigationMixin.js

@@ -3,18 +3,18 @@ var Hammer = require('../../module/hammer');
 
 exports._cleanNavigation = function() {
   // clean hammer bindings
-  if (this.navigationHammers.existing.length != 0) {
-    for (var i = 0; i < this.navigationHammers.existing.length; i++) {
-      this.navigationHammers.existing[i].dispose();
+  if (this.navigationHammers.length != 0) {
+    for (var i = 0; i < this.navigationHammers.length; i++) {
+      this.navigationHammers[i].dispose();
     }
-    this.navigationHammers.existing = [];
+    this.navigationHammers = [];
   }
 
   this._navigationReleaseOverload = function () {};
 
   // clean up previous navigation items
-  if (this.navigationDivs && this.navigationDivs['wrapper'] && this.navigationDivs['wrapper'].parentNode) {
-    this.navigationDivs['wrapper'].parentNode.removeChild(this.navigationDivs['wrapper']);
+  if (this.navigationDOM && this.navigationDOM['wrapper'] && this.navigationDOM['wrapper'].parentNode) {
+    this.navigationDOM['wrapper'].parentNode.removeChild(this.navigationDOM['wrapper']);
   }
 };
 
@@ -29,26 +29,25 @@ exports._cleanNavigation = function() {
 exports._loadNavigationElements = function() {
   this._cleanNavigation();
 
-  this.navigationDivs = {};
+  this.navigationDOM = {};
   var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
   var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_zoomExtent'];
 
-  this.navigationDivs['wrapper'] = document.createElement('div');
-  this.frame.appendChild(this.navigationDivs['wrapper']);
+  this.navigationDOM['wrapper'] = document.createElement('div');
+  this.frame.appendChild(this.navigationDOM['wrapper']);
 
   for (var i = 0; i < navigationDivs.length; i++) {
-    this.navigationDivs[navigationDivs[i]] = document.createElement('div');
-    this.navigationDivs[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
-    this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
+    this.navigationDOM[navigationDivs[i]] = document.createElement('div');
+    this.navigationDOM[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
+    this.navigationDOM['wrapper'].appendChild(this.navigationDOM[navigationDivs[i]]);
 
-    var hammer = Hammer(this.navigationDivs[navigationDivs[i]], {prevent_default: true});
+    var hammer = Hammer(this.navigationDOM[navigationDivs[i]], {prevent_default: true});
     hammer.on('touch', this[navigationDivActions[i]].bind(this));
-    this.navigationHammers._new.push(hammer);
+    this.navigationHammers.push(hammer);
   }
 
   this._navigationReleaseOverload = this._stopMovement;
 
-  this.navigationHammers.existing = this.navigationHammers._new;
 };