Draft of React test
[clamp.git] / src / main / resources / META-INF / resources / designer / lib / dialogs.js
1 /**
2  * angular-dialog-service - A service to handle common dialog types in a web application.  Built on top of Angular-Bootstrap's modal
3  * @version v5.3.0
4  * @author Michael Conroy, michael.e.conroy@gmail.com
5  * @license MIT, http://www.opensource.org/licenses/MIT
6  */
7 (function(){
8 "use strict";
9 //== Translate Substitute Module =============================================//
10
11 /**
12  * For those not using Angular-Translate (pascalprecht.translate), this will sub
13  * in for it so we don't have to include Angular-Translate if we don't want to.
14  */
15
16 var translateSubMod = angular.module('translate.sub',[]);
17
18         /**
19          * $translate Service
20          * Sets up a $translateProvider service to use in your module's config
21          * function.  $translate.Provider syntax is the same as Angular-Translate,
22          * use $translate.Provider.translations(lang,obj) to change the defaults
23          * for modal button, header and message text.
24          */
25         translateSubMod.provider('$translate',[function(){
26                 var _translations = []; // object of key/value translation pairs
27                 var _current = 'en-US'; // default language
28
29                 /**
30                  * Translations
31                  * Set the internal object of translation key/value pairs.
32                  */
33                 this.translations = function(lang,obj){
34                         if(angular.isDefined(lang) && angular.isDefined(obj)){
35                                 _translations[lang] = angular.copy(obj);
36                                 _current = lang;
37                         }
38                 }; // end translations
39
40                 this.$get = [function(){
41                         return {
42                                 /**
43                                  * Instant
44                                  * Retrieve the translation for the given key, if key not found
45                                  * return an empty string.
46                                  * Example: $translate.instant('DIALOGS_OK');
47                                  */
48                                 instant : function(what){
49                                         if(angular.isDefined(what) && angular.isDefined(_translations[_current][what]))
50                                                 return _translations[_current][what];
51                                         else
52                                                 return '';
53                                 } // end instant
54                         }; // end return 
55                 }]; // end $get
56
57         }]); // end $translate
58
59         /**
60          * Translate Filter
61          * For use in an Angular template.  
62          * Example: {{"DIALOGS_CLOSE" | translate}}
63          */
64         translateSubMod.filter('translate',['$translate',function($translate){
65                 return function(what){
66                         return $translate.instant(what);
67                 };
68         }]); // end translate / translate.sub
69 //== Controllers =============================================================//
70
71 var ctrlrs; // will be dialogs.controllers module
72
73 // determine if Angular-Translate is available, if not use the substitute
74 try{
75         angular.module('pascalprecht.translate'); // throws error if module not loaded
76         // console.log('Dialogs (Angular-Translate): OK');
77         
78         // dialogs.controllers: module declaration
79         ctrlrs = angular.module('dialogs.controllers',['ui.bootstrap.modal','pascalprecht.translate']);
80 }catch(err){
81         // console.log('Dialogs: (Angular-Translate): ' + err.message);
82         // console.log('Dialogs: Attempting to use translate.sub module.');
83
84         // dialogs.controllers: module declaration
85         ctrlrs = angular.module('dialogs.controllers',['ui.bootstrap.modal','translate.sub']);
86 } // end try/catch
87
88 // angular.module('dialogs.controllers',['ui.bootstrap.modal','pascalprecht.translate'])
89
90 /**
91  * Error Dialog Controller 
92  */
93 ctrlrs.controller('errorDialogCtrl',['$scope','$uibModalInstance','$translate','data',function($scope,$uibModalInstance,$translate,data){
94         //-- Variables -----//
95
96         $scope.header = (angular.isDefined(data.header)) ? data.header : $translate.instant('DIALOGS_ERROR');
97         $scope.msg = (angular.isDefined(data.msg)) ? data.msg : $translate.instant('DIALOGS_ERROR_MSG');
98         $scope.icon = (angular.isDefined(data.fa) && angular.equals(data.fa,true)) ? 'fa fa-warning' : 'glyphicon glyphicon-warning-sign';
99
100         //-- Methods -----//
101         
102         $scope.close = function(){
103                 $uibModalInstance.close();
104                 $scope.$destroy();
105         }; // end close
106 }]); // end ErrorDialogCtrl
107         
108 /**
109  * Wait Dialog Controller 
110  */
111 ctrlrs.controller('waitDialogCtrl',['$scope','$uibModalInstance','$translate','$timeout','data',function($scope,$uibModalInstance,$translate,$timeout,data){
112         //-- Variables -----//
113
114         $scope.header = (angular.isDefined(data.header)) ? data.header : $translate.instant('DIALOGS_PLEASE_WAIT_ELIPS');
115         $scope.msg = (angular.isDefined(data.msg)) ? data.msg : $translate.instant('DIALOGS_PLEASE_WAIT_MSG');
116         $scope.progress = (angular.isDefined(data.progress)) ? data.progress : 100;
117         $scope.icon = (angular.isDefined(data.fa) && angular.equals(data.fa,true)) ? 'fa fa-clock-o' : 'glyphicon glyphicon-time';
118
119         //-- Listeners -----//
120         
121         // Note: used $timeout instead of $scope.$apply() because I was getting a $$nextSibling error
122         
123         // close wait dialog
124         $scope.$on('dialogs.wait.complete',function(){
125                 $timeout(function(){ $uibModalInstance.close(); $scope.$destroy(); });
126         }); // end on(dialogs.wait.complete)
127         
128         // update the dialog's message
129         $scope.$on('dialogs.wait.message',function(evt,args){
130                 $scope.msg = (angular.isDefined(args.msg)) ? args.msg : $scope.msg;
131         }); // end on(dialogs.wait.message)
132         
133         // update the dialog's progress (bar) and/or message
134         $scope.$on('dialogs.wait.progress',function(evt,args){
135                 $scope.msg = (angular.isDefined(args.msg)) ? args.msg : $scope.msg;
136                 $scope.progress = (angular.isDefined(args.progress)) ? args.progress : $scope.progress;
137         }); // end on(dialogs.wait.progress)
138         
139         //-- Methods -----//
140
141         $scope.getProgress = function(){
142                 return {'width': $scope.progress + '%'};
143         }; // end getProgress
144         
145 }]); // end WaitDialogCtrl
146
147 /**
148  * Notify Dialog Controller 
149  */
150 ctrlrs.controller('notifyDialogCtrl',['$scope','$uibModalInstance','$translate','data',function($scope,$uibModalInstance,$translate,data){
151         //-- Variables -----//
152
153         $scope.header = (angular.isDefined(data.header)) ? data.header : $translate.instant('DIALOGS_NOTIFICATION');
154         $scope.msg = (angular.isDefined(data.msg)) ? data.msg : $translate.instant('DIALOGS_NOTIFICATION_MSG');
155         $scope.icon = (angular.isDefined(data.fa) && angular.equals(data.fa,true)) ? 'fa fa-info' : 'glyphicon glyphicon-info-sign';
156
157         //-- Methods -----//
158         
159         $scope.close = function(){
160                 $uibModalInstance.close();
161                 $scope.$destroy();
162         }; // end close
163 }]); // end WaitDialogCtrl
164
165 /**
166  * Confirm Dialog Controller 
167  */
168 ctrlrs.controller('confirmDialogCtrl',['$scope','$uibModalInstance','$translate','data',function($scope,$uibModalInstance,$translate,data){
169         //-- Variables -----//
170
171         $scope.header = (angular.isDefined(data.header)) ? data.header : $translate.instant('DIALOGS_CONFIRMATION');
172         $scope.msg = (angular.isDefined(data.msg)) ? data.msg : $translate.instant('DIALOGS_CONFIRMATION_MSG');
173         $scope.icon = (angular.isDefined(data.fa) && angular.equals(data.fa,true)) ? 'fa fa-check' : 'glyphicon glyphicon-check';
174
175         //-- Methods -----//
176         
177         $scope.no = function(){
178                 $uibModalInstance.dismiss('no');
179         }; // end close
180         
181         $scope.yes = function(){
182                 $uibModalInstance.close('yes');
183         }; // end yes
184 }]); // end ConfirmDialogCtrl / dialogs.controllers
185 //== Services ================================================================//
186
187 angular.module('dialogs.services',['ui.bootstrap.modal','dialogs.controllers'])
188
189         .provider('dialogs',[function(){
190                 var _b = true; // backdrop
191                 var _k = true; // keyboard
192                 var _w = 'dialogs-default'; // windowClass
193                 var _bdc = 'dialogs-backdrop-default'; // backdropClass
194                 var _copy = true; // controls use of angular.copy
195                 var _wTmpl = null; // window template
196                 var _wSize = 'lg'; // large modal window default
197                 var _animation = false; // true/false to use animation
198
199                 var _fa = false; // fontawesome flag
200
201                 var _setOpts = function(opts){
202                         var _opts = {};
203                         opts = opts || {};
204                         _opts.kb = (angular.isDefined(opts.keyboard)) ? !!opts.keyboard : _k; // values: true,false
205                         _opts.bd = (angular.isDefined(opts.backdrop)) ? opts.backdrop : _b; // values: 'static',true,false
206                         _opts.bdc = (angular.isDefined(opts.backdropClass)) ? opts.backdropClass : _bdc; // additional CSS class(es) to be added to the modal backdrop
207                         _opts.ws = (angular.isDefined(opts.size) && ((opts.size === 'sm') || (opts.size === 'lg') || (opts.size === 'md'))) ? opts.size : _wSize; // values: 'sm', 'lg', 'md'
208                         _opts.wc = (angular.isDefined(opts.windowClass)) ? opts.windowClass : _w; // additional CSS class(es) to be added to a modal window
209                         _opts.anim = (angular.isDefined(opts.animation)) ? !!opts.animation : _animation; // values: true,false
210                         return _opts;
211                 }; // end _setOpts
212
213                 /**
214                  * Use Backdrop
215                  *
216                  * Sets the use of the modal backdrop.  Either to have one or not and
217                  * whether or not it responds to mouse clicks ('static' sets the
218                  * backdrop to true and does not respond to mouse clicks).
219                  *
220                  * @param       val     mixed   (true, false, 'static')
221                  */
222                 this.useBackdrop = function(val){ // possible values : true, false, 'static'
223                         if(angular.isDefined(val))
224                                 _b = val;
225                 }; // end useStaticBackdrop
226
227                 /**
228                  * Use ESC Close
229                  *
230                  * Sets the use of the ESC (escape) key to close modal windows.
231                  *
232                  * @param       val     boolean
233                  */
234                 this.useEscClose = function(val){ // possible values : true, false
235                         if(angular.isDefined(val))
236                                 _k = (!angular.equals(val,0) && !angular.equals(val,'false') && !angular.equals(val,'no') && !angular.equals(val,null) && !angular.equals(val,false)) ? true : false;
237                 }; // end useESCClose
238
239                 /**
240                  * Use Class
241                  *
242                  * Sets the additional CSS window class of the modal window template.
243                  *
244                  * @param       val     string
245                  */
246                 this.useClass = function(val){
247                         if(angular.isDefined(val))
248                                 _w = val;
249                 }; // end useClass
250
251                 /**
252                  * Use Copy
253                  *
254                  * Determines the use of angular.copy when sending data to the modal controller.
255                  *
256                  * @param       val     boolean
257                  */
258                 this.useCopy = function(val){
259                         if(angular.isDefined(val))
260                                 _copy = (!angular.equals(val,0) && !angular.equals(val,'false') && !angular.equals(val,'no') && !angular.equals(val,null) && !angular.equals(val,false)) ? true : false;
261                 }; // end useCopy
262
263                 /**
264                  * Set Window Template
265                  *
266                  * Sets a path to a template to use overriding modal's window template.
267                  *
268                  * @param       val     string
269                  */
270                 this.setWindowTmpl = function(val){
271                         if(angular.isDefined(val))
272                                 _wTmpl = val;
273                 }; // end setWindowTmpl
274
275                 /**
276                  * Set Size
277                  *
278                  * Sets the modal size to use (sm,lg,md)
279                  *
280                  * @param       val     string (sm,lg,md)
281                  */
282                 this.setSize = function(val){
283                         if(angular.isDefined(val))
284                                 _wSize = (angular.equals(val,'sm') || angular.equals(val,'lg') || angular.equals(val,'md')) ? val : _wSize;
285                 }; // end setSize
286
287                 /**
288                  * Use Animations
289                  *
290                  * Sets the use of animations to true
291                  */
292                  this.useAnimation = function(){
293                         _animation = true;
294                  }; // end useAnimation
295
296                 /**
297                  * Use Font-Awesome.
298                  *
299                  * Sets Font-Awesome flag to true and substitutes font-awesome icons for
300                  * Bootstrap's glyphicons.
301                  */
302                 this.useFontAwesome = function(){
303                         _fa = true;
304                 }; // end useFontAwesome
305
306
307                 this.$get = ['$uibModal',function ($uibModal){
308
309                         return {
310                                 /**
311                                  * Error Dialog
312                                  *
313                                  * @param       header  string
314                                  * @param       msg     string
315                                  * @param       opts    object
316                                  */
317                                 error : function(header,msg,opts){
318                                         opts = _setOpts(opts);
319
320                                         return $uibModal.open({
321                                                 templateUrl : '/dialogs/error.html',
322                                                 controller : 'errorDialogCtrl',
323                                                 backdrop: opts.bd,
324                                                 backdropClass: opts.bdc,
325                                                 keyboard: opts.kb,
326                                                 windowClass: opts.wc,
327                                                 size: opts.ws,
328                                                 animation: opts.anim,
329                                                 resolve : {
330                                                         data : function(){
331                                                                 return {
332                                                                         header : angular.copy(header),
333                                                                         msg : angular.copy(msg),
334                                                                         fa : _fa
335                                                                 };
336                                                         }
337                                                 }
338                                         }); // end modal.open
339                                 }, // end error
340
341                                 /**
342                                  * Wait Dialog
343                                  *
344                                  * @param       header          string
345                                  * @param       msg             string
346                                  * @param       progress        int
347                                  * @param       opts    object
348                                  */
349                                 wait : function(header,msg,progress,opts){
350                                         opts = _setOpts(opts);
351
352                                         return $uibModal.open({
353                                                 templateUrl : '/dialogs/wait.html',
354                                                 controller : 'waitDialogCtrl',
355                                                 backdrop: opts.bd,
356                                                 backdropClass: opts.bdc,
357                                                 keyboard: opts.kb,
358                                                 windowClass: opts.wc,
359                                                 size: opts.ws,
360                                                 animation: opts.anim,
361                                                 resolve : {
362                                                         data : function(){
363                                                                 return {
364                                                                         header : angular.copy(header),
365                                                                         msg : angular.copy(msg),
366                                                                         progress : angular.copy(progress),
367                                                                         fa : _fa
368                                                                 };
369                                                         }
370                                                 }
371                                         }); // end modal.open
372                                 }, // end wait
373
374                                 /**
375                                  * Notify Dialog
376                                  *
377                                  * @param       header          string
378                                  * @param       msg             string
379                                  * @param       opts    object
380                                  */
381                                 notify : function(header,msg,opts){
382                                         opts = _setOpts(opts);
383
384                                         return $uibModal.open({
385                                                 templateUrl : '/dialogs/notify.html',
386                                                 controller : 'notifyDialogCtrl',
387                                                 backdrop: opts.bd,
388                                                 backdropClass: opts.bdc,
389                                                 keyboard: opts.kb,
390                                                 windowClass: opts.wc,
391                                                 size: opts.ws,
392                                                 animation: opts.anim,
393                                                 resolve : {
394                                                         data : function(){
395                                                                 return {
396                                                                         header : angular.copy(header),
397                                                                         msg : angular.copy(msg),
398                                                                         fa : _fa
399                                                                 };
400                                                         }
401                                                 }
402                                         }); // end modal.open
403                                 }, // end notify
404
405                                 /**
406                                  * Confirm Dialog
407                                  *
408                                  * @param       header  string
409                                  * @param       msg     string
410                                  * @param       opts    object
411                                  */
412                                 confirm : function(header,msg,opts){
413                                         opts = _setOpts(opts);
414
415                                         return $uibModal.open({
416                                                 templateUrl : '/dialogs/confirm.html',
417                                                 controller : 'confirmDialogCtrl',
418                                                 backdrop: opts.bd,
419                                                 backdropClass: opts.bdc,
420                                                 keyboard: opts.kb,
421                                                 windowClass: opts.wc,
422                                                 size: opts.ws,
423                                                 animation: opts.anim,
424                                                 resolve : {
425                                                         data : function(){
426                                                                 return {
427                                                                         header : angular.copy(header),
428                                                                         msg : angular.copy(msg),
429                                                                         fa : _fa
430                                                                 };
431                                                         }
432                                                 }
433                                         }); // end modal.open
434                                 }, // end confirm
435
436                                 /**
437                                  * Create Custom Dialog
438                                  *
439                                  * @param       url     string
440                                  * @param       ctrlr   string
441                                  * @param       data    object
442                                  * @param       opts    object
443                                  */
444                                 create : function(url,ctrlr,data,opts,ctrlAs){
445                                         var copy = (opts && angular.isDefined(opts.copy)) ? opts.copy : _copy;
446                                         opts = _setOpts(opts);
447
448                                         return $uibModal.open({
449                                                 templateUrl : url,
450                                                 controller : ctrlr,
451                                                 controllerAs : ctrlAs,
452                                                 keyboard : opts.kb,
453                                                 backdrop : opts.bd,
454                                                 backdropClass: opts.bdc,
455                                                 windowClass: opts.wc,
456                                                 size: opts.ws,
457                                                 animation: opts.anim,
458                                                 resolve : {
459                                                         data : function() {
460                                                                 if(copy)
461                                                                         return angular.copy(data);
462                                                                 else
463                                                                         return data;
464                                                         }
465                                                 }
466                                         }); // end modal.open
467                                 } // end create
468
469                         }; // end return
470
471                 }]; // end $get
472         }]); // end provider dialogs
473 //== Dialogs.Main Module =====================================================//
474
475 /**
476  * Include this module 'dialogs.main' in your module's dependency list where you
477  * intend to use it.  Then inject the 'dialogs' service in your controllers that
478  * need it.
479  */
480
481 angular.module('dialogs.main',['dialogs.services','ngSanitize']) // requires angular-sanitize.min.js (ngSanitize) //code.angularjs.org/1.2.1/angular-sanitize.min.js
482                 
483         .config(['$translateProvider','dialogsProvider',function($translateProvider,dialogsProvider){
484                 /** 
485                  * if Angular-Translate is not loaded, use the translate substitute
486                  * module and create default translations to use as default modal texts
487                  */
488                 try{
489                         angular.module('pascalprecht.translate');
490                 }catch(err){
491                         // console.log('Dialogs: Creating default translations for use without Angular-Translate.');
492
493                         // This will set default modal buttons, header and message text
494                         $translateProvider.translations('en-US',{
495                     DIALOGS_ERROR: "Error",
496                     DIALOGS_ERROR_MSG: "An unknown error has occurred.",
497                     DIALOGS_CLOSE: "Close",
498                     DIALOGS_PLEASE_WAIT: "Please Wait",
499                     DIALOGS_PLEASE_WAIT_ELIPS: "Please Wait...",
500                     DIALOGS_PLEASE_WAIT_MSG: "Waiting on operation to complete.",
501                     DIALOGS_PERCENT_COMPLETE: "% Complete",
502                     DIALOGS_NOTIFICATION: "Notification",
503                     DIALOGS_NOTIFICATION_MSG: "Unknown application notification.",
504                     DIALOGS_CONFIRMATION: "Confirmation",
505                     DIALOGS_CONFIRMATION_MSG: "Confirmation required.",
506                     DIALOGS_OK: "OK",
507                     DIALOGS_YES: "Yes",
508                     DIALOGS_NO: "No"
509                 });
510                 } // end try/catch
511
512                 /**
513                  * Attempt to ascertain if page is using Font Awesome instead of the
514                  * regular Bootstrap Icons.  If you are changing the stylesheet name or
515                  * not including it from a CDN or have included Font-Awesome as a 
516                  * concatentation of CSS sheets together, then you will have to manually
517                  * set Font-Awesome usage in your Angular Module's config by including
518                  * the $dialogsProvider and calling the method $dialogsProvider.useFontAwesome().
519                  */
520                  try{
521                         var _sheets = document.styleSheets;
522
523                         sheetLoop:
524                         for(var i = (_sheets.length - 1);i >= 0;i--){
525                                 var _matches = null;
526                                 var _rules = null;
527
528                                 if(!_sheets[i].disabled){
529                                         // check href of style sheet first
530                                         if(_sheets[i].href !== null)
531                                                 _matches = _sheets[i].href.match(/font\-*awesome/i);
532
533                                         if(angular.isArray(_matches)){
534                                                 dialogsProvider.useFontAwesome();
535                                                 break; // done, leave the style sheet for loop
536                                         }else{
537                                                 // try to find css rule .fa, in case style sheet has been concatenated
538                                                 _rules = _sheets[i].cssRules;
539                                                 for(var x = (_rules.length - 1);x >= 0;x--){
540                                                         if(typeof(_rules[x].selectorText) === 'string' && _rules[x].selectorText.toLowerCase() === '.fa'){
541                                                                 dialogsProvider.useFontAwesome();
542                                                                 break sheetLoop; // done, exit both for loops
543                                                         }
544                                                 }
545                                         }
546                                 } // end if(disabled)
547                         } // end for
548                  }catch(err){
549                         // console.log('Error Message: ' + err);
550                  }
551         }]) // end config
552
553         // Add default templates via $templateCache
554         .run(['$templateCache','$interpolate',function($templateCache,$interpolate){
555     
556         // get interpolation symbol (possible that someone may have changed it in their application instead of using '{{}}')
557         var startSym = $interpolate.startSymbol();
558         var endSym = $interpolate.endSymbol();
559     
560         $templateCache.put('/dialogs/error.html','<div class="modal-header dialog-header-error"><button type="button" class="close" ng-click="close()">&times;</button><h4 class="modal-title text-danger"><span class="'+startSym+'icon'+endSym+'"></span> <span ng-bind-html="header"></span></h4></div><div class="modal-body text-danger" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="close()">'+startSym+'"DIALOGS_CLOSE" | translate'+endSym+'</button></div>');
561         $templateCache.put('/dialogs/wait.html','<div class="modal-header dialog-header-wait"><h4 class="modal-title"><span class="'+startSym+'icon'+endSym+'"></span> '+startSym+'header'+endSym+'</h4></div><div class="modal-body"><p ng-bind-html="msg"></p><div class="progress progress-striped active"><div class="progress-bar progress-bar-info" ng-style="getProgress()"></div><span class="sr-only">'+startSym+'progress'+endSym+''+startSym+'"DIALOGS_PERCENT_COMPLETE" | translate'+endSym+'</span></div></div>');
562         $templateCache.put('/dialogs/notify.html','<div class="modal-header dialog-header-notify"><button type="button" class="close" ng-click="close()" class="pull-right">&times;</button><h4 class="modal-title text-info"><span class="'+startSym+'icon'+endSym+'"></span> '+startSym+'header'+endSym+'</h4></div><div class="modal-body text-info" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-primary" ng-click="close()">'+startSym+'"DIALOGS_OK" | translate'+endSym+'</button></div>');
563         $templateCache.put('/dialogs/confirm.html','<div class="modal-header dialog-header-confirm"><button type="button" class="close" ng-click="no()">&times;</button><h4 class="modal-title"><span class="'+startSym+'icon'+endSym+'"></span> '+startSym+'header'+endSym+'</h4></div><div class="modal-body" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="yes()">'+startSym+'"DIALOGS_YES" | translate'+endSym+'</button><button type="button" class="btn btn-primary" ng-click="no()">'+startSym+'"DIALOGS_NO" | translate'+endSym+'</button></div>');
564         }]); // end run / dialogs.main
565
566 })();