Skip to content
18shilue.html 8.24 KiB
Newer Older
Koichi Yasuoka's avatar
Koichi Yasuoka committed
<!DOCTYPE html><head><meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Universal Dependencies on 十八史略</title>
<script src="conllusvgview.js"></script>
<script src="conllusvgload.js"></script>
<script>
var Shilue=new Object();
Shilue.url="/gitlab/api/v4/projects/Kanbun%2Fud-kanbun/repository/";
Shilue.init=function(){
  var t=document.getElementById("top").cloneNode(true);
  t.style.position="static";
  t.style.visibility="hidden";
  document.body.appendChild(t);
  Shilue.svg=new Array();
  Shilue.pre=new Array();
  Shilue.timer=setTimeout("clearTimeout(Shilue.timer);Shilue.checkview()",200);
  Shilue.volchange();
}
Shilue.checkview=function(){
  var t,r,b,i,x;
  Shilue.timer=setTimeout("clearTimeout(Shilue.timer);Shilue.checkview()",200);
  if(Shilue.curr==null)
    return;
  if(Shilue.svg[Shilue.curr]==null||Shilue.pre[Shilue.curr]==null){
    Shilue.buildup(Shilue.curr);
    Shilue.lastTop=null;
    return;
  }
  if(Shilue.svg[Shilue.curr].style.position=="absolute"){
    Shilue.svg[Shilue.curr].style.position="static";
    Shilue.svg[Shilue.curr].style.visibility="visible";
  }
  conllusvg.rewrite("pre"+Shilue.curr);
  r=Shilue.svg[Shilue.curr].getBoundingClientRect();
  t=r.top;
  b=r.bottom;
  r=document.getElementById("top").getBoundingClientRect().bottom;
  x=Shilue.curr;
  if(t-r>20){
    while(t-r>0){
      i=Shilue.svg[Shilue.curr-1];
      if(i==null)
	break;
      if(i.style.position=="absolute")
	break;
      Shilue.curr--;
      if(Shilue.curr==0)
	break;
      t=i.getBoundingClientRect().top;
    }
  }
  else if(b<r){
    while(b<r){
      i=Shilue.svg[Shilue.curr+1];
      if(i==null)
	break;
      if(i.style.position=="absolute")
        break;
      Shilue.curr++;
      if(Shilue.curr==Shilue.currmax)
	break;
      b=i.getBoundingClientRect().bottom;
    }
  }
  Shilue.lastTop=Shilue.svg[Shilue.curr].getBoundingClientRect().top;
  if(Shilue.curr!=x)
    document.getElementById("count").value=Shilue.curr;
  for(i=Shilue.curr+1;i<=Shilue.currmax;i++){
    if(Shilue.svg[i]==null||Shilue.pre[i]==null){
      Shilue.buildup(i);
      break;
    }
    if(Shilue.svg[i].style.position=="absolute"){
      Shilue.svg[i].style.position="static";
      Shilue.svg[i].style.visibility="visible";
    }
    conllusvg.rewrite("pre"+i);
    r=Shilue.svg[i].getBoundingClientRect();
    if(r.top-window.innerHeight-1000>0)
      break;
  }
  for(i=Shilue.curr-1;i>=0;i--){
    if(Shilue.svg[i]==null||Shilue.pre[i]==null){
      Shilue.buildup(i);
      break;
    }
    if(Shilue.svg[i].style.position=="absolute"){
      if(Shilue.pre[i].textContent>""){
	Shilue.svg[i].style.position="static";
	Shilue.svg[i].style.visibility="visible";
      }
      else
	break;
    }
    conllusvg.rewrite("pre"+i);
    r=Shilue.svg[Shilue.curr].getBoundingClientRect().top;
    if(Math.abs(r-Shilue.lastTop)>5){
      if(document.scrollingElement==null)
        document.documentElement.scrollTop+=r-Shilue.lastTop;
      else
        document.scrollingElement.scrollTop+=r-Shilue.lastTop;
      Shilue.lastTop=r;
    }
    r=Shilue.svg[i].getBoundingClientRect();
    if(parseInt(r.bottom,10)<-300)
      break;
  }
}
Shilue.buildup=function(x){
  var t,i;
  if(Shilue.svg[x]==null){
    t=document.createElementNS("http://www.w3.org/2000/svg","svg");
    for(i=parseInt(x,10)+1;i<=Shilue.currmax;i++){
      if(Shilue.svg[i]!=null)
	break;
    }
    t.style.position="absolute";
    t.style.visibility="hidden";
    if(i>Shilue.currmax)
      document.body.appendChild(t);
    else
      document.body.insertBefore(t,Shilue.svg[i]);
    Shilue.svg[x]=t;
    t.addEventListener("mousedown",Shilue.onmousedown);
    t.addEventListener("touchstart",Shilue.onmousedown);
  }
  if(Shilue.pre[x]==null){
    t=document.createElement("pre");
    t.style.display="none";
    t.setAttribute("id","pre"+x);
    document.body.appendChild(t);
    Shilue.pre[x]=t;
    if(conllusvg.main["pre"+x]==null)
      conllusvg.view(Shilue.svg[x],"pre"+x);
    i=Shilue.volpath+"/"+("000"+x).slice(-3)+".txt";
    conllusvg.loadRemote("pre"+x,Shilue.url+"files/"+encodeURIComponent(i)+"/raw?ref=master");
  }
}
Shilue.volchange=function(){
  var s,x;
  Shilue.clearSVG();
  for(s in Shilue.pre){
    if(Shilue.pre[s]!=null){
      document.body.removeChild(Shilue.pre[s]);
    }
    Shilue.pre[s]=null;
  }
  s=document.getElementById("vol");
  Shilue.volpath=s.options[s.selectedIndex].value;
  if(Shilue.tail==null)
    Shilue.tail=new Array();
  if(Shilue.tail[Shilue.volpath]==null)
    Shilue.gettree();
  else
    Shilue.writeSVG();
}
Shilue.gettree=function(){
  var p;
  if(Shilue.request==null){
    Shilue.request=new XMLHttpRequest();
    Shilue.request.onload=Shilue.ongettree;
  }
  if(Shilue.tail[Shilue.volpath]==null)
    p=1;
  else
    p=Math.floor(parseInt(Shilue.tail[Shilue.volpath],10)/100)+2;
  Shilue.request.open("GET",Shilue.url+"tree?per_page=100&path="+Shilue.volpath+"&page="+p);
  Shilue.request.send();
}
Shilue.ongettree=function(e){
  var i,s;
  if(Shilue.request.status==200){
    s=Shilue.request.responseText;
    i=s.lastIndexOf('.txt"');
    if(i<0)
      Shilue.writeSVG();
    else{
      Shilue.tail[Shilue.volpath]=s.substring(i-3,i);
      Shilue.gettree();
    }
  }
}
Shilue.writeSVG=function(){
  var c=document.getElementById("count");
  Shilue.clearSVG();
  Shilue.currmax=parseInt(Shilue.tail[Shilue.volpath],10);
  Shilue.curr=parseInt(c.value,10);
  if(Shilue.curr<0)
    Shilue.curr=0;
  if(Shilue.curr>Shilue.currmax)
    Shilue.curr=Shilue.currmax;
  c.value=Shilue.curr;
  Shilue.lastTop=null;
}
Shilue.clearSVG=function(){
  var x;
  Shilue.curr=Shilue.lastTop=null;
  if(Shilue.svg!=null){
    for(x in Shilue.svg){
      if(Shilue.svg[x]!=null){
	Shilue.svg[x].style.position="absolute";
	Shilue.svg[x].style.visibility="hidden";
      }
    }
  }
  if(document.scrollingElement==null)
    document.documentElement.scrollTop=0;
  else
    document.scrollingElement.scrollTop=0;
}
Shilue.onmousedown=function(e){
  var x,y;
  if(Shilue.lastX==null){
    Shilue.lastX=e.clientX;
    Shilue.lastY=e.clientY;
    return;
  }
  x=e.clientX-Shilue.lastX;
  y=e.clientY-Shilue.lastY;
  if(x*x+y*y>9){
    Shilue.lastX=e.clientX;
    Shilue.lastY=e.clientY;
    return;
  }
  Shilue.lastX=null;
  x=e.currentTarget;
  for(y in Shilue.svg){
    if(Shilue.svg[y]==x){
      x=Shilue.volpath+"/"+("000"+y).slice(-3)+".txt";
      window.open("editor-kanbun.html#"+Shilue.url+"files/"+encodeURIComponent(x)+"/raw?ref=master");
      break;
    }
  }
}
Shilue.reload=function(){
  var i,r;
  for(i=Shilue.curr;i<=Shilue.currmax;i++){
    if(Shilue.svg[i]==null||Shilue.pre[i]==null)
      return;
    r=Shilue.svg[i].getBoundingClientRect();
    if(r.top>window.innerHeight||r.bottom<0)
      return;
    r=Shilue.volpath+"/"+("000"+i).slice(-3)+".txt";
    conllusvg.loadRemote("pre"+i,Shilue.url+"files/"+encodeURIComponent(r)+"/raw?ref=master");
  }
}
Shilue.gitlab=function(){
  var r=Shilue.volpath+"/"+("000"+Shilue.curr).slice(-3)+".txt";
  window.open("/gitlab/Kanbun/ud-kanbun/blob/master/"+r);
}
</script>
<body onload="Shilue.init()">
<div id="top" style="position:fixed; top:0px; left:0px; padding:10px; width:100%; background:white">
<font size="+3"><b>十八史略</b></font>
<select id="vol" onchange="Shilue.volchange()">
Koichi Yasuoka's avatar
Koichi Yasuoka committed
<option value="18shilue/001">太古</option>
<option value="18shilue/002">三皇</option>
<option value="18shilue/003">五帝</option>
<option value="18shilue/004"></option>
<option value="18shilue/005"></option>
<option value="18shilue/006"></option>
<option value="18shilue/007">春秋戰國</option>
Koichi Yasuoka's avatar
Koichi Yasuoka committed
<option value="18shilue/008"></option>
<option value="18shilue/009">西漢</option>
<option value="18shilue/010">東漢</option>
<option value="18shilue/011">三國</option>
<option value="18shilue/012">西晉</option>
Koichi Yasuoka's avatar
Koichi Yasuoka committed
<option value="18shilue/013">東晉</option>
Koichi Yasuoka's avatar
Koichi Yasuoka committed
<option value="18shilue/014">南北朝</option>
Koichi Yasuoka's avatar
Koichi Yasuoka committed
<option value="18shilue/015"></option>
Koichi Yasuoka's avatar
Koichi Yasuoka committed
<option value="18shilue/016"></option>
Koichi Yasuoka's avatar
Koichi Yasuoka committed
<option value="18shilue/017">五代</option>
Koichi Yasuoka's avatar
Koichi Yasuoka committed
<option value="18shilue/018"></option>
Koichi Yasuoka's avatar
Koichi Yasuoka committed
<option value="18shilue/019">南宋</option>
Koichi Yasuoka's avatar
Koichi Yasuoka committed
</select>
<input type="text" id="count" size=3 value=0 style="text-align:right" onchange="Shilue.writeSVG()" />
<input type="button" value="GitLab" onclick="Shilue.gitlab()" />
<input type="button" value="Reload" onclick="Shilue.reload()" />
</div>
</body>