blob: 9b60def99ad3367243dbc80d9ebad908392b6f93 [file] [log] [blame]
Matteo Scandoloa5d03d52016-07-21 11:35:46 -07001/**
2 * © OpenCORD
3 *
4 * Visit http://guide.xosproject.org/devguide/addview/ for more information
5 *
6 * Created by teone on 4/15/16.
7 */
8
9(function () {
10 'use strict';
11
12 angular.module('xos.uiComponents')
13
14 /**
15 * @ngdoc directive
16 * @name xos.uiComponents.directive:xosAlert
17 * @restrict E
18 * @description The xos-alert directive
19 * @param {Object} config The configuration object
20 * ```
21 * {
22 * type: 'danger', //info, success, warning
23 * closeBtn: true, //default false
24 * autoHide: 3000 //delay to automatically hide the alert
25 * }
26 * ```
27 * @param {Boolean=} show Binding to show and hide the alert, default to true
28 * @element ANY
29 * @scope
30 * @example
31 <example module="sampleAlert1">
32 <file name="index.html">
33 <div ng-controller="SampleCtrl1 as vm">
34 <xos-alert config="vm.config1">
35 A sample alert message
36 </xos-alert>
37 <xos-alert config="vm.config2">
38 A sample alert message (with close button)
39 </xos-alert>
40 <xos-alert config="vm.config3">
41 A sample info message
42 </xos-alert>
43 <xos-alert config="vm.config4">
44 A sample success message
45 </xos-alert>
46 <xos-alert config="vm.config5">
47 A sample warning message
48 </xos-alert>
49 </div>
50 </file>
51 <file name="script.js">
52 angular.module('sampleAlert1', ['xos.uiComponents'])
53 .controller('SampleCtrl1', function(){
54 this.config1 = {
55 type: 'danger'
56 };
57
58 this.config2 = {
59 type: 'danger',
60 closeBtn: true
61 };
62
63 this.config3 = {
64 type: 'info'
65 };
66
67 this.config4 = {
68 type: 'success'
69 };
70
71 this.config5 = {
72 type: 'warning'
73 };
74 });
75 </file>
76 </example>
77
78 <example module="sampleAlert2" animations="true">
79 <file name="index.html">
80 <div ng-controller="SampleCtrl as vm" class="row">
81 <div class="col-sm-4">
82 <a class="btn btn-default btn-block" ng-show="!vm.show" ng-click="vm.show = true">Show Alert</a>
83 <a class="btn btn-default btn-block" ng-show="vm.show" ng-click="vm.show = false">Hide Alert</a>
84 </div>
85 <div class="col-sm-8">
86 <xos-alert config="vm.config1" show="vm.show">
87 A sample alert message, not displayed by default.
88 </xos-alert>
89 </div>
90 </div>
91 </file>
92 <file name="script.js">
93 angular.module('sampleAlert2', ['xos.uiComponents', 'ngAnimate'])
94 .controller('SampleCtrl', function(){
95 this.config1 = {
96 type: 'success'
97 };
98
99 this.show = false;
100 });
101 </file>
102 </example>
103 **/
104
105 .directive('xosAlert', function(){
106 return {
107 restrict: 'E',
108 scope: {
109 config: '=',
110 show: '=?'
111 },
112 template: `
113 <div ng-cloak class="alert alert-{{vm.config.type}}" ng-hide="!vm.show">
114 <button type="button" class="close" ng-if="vm.config.closeBtn" ng-click="vm.dismiss()">
115 <span aria-hidden="true">&times;</span>
116 </button>
117 <p ng-transclude></p>
118 </div>
119 `,
120 transclude: true,
121 bindToController: true,
122 controllerAs: 'vm',
123 controller: function($timeout){
124
125 if(!this.config){
126 throw new Error('[xosAlert] Please provide a configuration via the "config" attribute');
127 }
128
129 // default the value to true
130 this.show = this.show !== false;
131
132 this.dismiss = () => {
133 this.show = false;
134 }
135
136 if(this.config.autoHide){
137 let to = $timeout(() => {
138 this.dismiss();
139 $timeout.cancel(to);
140 }, this.config.autoHide);
141 }
142 }
143 }
144 })
145})();