Mercurial > hg > Members > nobuyasu > html > graphViewer
changeset 50:346400e1ee19 draft
delete menuDisplay
author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
---|---|
date | Sun, 24 Mar 2013 18:23:38 +0900 |
parents | 614acb91d753 |
children | 45daac436fd7 |
files | show.html |
diffstat | 1 files changed, 21 insertions(+), 164 deletions(-) [+] |
line wrap: on
line diff
--- a/show.html Sun Mar 24 18:17:58 2013 +0900 +++ b/show.html Sun Mar 24 18:23:38 2013 +0900 @@ -51,23 +51,6 @@ </div> </div> -<div id='menuDisplay' class='menuDisplayCss' style='left:0; top:20; z-index:20;'> - <div id="closeMenuDisplay" style='position:absolute; right:5px; top:-15px; z-index:10; color:white;' onclick="closeSelectMenu();" onmouseover="$('#closeEdgeInfoDisplay').css('color','yellow');" onmouseout="$('#closeMenuDisplay').css('color','white')" >CLOSE</div> - <div class='menu' id='stateMenu'> - <div class='menuTitleCss' id='stateMenuTitle'>StateSelect</div> - <div class='menuTitleBodyCss' id='stateMenuBody'> - </div> - </div> - <div class='menu' id='traverseMenu' style=''> - <div class='menuTitleCss' id='traverseMenuTitle'>TraverseSelect</div> - <div class='menuTitleBodyCss'id='traverseMenuBody'> - </div> - </div> - <div class='menu' id='' style=''> - <div class='menuTitleCss' onclick="getInspect(CURRENT_DATA.nodeId);" id='accesDocument'>Read Document Now!!</div> - </div> -</div> - <div class='contextMenu' id='selectMenu'> <ul> <div class='contextMenuTitle' >State Select</div> @@ -101,7 +84,6 @@ </div> - <script type="text/javascript"> var CURRENT_DATA = {}; @@ -251,66 +233,10 @@ $('#accesDocument').click(function(){ }); } -function calcChildrenHeight(childArray) { - var height = 0; - for (var i=0; i<childArray.length; i++) { - height = height + childArray[i].offsetHeight + BASE_MARGIN; - } - return height; -} - function appendElement(menuBodyDiv, menuContentDiv) { menuBodyDiv.append(menuContentDiv); } -function removeTraverseMenuBody() { - $('#traverseMenuBody').children().remove(); -} - -function removeStateMenuBody() { - $('#stateMenuBody').children().remove(); -} - -function showMenuBody(menu) { - var body = $(menu.children()[1]); - var childArray = body.children(); - $(childArray).css('visibility','visible'); - var height = calcChildrenHeight(childArray); - menu.css('height', height+'px'); -} - -function showStateMenuBody() { - showMenuBody($('#stateMenu')); -} - -function showTraverseMenuBody(node) { - $('#traverseMenu').css('visibility','visible');; - showEdgeInfoDisplay(node); -} - -function hiddenMenuBody(menu, height) { - var body = $(menu.children()[1]); - var childArray = body.children(); - $(childArray).css('visibility','hidden'); - menu.css('height', height+'px'); -} - -function hiddenStateMenuBody() { - var height = DefaultSelectMenuInfo.stateMenuHeight; - hiddenMenuBody($('#stateMenu'), height); -} - -function hiddenTraverseMenuBody() { - var menu = $('#traverseMenu'); - menu.css('visibility','hidden'); -} - -var MENU_BORDER_MARGIN = 2*parseInt($('.menu').css('border-top-width').split('px')[0]); -var DefaultSelectMenuInfo = { - stateMenuHeight : $('#stateMenu')[0].offsetHeight - MENU_BORDER_MARGIN, - traverseMenuHeight : $('#traverseMenu')[0].offsetHeight - MENU_BORDER_MARGIN -}; - function appendStateSelectDiv(body, div, state) { div.click(function(){if (!CURRENT_DATA.nodeId) { alert("please click any node.");return; } stateTraversePost(state); }); div.hover( @@ -320,94 +246,6 @@ appendElement(body, div); } -function clickStateSelect() { - var flag = $('#stateMenuBody').css('visibility') == 'visible'; - if (flag) { - hiddenStateMenuBody(); - } else { - showStateMenuBody(); - } -} - -function createStateSelectMenu() { - removeStateMenuBody(); - var stateMenu = $('#stateMenu'); - var body = $('#stateMenuBody'); - var title = $('#stateMenuTitle'); - title.click(function(){ clickStateSelect(); updateMenuDisplayHeight(); }); - title.hover( - function(){ title.css("box-shadow","black 0 0 50px"); }, - function(){ title.css("box-shadow","");} - ); - for (var state in stateObj) { - var div = $('<div class="menuContent" >'+state+'</div>'); - appendStateSelectDiv(body, div, stateObj[state]); - } -} - -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'); - var height = 0; - for (var i=0; i<menuArray.length; i++) { - height = height + menuArray[i].offsetHeight - } - return height; - } - function updateMenuTop(childArray) { - var height = 0; - for (var i=0; i<childArray.length; i++) { - childArray[i].style.top = height + 'px'; - height = height + childArray[i].offsetHeight + MARGIN; - } - } - var menuD = $('#menuDisplay'); - var menuArray = $('.menu'); - updateMenuTop(menuArray); - var height = calcMenuDisplayHeight(menuD, menuArray) + BASE_MARGIN; - menuD.css('height', height + 'px'); -} - -function closeSelectMenu() { - hiddenStateMenuBody(); - hiddenTraverseMenuBody(); - $('#menuDisplay').css('visibility','hidden'); -} - -function showSelectMenu(node) { - $('#menuDisplay').css('visibility','visible'); - showStateMenuBody(); - showTraverseMenuBody(node); -} - -function init() { - jsPlumb.importDefaults({ - Connector : [ "Straight", { curviness:50 } ], - PaintStyle : { strokeStyle:"gray", lineWidth:2 }, - EndpointStyle : {}, - Anchors: ["BottomCenter","TopCenter"], - }); - var rootDiv = $('#graphMain'); - var rootLeft = rootDiv.offset().left; - var rootTop = rootDiv.offset().top; - $('#miniDisplay').css( { - left: rootLeft + 'px', - top: rootTop + 'px' - }); - var heightStr = $('#miniDisplay').css('height').split('px')[0]; - var height = parseInt(heightStr); - $('#menuDisplay').css({ - left: rootLeft + 'px', - top: rootTop + height + 50 +'px' - }); - createStateSelectMenu(); -// hiddenStateMenuBody(); - updateMenuDisplayHeight(); -} - function showMiniDisplay(node) { CURRENT_DATA.nodeId = node.property.id; $("#miniDisplay").css("visibility", "visible"); @@ -640,7 +478,7 @@ function(){div.css("box-shadow","");} ); node.view[0].nodeId = node.property.id; - div.click(function(){ showMiniDisplay(node); showSelectMenu(node); }); + div.click(function(){ showMiniDisplay(node); }); DragHandler.attach($(node.view)[0]); div.css('border-style',borderStyle[node.property.kind]); div.css("background", StateColor[node.property.state]||"white"); @@ -850,6 +688,26 @@ showAllEdge(gData); } + +function init() { + jsPlumb.importDefaults({ + Connector : [ "Straight", { curviness:50 } ], + PaintStyle : { strokeStyle:"gray", lineWidth:2 }, + EndpointStyle : {}, + Anchors: ["BottomCenter","TopCenter"], + }); + var rootDiv = $('#graphMain'); + var rootLeft = rootDiv.offset().left; + var rootTop = rootDiv.offset().top; + $('#miniDisplay').css( { + left: rootLeft + 'px', + top: rootTop + 'px' + }); + var heightStr = $('#miniDisplay').css('height').split('px')[0]; + var height = parseInt(heightStr); +// hiddenStateMenuBody(); +} + function start() { function _start() { startUserDesktopUI(); @@ -883,7 +741,6 @@ function beginScript() { DragHandler.attach($('#miniDisplay')[0]); - DragHandler.attach($('#menuDisplay')[0]); start(); }