Webデスクトップの制作 #06 ウィンドウのリサイズ処理

ウィンドウ操作の続きになりますが、今回はサイズを変更できるようにしてみます。 デスクトップのウィンドウは、中にはいっているファイル数によって、大きく表示したい場合と、小さくても良い場合がありますが、自分でそれを任意に変更できるユーザビリティが必要です。 左右拡大、上下拡大、上下左右の自在拡大、最大化、この４つのモードを追加します。 ちなみに、前回リファクタリングした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デスクトップが仕上がっていきます。 次はどんな機能を構築しようかな？