ウィンドウ操作の続きになりますが、今回はサイズを変更できるようにしてみます。
デスクトップのウィンドウは、中にはいっているファイル数によって、大きく表示したい場合と、小さくても良い場合がありますが、自分でそれを任意に変更できるユーザビリティが必要です。
左右拡大、上下拡大、上下左右の自在拡大、最大化、この４つのモードを追加します。
ちなみに、前回リファクタリングしたwindow関数まわりを思いっきり分割リファクタしてしまいました。
解説は後ほど・・・
デモ
ソースコード
github : https://github.com/yugeta/web_desktop
※今回は、commit : #06です。
ウィンドウ・リサイズの仕組み
ウィンドウをリサイズするには、右、下、右下の3箇所のウィンドウの端をカーソルでつまんで、動かすことでサイズが変更する仕様にしています。
左や上もサイズ変更しようと思ったんですが、座標変更などの複雑な処理が入るので、今回は簡易に座標が変わらない方法にしています。
簡単に図にしてみました。下のようなDOM構造にしています。
赤い部分のエレメントをdivタグで作って、それぞれのイベントで移動値を取得して、それに応じてウィンドウサイズを変更するという仕様です。
これらのエレメントは、透明化しておいて、z-indexで一番手前に表示されている状態にしておくことで、内容に依存せずにウィンドウサイズ変更が可能になります。
ソースコードポイント
window.jsの中身を機能別に分解して、window/フォルダ内に格納しました。
それぞれ機能事に別ファイルを呼び出す仕組みにして、複雑になっていたwindow.jsファイルをできるだけ簡素化リファクタリングしました。
今回のresize.jsは、move.jsと同じイベントを使っているため、起動はevent.jsで、ウィンドウのどの部分が押されたかを判定して、それぞれ起動する関数を振り分けています。
resizeは、非常にシンプルですが、move.jsと似たような処理でリサイズできたので、色々と発展処理も作れそうです。
あとがき
今回の処理を作る時に、ウィンドウのクローズボタンが効かないという自体が発生しました。（解決してるけど）
wide（画面拡大）時に、ウィンドウヘッダをさわると、画面座標などが固定化されて、拡大解除した時にもとに戻らなかったり、
ヘッダ以外をつまんでもウィンドウ移動がされたり、リサイズと干渉したり・・・と、不具合の温床になりそうだったので、思い切ったリファクタリングをしたという経緯でした。
プログラミングをやっている人なら、この気持ち分かりますよね？
という感じで、ボチボチと、効率的なWebデスクトップが仕上がっていきます。
次はどんな機能を構築しようかな？
0 件のコメント:
コメントを投稿