Mercurial > hg > Members > nobuyasu > Consensus
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()