はじめに
AngularJSを知って１年半以上経過して、Angular2での刷新についていくかどうか頭を悩ませる時期になってます。しかし、個人的にはそんなこと関係なくここ3ヶ月でようやく本格的に実装する機会を見つけて、IE8から動作する1.2系の実装を楽しんでいるところです。
その機会を通じて、得たクリックイベント発火時のマウスのカーソル位置を取る方法について、いろんな意味で勉強になったことをご紹介です。
参照記事
利用する技術
利用するAngularJSの技術は下記の通り。
- factory
- 自前のサービスを登録するAPIで、基本中の基本。
- directives
- 効果的なイベントや画面構成を実現するには活用すべきAPI
- $event
- AngularJSにおけるEventインスタンスと同等のサービス
今回、マウス位置を取得することにした経緯
記事一覧の任意の記事毎のパネルを開く操作結果をRoutingを利用してURI指定で制御できる仕組みを作りたかった。
例えば、フィード画面で記事一覧があって、各記事にはコメント履歴タブとその他の履歴を開くタブ（初期表示時は閉じている）が複数備わっているとする。そして、記事一覧の記事ID:3のコメント履歴タブを開くなら
http://localhost/feeds/#/articles/3/tabs/comments
みたいに指定すれば、URIからいつでもコメント履歴を見れるようにという感じ。
こうすることで、メーリングリストや他のページからいつでも見たい記事の任意のタブを開いた状態を作ることができるようになる。
よくあるJavaScriptのonclickでパネルを開いたりするやり方だと画面表示した後に必ず閉じた状態から始まりユーザに開く操作を強いることになるのが嫌で、できれば見せたいタブを開いた状態をいつでも実現できるタブ機能をフィードという記事一覧画面でも作りたかった。
AngularJSで、ControllerとRoutingだけで上記を実現する場合、表示場所がng-viewに限られてしまうためそのままでは難しい（これは私のAngularJSに対する知識の無さもあるかも？）。
そこで、ユーザがクリックした位置を取得した後、topおよびleft制御していい感じの位置に操作パネルを表示できるし、かつその状態をURIでいつでもアクセスできるようにしたかったのでした。
これには、作業開始時点の課題として、
- マウスの位置情報を取得する方法を知ること
- 一度開いたパネルの位置を永続的に保存する方法を知ること
- 指定された記事の表示位置へ移動する方法を知ること
というのがありました。
マウスの位置情報を取得する
最初にこの方法を調べていたら上記の記事を見つけました。記事単位に$eventを埋め込む必要もなく、大本となるControllerで定義するだけでいつでもユーザがクリックしたマウス位置を取得できます。
ただ、この記事に書かれている方法の課題としては、パネルを開く処理を書いたControllerの操作が実行されるタイミングではマウスの位置を取得できない点です。
しょうが無いので、パネルのスタイル定義を記載した<style>タグを作りleftとtop属性をmouseX,mouseYで動的に書き換わるようにして暫定対応を行うことにしました。
クリックされた位置情報を永続的に保存する
ユーザがクリックされた情報を永続的に保存して、ブラウザのりロード時でも同じ表示状態を保持て切るように考えて、
$cookiesサービスを利用することにしました。
（URIで記事指定された時にどの位置で表示するか？についてはノーアイデアでしたorz）
URIで指定された記事の位置へ移動する
アンカー移動するには、AngularJSの場合、
$locationサービスのhash属性と、$anchorScroll()サービスを利用することになるようです。
コメント
具体的なソースの説明などは、時間的な問題から割愛しています。
今回、結局のところうまく行きませんでした。URIして時の表示位置はどうする？とか実際に動かしてみると思ったより操作性が悪かったり。など。
時間があれば、根本的に改善して、加筆してソースの情報も載せる予定です。