Textwellが行編集エディタに変身する ReLine(灰帯版)

赤とグレーのコンビネーション。

【Textwell】ReLineのデザインもフラットしてみました
iOS7風を考えたけど、なんか違うかも。行編集アクションのReLine。前のデザインだとゴツゴツとしていたのでペラペラにしてみました。オマケで機能強化してます。相変わらず行儀悪いスクリプトですけど。ソ...

エディタは文字単位で編集するものですが、それだと木を見て森を見ず。森を見るのがこのReLineです。Vimの行編集をイメージ。行単位での削除や移動が出来ます。

Textwell 1.1.7
分類: 仕事効率化,ユーティリティ
価格: \300 (Sociomedia)

ところが、使っていると不満に思う。不自然に感じる部分がありました。LIFO(Last in First out)でスタックするんですが、これが視覚的に分かりにくい。「最後に入れたものが最初に取り出される」。このコンセプトに馴染むデザインを試行錯誤で探しています。

<style>
  body{
    background:#eee;
    word-wrap:break-word;
    margin:0;
  }
  hr{
    border:1px #fafafa solid;
  }
  table{
    width:100%;
    table-layout:fixed;
  }
  td.num{
    width:40px;
    color:white;
    background:#ff0033;
    vertical-align:top;
    text-align:center;
  }
</style>
<meta name=viewport content=initial-scale=1,user-scalable=no>
<title>ReLine</title>
<body id=wine></body>
<script>
  last=0;
  view=1;
  stack=new Array();
  list=new Array();
  list=T.text.split("\n");
  Disp();
  len=T.text.length;
  wine.ontouchstart=switchView;
  T.closelets([{
    title:"保存",
    fn:function(){
      s=list.join("\n");
      T("replaceRange",{
        text:s,
        replacingRange:{len:len},
        selectingRange:{loc:last}
     })}
  }])

  function Disp(){
    s="<hr>";
    for(i=0;i<list.length;i++){
      content=(view)?list[i]:list[i].replace(/</g,"&lt;");
      s+="<table><td class=num onClick=Minus("+i+")>"+("000"+(i+1)).slice(-4)+"</td><td onClick=Plus("+i+")>"+content+"</td></table><hr>\n";
    }
    wine.innerHTML=s;
    t=stack[stack.length-1] || "ReLine";
    T.title(t);
  }

  function Minus(x){
    s=list[x];
    if(s) stack.push(s);
    list.splice(x,1);
    Count(x)
  }

  function Plus(x){
    s=(stack.length)? stack.pop():"";
    list.splice(x,0,s);
    Count(x)
  }

  function Count(x){
    Disp()
    last=0;
    for(i=0;i<x;i++)last+=list[i].length+1;
  }

  function switchView(e){
    if(e.touches.length>1){
      view=1-view;
      Disp();
    }
  }
</script>