Textwellの二画面編集Twinがさらにシームレスになりました

DarkRoomで使っていたスキルを盛り込んでみた。


Textwellを上下の二画面に割って編集する Twin
マネしてみました。Textwellのアクションにはデジャヴがある。chiroru氏のDualWindowも何だか懐かしく感じます。知ってる人しか知らないと思いますが、MS-DOSのVz-Editorに...
Ａ面とＢ面がある二面エディタ。独自進化を遂げて、どこに向かっているのか分からない状態になりました。フォントサイズとかはソースを直接カスタマイズしてください。気分的にはiPadの画面に合わせてます。iPhoneだったら20pxを14pxにするのかな。

<meta name=viewport content=initial-scale=1,user-scalable=1>
<style>
  textarea {
   color: black;
   font-size: 20px;
   font-weight: bold;
   font-family: Hiragino Kaku Gothic ProN;
   width: 100%; height: 200%; border: 0;
  }
  hr {
    border:0;
  }
</style>
<title>Twin</title>
<body style=margin:0;>
   <textarea id=side_A style=background:#eeeeee; onFocus=dispTitle(0)></textarea>
   <hr>
   <textarea id=side_B style=background:white; onFocus=dispTitle(1)></textarea>

<script>
   var p,mode,nowEdit,win;
   side=0;
   len=T.text.length;
   s=T.text.split("\n:dwin\n");
   side_A.value=s[0];
   side_B.value=(s[1])? s[1]:"";
   loc=T.range.loc;
   if(loc>s[0].length){
     side_B.selectionStart=loc;
     side_B.focus();
   }else{
     side_A.selectionStart=loc;
     side_A.focus();
   }
   document.ontouchmove=touchMove;
   document.ontouchstart=touchStart;

   function dispTitle(i){
     side=i;
     nowEdit = document.activeElement.id;
     T.title("Twin: "+nowEdit);
     win = document.getElementById(nowEdit);
   }

   function touchMove(e){
    t=e.touches[0].pageX;
    if(t-p>6){
     win.setSelectionRange(win.selectionStart+mode, win.selectionEnd+1);
     p=t;
    }
    if(p-t>6){
     win.setSelectionRange(win.selectionStart-mode, win.selectionEnd-1);
     p=t;
    }
   }

   function touchStart(e){
    p=e.touches[0].pageX;
    mode=(win.selectionStart == win.selectionEnd);
    if(e.touches.length>1) mode=0;
   }

   T.closelets([
    {title: "side_Aのみ保存",
     fn: function(){
      text=side_A.value;
      loc=win.selectionStart;
      sel=win.selectionEnd-win.selectionStart;
      T("replaceRange",{
        text:text,
        replacingRange:{len:len},
        selectingRange:{loc:loc,len:sel}
      })}
    },
    {title: "side_Bのみ保存",
     fn: function(){
      text=side_B.value;
      loc=win.selectionStart+7+side_A.value.length;
      sel=win.selectionEnd-win.selectionStart;
      T("replaceRange",{
        text:text,
        replacingRange:{len:len},
        selectingRange:{loc:loc,len:sel}
      })}
    },
    {title: "両sideとも保存",
     fn: function(){
      text=side_A.value+"\n:dwin\n"+side_B.value;
      loc=win.selectionStart+((side)? 7+side_A.value.length:0);
      sel=win.selectionEnd-win.selectionStart;
      T("replaceRange",{
        text:text,
        replacingRange:{len:len},
        selectingRange:{loc:loc,len:sel}
      })}
    }]);
</script>
</body>

登録リンクはこちら→ http://tinyurl.com/k92n2wc



カーソル移動はDarkRoom方式。画面を一本指でなぞると左右の移動、二本指だと範囲選択になります。指に馴染む。マーカーを引くように二本指でなぞると選択モードになり、後は指を離しても一本指でも選択モードが持続。休み休み選択ができます。



それと、アクションを終了すると、最後に編集した位置にカーソルを移動するようにしました。範囲選択しているときは、その範囲を選んだままTextwellの画面に移ります。さらにTwinを立ち上げたとき、カーソルの位置が変わらないようにしました。長い文章を扱うとき、編集場所を探すのも煩わしい。Textwellで見ていたところがTwinでも見るところ。


キーボード左肩の「＜ ＞」は画面の切り替え。二つの画面を往来する。別のテキストを置いていてもいいし、side_Bを作業領域にし段落単位のコピペに使うのでもいい。編集画面が二つあるだけで、出来ることが増えます。「編集ツール」であることを堪能できる。