Template:Team:Bonn:Network
From 2013.igem.org
(Difference between revisions)
Line 2: | Line 2: | ||
<script> | <script> | ||
function test(node) { | function test(node) { | ||
- | var content = document.getElementById( | + | var div-content = "subpage-middle"; |
+ | var content = document.getElementById(div-content); | ||
getElements(node); | getElements(node); | ||
showElements(node,node,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text); | showElements(node,node,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text); | ||
} | } | ||
function initiateNetwork(node) { | function initiateNetwork(node) { | ||
- | var content = document.getElementById( | + | var div-content = "subpage-middle"; |
+ | var content = document.getElementById(div-content); | ||
getElements(node); | getElements(node); | ||
- | showElements(node,node, | + | showElements(node,node,div-networkTop,content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text); |
} | } | ||
function getElements(node) { | function getElements(node) { | ||
- | var content = document.getElementById( | + | var div-content = "subpage-middle"; |
+ | var div-title = "subpage-title"; | ||
+ | var div-summary = "subpage-summary"; | ||
+ | var div-text = "subpage-text"; | ||
+ | var content = document.getElementById(div-content); | ||
content.childs = new Array(); | content.childs = new Array(); | ||
content.parents = new Array(); | content.parents = new Array(); | ||
Line 80: | Line 86: | ||
} | } | ||
function showElements(node,mainnode,action,parents,childs,titleShort,titleLong,summary,text) { | function showElements(node,mainnode,action,parents,childs,titleShort,titleLong,summary,text) { | ||
- | var content = document.getElementById( | + | var div-content = "subpage-middle"; |
+ | var div-title = "subpage-title"; | ||
+ | var div-summary = "subpage-summary"; | ||
+ | var div-text = "subpage-text"; | ||
+ | var div-networkBottom = "networkBottom"; | ||
+ | var div-networkTop = "networkTop"; | ||
+ | var content = document.getElementById(div-content); | ||
getElements(node); | getElements(node); | ||
- | var contentTitle = document.getElementById( | + | var contentTitle = document.getElementById(div-title); |
- | var contentSummary = document.getElementById( | + | var contentSummary = document.getElementById(div-summary); |
- | var contentText = document.getElementById( | + | var contentText = document.getElementById(div-text); |
switch(action) { | switch(action) { | ||
- | case | + | case div-networkTop: |
- | if(document.getElementById( | + | if(document.getElementById(div-networkTop)) { |
- | var divs = document.getElementById( | + | var divs = document.getElementById(div-networkTop); |
divs.innerHTML = ''; | divs.innerHTML = ''; | ||
} | } | ||
Line 121: | Line 133: | ||
case "navigation": | case "navigation": | ||
- | if(document.getElementById( | + | if(document.getElementById(div-networkBottom)) { |
- | var divs = document.getElementById( | + | var divs = document.getElementById(div-networkBottom); |
divs.innerHTML = ''; | divs.innerHTML = ''; | ||
} | } | ||
Line 173: | Line 185: | ||
function circle(general) { | function circle(general) { | ||
- | var genheight = parseInt(document.getElementById( | + | var div-networkBottom = "networkBottom"; |
- | var genwidth = parseInt(document.getElementById( | + | var div-networkTop = "networkTop"; |
+ | var div-content = "subpage-middle"; | ||
+ | var div-title = "subpage-title"; | ||
+ | var div-summary = "subpage-summary"; | ||
+ | var div-text = "subpage-text"; | ||
+ | var genheight = parseInt(document.getElementById(div-networkBottom).style.height); | ||
+ | var genwidth = parseInt(document.getElementById(div-networkBottom).style.width); | ||
if(general.cheight) { | if(general.cheight) { | ||
} else{ | } else{ | ||
Line 237: | Line 255: | ||
document.getElementById(general.parent).appendChild(mid); | document.getElementById(general.parent).appendChild(mid); | ||
} else { | } else { | ||
- | document.getElementById( | + | document.getElementById(div-networkBottom).appendChild(mid); |
} | } | ||
} | } | ||
Line 251: | Line 269: | ||
document.getElementById("nodediv-parent-"+general.mainnode).appendChild(div); | document.getElementById("nodediv-parent-"+general.mainnode).appendChild(div); | ||
} else { | } else { | ||
- | document.getElementById( | + | document.getElementById(div-networkBottom).appendChild(div); |
} | } | ||
for(var x=0;x<general.n.length;x++) { | for(var x=0;x<general.n.length;x++) { | ||
Line 376: | Line 394: | ||
getElements(i); | getElements(i); | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
var nodeTitle = document.getElementById("nodeTitle"+i); | var nodeTitle = document.getElementById("nodeTitle"+i); | ||
nodeTitle.innerHTML = content.titleShort; | nodeTitle.innerHTML = content.titleShort; | ||
Line 391: | Line 409: | ||
var i = this.i; | var i = this.i; | ||
getElements(i); | getElements(i); | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
content.mainnode = this.mainnode; | content.mainnode = this.mainnode; | ||
setTimeout(function() { | setTimeout(function() { | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
showElements(content.i,content.mainnode,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text) | showElements(content.i,content.mainnode,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text) | ||
} | } | ||
Line 403: | Line 421: | ||
getElements(i); | getElements(i); | ||
var mainnode = this.mainnode; | var mainnode = this.mainnode; | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
var nodeTitle = document.getElementById("nodeTitle"+i); | var nodeTitle = document.getElementById("nodeTitle"+i); | ||
if(this.parentID) { | if(this.parentID) { | ||
Line 455: | Line 473: | ||
getElements(i); | getElements(i); | ||
var mainnode = this.mainnode; | var mainnode = this.mainnode; | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
var nodeTitle = document.getElementById("nodeTitle"+i); | var nodeTitle = document.getElementById("nodeTitle"+i); | ||
if(this.parentID) { | if(this.parentID) { | ||
Line 484: | Line 502: | ||
}; | }; | ||
if(general.type == "parent") { | if(general.type == "parent") { | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
getElements(i); | getElements(i); | ||
if(content.childs) { | if(content.childs) { | ||
Line 509: | Line 527: | ||
function connect(nodeID,mainnode,type,ax,ay,bx,by,parentID,dheight,dwidth) { | function connect(nodeID,mainnode,type,ax,ay,bx,by,parentID,dheight,dwidth) { | ||
+ | var div-content = "subpage-middle"; | ||
+ | var div-title = "subpage-title"; | ||
+ | var div-summary = "subpage-summary"; | ||
+ | var div-text = "subpage-text"; | ||
+ | var div-networkBottom = "networkBottom"; | ||
+ | var div-networkTop = "networkTop"; | ||
var m= (ay-by)/(bx-ax); | var m= (ay-by)/(bx-ax); | ||
var length = Math.sqrt((ax-bx)*(ax-bx)+(by-ay)*(by-ay)); | var length = Math.sqrt((ax-bx)*(ax-bx)+(by-ay)*(by-ay)); | ||
Line 546: | Line 570: | ||
function createNetwork(general) { | function createNetwork(general) { | ||
- | var genheight = parseInt(document.getElementById( | + | var div-content = "subpage-middle"; |
- | var genwidth = parseInt(document.getElementById( | + | var div-title = "subpage-title"; |
+ | var div-summary = "subpage-summary"; | ||
+ | var div-text = "subpage-text"; | ||
+ | var div-networkBottom = "networkBottom"; | ||
+ | var div-networkTop = "networkTop"; | ||
+ | var genheight = parseInt(document.getElementById(div-networkTop).style.height); | ||
+ | var genwidth = parseInt(document.getElementById(div-networkTop).style.width); | ||
if(general.cheight) { | if(general.cheight) { | ||
} else{ | } else{ | ||
Line 578: | Line 608: | ||
title.style.height = title.height + "px"; | title.style.height = title.height + "px"; | ||
title.style.width = title.width + "px"; | title.style.width = title.width + "px"; | ||
- | title.id = | + | title.id = div-title; |
title.style.position = "absolute"; | title.style.position = "absolute"; | ||
title.top = 20; | title.top = 20; | ||
Line 584: | Line 614: | ||
title.style.top = title.top + "px"; | title.style.top = title.top + "px"; | ||
title.style.right = title.right + "px"; | title.style.right = title.right + "px"; | ||
- | document.getElementById( | + | document.getElementById(div-networkTop).appendChild(title); |
var summary = document.createElement("DIV"); | var summary = document.createElement("DIV"); | ||
summary.style.height = "200px"; | summary.style.height = "200px"; | ||
summary.style.width = "150px"; | summary.style.width = "150px"; | ||
- | summary.id = | + | summary.id = div-summary; |
summary.style.position = "absolute"; | summary.style.position = "absolute"; | ||
summary.top = 10+title.top+title.height; | summary.top = 10+title.top+title.height; | ||
Line 595: | Line 625: | ||
summary.style.top = summary.top + "px"; | summary.style.top = summary.top + "px"; | ||
summary.style.right = summary.right + "px"; | summary.style.right = summary.right + "px"; | ||
- | document.getElementById( | + | document.getElementById(div-networkTop).appendChild(summary); |
var Summary = document | var Summary = document | ||
if(document.getElementById("netNode"+general.mainnode)) { | if(document.getElementById("netNode"+general.mainnode)) { | ||
Line 615: | Line 645: | ||
node[general.mainnode].left = 0; | node[general.mainnode].left = 0; | ||
node[general.mainnode].style.left = node[general.mainnode].left+"px"; | node[general.mainnode].style.left = node[general.mainnode].left+"px"; | ||
- | document.getElementById( | + | document.getElementById(div-networkTop).appendChild(node[general.mainnode]); |
nodeTitle[general.mainnode] = document.createElement("DIV"); | nodeTitle[general.mainnode] = document.createElement("DIV"); | ||
Line 630: | Line 660: | ||
nodeTitle[general.mainnode].left = node[general.mainnode].left+15; | nodeTitle[general.mainnode].left = node[general.mainnode].left+15; | ||
nodeTitle[general.mainnode].style.left = nodeTitle[general.mainnode].left+"px"; | nodeTitle[general.mainnode].style.left = nodeTitle[general.mainnode].left+"px"; | ||
- | document.getElementById( | + | document.getElementById(div-networkTop).appendChild(nodeTitle[general.mainnode]); |
node[general.mainnode].onclick = function() { | node[general.mainnode].onclick = function() { | ||
Line 639: | Line 669: | ||
var i = this.i; | var i = this.i; | ||
getElements(i); | getElements(i); | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
content.mainnode = i; | content.mainnode = i; | ||
setTimeout(function() { | setTimeout(function() { | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
showElements(content.i,content.mainnode,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text) | showElements(content.i,content.mainnode,"navigation",content.parents,content.childs,content.titleShort,content.titleLong,content.summary,content.text) | ||
} | } | ||
Line 651: | Line 681: | ||
getElements(i); | getElements(i); | ||
var mainnode = this.mainnode; | var mainnode = this.mainnode; | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
- | var nodeTitle = document.getElementById( | + | var nodeTitle = document.getElementById(div-title); |
- | var nodeSummary = document.getElementById( | + | var nodeSummary = document.getElementById(div-summary); |
nodeSummary.innerHTML = content.summary; | nodeSummary.innerHTML = content.summary; | ||
nodeTitle.innerHTML = content.titleLong; | nodeTitle.innerHTML = content.titleLong; | ||
Line 667: | Line 697: | ||
getElements(i); | getElements(i); | ||
var mainnode = this.mainnode; | var mainnode = this.mainnode; | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
- | var nodeTitle = document.getElementById( | + | var nodeTitle = document.getElementById(div-title); |
- | var nodeSummary = document.getElementById( | + | var nodeSummary = document.getElementById(div-summary); |
nodeSummary.innerHTML = ""; | nodeSummary.innerHTML = ""; | ||
nodeTitle.innerHTML = content.titleShort; | nodeTitle.innerHTML = content.titleShort; | ||
Line 729: | Line 759: | ||
} | } | ||
node[i].style.left = node[i].left+"px"; | node[i].style.left = node[i].left+"px"; | ||
- | document.getElementById( | + | document.getElementById(div-networkTop).appendChild(node[i]); |
nodeTitle[i] = document.createElement("DIV"); | nodeTitle[i] = document.createElement("DIV"); | ||
Line 744: | Line 774: | ||
nodeTitle[i].left = node[i].left+15; | nodeTitle[i].left = node[i].left+15; | ||
nodeTitle[i].style.left = nodeTitle[i].left+"px"; | nodeTitle[i].style.left = nodeTitle[i].left+"px"; | ||
- | document.getElementById( | + | document.getElementById(div-networkTop).appendChild(nodeTitle[i]); |
} | } | ||
if(general.parentID) { | if(general.parentID) { | ||
Line 776: | Line 806: | ||
getElements(i); | getElements(i); | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
- | var nodeTitle = document.getElementById( | + | var nodeTitle = document.getElementById(div-title); |
nodeTitle.innerHTML = content.titleShort; | nodeTitle.innerHTML = content.titleShort; | ||
if(general.parentID) { | if(general.parentID) { | ||
Line 791: | Line 821: | ||
var i = this.i; | var i = this.i; | ||
getElements(i); | getElements(i); | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
content.mainnode = this.mainnode; | content.mainnode = this.mainnode; | ||
setTimeout(function() { | setTimeout(function() { | ||
Line 802: | Line 832: | ||
getElements(i); | getElements(i); | ||
var mainnode = this.mainnode; | var mainnode = this.mainnode; | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
- | var nodeTitle = document.getElementById( | + | var nodeTitle = document.getElementById(div-title); |
- | var nodeSummary = document.getElementById( | + | var nodeSummary = document.getElementById(div-summary); |
nodeSummary.innerHTML = content.summary; | nodeSummary.innerHTML = content.summary; | ||
nodeTitle.innerHTML = content.titleLong; | nodeTitle.innerHTML = content.titleLong; | ||
Line 813: | Line 843: | ||
getElements(i); | getElements(i); | ||
var mainnode = this.mainnode; | var mainnode = this.mainnode; | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
- | var nodeTitle = document.getElementById( | + | var nodeTitle = document.getElementById(div-title); |
- | var nodeSummary = document.getElementById( | + | var nodeSummary = document.getElementById(div-summary); |
nodeSummary.innerHTML = ""; | nodeSummary.innerHTML = ""; | ||
nodeTitle.innerHTML = content.titleShort; | nodeTitle.innerHTML = content.titleShort; | ||
this.style.backgroundColor = "black"; | this.style.backgroundColor = "black"; | ||
}; | }; | ||
- | var content = document.getElementById( | + | var content = document.getElementById(div-content); |
getElements(i); | getElements(i); | ||
if(content.childs) { | if(content.childs) { | ||
Line 877: | Line 907: | ||
function connectNetwork(nodeID,mainnode,type,ax,ay,bx,by,parentID,dheight,dwidth) { | function connectNetwork(nodeID,mainnode,type,ax,ay,bx,by,parentID,dheight,dwidth) { | ||
+ | var div-content = "subpage-middle"; | ||
+ | var div-title = "subpage-title"; | ||
+ | var div-summary = "subpage-summary"; | ||
+ | var div-text = "subpage-text"; | ||
+ | var div-networkBottom = "networkBottom"; | ||
+ | var div-networkTop = "networkTop"; | ||
var m= (ay-by)/(bx-ax); | var m= (ay-by)/(bx-ax); | ||
var length = Math.sqrt((ax-bx)*(ax-bx)+(by-ay)*(by-ay)); | var length = Math.sqrt((ax-bx)*(ax-bx)+(by-ay)*(by-ay)); | ||
Line 902: | Line 938: | ||
ddiv[i].style.top = ddiv[i].top +"px"; | ddiv[i].style.top = ddiv[i].top +"px"; | ||
ddiv[i].style.left = ddiv[i].left +"px"; | ddiv[i].style.left = ddiv[i].left +"px"; | ||
- | document.getElementById( | + | document.getElementById(div-networkTop).appendChild(ddiv[i]); |
} | } | ||
Revision as of 05:46, 1 October 2013