アイコンをドラッグして、別のアイコンに合わせて、フォルダならそのフォルダの中に入るという、あの動作を機能追加していきたいと思います。
この機能ができると、デスクトップ内のアプリアイコンに、対象のデータをアタッチして立ち上げたり、関連アイコン同士を結びつけて起動したり、
いろいろなデスクトップ特有の動作が可能になります。
そんな便利機能の中で、今回は基本のフォルダの中にいれる処理を作ります。
デモ
アイコンをドラッグして別のアイコンにくっつけてみてください。
※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。
ソースコード
https://github.com/yugeta/web_desktop/
今回のCommitは"#17-modify"です。
解説
何か機能追加するたびに、何かしら元のモジュールを修正しないといけないのは、やはり事前設計がイケてないからでしょう。
でも機能追加ってそういうものなんですよね。
最初から全てを網羅する設計なんてそうそう作れません。
開き直って、作業を続けますが、アイコンをドラッグして、別のアイコンと被さった処理というのは、
前回作ったウィンドウの中にアイコンをいれる処理と比較的近い処理が使えます。
icon/overlap.js
というモジュールを作って対応しました。
アイコンドラッグ中に、マウスポジションが別のアイコンに重なったら、そのアイコンに、data-overlapという属性を付けて、
属性が付いたアイコンは、選択された状態にするcssを追加してます。
ついでに、ウィンドウも判定できるので、移動対象のウィンドウの場合はウィンドウの枠を青色にして、
移動禁止のウィンドウの場合は、赤枠を表示するようにしてみました。
そして、ウィンドウの中にあっても、デスクトップ上であっても、アイコンに被さった時には、処理を実行するために、"icon/open.js"というモジュールを追加しておきました。
この、open.jsモジュールでは、
対象のアイコンのタイプに応じて、フォルダであれば、その中に移動したアイコンを入れ込み、アプリであれば、そのファイルを基準に起動するという処理になります。
今回はフォルダの判定だけなので、folder_in()という関数で処理するだけにして、今後アプリ処理やその他の処理を追加していく予定です。
あとがき
今回のモジュールをアップした後で、オーバーラップ処理の後、アイコンをダブルクリックしたら、アイコンが消えるという不具合を見つけてしまいました。
なので、早急に修正して、コミット名を修正版としてpushしたので、今回のソースコードのコミット名がこれまでの流れと少し違ってしまいました。
githubのコミットを取り下げて対応しようかとも思ったんですが、修正についても履歴に残しておこうと思ったので、包み隠さずpushしておきました。
疑問に思った方いたら、ご理解くださいませ。
0 件のコメント:
コメントを投稿