Mercurial > hg > Members > nobuyasu > Consensus
comparison 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 |
comparison
equal
deleted
inserted
replaced
118:3440be06e501 | 119:aa5daf38f3e9 |
---|---|
1 <meta http-equiv="content-type" content="text/html;charset=utf-8" /> | 1 <meta http-equiv="content-type" content="text/html;charset=utf-8" /> |
2 <title>R-Consensus</title> | 2 <title>R-Consensus</title> |
3 <link rel='stylesheet' href="form.css"> | 3 <link rel='stylesheet' href="form.css"> |
4 <link rel="stylesheet" href="jquery-ui.css"> | |
4 <script src='form.js'></script> | 5 <script src='form.js'></script> |
5 <script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script> | 6 <script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script> |
6 <script type="text/javascript" src="js/lib/jquery-ui-1.8.23-min.js"></script> | 7 <script type="text/javascript" src="js/lib/jquery-ui-1.8.23-min.js"></script> |
7 <script type="text/javascript" src="js/lib/jquery.ui.touch-punch.min.js"></script> | 8 <script type="text/javascript" src="js/lib/jquery.ui.touch-punch.min.js"></script> |
8 <script type="text/javascript" src="js/lib/jsBezier-0.4-min.js"></script> | 9 <script type="text/javascript" src="js/lib/jsBezier-0.4-min.js"></script> |
14 <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-canvas-1.3.15-RC1.js"></script> | 15 <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-canvas-1.3.15-RC1.js"></script> |
15 <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-vml-1.3.15-RC1.js"></script> | 16 <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-vml-1.3.15-RC1.js"></script> |
16 <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script> | 17 <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script> |
17 <script type="text/javascript" src='treeArrangement.js'></script> | 18 <script type="text/javascript" src='treeArrangement.js'></script> |
18 <script type="text/javascript"> | 19 <script type="text/javascript"> |
19 var LOAD_INTERVAL=5; | 20 var LOAD_INTERVAL=5; |
20 var BASE_URL=""; | 21 var BASE_URL=""; |
21 if(!Array.prototype.filter){ | 22 if(!Array.prototype.filter){ |
22 Array.prototype.filter=function(func){ | 23 Array.prototype.filter=function(func){ |
23 var arr=[]; | 24 var arr=[]; |
24 for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]); | 25 for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]); |
25 return arr; | 26 return arr; |
26 } | 27 } |
27 } | 28 } |
28 | 29 |
29 var userName; | 30 var userName; |
30 | |
31 var treeInfo; | 31 var treeInfo; |
32 var userList=[]; | 32 var userList=[]; |
33 var root_id; | 33 var root_id; |
34 function loadConsensus(id){ | 34 function loadConsensus(id){ |
35 function onload(json){ | 35 function onload(json){ |
36 document.title="R-Consensus:"+json.toulmin.title; | 36 document.title="R-Consensus:"+json.toulmin.title; |
37 $("#headertitle_main").text(json.toulmin.title) | 37 $("#headertitle_main").text(json.toulmin.title) |
38 if(treeInfo){ | 38 if(treeInfo){ |
39 updateToNew(json); | 39 updateToNew(json); |
40 }else{ | 40 }else{ |
41 // console.log(JSON.parse(JSON.stringify(json))); | 41 console.log(JSON.parse(JSON.stringify(json))); |
42 treeInfo=createJSONTreeInfo(json) | 42 treeInfo=createJSONTreeInfo(json) |
43 //userList=getUserListFromJSONTree(treeInfo.root); | 43 //userList=getUserListFromJSONTree(treeInfo.root); |
44 showUserList([]); | 44 showUserList([]); |
45 updateNode(treeInfo.root); | 45 updateNode(treeInfo.root); |
46 updateTree(); | 46 updateTree(); |
47 } | 47 } |
48 } | 48 } |
49 $.ajax({ | 49 $.ajax({ |
50 url:BASE_URL+"/consensus/browse/"+id, | 50 url:BASE_URL+"/consensus/browse/"+id, |
51 success:function(o){onload(o)}, | 51 success:function(o){onload(o)}, |
52 type:"GET",cache:false, | 52 type:"GET",cache:false, |
53 error:function(o){console.log("ERROR",o)} | 53 error:function(o){console.log("ERROR",o)} |
54 }); | 54 }); |
55 } | 55 } |
56 function loadUserList(){ | 56 function loadUserList(){ |
57 $.ajax({ | 57 $.ajax({ |
58 url:BASE_URL+"/users/all", | 58 url:BASE_URL+"/users/all", |
59 success:function(o){userList=o.sort();showUserList([]);}, | 59 success:function(o){userList=o.sort();showUserList([]);}, |
60 type:"GET",cache:false, | 60 type:"GET",cache:false, |
61 error:function(o){console.log("ERROR",o)} | 61 error:function(o){console.log("ERROR",o)} |
62 }); | 62 }); |
63 } | 63 } |
64 | 64 |
65 function loadRevisionInfo(consensus_id) { | 65 function loadRevisionInfo(consensus_id) { |
66 $.ajax({ | 66 $.ajax({ |
67 url:BASE_URL+"/claims/get/revision/"+consensus_id, | 67 url:BASE_URL+"/claims/get/revision/"+consensus_id, |
68 success:function(o){createOptionTag(consensus_id, o); console.log("revision = "+ o)}, | 68 success:function(o){createOptionTag(consensus_id, o); console.log("revision = "+ o)}, |
69 type:"GET",cache:false, | 69 type:"GET",cache:false, |
70 error:function(o){console.log("ERROR",o)} | 70 error:function(o){console.log("ERROR",o)} |
71 }); | 71 }); |
72 } | 72 } |
73 | 73 |
74 function changeRevision(id) { | 74 function changeRevision(id) { |
75 root_id = id; | 75 root_id = id; |
76 loadConsensus(id); | 76 loadConsensus(id); |
77 } | 77 } |
78 | 78 |
79 function createOptionTag(consensus_id, revisionInfo) { | 79 function createOptionTag(consensus_id, revisionInfo) { |
80 var selectArray = new Array(); | 80 var selectArray = new Array(); |
81 selectArray.push('<select onchange="changeRevision(this.value)" >'); | 81 selectArray.push('<select onchange="changeRevision(this.value)" >'); |
82 for (var i=0; i<revisionInfo.length; i++) { | 82 for (var i=0; i<revisionInfo.length; i++) { |
83 selectArray.push("<option>"+revisionInfo[i]+"</option>"); | 83 var revision = revisionInfo.length - i; |
84 } | 84 selectArray.push("<option value='"+revisionInfo[i]+"'>"+revision+"</option>"); |
85 selectArray.push("</select>"); | 85 } |
86 $('#revisionId')[0].innerHTML = "revision:"+selectArray.join(); | 86 selectArray.push("</select>"); |
87 $('#revisionId')[0].children[0].value = consensus_id; | 87 $('#revisionId')[0].innerHTML = "revision:"+selectArray.join(); |
88 // $('#revisionId')[0].children[0].value = consensus_id; | |
88 } | 89 } |
89 | 90 |
90 $(function(){ | 91 $(function(){ |
91 userName=localStorage.userName; | 92 userName=localStorage.userName; |
92 if(userName)start(); | 93 if(userName)start(); |
93 else $("#loginPopup").css("display","block"); | 94 else $("#loginPopup").css("display","block"); |
94 }) | 95 }) |
95 function login(uname){ | 96 function login(uname){ |
96 userName=localStorage.userName=uname; | 97 userName=localStorage.userName=uname; |
97 start(); | 98 start(); |
98 } | 99 } |
99 function start(){ | 100 function start(){ |
100 popupInit(); | 101 popupInit(); |
101 jsPlumb.importDefaults({ | 102 jsPlumb.importDefaults({ |
102 Connector : [ "Straight", { curviness:50 } ], | 103 Connector : [ "Straight", { curviness:50 } ], |
103 PaintStyle : { strokeStyle:"gray", lineWidth:2 }, | 104 PaintStyle : { strokeStyle:"gray", lineWidth:2 }, |
104 EndpointStyle : {}, | 105 EndpointStyle : {}, |
105 Anchors: ["BottomCenter","TopCenter"] | 106 Anchors: ["BottomCenter","TopCenter"] |
106 }); | 107 }); |
107 var consensus_id=(location.search.match("[0-9]+")||[])[0]; | 108 var consensus_id=(location.search.match("[0-9]+")||[])[0]; |
108 if(consensus_id){ | 109 if(consensus_id){ |
109 root_id=consensus_id; | 110 root_id=consensus_id; |
110 loadUserList(); | 111 loadUserList(); |
111 loadRevisionInfo(consensus_id); | 112 loadRevisionInfo(consensus_id); |
112 loadConsensus(consensus_id); | 113 loadConsensus(consensus_id); |
114 }else{ | |
115 document.body.innerHTML="<div style='color:white;font-size:64px'>No ClaimID Specified.<br><a href='index.html' style='color:#88f'>back</a></div>"; | |
116 } | |
117 } | |
118 | |
119 function updateToNew(json){ | |
120 var t2=createJSONTreeInfo(json) | |
121 updateJSONTreeDiff(treeInfo.root,t2.root); | |
122 | |
123 updateNode(treeInfo.root); | |
124 treeInfo.newLayout=t2.layout; | |
125 var cnt=0,time=500; | |
126 var time0=new Date(); | |
127 var prevCnt=0; | |
128 function tfunc(t){return 2*t-t*t} | |
129 function animation(){ | |
130 var cnt=(new Date()-time0)/time; | |
131 if(cnt<1){ | |
132 if(prevCnt!=cnt){ | |
133 var pt=tfunc(prevCnt); | |
134 var t=tfunc(cnt); | |
135 animateTree((t-1)/(pt-t)); | |
136 prevCnt=cnt; | |
137 | |
138 } | |
139 setTimeout(animation,10); | |
113 }else{ | 140 }else{ |
114 document.body.innerHTML="<div style='color:white;font-size:64px'>No ClaimID Specified.<br><a href='index.html' style='color:#88f'>back</a></div>"; | 141 animateTree(0); |
115 } | 142 } |
116 } | |
117 | |
118 function updateToNew(json){ | |
119 var t2=createJSONTreeInfo(json) | |
120 updateJSONTreeDiff(treeInfo.root,t2.root); | |
121 | |
122 updateNode(treeInfo.root); | 143 updateNode(treeInfo.root); |
123 treeInfo.newLayout=t2.layout; | 144 updateTree(); |
124 var cnt=0,time=500; | 145 } |
125 var time0=new Date(); | 146 animation(); |
126 var prevCnt=0; | |
127 function tfunc(t){return 2*t-t*t} | |
128 function animation(){ | |
129 var cnt=(new Date()-time0)/time; | |
130 if(cnt<1){ | |
131 if(prevCnt!=cnt){ | |
132 var pt=tfunc(prevCnt); | |
133 var t=tfunc(cnt); | |
134 animateTree((t-1)/(pt-t)); | |
135 prevCnt=cnt; | |
136 | |
137 } | |
138 setTimeout(animation,10); | |
139 }else{ | |
140 animateTree(0); | |
141 } | |
142 updateNode(treeInfo.root); | |
143 updateTree(); | |
144 } | |
145 animation(); | |
146 } | 147 } |
147 | 148 |
148 var ViewParam={ | 149 var ViewParam={ |
149 offsetTop:100, | 150 offsetTop:100, |
150 offsetBottom:100, | 151 offsetBottom:100, |
151 offsetLeft:100, | 152 offsetLeft:100, |
152 offsetRight:100, | 153 offsetRight:100, |
153 nodeWidth:120, | 154 nodeWidth:120, |
154 nodeHeight:60, | 155 nodeHeight:60, |
155 intervalX:140, | 156 intervalX:140, |
156 intervalY:120 | 157 intervalY:120 |
157 }; | 158 }; |
158 | 159 |
159 function animateTree(t){ | 160 function animateTree(t){ |
160 function animateNodePosition(node,t){ | 161 function animateNodePosition(node,t){ |
161 node.position.x=(node.position.x*t+node.newPosition.x)/(1+t); | 162 node.position.x=(node.position.x*t+node.newPosition.x)/(1+t); |
162 node.position.y=(node.position.y*t+node.newPosition.y)/(1+t); | 163 node.position.y=(node.position.y*t+node.newPosition.y)/(1+t); |
163 for(var i=0;i<node.mentions.length;i++){ | 164 for(var i=0;i<node.mentions.length;i++){ |
164 animateNodePosition(node.mentions[i],t); | 165 animateNodePosition(node.mentions[i],t); |
165 } | 166 } |
166 if(t==0){ | 167 if(t==0){ |
167 if(node.newPosition.remove){ | 168 if(node.newPosition.remove){ |
168 jsPlumb.removeAllEndpoints(node.view); | 169 jsPlumb.removeAllEndpoints(node.view); |
169 $(node.view).remove(); | 170 $(node.view).remove(); |
170 } | 171 } |
171 node.mentions=node.mentions.filter(function(n){return !n.newPosition.remove}); | 172 node.mentions=node.mentions.filter(function(n){return !n.newPosition.remove}); |
172 } | 173 } |
173 } | 174 } |
174 animateNodePosition(treeInfo.root,t); | 175 animateNodePosition(treeInfo.root,t); |
175 treeInfo.layout.left=(treeInfo.layout.left*t+treeInfo.newLayout.left)/(1+t); | 176 treeInfo.layout.left=(treeInfo.layout.left*t+treeInfo.newLayout.left)/(1+t); |
176 treeInfo.layout.right=(treeInfo.layout.right*t+treeInfo.newLayout.right)/(1+t); | 177 treeInfo.layout.right=(treeInfo.layout.right*t+treeInfo.newLayout.right)/(1+t); |
177 treeInfo.layout.depth=(treeInfo.layout.depth*t+treeInfo.newLayout.depth)/(1+t); | 178 treeInfo.layout.depth=(treeInfo.layout.depth*t+treeInfo.newLayout.depth)/(1+t); |
178 } | 179 } |
179 | 180 |
180 function updateTree(){ | 181 function updateTree(){ |
181 with(treeInfo.layout){ | 182 with(treeInfo.layout){ |
182 $("#treeRoot").css({ | 183 $("#treeRoot").css({ |
183 left:ViewParam.offsetLeft+ViewParam.nodeWidth/2-ViewParam.intervalX*left, | 184 left:ViewParam.offsetLeft+ViewParam.nodeWidth/2-ViewParam.intervalX*left, |
184 top:ViewParam.offsetTop+ViewParam.nodeHeight/2}); | 185 top:ViewParam.offsetTop+ViewParam.nodeHeight/2}); |
185 $("#treeMain").css({ | 186 $("#treeMain").css({ |
186 width:ViewParam.intervalX*(right-left)+ViewParam.nodeWidth+ViewParam.offsetLeft+ViewParam.offsetRight, | 187 width:ViewParam.intervalX*(right-left)+ViewParam.nodeWidth+ViewParam.offsetLeft+ViewParam.offsetRight, |
187 height:ViewParam.intervalY*(depth-1)+ViewParam.nodeHeight+ViewParam.offsetTop+ViewParam.offsetBottom, | 188 height:ViewParam.intervalY*(depth-1)+ViewParam.nodeHeight+ViewParam.offsetTop+ViewParam.offsetBottom, |
188 top:50}); | 189 top:50}); |
189 } | 190 } |
190 jsPlumb.repaintEverything(); | 191 jsPlumb.repaintEverything(); |
191 } | 192 } |
192 | 193 |
193 | 194 |
194 var relationJPMap={ | 195 var relationJPMap={ |
195 suggestion:"提案", | 196 suggestion:"提案", |
196 refutation:"反論", | 197 refutation:"反論", |
197 question:"質問" | 198 question:"質問" |
198 }; | 199 }; |
199 function updateNode(node){ | 200 function updateNode(node){ |
200 if(updateClaimElement(node)){ | 201 if(updateClaimElement(node)){ |
201 var fc=$("#treeRoot")[0].firstChild; | 202 var fc=$("#treeRoot")[0].firstChild; |
202 if(fc)$("#treeRoot")[0].insertBefore(node.view[0],fc); | 203 if(fc)$("#treeRoot")[0].insertBefore(node.view[0],fc); |
203 else $("#treeRoot").append(node.view); | 204 else $("#treeRoot").append(node.view); |
204 } | 205 } |
205 node.view.css({ | 206 node.view.css({ |
206 left:node.position.x*ViewParam.intervalX-ViewParam.nodeWidth/2, | 207 left:node.position.x*ViewParam.intervalX-ViewParam.nodeWidth/2, |
207 top:node.position.y*ViewParam.intervalY-ViewParam.nodeHeight/2 | 208 top:node.position.y*ViewParam.intervalY-ViewParam.nodeHeight/2 |
208 }); | 209 }); |
209 var childs=node.mentions; | 210 var childs=node.mentions; |
210 for(var i=0;i<childs.length;i++){ | 211 for(var i=0;i<childs.length;i++){ |
211 var child=childs[i]; | 212 var child=childs[i]; |
212 var created=!child.view; | 213 var created=!child.view; |
213 updateNode(child); | 214 updateNode(child); |
214 if(created){ | 215 if(created){ |
215 var c=jsPlumb.connect({source:node.view[0],target:child.view[0]}); | 216 var c=jsPlumb.connect({source:node.view[0],target:child.view[0]}); |
216 c.setLabel({label:"<span style='color:white'>"+(relationJPMap[child.relation]||child.relation)+"</span>",cssStyle:"color:white"}); | 217 c.setLabel({label:"<span style='color:white'>"+(relationJPMap[child.relation]||child.relation)+"</span>",cssStyle:"color:white"}); |
217 } | 218 } |
218 } | 219 } |
219 } | 220 } |
220 | 221 |
221 var focusedUser=null; | 222 var focusedUser=null; |
222 function setFocusedShadowEverything(){ | 223 function setFocusedShadowEverything(){ |
223 function recFocusShadow(node){ | 224 function recFocusShadow(node){ |
224 setFocusedShadow(node); | 225 setFocusedShadow(node); |
225 for(var i=0;i<node.mentions.length;i++){ | 226 for(var i=0;i<node.mentions.length;i++){ |
226 recFocusShadow(node.mentions[i]); | 227 recFocusShadow(node.mentions[i]); |
228 } | |
229 } | |
230 recFocusShadow(treeInfo.root); | |
231 } | |
232 function setFocusedShadow(node){ | |
233 var name=focusedUser||userName; | |
234 var color; | |
235 // console.log(node.info.author) | |
236 if(node.info.author==name)color="#afa"; | |
237 else{ | |
238 var users=node.info.users,status; | |
239 for(var i=0;i<users.length;i++){ | |
240 var u=users[i]; | |
241 if(u.id==name){status=u.status;break;} | |
242 } | |
243 color=({agreed:"#aaf",denied:"#faa",pend:"white",unknown:"white"})[status]; | |
244 } | |
245 node.view.css("box-shadow",color?color+" 0 0 30px":"none"); | |
246 } | |
247 function appendStatusElement(viewDiv, status){ | |
248 var statusView = $("<div class='nodeStatus'/>"); | |
249 statusView.text(status); | |
250 statusView.css({ | |
251 left:0, | |
252 top:-5 | |
253 }); | |
254 viewDiv[0].appendChild(statusView[0]); | |
255 } | |
256 function updateClaimElement(node){ | |
257 var created=false; | |
258 if(!node.view){ | |
259 created=true | |
260 node.view=$("<div class='claimNode'/>"); | |
261 node.view.click(function(){showClaim(node);}); | |
262 node.view.hover( | |
263 function(){div.css("box-shadow","white 0 0 50px");showUserList(node.info.users,node.info.author)}, | |
264 function(){try{setFocusedShadow(node);}catch(e){/*console.log(e)*/;}showUserList([])} | |
265 ) | |
266 } | |
267 setFocusedShadow(node); | |
268 var div=node.view; | |
269 div.text(node.info.toulmin.title); | |
270 appendStatusElement(node.view, node.info.status); | |
271 var statusBackground={pass:"#aaf",unknown:"#fff",failed:"#faa",fail:"#faa"}; | |
272 var statusBorder={pass:"#66a",unknown:"#aaa",failed:"#a66",fail:"#a66"}; | |
273 div.css("background",statusBackground[node.info.status]||"white"); | |
274 div.css("border-color",statusBorder[node.info.status]||"white"); | |
275 return created; | |
276 } | |
277 | |
278 | |
279 function showUserList(users,author){ | |
280 var statusMap={}; | |
281 var userListElement=$(".userList"); | |
282 userListElement.text('') | |
283 if(author)statusMap['#'+author]='author'; | |
284 for(var i=0;i<users.length;i++){ | |
285 statusMap['#'+users[i].id]=users[i].status; | |
286 } | |
287 for(var i=0;i<userList.length;i++){ | |
288 var u=userList[i]; | |
289 var ue=createUserElement(u==userName?"あなた("+u+")":u,statusMap['#'+u]); | |
290 if(u==userName){ | |
291 ue.css({fontWeight:"bold"}) | |
292 } | |
293 ue.appendTo(userListElement); | |
294 with({name:u,element:ue}){ | |
295 ue.hover( | |
296 function(){ | |
297 element.css("opacity",1); | |
298 focusedUser=name;setFocusedShadowEverything() | |
299 }, | |
300 function(){ | |
301 element.css("opacity",0.5); | |
302 focusedUser=userName;setFocusedShadowEverything() | |
227 } | 303 } |
228 } | 304 ) |
229 recFocusShadow(treeInfo.root); | 305 } |
230 } | 306 |
231 function setFocusedShadow(node){ | 307 } |
232 var name=focusedUser||userName; | 308 $(".userList").css("opacity","1"); |
233 var color; | |
234 console.log(node.info.author) | |
235 if(node.info.author==name)color="#afa"; | |
236 else{ | |
237 var users=node.info.users,status; | |
238 for(var i=0;i<users.length;i++){ | |
239 var u=users[i]; | |
240 if(u.id==name){status=u.status;break;} | |
241 } | |
242 color=({agreed:"#aaf",denied:"#faa",pend:"white",unknown:"white"})[status]; | |
243 } | |
244 node.view.css("box-shadow",color?color+" 0 0 30px":"none"); | |
245 } | |
246 function updateClaimElement(node){ | |
247 var created=false; | |
248 if(!node.view){ | |
249 created=true | |
250 node.view=$("<div class='claimNode'/>"); | |
251 node.view.click(function(){showClaim(node);}); | |
252 node.view.hover( | |
253 function(){div.css("box-shadow","white 0 0 50px");showUserList(node.info.users,node.info.author)}, | |
254 function(){try{setFocusedShadow(node);}catch(e){/*console.log(e)*/;}showUserList([])} | |
255 ) | |
256 } | |
257 setFocusedShadow(node); | |
258 var div=node.view; | |
259 div.text(node.info.toulmin.title); | |
260 var statusBackground={pass:"#aaf",unknown:"#fff",failed:"#faa",fail:"#faa"}; | |
261 var statusBorder={pass:"#66a",unknown:"#aaa",failed:"#a66",fail:"#a66"}; | |
262 div.css("background",statusBackground[node.info.status]||"white"); | |
263 div.css("border-color",statusBorder[node.info.status]||"white"); | |
264 return created; | |
265 } | |
266 | |
267 | |
268 function showUserList(users,author){ | |
269 var statusMap={}; | |
270 var userListElement=$(".userList"); | |
271 userListElement.text('') | |
272 if(author)statusMap['#'+author]='author'; | |
273 for(var i=0;i<users.length;i++){ | |
274 statusMap['#'+users[i].id]=users[i].status; | |
275 } | |
276 for(var i=0;i<userList.length;i++){ | |
277 var u=userList[i]; | |
278 var ue=createUserElement(u==userName?"あなた("+u+")":u,statusMap['#'+u]); | |
279 if(u==userName){ | |
280 ue.css({fontWeight:"bold"}) | |
281 } | |
282 ue.appendTo(userListElement); | |
283 with({name:u,element:ue}){ | |
284 ue.hover( | |
285 function(){ | |
286 element.css("opacity",1); | |
287 focusedUser=name;setFocusedShadowEverything() | |
288 }, | |
289 function(){ | |
290 element.css("opacity",0.5); | |
291 focusedUser=userName;setFocusedShadowEverything() | |
292 } | |
293 ) | |
294 } | |
295 | |
296 } | |
297 $(".userList").css("opacity","1"); | |
298 } | 309 } |
299 function hideUserList(){ | 310 function hideUserList(){ |
300 $(".userStatus").css("background","none"); | 311 $(".userStatus").css("background","none"); |
301 $(".userItem").css("opacity","1"); | 312 $(".userItem").css("opacity","1"); |
302 $(".userList").css("opacity","0.2"); | 313 $(".userList").css("opacity","0.2"); |
303 } | 314 } |
304 </script> | 315 </script> |
305 <style> | 316 <style> |
306 div.claimNode{ | |
307 z-index:20; | |
308 position:absolute;width:92px;height:40px;font-size:12px;padding:4px;background:white; | |
309 border:2px solid silver; | |
310 overflow:hidden; | |
311 border-radius:5px; | |
312 cursor:pointer; | |
313 } | |
314 body{background-color:black;} | 317 body{background-color:black;} |
315 | 318 div.revisionSlider{ |
316 div.userList{ | |
317 position:fixed; | |
318 z-index:30; | |
319 right:0;top:0; | |
320 width:160px; | |
321 } | |
322 div.header{ | |
323 position:absolute; | |
324 left:0;top:0; | |
325 z-index:5; | |
326 height:50px; | |
327 width:100%; | |
328 background:#223; | |
329 background:-moz-linear-gradient(top,#002,#223); | |
330 background:-webkit-gradient(linear,left top,left bottom,from(#002),to(#223)); | |
331 color:silver; | |
332 font-size:40px; | |
333 } | |
334 div.revision{ | |
335 position:absolute; | 319 position:absolute; |
336 left:0;top:50px; | 320 left:0;top:70px; |
337 z-index:5; | 321 z-index:5; |
338 height:25px; | 322 width:50%; |
339 width:100%; | 323 } |
340 color:silver; | |
341 font-size:20px; | |
342 } | |
343 | |
344 </style> | 324 </style> |
345 <script> | 325 <script> |
346 function resetMentionForm(){ | 326 function resetMentionForm(){ |
347 var keys=['title','contents','w','d','b','q','r']; | 327 var keys=['title','contents','w','d','b','q','r']; |
348 for(var i=0;i<keys.length;i++)$("#mentionform_"+keys[i]).val(""); | 328 for(var i=0;i<keys.length;i++)$("#mentionform_"+keys[i]).val(""); |
471 }); | 451 }); |
472 popupHideAll(); | 452 popupHideAll(); |
473 } | 453 } |
474 } | 454 } |
475 | 455 |
456 $(function() { | |
457 $('#slider').slider({ step:5, | |
458 slide: function(event, ui){ console.log(ui.value); }, | |
459 stop: function(event, ui){ console.log(ui.value); } | |
460 }); | |
461 | |
462 $('#slider').slider(); | |
463 }); | |
476 </script> | 464 </script> |
477 <div class='header'> | 465 <div class='header'> |
478 <nobr id='header_title'><a href='index.html'>Home</a><span id='headertitle_main' style='margin-left:40px;'>loading</span></nobr> | 466 <nobr id='header_title'><a href='index.html'>Home</a><span id='headertitle_main' style='margin-left:40px;'>loading</span></nobr> |
479 </div> | 467 </div> |
480 <div class="revision" id="revisionId"> | 468 <div class="revision" id="revisionId"></div> |
481 </div> | 469 <div class="revisionSlider" id="slider" style='left:10px;' ></div> |
482 | 470 |
483 <div style="position:relative;left:0;top:0;" id='treeMain'> | 471 <div style="position:relative;left:0;top:0;" id='treeMain'> |
484 <div style="position:absolute;width:0;height:0;left:100;" id='treeRoot'> | 472 <div style="position:absolute;width:0;height:0;left:100;" id='treeRoot'> |
485 </div> | 473 </div> |
486 </div> | 474 </div> |