Mercurial > hg > Members > nobuyasu > html > graphViewer

changeset 46:a5c65ac33c76 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refactoring show.html
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Sun, 24 Mar 2013 02:43:58 +0900
parents 954a36db47cc
children 0f624dc3664d
files css/viewer_form.css show.html
diffstat 2 files changed, 54 insertions(+), 32 deletions(-) [+]
line wrap: on
line diff
--- a/css/viewer_form.css	Sun Mar 24 01:30:23 2013 +0900
+++ b/css/viewer_form.css	Sun Mar 24 02:43:58 2013 +0900
@@ -53,12 +53,11 @@
 
 }
 
-div.graphNode {
+span.graphNode {
     position:absolute; 
     font-size:12px; padding:4px; background:white;
     z-index:20;
     width: 45px; 
-
     height: 40px; 
     border-radius:50px;
     border:2px solid silver;
@@ -67,7 +66,6 @@
 }
 div.graphNodeContent {
     position:absolute;
-    z-index:21;
     font-size:12px;
     background:white;
     left: 10px;
@@ -127,6 +125,19 @@
     overflow-x: hidden;
     border: solid 2px #03f;
 }
+div.contextMenuTitle { 
+    background:#bbb;
+    opacity:0.7;
+    padding-left:2px;
+    text-align:left;
+    font-size:15px;
+    font-width:700;
+}
+li.contextMenuContent { 
+    text-align:center;
+    padding-right:2px;
+}
+
 
 span.button{
     background:#eee;
@@ -149,4 +160,4 @@
 }
 label.traverseLabel { 
     style:position:relative;
-}
\ No newline at end of file
+}
--- a/show.html	Sun Mar 24 01:30:23 2013 +0900
+++ b/show.html	Sun Mar 24 02:43:58 2013 +0900
@@ -67,15 +67,15 @@
   </div>
 </div>
 
-<div class='contentMenu' id='selectMenu'>
+<div class='contextMenu' id='selectMenu'>
     <ul>
-	<div style='text-align:left; font-size:15px; font-width:500;'>State Select</div>
+	<div class='contextMenuTitle' >State Select</div>
 	<div id='stateSlectMenu'>
-	    <li id='stateAccept'>accept</li>
-	    <li id='stateReject'>reject</li>
-	    <li id='stateRetract'>retract</li>
+	    <li id='stateAccept' class='contextMenuContent'>accept</li>
+	    <li id='stateReject' class='contextMenuContent'>reject</li>
+	    <li id='stateRetract' class='contextMenuContent'>retract</li>
 	</div>
-	<div style='text-align:left; font-size:15px; font-width:500;'>Traverse</div>
+	<div class='contextMenuTitle' >Traverse</div>
 	<div id='traverseSelectMenu'>
 	</div>
     </ul>
@@ -227,7 +227,7 @@
 	} else {
 	    setEdgeInfoClickFunction(node.property.id, edgeInfo, edgeInfo.view);
 	}
-	appendMenuBody(tMenuBody, edgeInfo.view);
+	appendElement(tMenuBody, edgeInfo.view);
     }
     updateMenuDisplayHeight();
     $('#accesDocument').click(function(){  });
@@ -241,7 +241,7 @@
     return height;
 }
 
-function appendMenuBody(menuBodyDiv, menuContentDiv) {
+function appendElement(menuBodyDiv, menuContentDiv) {
     menuBodyDiv.append(menuContentDiv);
 }
 
@@ -257,7 +257,6 @@
     var body = $(menu.children()[1]);
     var childArray = body.children();
     $(childArray).css('visibility','visible');
-    body[0].viewFlag = true;
     var height = calcChildrenHeight(childArray);
     menu.css('height', height+'px');    
 }
@@ -275,7 +274,6 @@
     var body = $(menu.children()[1]);
     var childArray = body.children();
     $(childArray).css('visibility','hidden');
-    body[0].viewFlag = false;
     menu.css('height', height+'px');    
 }
 
@@ -301,11 +299,11 @@
 	    function(){div.css("box-shadow","black 0 0 50px");  },
 	    function(){div.css("box-shadow","");}
 	);
-	appendMenuBody(body, div);
+	appendElement(body, div);
 }
 
 function clickStateSelect() {
-    var flag = $('#stateMenuBody')[0].viewFlag;
+    var flag = $('#stateMenuBody').css('visibility') == 'visible';
     if (flag) {
 	hiddenStateMenuBody();
     } else {
@@ -317,14 +315,12 @@
     removeStateMenuBody();
     var stateMenu = $('#stateMenu');
     var body = $('#stateMenuBody');
-    body[0].viewFlag = true;
     var title = $('#stateMenuTitle');
-    title.click(function(){clickStateSelect(); updateMenuDisplayHeight(); });
+    title.click(function(){ clickStateSelect(); updateMenuDisplayHeight(); });
     title.hover(
-	function(){title.css("box-shadow","black 0 0 50px");  },
-	function(){title.css("box-shadow","");}
+	function(){ title.css("box-shadow","black 0 0 50px");  },
+	function(){ title.css("box-shadow","");}
     );
-    body.viewFlag = true;
     for (var state in stateObj) {
 	var div = $('<div class="menuContent" >'+state+'</div>');
 	appendStateSelectDiv(body, div, stateObj[state]);
@@ -334,7 +330,6 @@
 var MARGIN = parseInt($('.menu').css('margin-top').split('px')[0]);
 var BASE_MARGIN = 2*MARGIN + 
     parseInt($('.menuDisplayCss').css('border-top-width').split('px')[0])*2;
-
 function updateMenuDisplayHeight() {
     function calcMenuDisplayHeight(menuD, childArray) {
 	var menuArray = $('.menu');
@@ -519,9 +514,6 @@
 	    }
 	}
     };
-    for (var key in addObj['bindings']) {
-	bindObj['bindings'][key] = addObj['bindings'][key];
-    }
     return bindObj;
 }
 
@@ -529,7 +521,7 @@
     return function(f){var id = CURRENT_DATA.nodeId; getEvidence(id, edgeInfo);   };
 }
 
-var TRAVERSE_LI_NAME = "traverseList";
+var TRAVERSE_LI_ID_NAME = "traverseList";
 function createTraverseMenuAndObj(edgeInfoArray) {
     var menu = $('#traverseSelectMenu');
     menu.children().remove();
@@ -538,19 +530,34 @@
     for (var i=0; i<edgeInfoArray.length; i++) {
 	var edgeInfo = edgeInfoArray[i];
 	var str = edgeInfo.kind +" : " + edgeInfo.num + " : " + edgeInfo.direction;
-	var idName = TRAVERSE_LI_NAME + i;
-	var divStr = "<li id="+idName+">"+str+"</li>";
+	var idName = TRAVERSE_LI_ID_NAME + i;
+	var divStr = "<li id="+idName+" class='contextMenuContent'>"+str+"</li>";
 	var div = $(divStr);
-	appendMenuBody(menu, div);
+	appendElement(menu, div);
 	bindObj.bindings[idName] = returnTraverseMenuFunction(edgeInfo);
     }
     return bindObj;
 }
 
+function plusMenuObj(obj1, obj2) {
+    var newObj = {};
+    newObj.bindings = {};
+    var bindings1 = obj1['bindings'];
+    for (var key in bindings1) {
+	newObj.bindings[key] = bindings1[key];
+    }
+    var bindings2 = obj2['bindings'];
+    for (var key in bindings2) {
+	newObj.bindings[key] = bindings2[key];
+    }
+    return newObj;
+}
+
 function setInitContextMenu(node,elem) {
     var tObj = createTraverseMenuAndObj(node.property.edgeInfo);
     var bindObj = createContextMenuObj(node, tObj);
-    elem.bindObj = bindObj;
+    var newObj = plusMenuObj(bindObj, tObj);
+    elem.bindObj = newObj;
     elem.menuHTML = $('#selectMenu').clone()[0].innerHTML;
 }
 
@@ -570,8 +577,9 @@
 function updateNodeElement(node) {
     var created = false;
     if(!node.view) {
+	/* Make graphNode Element in node.view */
+	createNodeDiv(node);
 	created = true;
-	createNodeDiv(node);
     }
     var div = node.view;
     setInitContextMenu(node,div);
@@ -790,10 +798,13 @@
 }
 
 function start() {
+    function _start() {
+	startUserDesktopUI();
+    }
     init();
     $.ajax({
 	url:"/aat/aaevidencesiftingmodel.userdesktops/get?desktopid="+desktopid(),
-	success:function(o) { parseJSONGraphData(GRAPH_DATA, o); startUserDesktopUI();},
+	success:function(o) {	parseJSONGraphData(GRAPH_DATA, o); _start(); },
 	type:"GET", cache:false,
 	error:function(o) { console.log("first get error : ",o); }
     });