diff --git a/dist/vis.js b/dist/vis.js index 698f008c..ae07b426 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -28256,7 +28256,6 @@ return /******/ (function(modules) { // webpackBootstrap if (this.manipulationDiv === undefined) { this.manipulationDiv = document.createElement('div'); this.manipulationDiv.className = 'network-manipulationDiv'; - this.manipulationDiv.id = 'network-manipulationDiv'; if (this.editMode == true) { this.manipulationDiv.style.display = "block"; } @@ -28269,7 +28268,6 @@ return /******/ (function(modules) { // webpackBootstrap if (this.editModeDiv === undefined) { this.editModeDiv = document.createElement('div'); this.editModeDiv.className = 'network-manipulation-editMode'; - this.editModeDiv.id = 'network-manipulation-editMode'; if (this.editMode == true) { this.editModeDiv.style.display = "none"; } @@ -28282,7 +28280,6 @@ return /******/ (function(modules) { // webpackBootstrap if (this.closeDiv === undefined) { this.closeDiv = document.createElement('div'); this.closeDiv.className = 'network-manipulation-closeDiv'; - this.closeDiv.id = 'network-manipulation-closeDiv'; this.closeDiv.style.display = this.manipulationDiv.style.display; this.frame.appendChild(this.closeDiv); } @@ -32113,6 +32110,7 @@ return /******/ (function(modules) { // webpackBootstrap while (this.manipulationDiv.hasChildNodes()) { this.manipulationDiv.removeChild(this.manipulationDiv.firstChild); } + this.manipulationDOM = {}; this._manipulationReleaseOverload = function () {}; delete this.sectors['support']['nodes']['targetNode']; @@ -32142,9 +32140,9 @@ return /******/ (function(modules) { // webpackBootstrap */ exports._toggleEditMode = function() { this.editMode = !this.editMode; - var toolbar = document.getElementById("network-manipulationDiv"); - var closeDiv = document.getElementById("network-manipulation-closeDiv"); - var editModeDiv = document.getElementById("network-manipulation-editMode"); + var toolbar = this.manipulationDiv; + var closeDiv = this.closeDiv; + var editModeDiv = this.editModeDiv; if (this.editMode == true) { toolbar.style.display="block"; closeDiv.style.display="block"; @@ -32189,68 +32187,110 @@ return /******/ (function(modules) { // webpackBootstrap // reset global variables this.blockConnectingEdgeSelection = false; this.forceAppendSelection = false; + this.manipulationDOM = {}; if (this.editMode == true) { while (this.manipulationDiv.hasChildNodes()) { this.manipulationDiv.removeChild(this.manipulationDiv.firstChild); } - // add the icons to the manipulator div - this.manipulationDiv.innerHTML = "" + - "" + - ""+locale['addNode'] +"" + - "
" + - "" + - ""+locale['addEdge'] +""; + this.manipulationDOM['addNodeSpan'] = document.createElement('span'); + this.manipulationDOM['addNodeSpan'].className = 'network-manipulationUI add'; + this.manipulationDOM['addNodeLabelSpan'] = document.createElement('span'); + this.manipulationDOM['addNodeLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['addNodeLabelSpan'].innerHTML = locale['addNode']; + this.manipulationDOM['addNodeSpan'].appendChild(this.manipulationDOM['addNodeLabelSpan']); + + this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; + + this.manipulationDOM['addEdgeSpan'] = document.createElement('span'); + this.manipulationDOM['addEdgeSpan'].className = 'network-manipulationUI connect'; + this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('span'); + this.manipulationDOM['addEdgeLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['addEdgeLabelSpan'].innerHTML = locale['addEdge']; + this.manipulationDOM['addEdgeSpan'].appendChild(this.manipulationDOM['addEdgeLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['addNodeSpan']); + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']); + this.manipulationDiv.appendChild(this.manipulationDOM['addEdgeSpan']); + if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { - this.manipulationDiv.innerHTML += "" + - "" + - "" + - ""+locale['editNode'] +""; + this.manipulationDOM['seperatorLineDiv2'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv2'].className = 'network-seperatorLine'; + + this.manipulationDOM['editNodeSpan'] = document.createElement('span'); + this.manipulationDOM['editNodeSpan'].className = 'network-manipulationUI edit'; + this.manipulationDOM['editNodeLabelSpan'] = document.createElement('span'); + this.manipulationDOM['editNodeLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['editNodeLabelSpan'].innerHTML = locale['editNode']; + this.manipulationDOM['editNodeSpan'].appendChild(this.manipulationDOM['editNodeLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv2']); + this.manipulationDiv.appendChild(this.manipulationDOM['editNodeSpan']); } else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) { - this.manipulationDiv.innerHTML += "" + - "" + - "" + - ""+locale['editEdge'] +""; + this.manipulationDOM['seperatorLineDiv3'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv3'].className = 'network-seperatorLine'; + + this.manipulationDOM['editEdgeSpan'] = document.createElement('span'); + this.manipulationDOM['editEdgeSpan'].className = 'network-manipulationUI edit'; + this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('span'); + this.manipulationDOM['editEdgeLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['editEdgeLabelSpan'].innerHTML = locale['editEdge']; + this.manipulationDOM['editEdgeSpan'].appendChild(this.manipulationDOM['editEdgeLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv3']); + this.manipulationDiv.appendChild(this.manipulationDOM['editEdgeSpan']); } if (this._selectionIsEmpty() == false) { - this.manipulationDiv.innerHTML += "" + - "" + - "" + - ""+locale['del'] +""; + this.manipulationDOM['seperatorLineDiv4'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv4'].className = 'network-seperatorLine'; + + this.manipulationDOM['deleteSpan'] = document.createElement('span'); + this.manipulationDOM['deleteSpan'].className = 'network-manipulationUI delete'; + this.manipulationDOM['deleteLabelSpan'] = document.createElement('span'); + this.manipulationDOM['deleteLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['deleteLabelSpan'].innerHTML = locale['del']; + this.manipulationDOM['deleteSpan'].appendChild(this.manipulationDOM['deleteLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv4']); + this.manipulationDiv.appendChild(this.manipulationDOM['deleteSpan']); } // bind the icons - var addNodeButton = document.getElementById("network-manipulate-addNode"); - addNodeButton.onclick = this._createAddNodeToolbar.bind(this); - var addEdgeButton = document.getElementById("network-manipulate-connectNode"); - addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this); + this.manipulationDOM['addNodeSpan'].onclick = this._createAddNodeToolbar.bind(this); + this.manipulationDOM['addEdgeSpan'].onclick = this._createAddEdgeToolbar.bind(this); if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { - var editButton = document.getElementById("network-manipulate-editNode"); - editButton.onclick = this._editNode.bind(this); + this.manipulationDOM['editNodeSpan'].onclick = this._editNode.bind(this); } else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) { - var editButton = document.getElementById("network-manipulate-editEdge"); - editButton.onclick = this._createEditEdgeToolbar.bind(this); + this.manipulationDOM['editEdgeSpan'].onclick = this._createEditEdgeToolbar.bind(this); } if (this._selectionIsEmpty() == false) { - var deleteButton = document.getElementById("network-manipulate-delete"); - deleteButton.onclick = this._deleteSelected.bind(this); + this.manipulationDOM['deleteSpan'].onclick = this._deleteSelected.bind(this); } - var closeDiv = document.getElementById("network-manipulation-closeDiv"); - closeDiv.onclick = this._toggleEditMode.bind(this); + this.closeDiv.onclick = this._toggleEditMode.bind(this); this.boundFunction = this._createManipulatorBar.bind(this); this.on('select', this.boundFunction); } else { - this.editModeDiv.innerHTML = "" + - "" + - "" + locale['edit'] + ""; - var editModeButton = document.getElementById("network-manipulate-editModeButton"); - editModeButton.onclick = this._toggleEditMode.bind(this); + while (this.editModeDiv.hasChildNodes()) { + this.editModeDiv.removeChild(this.editModeDiv.firstChild); + } + + this.manipulationDOM['editModeSpan'] = document.createElement('span'); + this.manipulationDOM['editModeSpan'].className = 'network-manipulationUI edit editmode'; + this.manipulationDOM['editModeLabelSpan'] = document.createElement('span'); + 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); } }; @@ -32270,17 +32310,30 @@ return /******/ (function(modules) { // webpackBootstrap var locale = this.constants.locales[this.constants.locale]; - // create the toolbar contents - this.manipulationDiv.innerHTML = "" + - "" + - "" + locale['back'] + " " + - "" + - "" + - "" + locale['addDescription'] + ""; + this.manipulationDOM = {}; + this.manipulationDOM['backSpan'] = document.createElement('span'); + this.manipulationDOM['backSpan'].className = 'network-manipulationUI back'; + this.manipulationDOM['backLabelSpan'] = document.createElement('span'); + this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['backLabelSpan'].innerHTML = locale['back']; + this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']); + + this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; + + this.manipulationDOM['descriptionSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none'; + this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['addDescription']; + this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']); + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']); + this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']); // bind the icon - var backButton = document.getElementById("network-manipulate-back"); - backButton.onclick = this._createManipulatorBar.bind(this); + this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this); // we use the boundFunction so we can reference it when we unbind it from the "select" event. this.boundFunction = this._addNode.bind(this); @@ -32309,16 +32362,30 @@ return /******/ (function(modules) { // webpackBootstrap this.forceAppendSelection = false; this.blockConnectingEdgeSelection = true; - this.manipulationDiv.innerHTML = "" + - "" + - "" + locale['back'] + " " + - "" + - "" + - "" + locale['edgeDescription'] + ""; + this.manipulationDOM = {}; + this.manipulationDOM['backSpan'] = document.createElement('span'); + this.manipulationDOM['backSpan'].className = 'network-manipulationUI back'; + this.manipulationDOM['backLabelSpan'] = document.createElement('span'); + this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['backLabelSpan'].innerHTML = locale['back']; + this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']); + + this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; + + this.manipulationDOM['descriptionSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none'; + this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['edgeDescription']; + this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']); + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']); + this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']); // bind the icon - var backButton = document.getElementById("network-manipulate-back"); - backButton.onclick = this._createManipulatorBar.bind(this); + this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this); // we use the boundFunction so we can reference it when we unbind it from the "select" event. this.boundFunction = this._handleConnect.bind(this); @@ -32357,16 +32424,30 @@ return /******/ (function(modules) { // webpackBootstrap var locale = this.constants.locales[this.constants.locale]; - this.manipulationDiv.innerHTML = "" + - "" + - "" + locale['back'] + " " + - "" + - "" + - "" + locale['editEdgeDescription'] + ""; + this.manipulationDOM = {}; + this.manipulationDOM['backSpan'] = document.createElement('span'); + this.manipulationDOM['backSpan'].className = 'network-manipulationUI back'; + this.manipulationDOM['backLabelSpan'] = document.createElement('span'); + this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['backLabelSpan'].innerHTML = locale['back']; + this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']); + + this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; + + this.manipulationDOM['descriptionSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none'; + this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['editEdgeDescription']; + this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']); + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']); + this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']); // bind the icon - var backButton = document.getElementById("network-manipulate-back"); - backButton.onclick = this._createManipulatorBar.bind(this); + this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this); // temporarily overload functions this.cachedFunctions["_handleTouch"] = this._handleTouch; diff --git a/lib/network/mixins/ManipulationMixin.js b/lib/network/mixins/ManipulationMixin.js index 5fb58dbf..8e8fe0fb 100644 --- a/lib/network/mixins/ManipulationMixin.js +++ b/lib/network/mixins/ManipulationMixin.js @@ -11,6 +11,7 @@ exports._clearManipulatorBar = function() { while (this.manipulationDiv.hasChildNodes()) { this.manipulationDiv.removeChild(this.manipulationDiv.firstChild); } + this.manipulationDOM = {}; this._manipulationReleaseOverload = function () {}; delete this.sectors['support']['nodes']['targetNode']; @@ -40,9 +41,9 @@ exports._restoreOverloadedFunctions = function() { */ exports._toggleEditMode = function() { this.editMode = !this.editMode; - var toolbar = document.getElementById("network-manipulationDiv"); - var closeDiv = document.getElementById("network-manipulation-closeDiv"); - var editModeDiv = document.getElementById("network-manipulation-editMode"); + var toolbar = this.manipulationDiv; + var closeDiv = this.closeDiv; + var editModeDiv = this.editModeDiv; if (this.editMode == true) { toolbar.style.display="block"; closeDiv.style.display="block"; @@ -87,68 +88,110 @@ exports._createManipulatorBar = function() { // reset global variables this.blockConnectingEdgeSelection = false; this.forceAppendSelection = false; + this.manipulationDOM = {}; if (this.editMode == true) { while (this.manipulationDiv.hasChildNodes()) { this.manipulationDiv.removeChild(this.manipulationDiv.firstChild); } - // add the icons to the manipulator div - this.manipulationDiv.innerHTML = "" + - "" + - ""+locale['addNode'] +"" + - "" + - "" + - ""+locale['addEdge'] +""; + this.manipulationDOM['addNodeSpan'] = document.createElement('span'); + this.manipulationDOM['addNodeSpan'].className = 'network-manipulationUI add'; + this.manipulationDOM['addNodeLabelSpan'] = document.createElement('span'); + this.manipulationDOM['addNodeLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['addNodeLabelSpan'].innerHTML = locale['addNode']; + this.manipulationDOM['addNodeSpan'].appendChild(this.manipulationDOM['addNodeLabelSpan']); + + this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; + + this.manipulationDOM['addEdgeSpan'] = document.createElement('span'); + this.manipulationDOM['addEdgeSpan'].className = 'network-manipulationUI connect'; + this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('span'); + this.manipulationDOM['addEdgeLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['addEdgeLabelSpan'].innerHTML = locale['addEdge']; + this.manipulationDOM['addEdgeSpan'].appendChild(this.manipulationDOM['addEdgeLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['addNodeSpan']); + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']); + this.manipulationDiv.appendChild(this.manipulationDOM['addEdgeSpan']); + if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { - this.manipulationDiv.innerHTML += "" + - "" + - "" + - ""+locale['editNode'] +""; + this.manipulationDOM['seperatorLineDiv2'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv2'].className = 'network-seperatorLine'; + + this.manipulationDOM['editNodeSpan'] = document.createElement('span'); + this.manipulationDOM['editNodeSpan'].className = 'network-manipulationUI edit'; + this.manipulationDOM['editNodeLabelSpan'] = document.createElement('span'); + this.manipulationDOM['editNodeLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['editNodeLabelSpan'].innerHTML = locale['editNode']; + this.manipulationDOM['editNodeSpan'].appendChild(this.manipulationDOM['editNodeLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv2']); + this.manipulationDiv.appendChild(this.manipulationDOM['editNodeSpan']); } else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) { - this.manipulationDiv.innerHTML += "" + - "" + - "" + - ""+locale['editEdge'] +""; + this.manipulationDOM['seperatorLineDiv3'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv3'].className = 'network-seperatorLine'; + + this.manipulationDOM['editEdgeSpan'] = document.createElement('span'); + this.manipulationDOM['editEdgeSpan'].className = 'network-manipulationUI edit'; + this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('span'); + this.manipulationDOM['editEdgeLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['editEdgeLabelSpan'].innerHTML = locale['editEdge']; + this.manipulationDOM['editEdgeSpan'].appendChild(this.manipulationDOM['editEdgeLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv3']); + this.manipulationDiv.appendChild(this.manipulationDOM['editEdgeSpan']); } if (this._selectionIsEmpty() == false) { - this.manipulationDiv.innerHTML += "" + - "" + - "" + - ""+locale['del'] +""; + this.manipulationDOM['seperatorLineDiv4'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv4'].className = 'network-seperatorLine'; + + this.manipulationDOM['deleteSpan'] = document.createElement('span'); + this.manipulationDOM['deleteSpan'].className = 'network-manipulationUI delete'; + this.manipulationDOM['deleteLabelSpan'] = document.createElement('span'); + this.manipulationDOM['deleteLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['deleteLabelSpan'].innerHTML = locale['del']; + this.manipulationDOM['deleteSpan'].appendChild(this.manipulationDOM['deleteLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv4']); + this.manipulationDiv.appendChild(this.manipulationDOM['deleteSpan']); } // bind the icons - var addNodeButton = document.getElementById("network-manipulate-addNode"); - addNodeButton.onclick = this._createAddNodeToolbar.bind(this); - var addEdgeButton = document.getElementById("network-manipulate-connectNode"); - addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this); + this.manipulationDOM['addNodeSpan'].onclick = this._createAddNodeToolbar.bind(this); + this.manipulationDOM['addEdgeSpan'].onclick = this._createAddEdgeToolbar.bind(this); if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { - var editButton = document.getElementById("network-manipulate-editNode"); - editButton.onclick = this._editNode.bind(this); + this.manipulationDOM['editNodeSpan'].onclick = this._editNode.bind(this); } else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) { - var editButton = document.getElementById("network-manipulate-editEdge"); - editButton.onclick = this._createEditEdgeToolbar.bind(this); + this.manipulationDOM['editEdgeSpan'].onclick = this._createEditEdgeToolbar.bind(this); } if (this._selectionIsEmpty() == false) { - var deleteButton = document.getElementById("network-manipulate-delete"); - deleteButton.onclick = this._deleteSelected.bind(this); + this.manipulationDOM['deleteSpan'].onclick = this._deleteSelected.bind(this); } - var closeDiv = document.getElementById("network-manipulation-closeDiv"); - closeDiv.onclick = this._toggleEditMode.bind(this); + this.closeDiv.onclick = this._toggleEditMode.bind(this); this.boundFunction = this._createManipulatorBar.bind(this); this.on('select', this.boundFunction); } else { - this.editModeDiv.innerHTML = "" + - "" + - "" + locale['edit'] + ""; - var editModeButton = document.getElementById("network-manipulate-editModeButton"); - editModeButton.onclick = this._toggleEditMode.bind(this); + while (this.editModeDiv.hasChildNodes()) { + this.editModeDiv.removeChild(this.editModeDiv.firstChild); + } + + this.manipulationDOM['editModeSpan'] = document.createElement('span'); + this.manipulationDOM['editModeSpan'].className = 'network-manipulationUI edit editmode'; + this.manipulationDOM['editModeLabelSpan'] = document.createElement('span'); + 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); } }; @@ -168,17 +211,30 @@ exports._createAddNodeToolbar = function() { var locale = this.constants.locales[this.constants.locale]; - // create the toolbar contents - this.manipulationDiv.innerHTML = "" + - "" + - "" + locale['back'] + " " + - "" + - "" + - "" + locale['addDescription'] + ""; + this.manipulationDOM = {}; + this.manipulationDOM['backSpan'] = document.createElement('span'); + this.manipulationDOM['backSpan'].className = 'network-manipulationUI back'; + this.manipulationDOM['backLabelSpan'] = document.createElement('span'); + this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['backLabelSpan'].innerHTML = locale['back']; + this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']); + + this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; + + this.manipulationDOM['descriptionSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none'; + this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['addDescription']; + this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']); + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']); + this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']); // bind the icon - var backButton = document.getElementById("network-manipulate-back"); - backButton.onclick = this._createManipulatorBar.bind(this); + this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this); // we use the boundFunction so we can reference it when we unbind it from the "select" event. this.boundFunction = this._addNode.bind(this); @@ -207,16 +263,30 @@ exports._createAddEdgeToolbar = function() { this.forceAppendSelection = false; this.blockConnectingEdgeSelection = true; - this.manipulationDiv.innerHTML = "" + - "" + - "" + locale['back'] + " " + - "" + - "" + - "" + locale['edgeDescription'] + ""; + this.manipulationDOM = {}; + this.manipulationDOM['backSpan'] = document.createElement('span'); + this.manipulationDOM['backSpan'].className = 'network-manipulationUI back'; + this.manipulationDOM['backLabelSpan'] = document.createElement('span'); + this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['backLabelSpan'].innerHTML = locale['back']; + this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']); + + this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; + + this.manipulationDOM['descriptionSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none'; + this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['edgeDescription']; + this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']); + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']); + this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']); // bind the icon - var backButton = document.getElementById("network-manipulate-back"); - backButton.onclick = this._createManipulatorBar.bind(this); + this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this); // we use the boundFunction so we can reference it when we unbind it from the "select" event. this.boundFunction = this._handleConnect.bind(this); @@ -255,16 +325,30 @@ exports._createEditEdgeToolbar = function() { var locale = this.constants.locales[this.constants.locale]; - this.manipulationDiv.innerHTML = "" + - "" + - "" + locale['back'] + " " + - "" + - "" + - "" + locale['editEdgeDescription'] + ""; + this.manipulationDOM = {}; + this.manipulationDOM['backSpan'] = document.createElement('span'); + this.manipulationDOM['backSpan'].className = 'network-manipulationUI back'; + this.manipulationDOM['backLabelSpan'] = document.createElement('span'); + this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['backLabelSpan'].innerHTML = locale['back']; + this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']); + + this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); + this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; + + this.manipulationDOM['descriptionSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none'; + this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span'); + this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel'; + this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['editEdgeDescription']; + this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']); + + this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']); + this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']); + this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']); // bind the icon - var backButton = document.getElementById("network-manipulate-back"); - backButton.onclick = this._createManipulatorBar.bind(this); + this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this); // temporarily overload functions this.cachedFunctions["_handleTouch"] = this._handleTouch; diff --git a/lib/network/mixins/MixinLoader.js b/lib/network/mixins/MixinLoader.js index 8354f0c3..2545e6ee 100644 --- a/lib/network/mixins/MixinLoader.js +++ b/lib/network/mixins/MixinLoader.js @@ -116,7 +116,6 @@ exports._loadManipulationSystem = function () { if (this.manipulationDiv === undefined) { this.manipulationDiv = document.createElement('div'); this.manipulationDiv.className = 'network-manipulationDiv'; - this.manipulationDiv.id = 'network-manipulationDiv'; if (this.editMode == true) { this.manipulationDiv.style.display = "block"; } @@ -129,7 +128,6 @@ exports._loadManipulationSystem = function () { if (this.editModeDiv === undefined) { this.editModeDiv = document.createElement('div'); this.editModeDiv.className = 'network-manipulation-editMode'; - this.editModeDiv.id = 'network-manipulation-editMode'; if (this.editMode == true) { this.editModeDiv.style.display = "none"; } @@ -142,7 +140,6 @@ exports._loadManipulationSystem = function () { if (this.closeDiv === undefined) { this.closeDiv = document.createElement('div'); this.closeDiv.className = 'network-manipulation-closeDiv'; - this.closeDiv.id = 'network-manipulation-closeDiv'; this.closeDiv.style.display = this.manipulationDiv.style.display; this.frame.appendChild(this.closeDiv); }