diff --git a/horizon/karma.conf.js b/horizon/karma.conf.js index 8cef1246e9..305cf35140 100644 --- a/horizon/karma.conf.js +++ b/horizon/karma.conf.js @@ -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', diff --git a/horizon/static/framework/widgets/toast/toast.directive.js b/horizon/static/framework/widgets/toast/toast.directive.js new file mode 100644 index 0000000000..9b676e75f4 --- /dev/null +++ b/horizon/static/framework/widgets/toast/toast.directive.js @@ -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; + } + } + +})(); diff --git a/horizon/static/framework/widgets/toast/toast.factory.js b/horizon/static/framework/widgets/toast/toast.factory.js new file mode 100644 index 0000000000..4bca734307 --- /dev/null +++ b/horizon/static/framework/widgets/toast/toast.factory.js @@ -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'); + } + } +})(); diff --git a/horizon/static/framework/widgets/toast/toast.html b/horizon/static/framework/widgets/toast/toast.html index cf69fb1342..2d7fdae1e1 100644 --- a/horizon/static/framework/widgets/toast/toast.html +++ b/horizon/static/framework/widgets/toast/toast.html @@ -1,6 +1,6 @@
- +
{$ toast.typeMsg $}: {$ toast.msg $}
diff --git a/horizon/static/framework/widgets/toast/toast.js b/horizon/static/framework/widgets/toast/toast.js deleted file mode 100644 index 89398fddb7..0000000000 --- a/horizon/static/framework/widgets/toast/toast.js +++ /dev/null @@ -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; - } - }; - }]); - -})(); diff --git a/horizon/static/framework/widgets/toast/toast.module.js b/horizon/static/framework/widgets/toast/toast.module.js new file mode 100644 index 0000000000..6740a9990d --- /dev/null +++ b/horizon/static/framework/widgets/toast/toast.module.js @@ -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', []); + +})(); diff --git a/horizon/static/framework/widgets/toast/toast.spec.js b/horizon/static/framework/widgets/toast/toast.spec.js index 3b4b214446..6321aae5f3 100644 --- a/horizon/static/framework/widgets/toast/toast.spec.js +++ b/horizon/static/framework/widgets/toast/toast.spec.js @@ -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'); }); diff --git a/horizon/templates/horizon/_scripts.html b/horizon/templates/horizon/_scripts.html index 2791f58f19..f38e106d8a 100644 --- a/horizon/templates/horizon/_scripts.html +++ b/horizon/templates/horizon/_scripts.html @@ -66,7 +66,9 @@ - + + + diff --git a/horizon/test/jasmine/jasmine_tests.py b/horizon/test/jasmine/jasmine_tests.py index 1b577a3a64..ef1dbed0fb 100644 --- a/horizon/test/jasmine/jasmine_tests.py +++ b/horizon/test/jasmine/jasmine_tests.py @@ -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',