jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-24 11:46:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
This commit is contained in:
Juan Cruz Viotti 2016-06-22 10:41:02 -04:00 committed by GitHub
parent 4670ae125b
commit b923008f7c
7 changed files with 14 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/gui/app.js
View File

@ -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'),

54
lib/gui/utils/if-state/directives/hide-if-state.js
View File

@ -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');
}
});
}
};
};

54
lib/gui/utils/if-state/directives/show-if-state.js
View File

@ -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');
}
});
}
};
};

36
lib/gui/utils/if-state/if-state.js
View File

@ -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;

12
npm-shrinkwrap.json generated
View File

@ -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",

1
package.json
View File

@ -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",

103
tests/gui/utils/if-state.spec.js
View File

@ -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');
});
});
});
});