openstack/horizon
Code Issues Proposed changes

JSCS Cleanup - style guide cleanup for toast

Browse Source 
Following John Papa's style guide
https://github.com/johnpapa/angular-styleguide,
this patch refactors the Angular code for 'toast' module.

Change-Id: I66b83a695046610aa44c9efdf44895fcd977e62b
Partially-Implements: blueprint jscs-cleanup
This commit is contained in:
Cindy Lu 2015-06-08 17:44:53 -07:00
parent 985680d60d
commit 3137401f24
9 changed files with 231 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
horizon/karma.conf.js
View File

@ -79,6 +79,7 @@ module.exports = function(config){
'framework/widgets/charts/charts.js',
'framework/widgets/metadata-tree/metadata-tree.js',
'framework/widgets/table/table.js',
'framework/widgets/toast/toast.module.js',
// Catch-all for stuff that isn't required explicitly by others.
'auth/**/!(*spec).js',

54
horizon/static/framework/widgets/toast/toast.directive.js Normal file
View File

@ -0,0 +1,54 @@
/*
* Copyright 2015 IBM Corp.
*
* 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.
*/
(function() {
'use_strict';
/**
* @ngdoc directive
* @name horizon.framework.widgets.toast.directive:toast
*
* @description
* The `toast` directive allows you to place the toasts wherever you
* want in your layout. Currently styling is pulled from Bootstrap alerts.
*
* @restrict EA
* @scope true
*
*/
angular
.module('horizon.framework.widgets.toast')
.directive('toast', toast);
toast.$inject = ['horizon.framework.widgets.toast.service',
'horizon.framework.widgets.basePath'];
function toast(toastService, path) {
var directive = {
restrict: 'EA',
templateUrl: path + 'toast/toast.html',
scope: {},
link: link
};
return directive;
function link(scope) {
scope.toast = toastService;
}
}
})();

126
horizon/static/framework/widgets/toast/toast.factory.js Normal file
View File

@ -0,0 +1,126 @@
/*
* Copyright 2015 IBM Corp.
*
* 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.
*/
(function() {
'use_strict';
/**
* @ngdoc service
* @name toastService
*
* @description
* This service can be used to display user messages, toasts, in Horizon.
* To create a new toast, inject the 'horizon.framework.widgets.toast.service'
* module into your current module. Then, use the service methods.
*
* For example to add a 'success' message:
* toastService.add('success', 'User successfully created.');
*
* All actions (add, clearAll, etc.) taken on the data are automatically
* sync-ed with the HTML.
*/
angular
.module('horizon.framework.widgets.toast')
.factory('horizon.framework.widgets.toast.service', toastService);
function toastService() {
var toasts = [];
var service = {
types: {},
add: add,
get: get,
cancel: cancel,
clearAll: clearAll,
clearErrors: clearErrors,
clearSuccesses: clearSuccesses
};
/**
* There are 5 types of toasts, which are based off Bootstrap alerts.
*/
service.types = {
danger: gettext('Danger'),
warning: gettext('Warning'),
info: gettext('Info'),
success: gettext('Success'),
error: gettext('Error')
};
return service;
///////////////////////
/**
* Helper method used to remove all the toasts matching the 'type'
* passed in.
*/
function clear(type) {
for (var i = toasts.length - 1; i >= 0; i--) {
if (toasts[i].type === type) {
toasts.splice(i, 1);
}
}
}
/**
* Remove a single toast.
*/
function cancel(index) {
toasts.splice(index, 1);
}
/**
* Create a toast object and push it to the toasts array.
*/
function add(type, msg) {
var toast = {
type: type === 'error' ? 'danger' : type,
typeMsg: this.types[type],
msg: msg,
cancel: cancel
};
toasts.push(toast);
}
/**
* Return all toasts.
*/
function get() {
return toasts;
}
/**
* Remove all toasts.
*/
function clearAll() {
toasts = [];
}
/**
* Remove all toasts of type 'danger.'
*/
function clearErrors() {
clear('danger');
}
/**
* Remove all toasts of type 'success.'
*/
function clearSuccesses() {
clear('success');
}
}
})();

2
horizon/static/framework/widgets/toast/toast.html
View File

@ -1,6 +1,6 @@
<div ng-repeat="toast in toast.get()">
<div class="alert alert-{$ ::toast.type $}">
<a class="close" ng-click="toast.close($index)"><span class="fa fa-times"></span></a>
<a class="close" ng-click="toast.cancel($index)"><span class="fa fa-times"></span></a>
<div><strong>{$ toast.typeMsg $}: </strong>{$ toast.msg $}</div>
</div>
</div>

163
horizon/static/framework/widgets/toast/toast.js
View File

@ -1,163 +0,0 @@
/*
* Copyright 2015 IBM Corp.
*
* 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.
*/
(function() {
'use_strict';
/**
* @ngdoc overview
* @name horizon.framework.widgets.toast
* description
*
* # horizon.framework.widgets.toast
*
* The `horizon.framework.widgets.toast` module provides pop-up notifications to Horizon.
* A toast is a short text message triggered by a user action to provide
* real-time information. Toasts do not disrupt the page's behavior and
* typically auto-expire and fade. Also, toasts do not accept any user
* interaction.
*
*
* | Components |
* |--------------------------------------------------------------------------|
* | {@link horizon.framework.widgets.toast.factory:toastService `toastService`} |
* | {@link horizon.framework.widgets.toast.directive:toast `toast`} |
*
*/
angular.module('horizon.framework.widgets.toast', [])
/**
* @ngdoc service
* @name toastService
*
* @description
* This service can be used to display user messages, toasts, in Horizon.
* To create a new toast, inject the 'horizon.framework.widgets.toast.service' module into your
* current module. Then, use the service methods.
*
* For example to add a 'success' message:
* toastService.add('success', 'User successfully created.');
*
* All actions (add, clearAll, etc.) taken on the data are automatically
* sync-ed with the HTML.
*/
.factory('horizon.framework.widgets.toast.service', function() {
var toasts = [];
var service = {};
/**
* Helper method used to remove all the toasts matching the 'type'
* passed in.
*/
function clear(type) {
for (var i = toasts.length - 1; i >= 0; i--) {
if (toasts[i].type === type) {
toasts.splice(i, 1);
}
}
}
/**
* There are 5 types of toasts, which are based off Bootstrap alerts.
*/
service.types = {
danger: gettext('Danger'),
warning: gettext('Warning'),
info: gettext('Info'),
success: gettext('Success'),
error: gettext('Error')
};
/**
* Create a toast object and push it to the toasts array.
*/
service.add = function(type, msg) {
var toast = {
type: type === 'error' ? 'danger' : type,
typeMsg: this.types[type],
msg: msg,
close: function(index) {
toasts.splice(index, 1);
}
};
toasts.push(toast);
};
/**
* Remove a single toast.
*/
service.close = function(index) {
toasts.splice(index, 1);
};
/**
* Return all toasts.
*/
service.get = function() {
return toasts;
};
/**
* Remove all toasts.
*/
service.clearAll = function() {
toasts = [];
};
/**
* Remove all toasts of type 'danger.'
*/
service.clearErrors = function() {
clear('danger');
};
/**
* Remove all toasts of type 'success.'
*/
service.clearSuccesses = function() {
clear('success');
};
return service;
})
/**
* @ngdoc directive
* @name horizon.framework.widgets.toast.directive:toast
*
* @description
* The `toast` directive allows you to place the toasts wherever you
* want in your layout. Currently styling is pulled from Bootstrap alerts.
*
* @restrict EA
* @scope true
*
*/
.directive('toast', ['horizon.framework.widgets.toast.service',
'horizon.framework.widgets.basePath',
function(toastService, path) {
return {
restrict: 'EA',
templateUrl: path + 'toast/toast.html',
scope: {},
link: function(scope) {
scope.toast = toastService;
}
};
}]);
})();

42
horizon/static/framework/widgets/toast/toast.module.js Normal file
View File

@ -0,0 +1,42 @@
/*
* Copyright 2015 IBM Corp.
*
* 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.
*/
(function() {
'use_strict';
/**
* @ngdoc overview
* @name horizon.framework.widgets.toast
* description
*
* # horizon.framework.widgets.toast
*
* The `horizon.framework.widgets.toast` module provides pop-up notifications to Horizon.
* A toast is a short text message triggered by a user action to provide
* real-time information. Toasts do not disrupt the page's behavior and
* typically auto-expire and fade. Also, toasts do not accept any user
* interaction.
*
*
* | Components |
* |--------------------------------------------------------------------------|
* | {@link horizon.framework.widgets.toast.factory:toastService `toastService`} |
* | {@link horizon.framework.widgets.toast.directive:toast `toast`} |
*
*/
angular
.module('horizon.framework.widgets.toast', []);
})();

2
horizon/static/framework/widgets/toast/toast.spec.js
View File

@ -85,7 +85,7 @@
it('should provide a function to clear a specific toast', function() {
service.add('success', successMsg);
service.add('info', infoMsg);
service.close(1);
service.cancel(1);
expect(service.get().length).toBe(1);
expect(service.get()[0].type).not.toEqual('info');
});

4
horizon/templates/horizon/_scripts.html
View File

@ -66,7 +66,9 @@
<script src='{{ STATIC_URL }}framework/widgets/metadata-tree/metadata-tree-service.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/metadata-display/metadata-display.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/magic-search/magic-search.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/toast/toast.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/toast/toast.module.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/toast/toast.directive.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/toast/toast.factory.js'></script>
<script src='{{ STATIC_URL }}horizon/lib/jquery/jquery.quicksearch.js'></script>
<script src="{{ STATIC_URL }}horizon/lib/jquery/jquery.tablesorter.js"></script>

4
horizon/test/jasmine/jasmine_tests.py
View File

@ -68,7 +68,9 @@ class ServicesTests(test.JasmineTests):
'framework/widgets/transfer-table/transfer-table.js',
'framework/widgets/wizard/wizard.js',
'framework/widgets/metadata-display/metadata-display.js',
'framework/widgets/toast/toast.js',
'framework/widgets/toast/toast.module.js',
'framework/widgets/toast/toast.directive.js',
'framework/widgets/toast/toast.factory.js',
]
specs = [
'horizon/tests/jasmine/utils.spec.js',