Mercurial > hg > Members > nobuyasu > Consensus
changeset 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 | 3440be06e501 |
| children | 5ee0a70ab968 |
| files | public/viewer/form.css public/viewer/revisionviewer.html |
| diffstat | 2 files changed, 407 insertions(+), 372 deletions(-) [+] |
line wrap: on
line diff
--- a/public/viewer/form.css Mon Apr 01 13:11:23 2013 +0900 +++ b/public/viewer/form.css Thu Apr 18 06:19:26 2013 +0900 @@ -1,93 +1,93 @@ #popup_base{ - position:fixed; - left:0;top:0; - width:100%;height:100%; + position:fixed; + left:0;top:0; + width:100%;height:100%; } #popup_background{ - position:absolute;background:black; - opacity:0.8; - left:0;top:0; - width:100%;height:100%; + position:absolute;background:black; + opacity:0.8; + left:0;top:0; + width:100%;height:100%; } div.popup_center{ - position:fixed;left:50%;top:50%;width:0;height:0; + position:fixed;left:50%;top:50%;width:0;height:0; } div.claiminfo{ - position:absolute;background:white; - width:600px; - height:400px; - left:-200px;top:-300px; + position:absolute;background:white; + width:600px; + height:400px; + left:-200px;top:-300px; } div.mentioninfo{ - position:absolute;background:white; - width:600px; - height:400px; - left:-300px;top:-200px; - box-shadow:0 0 50px silver; + position:absolute;background:white; + width:600px; + height:400px; + left:-300px;top:-200px; + box-shadow:0 0 50px silver; } div.claim_title{ - position:absolute; - left:0;top:0; - width:600px; - height:60px; - background:#336; + position:absolute; + left:0;top:0; + width:600px; + height:60px; + background:#336; } div.mentioninfo div.claim_title{background:#366;} div.claim_title input{ - position:absolute;left:5;top:5;width:590px;height:50px; - font-size:40px; - color:white; - border:none;background:none; + position:absolute;left:5;top:5;width:590px;height:50px; + font-size:40px; + color:white; + border:none;background:none; } div.claim_menu{ - position:absolute; - left:0;top:60;width:100%;height:30px; - border-bottom:2px solid #66a; - background:#ddd; + position:absolute; + left:0;top:60;width:100%;height:30px; + border-bottom:2px solid #66a; + background:#ddd; } div.mentioninfo div.claim_menu{border-color:#599} div.menu_item{ - position:relative; - display:inline-block; - font-size:20px; - background:white; - border-radius:8px 8px 0 0; - margin:2px 0 0 10px; - padding:0 10px; - background:silver; - height:28px; - line-height:28px; - color:white; - text-align:right; - line-heigth:50px; - cursor:default; - -webkit-user-select:none; + position:relative; + display:inline-block; + font-size:20px; + background:white; + border-radius:8px 8px 0 0; + margin:2px 0 0 10px; + padding:0 10px; + background:silver; + height:28px; + line-height:28px; + color:white; + text-align:right; + line-heigth:50px; + cursor:default; + webkit-user-select:none; } div.claim_main,div.mention_main{ - position:absolute;left:0;top:90;width:600;height:270; + position:absolute;left:0;top:90;width:600;height:270; } div.claiminfo div.claim_main{ - background:-moz-linear-gradient(top,#66a,white 2%,white); - background:-webkit-gradient(linear,left top,left bottom,from(#66a),to(white),color-stop(0.02,white)); + background:-moz-linear-gradient(top,#66a,white 2%,white); + background:-webkit-gradient(linear,left top,left bottom,from(#66a),to(white),color-stop(0.02,white)); } div.mentioninfo div.mention_main{ - background:-moz-linear-gradient(top,#559,white 2%,white); - background:-webkit-gradient(linear,left top,left bottom,from(#599),to(white),color-stop(0.02,white)); + background:-moz-linear-gradient(top,#559,white 2%,white); + background:-webkit-gradient(linear,left top,left bottom,from(#599),to(white),color-stop(0.02,white)); } div.claim_main textarea,div.mention_main textarea{ - font-size:20px; - position:absolute; - width:590px;height:260px; - left:5px;top:5px; - max-width:590px;max-height:290px; + font-size:20px; + position:absolute; + width:590px;height:260px; + left:5px;top:5px; + max-width:590px;max-height:290px; } div.claim_footer{ - position:absolute; - left:0;bottom:00;width:600;height:40px; - background:#336; + position:absolute; + left:0;bottom:00;width:600;height:40px; + background:#336; } div.mentioninfo div.claim_footer{ - background:#366; + background:#366; } .claim_contents .menu_contents{background:#66a;} .claim_toulmin .menu_toulmin{background:#66a;} @@ -106,75 +106,75 @@ .mention_users .main_users{display:block;} div.item_toulmin{ - position:relative; - height:54px; - width:100%; + position:relative; + height:54px; + width:100%; } div.item_toulmin span{ - position:absolute;left:10;top:10;width:90px;height:34px;font-size:24px; + position:absolute;left:10;top:10;width:90px;height:34px;font-size:24px; } div.item_toulmin input{ - position:absolute;left:100;top:10;width:480px;height:34;font-size:24px + position:absolute;left:100;top:10;width:480px;height:34;font-size:24px } #claim_cover,#mention_cover{ - position:absolute;left:0;top:0; - width:100%;height:100%; - background:black; - opacity:0.5; + position:absolute;left:0;top:0; + width:100%;height:100%; + background:black; + opacity:0.5; } span.button{ - background:#eee; - background:-moz-linear-gradient(top,#fff,#ddf); - background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddf)); - border:1px solid gray; - border-radius:4px; - text-align:center; - cursor:default; + background:#eee; + background:-moz-linear-gradient(top,#fff,#ddf); + background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddf)); + border:1px solid gray; + border-radius:4px; + text-align:center; + cursor:default; } span.button:hover{ - background:#bbb; - background:-moz-linear-gradient(top,#ccc,#aac); - background:-webkit-gradient(linear,left top,left bottom,from(#ccc),to(#aac)); + background:#bbb; + background:-moz-linear-gradient(top,#ccc,#aac); + background:-webkit-gradient(linear,left top,left bottom,from(#ccc),to(#aac)); } span.button:active{ - background:#bbb; - background:-moz-linear-gradient(top,#bbb,#88b); - background:-webkit-gradient(linear,left top,left bottom,from(#bbb),to(#88b)); + background:#bbb; + background:-moz-linear-gradient(top,#bbb,#88b); + background:-webkit-gradient(linear,left top,left bottom,from(#bbb),to(#88b)); } div.claim_footer span.button{ - padding:0px 5px; - height:28px; - font-size:24px; - line-height:28px; + padding:0px 5px; + height:28px; + font-size:24px; + line-height:28px; } span.save{ - position:absolute;right:10;top:4; + position:absolute;right:10;top:4; } span.cancel{ - position:absolute;right:80;top:4; + position:absolute;right:80;top:4; } .mention_button{ - position:absolute;left:10;top:4; + position:absolute;left:10;top:4; } span.option{ - font-size:20px; - line-height:28px; - height:28px; - border:1px solid gray; - text-align:center; - background:#eef; - background:-moz-linear-gradient(top,#eef,#bbe); - background:-webkit-gradient(linear,left top,left bottom,from(#eef),to(#bbe)); - color:#888; + font-size:20px; + line-height:28px; + height:28px; + border:1px solid gray; + text-align:center; + background:#eef; + background:-moz-linear-gradient(top,#eef,#bbe); + background:-webkit-gradient(linear,left top,left bottom,from(#eef),to(#bbe)); + color:#888; } .option1 .option1,.option2 .option2,.option3 .option3{ - color:black; - background:#ccb; - background:-moz-linear-gradient(top,#ccb,#88c); - background:-webkit-gradient(linear,left top,left bottom,from(#ccb),to(#88c)); + color:black; + background:#ccb; + background:-moz-linear-gradient(top,#ccb,#88c); + background:-webkit-gradient(linear,left top,left bottom,from(#ccb),to(#88c)); } .agree1{position:absolute;right:130;top:4;width:60px;} @@ -192,32 +192,79 @@ .author_name{position:absolute;left:80;top:4;font-size:20px;line-height:28px;height:28px;} #claim_users,#mention_users{ - position:absolute;left:10;top:36;width:580;height:230; - overflow-y:scroll; + position:absolute;left:10;top:36;width:580;height:230; + overflow-y:scroll; } #claim_status{ - position:absolute; - right:20px;top:0px; - font-size:26px; - line-height:26px; - height:26px; - text-align:center; + position:absolute; + right:20px;top:0px; + font-size:26px; + line-height:26px; + height:26px; + text-align:center; } div.userItem{ - background:white; - padding-left:24px; - font-size:24px; - position:relative; - border-radius:4px; - font-size:24px; - line-height:30px; - margin-bottom:5px + background:white; + padding-left:24px; + font-size:24px; + position:relative; + border-radius:4px; + font-size:24px; + line-height:30px; + margin-bottom:5px } div.userStatus{ - position:absolute;left:2px;top:5px;width:20px;height:20px; - border-radius:10px; -} \ No newline at end of file + position:absolute;left:2px;top:5px;width:20px;height:20px; + border-radius:10px; +} +div.claimNode{ + z-index:20; + position:absolute;width:92px;height:40px;font-size:12px;padding:4px; + background:white; + padding-top:12px; + border:2px solid silver; + overflow:hidden; + border-radius:5px; + cursor:pointer; +} +div.nodeStatus{ + top:-5px; + right:0px; + z-index:40; + position:absolute;width:60px;height:15px;font-size:15px;padding:2px;background:white; + border:1px sold silver; + overflow:hidden; + border-radius:3px; + cursor:pointer; +} +div.userList{ + position:fixed; + z-index:30; + right:0;top:0; + width:160px; +} +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; +}
--- 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'>