diff --git a/lib/gui/app.js b/lib/gui/app.js
index ffffe81d..ecbae377 100644
--- a/lib/gui/app.js
+++ b/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'),
diff --git a/lib/gui/utils/if-state/directives/hide-if-state.js b/lib/gui/utils/if-state/directives/hide-if-state.js
deleted file mode 100644
index 9636865a..00000000
--- a/lib/gui/utils/if-state/directives/hide-if-state.js
+++ /dev/null
@@ -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
- *
- */
-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');
- }
-
- });
- }
- };
-};
diff --git a/lib/gui/utils/if-state/directives/show-if-state.js b/lib/gui/utils/if-state/directives/show-if-state.js
deleted file mode 100644
index e0fda652..00000000
--- a/lib/gui/utils/if-state/directives/show-if-state.js
+++ /dev/null
@@ -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
- *
- */
-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');
- }
-
- });
- }
- };
-};
diff --git a/lib/gui/utils/if-state/if-state.js b/lib/gui/utils/if-state/if-state.js
deleted file mode 100644
index 788458c3..00000000
--- a/lib/gui/utils/if-state/if-state.js
+++ /dev/null
@@ -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;
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 70f017bf..c5175a08 100644
--- a/npm-shrinkwrap.json
+++ b/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",
diff --git a/package.json b/package.json
index 12cc88c1..1ccfe1e7 100644
--- a/package.json
+++ b/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",
diff --git a/tests/gui/utils/if-state.spec.js b/tests/gui/utils/if-state.spec.js
deleted file mode 100644
index c032f03d..00000000
--- a/tests/gui/utils/if-state.spec.js
+++ /dev/null
@@ -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('Resin.io')($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('Resin.io')($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('Resin.io')($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('Resin.io')($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('Resin.io')($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('Resin.io')($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');
- });
-
- });
-
- });
-
-});