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>