- Using new generator-stf.

- Refactored top bar to menu partial.
- Added new page-visibility directive.

res/app/components/stf/page-visibility/index.js

@@ -0,0 +1,4 @@
+module.exports = angular.module('stf.page-visibility', [
+
+])
+  .directive('pageVisibility', require('./page-visibility-directive'))

res/app/components/stf/page-visibility/page-visibility-directive.js

@@ -0,0 +1,23 @@
+module.exports = function pageVisibilityDirective($document, $rootScope) {
+  return {
+    restrict: 'A',
+    link: function (scope, element, attrs) {
+
+      function pageVisibilityChanged() {
+        if (document.hidden) {
+          $rootScope.$broadcast('pageHidden')
+        } else {
+          $rootScope.$broadcast('pageVisible');
+          // Application is visible to the user
+          // Adjust polling rates and display update for active display mode
+        }
+      }
+
+      document.addEventListener('visibilitychange', pageVisibilityChanged, false)
+
+      scope.$on('$destroy', function () {
+        angular.element(document).unbind('visibilitychange');
+      })
+    }
+  }
+}

res/app/components/stf/page-visibility/page-visibility-spec.js

@@ -0,0 +1,23 @@
+describe('pageVisibility', function () {
+
+  beforeEach(module('stf.page-visibility'));
+
+  var scope, compile;
+
+  beforeEach(inject(function ($rootScope, $compile) {
+    scope = $rootScope.$new();
+    compile = $compile;
+  }));
+
+  it('should ...', function () {
+
+    /* 
+     To test your directive, you need to create some html that would use your directive,
+     send that through compile() then compare the results.
+
+     var element = compile('<div page-visibility name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});