Merge "JSCS Cleanup - style guide cleanup for toast"
This commit is contained in:
commit
78216578f0
@ -79,6 +79,7 @@ module.exports = function(config){
|
|||||||
'framework/widgets/charts/charts.js',
|
'framework/widgets/charts/charts.js',
|
||||||
'framework/widgets/metadata-tree/metadata-tree.js',
|
'framework/widgets/metadata-tree/metadata-tree.js',
|
||||||
'framework/widgets/table/table.js',
|
'framework/widgets/table/table.js',
|
||||||
|
'framework/widgets/toast/toast.module.js',
|
||||||
|
|
||||||
// Catch-all for stuff that isn't required explicitly by others.
|
// Catch-all for stuff that isn't required explicitly by others.
|
||||||
'auth/**/!(*spec).js',
|
'auth/**/!(*spec).js',
|
||||||
|
54
horizon/static/framework/widgets/toast/toast.directive.js
Normal file
54
horizon/static/framework/widgets/toast/toast.directive.js
Normal 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
126
horizon/static/framework/widgets/toast/toast.factory.js
Normal 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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
@ -1,6 +1,6 @@
|
|||||||
<div ng-repeat="toast in toast.get()">
|
<div ng-repeat="toast in toast.get()">
|
||||||
<div class="alert alert-{$ ::toast.type $}">
|
<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><strong>{$ toast.typeMsg $}: </strong>{$ toast.msg $}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -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
42
horizon/static/framework/widgets/toast/toast.module.js
Normal 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', []);
|
||||||
|
|
||||||
|
})();
|
@ -85,7 +85,7 @@
|
|||||||
it('should provide a function to clear a specific toast', function() {
|
it('should provide a function to clear a specific toast', function() {
|
||||||
service.add('success', successMsg);
|
service.add('success', successMsg);
|
||||||
service.add('info', infoMsg);
|
service.add('info', infoMsg);
|
||||||
service.close(1);
|
service.cancel(1);
|
||||||
expect(service.get().length).toBe(1);
|
expect(service.get().length).toBe(1);
|
||||||
expect(service.get()[0].type).not.toEqual('info');
|
expect(service.get()[0].type).not.toEqual('info');
|
||||||
});
|
});
|
||||||
|
@ -66,7 +66,9 @@
|
|||||||
<script src='{{ STATIC_URL }}framework/widgets/metadata-tree/metadata-tree-service.js'></script>
|
<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/metadata-display/metadata-display.js'></script>
|
||||||
<script src='{{ STATIC_URL }}framework/widgets/magic-search/magic-search.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.quicksearch.js'></script>
|
||||||
<script src="{{ STATIC_URL }}horizon/lib/jquery/jquery.tablesorter.js"></script>
|
<script src="{{ STATIC_URL }}horizon/lib/jquery/jquery.tablesorter.js"></script>
|
||||||
|
@ -68,7 +68,9 @@ class ServicesTests(test.JasmineTests):
|
|||||||
'framework/widgets/transfer-table/transfer-table.js',
|
'framework/widgets/transfer-table/transfer-table.js',
|
||||||
'framework/widgets/wizard/wizard.js',
|
'framework/widgets/wizard/wizard.js',
|
||||||
'framework/widgets/metadata-display/metadata-display.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 = [
|
specs = [
|
||||||
'horizon/tests/jasmine/utils.spec.js',
|
'horizon/tests/jasmine/utils.spec.js',
|
||||||
|
Loading…
Reference in New Issue
Block a user