You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

lubusy.js 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. /**
  2. * Created by robin on 10/24/15.
  3. */
  4. angular.module('appSdk')
  5. .directive('luBusy', ['$compile', '$http', 'PromisesDataAccess', '$templateCache', '$mdDialog',
  6. function($compile, $http, PromisesDataAccess, $templateCache, $mdDialog){
  7. return {
  8. restrict: 'A',
  9. scope: {
  10. luBusy: '&'
  11. },
  12. link: function($scope, element, attrs) {
  13. /*var position = element.css('position');
  14. if (position === 'static' || position === '' || typeof position === 'undefined'){
  15. element.css('position','relative');
  16. }*/
  17. $scope.isLoading = false;
  18. $scope.hasError = false;
  19. var options = {
  20. group: attrs.luBusy,
  21. templateLoader: "/luticate/lubusy-loader.html",
  22. templateError: "/luticate/lubusy-error.html"
  23. };
  24. $scope.update = function()
  25. {
  26. var o = $scope.luBusy();
  27. if (o != null) {
  28. if (typeof o == 'string') {
  29. options.group = o;
  30. }
  31. else {
  32. angular.extend(options, o);
  33. }
  34. }
  35. var loaders = PromisesDataAccess.getLoadersGroup(options.group);
  36. $scope.isLoading = false;
  37. if (loaders != null) {
  38. $scope.isLoading = loaders.some(function (promise) {
  39. return promise.status == 0;
  40. });
  41. }
  42. var errors = PromisesDataAccess.getErrorsGroup(options.group);
  43. $scope.hasError = false;
  44. if (errors != null) {
  45. $scope.hasError = errors.some(function (promise) {
  46. return promise.status == 2;
  47. });
  48. }
  49. };
  50. $scope.loaderSplashIsActive = function() {
  51. $scope.update();
  52. return $scope.isLoading && !$scope.hasError;
  53. };
  54. $scope.errorSplashIsActive = function() {
  55. $scope.update();
  56. return $scope.hasError;
  57. };
  58. $scope.showError = function()
  59. {
  60. var errors = PromisesDataAccess.getErrorsGroup(options.group);
  61. var error = null;
  62. if (errors != null) {
  63. error = errors.find(function (promise) {
  64. return promise.status == 2;
  65. });
  66. }
  67. if (error != null) {
  68. $mdDialog.show(
  69. $mdDialog.alert()
  70. .parent(angular.element(document.querySelector('#popupContainer')))
  71. .clickOutsideToClose(true)
  72. .title('Oops, an error has occurred')
  73. .textContent(error.value.Data.Message || error.value)
  74. .ariaLabel('Oops, an error has occurred')
  75. .ok('Ok')
  76. );
  77. }
  78. };
  79. function addTemplate(template, ngShow) {
  80. $http.get(template, {cache: $templateCache}).success(function (indicatorTemplate) {
  81. var templateScope = $scope.$new();
  82. var backdrop = '<div class="lu-busy lu-busy-backdrop lu-busy-backdrop-animation ng-hide" ng-show="' + ngShow + '"></div>';
  83. var backdropElement = $compile(backdrop)(templateScope);
  84. element.append(backdropElement);
  85. var template = '<div class="lu-busy lu-busy-animation ng-hide" ng-show="' + ngShow + '">' + indicatorTemplate + '</div>';
  86. var templateElement = $compile(template)(templateScope);
  87. element.append(templateElement);
  88. }).error(function (data) {
  89. throw new Error('Template specified for luBusy (' + template + ') could not be loaded. ' + data);
  90. });
  91. }
  92. addTemplate(options.templateLoader, 'loaderSplashIsActive()');
  93. addTemplate(options.templateError, 'errorSplashIsActive()');
  94. }
  95. };
  96. }
  97. ]);
  98. angular.module('appSdk').run(['$templateCache', function($templateCache) {
  99. 'use strict';
  100. $templateCache.put('/luticate/lubusy-loader.html',
  101. "<div class=\"lu-busy-default-wrapper\" style=\"position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;\">\n" +
  102. "\n" +
  103. " <div class=\"lu-busy-default-sign\">\n" +
  104. "\n" +
  105. " <div class=\"lu-busy-default-spinner\">\n" +
  106. " <div class=\"bar1\"></div>\n" +
  107. " <div class=\"bar2\"></div>\n" +
  108. " <div class=\"bar3\"></div>\n" +
  109. " <div class=\"bar4\"></div>\n" +
  110. " <div class=\"bar5\"></div>\n" +
  111. " <div class=\"bar6\"></div>\n" +
  112. " <div class=\"bar7\"></div>\n" +
  113. " <div class=\"bar8\"></div>\n" +
  114. " <div class=\"bar9\"></div>\n" +
  115. " <div class=\"bar10\"></div>\n" +
  116. " <div class=\"bar11\"></div>\n" +
  117. " <div class=\"bar12\"></div>\n" +
  118. " </div>\n" +
  119. "\n" +
  120. " <div class=\"lu-busy-default-text\">Please wait...</div>\n" +
  121. "\n" +
  122. " </div>\n" +
  123. "\n" +
  124. "</div>"
  125. );
  126. $templateCache.put('/luticate/lubusy-error.html',
  127. "<div class=\"lu-busy-default-wrapper\" style=\"position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;\">\n" +
  128. "\n" +
  129. " <div class=\"lu-busy-default-sign\">\n" +
  130. "\n" +
  131. " <div class=\"lu-busy-default-error-text\"><a href=\"\" ng-click=\"showError()\">Error</a></div>\n" +
  132. "\n" +
  133. " </div>\n" +
  134. "\n" +
  135. "</div>"
  136. );
  137. }]);