Implement showIfState and hideIfState directives

This directives will be used in the header navigation instead of
re-using this logic from the `NavigationController`.

A consequence of this change is that `NavigationController` is no longer
needed, and therefore is removed.

lib/browser/app.js

@@ -33,13 +33,13 @@ require('./browser/modules/image-writer');
 require('./browser/modules/path');
 require('./browser/modules/notifier');
 require('./browser/modules/analytics');
-require('./browser/controllers/navigation');
 require('./browser/components/progress-button/progress-button');
 require('./browser/components/drive-selector');
 require('./browser/pages/finish/finish');
 require('./browser/pages/settings/settings');
 require('./browser/utils/window-progress/window-progress');
 require('./browser/utils/open-external/open-external');
+require('./browser/utils/if-state/if-state');
 
 const app = angular.module('Etcher', [
   'ui.router',
@@ -52,9 +52,6 @@ const app = angular.module('Etcher', [
   'Etcher.notifier',
   'Etcher.analytics',
 
-  // Controllers
-  'Etcher.controllers.navigation',
-
   // Models
   'Etcher.Models.SelectionState',
 
@@ -68,7 +65,8 @@ const app = angular.module('Etcher', [
 
   // Utils
   'Etcher.Utils.WindowProgress',
-  'Etcher.Utils.OpenExternal'
+  'Etcher.Utils.OpenExternal',
+  'Etcher.Utils.IfState'
 ]);
 
 app.config(function($stateProvider, $urlRouterProvider) {

lib/browser/utils/if-state/directives/hide-if-state.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+/**
+ * @summary HideIfState directive
+ * @function
+ * @public
+ *
+ * @description
+ * This directive provides an attribute to hide an element
+ * when the current UI Router state matches the specified one.
+ *
+ * @param {Object} $state - ui router $state
+ * @returns {Object} directive
+ *
+ * @example
+ * <button hide-if-state="settings" ui-sref="main">Go Back</button>
+ */
+module.exports = function($state) {
+  return {
+    restrict: 'A',
+    scope: {
+      hideIfState: '@'
+    },
+    link: function(scope, element) {
+      scope.$watch(function() {
+        return $state.is(scope.hideIfState);
+      }, function(isState) {
+
+        if (isState) {
+          element.css('display', 'none');
+        } else {
+          element.css('display', 'initial');
+        }
+
+      });
+    }
+  };
+};

lib/browser/utils/if-state/directives/show-if-state.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+/**
+ * @summary ShowIfState directive
+ * @function
+ * @public
+ *
+ * @description
+ * This directive provides an attribute to show an element
+ * when the current UI Router state matches the specified one.
+ *
+ * @param {Object} $state - ui router $state
+ * @returns {Object} directive
+ *
+ * @example
+ * <button show-if-state="main" ui-sref="settings">Settings</button>
+ */
+module.exports = function($state) {
+  return {
+    restrict: 'A',
+    scope: {
+      showIfState: '@'
+    },
+    link: function(scope, element) {
+      scope.$watch(function() {
+        return $state.is(scope.showIfState);
+      }, function(isState) {
+
+        if (isState) {
+          element.css('display', 'initial');
+        } else {
+          element.css('display', 'none');
+        }
+
+      });
+    }
+  };
+};

lib/browser/utils/if-state/if-state.js

@@ -17,31 +17,19 @@
 'use strict';
 
 /**
- * @module Etcher.controllers.navigation
+ * @module Etcher.Utils.IfState
+ *
+ * The purpose of this module is to provide an attribute
+ * directive to show/hide an element when the current UI Router
+ * state matches the one specified in the attribute.
  */
 
 const angular = require('angular');
-
 require('angular-ui-router');
-const navigation = angular.module('Etcher.controllers.navigation', [
+
+const IfState = angular.module('Etcher.Utils.IfState', [
   'ui.router'
 ]);
 
-navigation.controller('NavigationController', function($state) {
+IfState.directive('showIfState', require('./directives/show-if-state'));
-
+IfState.directive('hideIfState', require('./directives/hide-if-state'));
-  /**
-   * @summary Check the current state
-   * @function
-   * @public
-   *
-   * @param {String} state - state
-   * @returns {Boolean} whether the state matches
-   *
-   * @example
-   * if(NavigationController.isState('state')) {
-   *   console.log('We are in this state').
-   * }
-   */
-  this.isState = $state.is;
-
-});

lib/index.html

@@ -20,23 +20,23 @@
     <script src="./browser/app.js"></script>
   </head>
   <body ng-app="Etcher" style="display: none">
-    <header class="section-header" ng-controller="NavigationController as navigation">
+    <header class="section-header">
       <button class="btn btn-link" open-external="https://github.com/resin-io/etcher/blob/master/SUPPORT.md">
         <span class="glyphicon glyphicon-question-sign"></span> Need Help?
       </button>
 
-      <button class="btn btn-link" ui-sref="settings" ng-hide="navigation.isState('settings')">
+      <button class="btn btn-link" ui-sref="settings" hide-if-state="settings">
         <span class="glyphicon glyphicon-cog"></span>
       </button>
 
-      <button class="btn btn-link" ui-sref="main" ng-show="navigation.isState('settings')">
+      <button class="btn btn-link" ui-sref="main" show-if-state="settings">
         <span class="glyphicon glyphicon-chevron-left"></span> Back
       </button>
     </header>
 
     <main class="wrapper" ui-view></main>
 
-    <footer class="section-footer row between-xs middle-xs" ng-controller="NavigationController as navigation">
+    <footer class="section-footer row between-xs middle-xs">
       <div class="col-xs">
         <div class="box text-left">
           <hero-icon path="images/resin.svg" width="85px" height="auto" open-external="https://resin.io"></hero-icon>

tests/browser/utils/if-state.spec.js

@@ -0,0 +1,102 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+const m = require('mochainon');
+const angular = require('angular');
+require('angular-mocks');
+require('../../../lib/browser/utils/if-state/if-state');
+
+describe('Browser: IfState', function() {
+
+  beforeEach(angular.mock.module('Etcher.Utils.IfState'));
+
+  let $compile;
+  let $rootScope;
+  let $state;
+
+  beforeEach(angular.mock.inject(function(_$compile_, _$rootScope_, _$state_) {
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+    $state = _$state_;
+  }));
+
+  describe('given the current state is "foo"', function() {
+
+    beforeEach(function() {
+      this.stateIsStub = m.sinon.stub($state, 'is');
+      this.stateIsStub.withArgs('foo').returns(true);
+      this.stateIsStub.returns(false);
+    });
+
+    afterEach(function() {
+      this.stateIsStub.restore();
+    });
+
+    describe('hideIfState', function() {
+
+      it('should hide the element if the attribute equals "foo"', function() {
+        const element = $compile('<span hide-if-state="foo">Resin.io</span>')($rootScope);
+        $rootScope.$digest();
+        m.chai.expect(element.css('display')).to.equal('none');
+      });
+
+      it('should show the element if the attribute does not equal "foo"', function() {
+        const element = $compile('<span hide-if-state="bar">Resin.io</span>')($rootScope);
+        $rootScope.$digest();
+        m.chai.expect(element.css('display')).to.equal('initial');
+      });
+
+      it('should show the element if the state changes', function() {
+        const element = $compile('<span hide-if-state="foo">Resin.io</span>')($rootScope);
+        $rootScope.$digest();
+        m.chai.expect(element.css('display')).to.equal('none');
+        this.stateIsStub.withArgs('foo').returns(false);
+        $rootScope.$digest();
+        m.chai.expect(element.css('display')).to.equal('initial');
+      });
+
+    });
+
+    describe('showIfState', function() {
+
+      it('should hide the element if the attribute does not equal "foo"', function() {
+        const element = $compile('<span show-if-state="bar">Resin.io</span>')($rootScope);
+        $rootScope.$digest();
+        m.chai.expect(element.css('display')).to.equal('none');
+      });
+
+      it('should show the element if the attribute equals "foo"', function() {
+        const element = $compile('<span show-if-state="foo">Resin.io</span>')($rootScope);
+        $rootScope.$digest();
+        m.chai.expect(element.css('display')).to.equal('initial');
+      });
+
+      it('should hide the element if the state changes', function() {
+        const element = $compile('<span show-if-state="foo">Resin.io</span>')($rootScope);
+        $rootScope.$digest();
+        m.chai.expect(element.css('display')).to.equal('initial');
+        this.stateIsStub.withArgs('foo').returns(false);
+        $rootScope.$digest();
+        m.chai.expect(element.css('display')).to.equal('none');
+      });
+
+    });
+
+  });
+
+});