Mercurial > hg > Members > nobuyasu > Consensus
diff public/viewer/revisionviewer.html @ 119:aa5daf38f3e9 draft
viewer.html
author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
---|---|
date | Thu, 18 Apr 2013 06:19:26 +0900 |
parents | 440b337b2182 |
children | 9cfb52e94bd0 |
line wrap: on
line diff
--- a/public/viewer/revisionviewer.html Mon Apr 01 13:11:23 2013 +0900 +++ b/public/viewer/revisionviewer.html Thu Apr 18 06:19:26 2013 +0900 @@ -1,6 +1,7 @@ <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>R-Consensus</title> <link rel='stylesheet' href="form.css"> +<link rel="stylesheet" href="jquery-ui.css"> <script src='form.js'></script> <script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script> <script type="text/javascript" src="js/lib/jquery-ui-1.8.23-min.js"></script> @@ -16,59 +17,58 @@ <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script> <script type="text/javascript" src='treeArrangement.js'></script> <script type="text/javascript"> -var LOAD_INTERVAL=5; + var LOAD_INTERVAL=5; var BASE_URL=""; if(!Array.prototype.filter){ - Array.prototype.filter=function(func){ - var arr=[]; - for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]); - return arr; - } + Array.prototype.filter=function(func){ + var arr=[]; + for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]); + return arr; + } } var userName; - var treeInfo; var userList=[]; var root_id; function loadConsensus(id){ - function onload(json){ - document.title="R-Consensus:"+json.toulmin.title; - $("#headertitle_main").text(json.toulmin.title) - if(treeInfo){ - updateToNew(json); - }else{ -// console.log(JSON.parse(JSON.stringify(json))); - treeInfo=createJSONTreeInfo(json) - //userList=getUserListFromJSONTree(treeInfo.root); - showUserList([]); - updateNode(treeInfo.root); - updateTree(); - } + function onload(json){ + document.title="R-Consensus:"+json.toulmin.title; + $("#headertitle_main").text(json.toulmin.title) + if(treeInfo){ + updateToNew(json); + }else{ + console.log(JSON.parse(JSON.stringify(json))); + treeInfo=createJSONTreeInfo(json) + //userList=getUserListFromJSONTree(treeInfo.root); + showUserList([]); + updateNode(treeInfo.root); + updateTree(); } - $.ajax({ - url:BASE_URL+"/consensus/browse/"+id, - success:function(o){onload(o)}, - type:"GET",cache:false, - error:function(o){console.log("ERROR",o)} - }); + } + $.ajax({ + url:BASE_URL+"/consensus/browse/"+id, + success:function(o){onload(o)}, + type:"GET",cache:false, + error:function(o){console.log("ERROR",o)} + }); } function loadUserList(){ - $.ajax({ - url:BASE_URL+"/users/all", - success:function(o){userList=o.sort();showUserList([]);}, - type:"GET",cache:false, - error:function(o){console.log("ERROR",o)} - }); + $.ajax({ + url:BASE_URL+"/users/all", + success:function(o){userList=o.sort();showUserList([]);}, + type:"GET",cache:false, + error:function(o){console.log("ERROR",o)} + }); } function loadRevisionInfo(consensus_id) { - $.ajax({ - url:BASE_URL+"/claims/get/revision/"+consensus_id, - success:function(o){createOptionTag(consensus_id, o); console.log("revision = "+ o)}, - type:"GET",cache:false, - error:function(o){console.log("ERROR",o)} - }); + $.ajax({ + url:BASE_URL+"/claims/get/revision/"+consensus_id, + success:function(o){createOptionTag(consensus_id, o); console.log("revision = "+ o)}, + type:"GET",cache:false, + error:function(o){console.log("ERROR",o)} + }); } function changeRevision(id) { @@ -77,270 +77,250 @@ } function createOptionTag(consensus_id, revisionInfo) { - var selectArray = new Array(); - selectArray.push('<select onchange="changeRevision(this.value)" >'); - for (var i=0; i<revisionInfo.length; i++) { - selectArray.push("<option>"+revisionInfo[i]+"</option>"); - } - selectArray.push("</select>"); - $('#revisionId')[0].innerHTML = "revision:"+selectArray.join(); - $('#revisionId')[0].children[0].value = consensus_id; + var selectArray = new Array(); + selectArray.push('<select onchange="changeRevision(this.value)" >'); + for (var i=0; i<revisionInfo.length; i++) { + var revision = revisionInfo.length - i; + selectArray.push("<option value='"+revisionInfo[i]+"'>"+revision+"</option>"); + } + selectArray.push("</select>"); + $('#revisionId')[0].innerHTML = "revision:"+selectArray.join(); + // $('#revisionId')[0].children[0].value = consensus_id; } $(function(){ - userName=localStorage.userName; - if(userName)start(); - else $("#loginPopup").css("display","block"); + userName=localStorage.userName; + if(userName)start(); + else $("#loginPopup").css("display","block"); }) function login(uname){ - userName=localStorage.userName=uname; - start(); + userName=localStorage.userName=uname; + start(); } function start(){ - popupInit(); - jsPlumb.importDefaults({ - Connector : [ "Straight", { curviness:50 } ], - PaintStyle : { strokeStyle:"gray", lineWidth:2 }, - EndpointStyle : {}, - Anchors: ["BottomCenter","TopCenter"] - }); - var consensus_id=(location.search.match("[0-9]+")||[])[0]; - if(consensus_id){ - root_id=consensus_id; - loadUserList(); - loadRevisionInfo(consensus_id); - loadConsensus(consensus_id); - }else{ - document.body.innerHTML="<div style='color:white;font-size:64px'>No ClaimID Specified.<br><a href='index.html' style='color:#88f'>back</a></div>"; - } + popupInit(); + jsPlumb.importDefaults({ + Connector : [ "Straight", { curviness:50 } ], + PaintStyle : { strokeStyle:"gray", lineWidth:2 }, + EndpointStyle : {}, + Anchors: ["BottomCenter","TopCenter"] + }); + var consensus_id=(location.search.match("[0-9]+")||[])[0]; + if(consensus_id){ + root_id=consensus_id; + loadUserList(); + loadRevisionInfo(consensus_id); + loadConsensus(consensus_id); + }else{ + document.body.innerHTML="<div style='color:white;font-size:64px'>No ClaimID Specified.<br><a href='index.html' style='color:#88f'>back</a></div>"; + } } function updateToNew(json){ - var t2=createJSONTreeInfo(json) - updateJSONTreeDiff(treeInfo.root,t2.root); - + var t2=createJSONTreeInfo(json) + updateJSONTreeDiff(treeInfo.root,t2.root); + + updateNode(treeInfo.root); + treeInfo.newLayout=t2.layout; + var cnt=0,time=500; + var time0=new Date(); + var prevCnt=0; + function tfunc(t){return 2*t-t*t} + function animation(){ + var cnt=(new Date()-time0)/time; + if(cnt<1){ + if(prevCnt!=cnt){ + var pt=tfunc(prevCnt); + var t=tfunc(cnt); + animateTree((t-1)/(pt-t)); + prevCnt=cnt; + + } + setTimeout(animation,10); + }else{ + animateTree(0); + } updateNode(treeInfo.root); - treeInfo.newLayout=t2.layout; - var cnt=0,time=500; - var time0=new Date(); - var prevCnt=0; - function tfunc(t){return 2*t-t*t} - function animation(){ - var cnt=(new Date()-time0)/time; - if(cnt<1){ - if(prevCnt!=cnt){ - var pt=tfunc(prevCnt); - var t=tfunc(cnt); - animateTree((t-1)/(pt-t)); - prevCnt=cnt; - - } - setTimeout(animation,10); - }else{ - animateTree(0); - } - updateNode(treeInfo.root); - updateTree(); - } - animation(); + updateTree(); + } + animation(); } var ViewParam={ - offsetTop:100, - offsetBottom:100, - offsetLeft:100, - offsetRight:100, - nodeWidth:120, - nodeHeight:60, - intervalX:140, - intervalY:120 + offsetTop:100, + offsetBottom:100, + offsetLeft:100, + offsetRight:100, + nodeWidth:120, + nodeHeight:60, + intervalX:140, + intervalY:120 }; function animateTree(t){ - function animateNodePosition(node,t){ - node.position.x=(node.position.x*t+node.newPosition.x)/(1+t); - node.position.y=(node.position.y*t+node.newPosition.y)/(1+t); - for(var i=0;i<node.mentions.length;i++){ - animateNodePosition(node.mentions[i],t); - } - if(t==0){ - if(node.newPosition.remove){ - jsPlumb.removeAllEndpoints(node.view); - $(node.view).remove(); - } - node.mentions=node.mentions.filter(function(n){return !n.newPosition.remove}); - } + function animateNodePosition(node,t){ + node.position.x=(node.position.x*t+node.newPosition.x)/(1+t); + node.position.y=(node.position.y*t+node.newPosition.y)/(1+t); + for(var i=0;i<node.mentions.length;i++){ + animateNodePosition(node.mentions[i],t); } - animateNodePosition(treeInfo.root,t); - treeInfo.layout.left=(treeInfo.layout.left*t+treeInfo.newLayout.left)/(1+t); - treeInfo.layout.right=(treeInfo.layout.right*t+treeInfo.newLayout.right)/(1+t); - treeInfo.layout.depth=(treeInfo.layout.depth*t+treeInfo.newLayout.depth)/(1+t); + if(t==0){ + if(node.newPosition.remove){ + jsPlumb.removeAllEndpoints(node.view); + $(node.view).remove(); + } + node.mentions=node.mentions.filter(function(n){return !n.newPosition.remove}); + } + } + animateNodePosition(treeInfo.root,t); + treeInfo.layout.left=(treeInfo.layout.left*t+treeInfo.newLayout.left)/(1+t); + treeInfo.layout.right=(treeInfo.layout.right*t+treeInfo.newLayout.right)/(1+t); + treeInfo.layout.depth=(treeInfo.layout.depth*t+treeInfo.newLayout.depth)/(1+t); } function updateTree(){ - with(treeInfo.layout){ - $("#treeRoot").css({ - left:ViewParam.offsetLeft+ViewParam.nodeWidth/2-ViewParam.intervalX*left, - top:ViewParam.offsetTop+ViewParam.nodeHeight/2}); - $("#treeMain").css({ - width:ViewParam.intervalX*(right-left)+ViewParam.nodeWidth+ViewParam.offsetLeft+ViewParam.offsetRight, - height:ViewParam.intervalY*(depth-1)+ViewParam.nodeHeight+ViewParam.offsetTop+ViewParam.offsetBottom, - top:50}); - } - jsPlumb.repaintEverything(); + with(treeInfo.layout){ + $("#treeRoot").css({ + left:ViewParam.offsetLeft+ViewParam.nodeWidth/2-ViewParam.intervalX*left, + top:ViewParam.offsetTop+ViewParam.nodeHeight/2}); + $("#treeMain").css({ + width:ViewParam.intervalX*(right-left)+ViewParam.nodeWidth+ViewParam.offsetLeft+ViewParam.offsetRight, + height:ViewParam.intervalY*(depth-1)+ViewParam.nodeHeight+ViewParam.offsetTop+ViewParam.offsetBottom, + top:50}); + } + jsPlumb.repaintEverything(); } var relationJPMap={ - suggestion:"提案", - refutation:"反論", - question:"質問" + suggestion:"提案", + refutation:"反論", + question:"質問" }; function updateNode(node){ - if(updateClaimElement(node)){ - var fc=$("#treeRoot")[0].firstChild; - if(fc)$("#treeRoot")[0].insertBefore(node.view[0],fc); - else $("#treeRoot").append(node.view); + if(updateClaimElement(node)){ + var fc=$("#treeRoot")[0].firstChild; + if(fc)$("#treeRoot")[0].insertBefore(node.view[0],fc); + else $("#treeRoot").append(node.view); + } + node.view.css({ + left:node.position.x*ViewParam.intervalX-ViewParam.nodeWidth/2, + top:node.position.y*ViewParam.intervalY-ViewParam.nodeHeight/2 + }); + var childs=node.mentions; + for(var i=0;i<childs.length;i++){ + var child=childs[i]; + var created=!child.view; + updateNode(child); + if(created){ + var c=jsPlumb.connect({source:node.view[0],target:child.view[0]}); + c.setLabel({label:"<span style='color:white'>"+(relationJPMap[child.relation]||child.relation)+"</span>",cssStyle:"color:white"}); } - node.view.css({ - left:node.position.x*ViewParam.intervalX-ViewParam.nodeWidth/2, - top:node.position.y*ViewParam.intervalY-ViewParam.nodeHeight/2 - }); - var childs=node.mentions; - for(var i=0;i<childs.length;i++){ - var child=childs[i]; - var created=!child.view; - updateNode(child); - if(created){ - var c=jsPlumb.connect({source:node.view[0],target:child.view[0]}); - c.setLabel({label:"<span style='color:white'>"+(relationJPMap[child.relation]||child.relation)+"</span>",cssStyle:"color:white"}); - } - } + } } var focusedUser=null; function setFocusedShadowEverything(){ - function recFocusShadow(node){ - setFocusedShadow(node); - for(var i=0;i<node.mentions.length;i++){ - recFocusShadow(node.mentions[i]); - } + function recFocusShadow(node){ + setFocusedShadow(node); + for(var i=0;i<node.mentions.length;i++){ + recFocusShadow(node.mentions[i]); } - recFocusShadow(treeInfo.root); + } + recFocusShadow(treeInfo.root); } function setFocusedShadow(node){ - var name=focusedUser||userName; - var color; - console.log(node.info.author) - if(node.info.author==name)color="#afa"; - else{ - var users=node.info.users,status; - for(var i=0;i<users.length;i++){ - var u=users[i]; - if(u.id==name){status=u.status;break;} - } - color=({agreed:"#aaf",denied:"#faa",pend:"white",unknown:"white"})[status]; + var name=focusedUser||userName; + var color; + // console.log(node.info.author) + if(node.info.author==name)color="#afa"; + else{ + var users=node.info.users,status; + for(var i=0;i<users.length;i++){ + var u=users[i]; + if(u.id==name){status=u.status;break;} } - node.view.css("box-shadow",color?color+" 0 0 30px":"none"); + color=({agreed:"#aaf",denied:"#faa",pend:"white",unknown:"white"})[status]; + } + node.view.css("box-shadow",color?color+" 0 0 30px":"none"); +} +function appendStatusElement(viewDiv, status){ + var statusView = $("<div class='nodeStatus'/>"); + statusView.text(status); + statusView.css({ + left:0, + top:-5 + }); + viewDiv[0].appendChild(statusView[0]); } function updateClaimElement(node){ - var created=false; - if(!node.view){ - created=true - node.view=$("<div class='claimNode'/>"); - node.view.click(function(){showClaim(node);}); - node.view.hover( - function(){div.css("box-shadow","white 0 0 50px");showUserList(node.info.users,node.info.author)}, - function(){try{setFocusedShadow(node);}catch(e){/*console.log(e)*/;}showUserList([])} - ) - } - setFocusedShadow(node); - var div=node.view; - div.text(node.info.toulmin.title); - var statusBackground={pass:"#aaf",unknown:"#fff",failed:"#faa",fail:"#faa"}; - var statusBorder={pass:"#66a",unknown:"#aaa",failed:"#a66",fail:"#a66"}; - div.css("background",statusBackground[node.info.status]||"white"); - div.css("border-color",statusBorder[node.info.status]||"white"); - return created; + var created=false; + if(!node.view){ + created=true + node.view=$("<div class='claimNode'/>"); + node.view.click(function(){showClaim(node);}); + node.view.hover( + function(){div.css("box-shadow","white 0 0 50px");showUserList(node.info.users,node.info.author)}, + function(){try{setFocusedShadow(node);}catch(e){/*console.log(e)*/;}showUserList([])} + ) + } + setFocusedShadow(node); + var div=node.view; + div.text(node.info.toulmin.title); + appendStatusElement(node.view, node.info.status); + var statusBackground={pass:"#aaf",unknown:"#fff",failed:"#faa",fail:"#faa"}; + var statusBorder={pass:"#66a",unknown:"#aaa",failed:"#a66",fail:"#a66"}; + div.css("background",statusBackground[node.info.status]||"white"); + div.css("border-color",statusBorder[node.info.status]||"white"); + return created; } function showUserList(users,author){ - var statusMap={}; - var userListElement=$(".userList"); - userListElement.text('') - if(author)statusMap['#'+author]='author'; - for(var i=0;i<users.length;i++){ - statusMap['#'+users[i].id]=users[i].status; + var statusMap={}; + var userListElement=$(".userList"); + userListElement.text('') + if(author)statusMap['#'+author]='author'; + for(var i=0;i<users.length;i++){ + statusMap['#'+users[i].id]=users[i].status; + } + for(var i=0;i<userList.length;i++){ + var u=userList[i]; + var ue=createUserElement(u==userName?"あなた("+u+")":u,statusMap['#'+u]); + if(u==userName){ + ue.css({fontWeight:"bold"}) } - for(var i=0;i<userList.length;i++){ - var u=userList[i]; - var ue=createUserElement(u==userName?"あなた("+u+")":u,statusMap['#'+u]); - if(u==userName){ - ue.css({fontWeight:"bold"}) + ue.appendTo(userListElement); + with({name:u,element:ue}){ + ue.hover( + function(){ + element.css("opacity",1); + focusedUser=name;setFocusedShadowEverything() + }, + function(){ + element.css("opacity",0.5); + focusedUser=userName;setFocusedShadowEverything() } - ue.appendTo(userListElement); - with({name:u,element:ue}){ - ue.hover( - function(){ - element.css("opacity",1); - focusedUser=name;setFocusedShadowEverything() - }, - function(){ - element.css("opacity",0.5); - focusedUser=userName;setFocusedShadowEverything() - } - ) - } - + ) } - $(".userList").css("opacity","1"); + + } + $(".userList").css("opacity","1"); } function hideUserList(){ - $(".userStatus").css("background","none"); - $(".userItem").css("opacity","1"); - $(".userList").css("opacity","0.2"); + $(".userStatus").css("background","none"); + $(".userItem").css("opacity","1"); + $(".userList").css("opacity","0.2"); } </script> <style> -div.claimNode{ - z-index:20; - position:absolute;width:92px;height:40px;font-size:12px;padding:4px;background:white; - border:2px solid silver; - overflow:hidden; - border-radius:5px; - cursor:pointer; -} body{background-color:black;} - -div.userList{ - position:fixed; - z-index:30; - right:0;top:0; - width:160px; +div.revisionSlider{ + position:absolute; + left:0;top:70px; + z-index:5; + width:50%; } -div.header{ - position:absolute; - left:0;top:0; - z-index:5; - height:50px; - width:100%; - background:#223; - background:-moz-linear-gradient(top,#002,#223); - background:-webkit-gradient(linear,left top,left bottom,from(#002),to(#223)); - color:silver; - font-size:40px; -} -div.revision{ - position:absolute; - left:0;top:50px; - z-index:5; - height:25px; - width:100%; - color:silver; - font-size:20px; -} - </style> <script> function resetMentionForm(){ @@ -473,12 +453,20 @@ } } +$(function() { + $('#slider').slider({ step:5, + slide: function(event, ui){ console.log(ui.value); }, + stop: function(event, ui){ console.log(ui.value); } + }); + + $('#slider').slider(); +}); </script> <div class='header'> <nobr id='header_title'><a href='index.html'>Home</a><span id='headertitle_main' style='margin-left:40px;'>loading</span></nobr> </div> -<div class="revision" id="revisionId"> -</div> +<div class="revision" id="revisionId"></div> +<div class="revisionSlider" id="slider" style='left:10px;' ></div> <div style="position:relative;left:0;top:0;" id='treeMain'> <div style="position:absolute;width:0;height:0;left:100;" id='treeRoot'>