Porterっぽい編集バー(改)をカスタマイズする

ソースを直接書き換えなくでもできる範囲でカスタマイズする

カスタマイズ前

https://gyazo.com/6756e6b26cb63ee35f11813ef9d7bda4

正確に言うと、Tボタンはカスタマイズ前にはない

カスタマイズ後

https://gyazo.com/590b64346fdccb9db1f305c8092a216f

ボタンの配置を変えて、横幅いっぱいにまで表示されるようにした

元のCSSでは画面の横幅によって自動的に並び変えるようにしていたが、それを固定配置にした

あくまで自分のスマホ専用なので問題ない

やりたいこと

 ボタンの並び順の変更

 ボタンデザインの変更

時間に余裕がないので多分やらないかも

 アイコンを挿入するボタンの追加

ソース

script.ts

任意のボタンを追加するサンプル

code:script.ts

const cursor = takeCursor()

const items: Item[] = [

{

type: "text",

name: "timestamp",

text: "T",

onClick: ()=>insertTimestamp()

},{

type: "icon",

name: "icon",

onClick: ()=>{

insertIcon()

cursor.focus()

}

}

]

if (/mobile/i.test(navigator.userAgent)) {

for(let item of items){

useEditBar().render(item)

}

}

style.css

code:style.css

div.edit-bar {

/* 編集バー */

grid-template-areas:

"c-left c-right copy cut timestamp icon"

"c-up c-down paste undo redo i-cursor";

grid-template-columns: repeat(6, 1fr); /* 横に6個、均等に配置する */

}

div.eb-caret-left {

/* 左矢印 */

grid-area: c-left;

}

div.eb-caret-right {

/* 右矢印 */

grid-area: c-right;

}

div.eb-caret-up {

/* 上矢印 */

grid-area: c-up;

}

div.eb-caret-down {

/* 下矢印 */

grid-area: c-down;

}

div.eb-copy {

/* コピー */

grid-area: copy;

}

div.eb-cut {

/* 切り取り */

grid-area: cut;

}

div.eb-clipboard {

/* 貼り付け */

grid-area: paste;

}

div.eb-undo {

/* 元に戻す */

grid-area: undo;

}

div.eb-redo {

/* やり直し */

grid-area: redo;

}

div.eb-i-cursor {

/* 文字カーソル（キャレット） */

grid-area: i-cursor;

}

div.eb-timestamp {

/* タイムスタンプ */

grid-area: timestamp;

}

div.eb-icon {

/* アイコン挿入 */

grid-area: icon;

}

コンパイル済みのソース

code:script.js