mz026's Blog

最近寫了一個把Page Visibility API和 AngularJS 接起來的小工具: angular-page-visibility

話說從頭

其實就是因為最近kono 的 web app需要在 user 切換 tab 的時候，去trigger一些特定的事件。一開始找到了jquery.blur 和 jquery.focus, 結果發現有點糗。糗點在於，我本來預期的行為是，當 user 切換 tab 到別的地方的時候，立刻 trigger blur 的 event, 然後在 user 回來的時候，再 trigger focus 的事件(對，就像正常人想像的那樣)。結果事實上是，當 user 離開 tab 的時候， blur沒有被 trigger, 然後當 user 回到我們的 tab 之後，立刻 trigger focus 再 trigger blur, 基本上就是全錯的意思 @@。 後來找到了原來有 Page Visibility API (我現在才知道 orz)。 但是好像沒有合意的 AngularJS interface。於是動手自己搞一個。

How it works

其實真正做的事情就像MDN寫的那樣，和 Angular 的介面，我把它做成一個可以被 inject 的 factory, 接到的是一個 $scope object, 以便於用熟悉的 $broadcast, $on 來收發 events.

Usage

用法是把它 inject 進任何你想 inject 的地方，然後聽 pageFocused 和 pageBlurred 這兩個事件：

// my_controller.js

angular.module('app')
       .controller('MyController', function($scope, $pageVisibility) {
         $pageVisibility.$on('pageFocused', function(){
           // page is focused

         });

         $pageVisibility.$on('pageBlurred', function(){
           // page is blurred

         });
       });

然後在 page blur / focus 的時候，就會 trigger 該 trigger 的 listener 惹。

Testing note

這個小 project 的 unit test 還是用 jasmine + sinon.js。
最近開始嘗試 coffee script, 發現原來 karma 可以讓 test code 不用先轉成 javascript 就直接跑，這樣跑起來快蠻多的。(也是現在才知道!!)

結論

code 在這邊, 如果有 bug 或任何意見，請不吝指教阿阿阿。