refactor: make use of angular-if-state (#506)

We'll use this external module rather than our local `if-state`
implementation.

Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>

lib/gui/app.js

@@ -28,6 +28,7 @@ const app = angular.module('Etcher', [
   require('angular-ui-bootstrap'),
   require('angular-moment'),
   require('angular-middle-ellipses'),
+  require('angular-if-state'),
 
   // Etcher modules
   require('./modules/drive-scanner'),
@@ -59,7 +60,6 @@ const app = angular.module('Etcher', [
   require('./os/dialog/dialog'),
 
   // Utils
-  require('./utils/if-state/if-state'),
   require('./utils/notifier/notifier'),
   require('./utils/path/path'),
   require('./utils/manifest-bind/manifest-bind'),

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

@@ -1,54 +0,0 @@
-/*
- * 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/gui/utils/if-state/directives/show-if-state.js

@@ -1,54 +0,0 @@
-/*
- * 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/gui/utils/if-state/if-state.js

@@ -1,36 +0,0 @@
-/*
- * 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';
-
-/**
- * @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');
-const MODULE_NAME = 'Etcher.Utils.IfState';
-const IfState = angular.module(MODULE_NAME, [
-  require('angular-ui-router')
-]);
-
-IfState.directive('showIfState', require('./directives/show-if-state'));
-IfState.directive('hideIfState', require('./directives/hide-if-state'));
-
-module.exports = MODULE_NAME;

npm-shrinkwrap.json

@@ -42,6 +42,18 @@
       "from": "angular@>=1.5.3 <2.0.0",
       "resolved": "https://registry.npmjs.org/angular/-/angular-1.5.7.tgz"
     },
+    "angular-if-state": {
+      "version": "1.0.0",
+      "from": "angular-if-state@>=1.0.0 <2.0.0",
+      "resolved": "https://registry.npmjs.org/angular-if-state/-/angular-if-state-1.0.0.tgz",
+      "dependencies": {
+        "angular-ui-router": {
+          "version": "0.3.1",
+          "from": "angular-ui-router@>=0.3.1 <0.4.0",
+          "resolved": "https://registry.npmjs.org/angular-ui-router/-/angular-ui-router-0.3.1.tgz"
+        }
+      }
+    },
     "angular-middle-ellipses": {
       "version": "1.0.0",
       "from": "angular-middle-ellipses@>=1.0.0 <2.0.0",

package.json

@@ -55,6 +55,7 @@
   },
   "dependencies": {
     "angular": "^1.5.3",
+    "angular-if-state": "^1.0.0",
     "angular-middle-ellipses": "^1.0.0",
     "angular-moment": "^1.0.0-beta.6",
     "angular-q-promisify": "^1.1.0",

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

@@ -1,103 +0,0 @@
-/*
- * 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');
-
-describe('Browser: IfState', function() {
-
-  beforeEach(angular.mock.module(
-    require('../../../lib/gui/utils/if-state/if-state')
-  ));
-
-  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');
-      });
-
-    });
-
-  });
-
-});