changeset 106:60a0ff0b3096 draft

modified viewer_white.html
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Sun, 17 Mar 2013 16:55:49 +0900
parents 9bf5e984f288
children 42799d9c3753
files public/viewer/viewer_white.html
diffstat 1 files changed, 24 insertions(+), 29 deletions(-) [+]
line wrap: on
line diff
--- a/public/viewer/viewer_white.html	Sun Mar 17 04:04:00 2013 +0900
+++ b/public/viewer/viewer_white.html	Sun Mar 17 16:55:49 2013 +0900
@@ -1,5 +1,5 @@
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
-<title>R-Consensus</title>
+<title>Graph Display</title>
 <link rel='stylesheet' href="form.css">
 <script src='form.js'></script>
 <script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script>
@@ -68,21 +68,20 @@
     <nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr>
 </div>
 
-<div id="miniDisplay" style='position:fixed; right:20; top:70; width:300px; height:300px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; visibility:hidden;'>
-  <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'>  </div>
-  <div id="closeMiniDisplay" style='position:absolute; right:5; top:-3; z-index:10;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','blue');" onmouseout="$('#closeMiniDisplay').css('color','black')" >CLOSE</div>
-  <div style='position:absolute; width:90%; height:90%;'>
-  <div style='position:absolute; left:5%; top:5%; width:100%; height:100%; background:white;'>
-      <div id="miniDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'>
-      </div>
-      <div id="miniDisplayBody" style='position:absolute; left:20px; top:40px;'>
-	  body
-      </div>
-  </form>
-  </div>
-  </div>
+<div id="miniDisplay" style='position:fixed; left:0; top:70; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; visibility:hidden;'>
+    <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'>  </div>
+    <div id="closeMiniDisplay" style='position:absolute; right:5; top:-3; z-index:10;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','blue');" onmouseout="$('#closeMiniDisplay').css('color','black')" >CLOSE</div>
+    <div style='position:absolute; width:90%; height:90%;'>
+	<div style='position:absolute; left:5%; top:5%; width:100%; height:100%; background:white;'>
+	    <div id="miniDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'>
+	    </div>
+	    <div id="miniDisplayBody" style='position:absolute; left:20px; top:40px;'>
+	    </div>
+	</div>
+    </div>
 </div>
 
+
 <div style="position:relative;left:0;top:0;" id='graphMain'>
 	<div style="position:absolute; width:0; height:0;left:0;" id='graphRoot'>
     </div>
@@ -220,15 +219,19 @@
 }
 
 var nodeNum = 0;
-
+var OFFSET = 100;
 function createNodeDiv(node) {
     node.view = $("<div class='graphNode'/>");
-    node.position = {x:nodeNum*50, y: nodeNum*50};
+    var miniD = $('#miniDisplay')[0].style;
+    var offsetLeft = parseInt(miniD.width.split('px')[0]);
+    var offsetTop = parseInt(miniD.height.split('px')[0]);
+    node.position = {x:nodeNum*OFFSET + offsetLeft, y: nodeNum*OFFSET + offsetTop/2};
     node.view.hover();
     var div = $("<div class='graphNodeContent'/>")[0];
     div.innerHTML = node.property.title;
     node.view[0].appendChild(div);
     nodeNum++;
+    return node;
 }
 
 function updateNodeElement(node) {
@@ -247,7 +250,7 @@
     div.css("border-color", kindBorder[node.kind] ||"blue");
     div.css({
 	left: node.position.x,
-	top: node.position.y 
+	top: node.position.y
     });
     return created;    
 }
@@ -262,14 +265,6 @@
 	    $('#graphRoot').append(node.view);
 	}
     }
-    nodeNum++;
-
-/*
-    node.view.css({
-	left: node.position.x * ViewParam.intervalX - ViewParam.nodeWidth/2,
-	top: node.position.y * ViewParam.intervalY - ViewParam.nodeHeight/2
-    });
-*/    
 }
 
 var ViewParam = {
@@ -287,7 +282,7 @@
     init();
     var rootNode = new Object();
     rootNode.property = sampleJSON1;
-//    showMiniDisplay(rootNode);
+    showMiniDisplay(rootNode);
     updateNode(rootNode);
     $("#graphRoot").css({
 	left: ViewParam.offsetLeft + ViewParam.nodeWidth/2 - ViewParam.intervalX,
@@ -300,8 +295,8 @@
     });
 
     /* test code */
-    var n1 = {property:{title:"tokage"}};
-    var n2 = {property:{title:"ttt"}};
+    var n1 = {property:{title:"task2"}};
+    var n2 = {property:{title:"task3"}};
     updateNode(n1);
     updateNode(n2);
     
@@ -347,7 +342,7 @@
 /* sample data */
 sampleJSON1  = {
     id:"5",
-    title:"dimolto",
+    title:"task1",
     kind:"agreed",
     createdUser:"oshiro",
     createdDate: new Date()