いよいよ、新規フォルダ追加のモードを追加します。
そして、新規フォルダを複数追加したら、同じ名前がたくさんできてしまうので、アイコンの名前も変更できるようにしちゃいます。
デモ
右クリックして、「新規フォルダ」を選択すると、新しいフォルダが作成できようになります。
※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。
ソースコード
https://github.com/yugeta/web_desktop/
今回のCommitは"#18"です。
解説
新規フォルダ追加は比較的ラクにできました。
icon/new_folder.js
上記のファイルを追加して、内部に処理を書いています。
データを作って、view.jsにデータを受け渡すと自動的にフォルダが作られてストレージにデータが保存される仕組みは以前作ってあったものを流用しています。
注意点としては、新しく作られたフォルダは、uuidを割り当てて可能な限りユニークに保つという点で、lib/uuid.jsというモジュールを使っています。
このモジュールはいろいろな場面で使えるので、コピペして流用可能です。
次に、アイコンの名称変更は、アイコンを右クリックをして、「名称変更」を選択すると、名前が書き換えられる状態になります。
HTML5の機能での、contenteditable属性機能を使って処理しているので、無駄にinputなどのフォルダを使わなくてもかなり効率的に処理できました。
icon/name_change.js
このファイルに処理を書いているので、是非みてください。
// 名前欄を入力可能にする
set_input(){
this.icon.setAttribute("data-status", "pause")
this.elm_name.setAttribute("contenteditable", true)
this.elm_name.focus()
}
普通のエレメントを入力可能にするには、属性にcontenteditable="true"がセットされるだけで簡単にinput代わりになります。
それにfocus()をすると、カーソルがINして、キャレットが表示されます。
// 文字を全選択
text_select(){
const selection = window.getSelection()
const range = document.createRange()
const offset = this.elm_name.innerText.length
range.setStart(this.elm_name.firstChild, 0)
range.setEnd(this.elm_name.firstChild, offset)
selection.removeAllRanges()
selection.addRange(range)
}
さらに、上記のコードで、名前部分を全部選択モードにして、すぐに名称変更できるようにしています。
コレ、Macのアイコン名称変更と同じ挙動なので、違和感なく使いやすいはずです。
さらに、上記に追加して、Enterキーを押すことで、名称変更を確定して、ストレージデータに保存するまでを処理として記述しています。
あと、重要なのが、画面の別部分をクリックした場合に、強制的に名前変更のモードを終了するようにしています。
あとがき
Webデスクトップが、本格的に使いモノになってきた感じがしますね。
でもまだまだ、機能追加が止まりません。
そして、この開発のコツがだいぶ見えてきました。
全てのデータを一元管理している
ストレージデータの管理と、それに伴う
表示系処理と、各種
イベント処理です。
概ねこの辺のモジュールが使いやすいように整理できれば、何かしらの機能を追加するのもさほどストレスを感じなくなります。
いや〜、かなりモノにできましたね。
0 件のコメント:
コメントを投稿