angular-disable-all.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. /**
  2. * @author Umed Khudoiberdiev <info@zar.tj>
  3. */
  4. (function() {
  5. 'use strict';
  6. /**
  7. * @ngdoc module
  8. * @name disableAll
  9. * @description
  10. * This module represents a disable-all directive which allows you to disable any element in the DOM.
  11. */
  12. angular.module('disableAll', []);
  13. /**
  14. * @ngdoc directive
  15. * @name doNotDisable
  16. * @restrict A
  17. * @description
  18. * This directive allows you to do not disable the element even if it's under the disableAll directive
  19. */
  20. angular.module('disableAll').directive('skipDisable', skipDisableDirective);
  21. /**
  22. * @ngInject
  23. */
  24. function skipDisableDirective() {
  25. return {
  26. restrict: 'A'
  27. };
  28. }
  29. /**
  30. * @ngdoc directive
  31. * @name disableAll
  32. * @restrict A
  33. * @description
  34. * This directive allows you to disable any element in the DOM. Directive turns off all clicks, disables
  35. * inputs, buttons and textareas in the given element scope.
  36. */
  37. angular.module('disableAll').directive('disableAll', disableAllDirective);
  38. /**
  39. * @ngInject
  40. */
  41. function disableAllDirective() {
  42. return {
  43. restrict: 'A',
  44. link: function (scope, element, attrs) {
  45. var disabledElement = (attrs.disableElementId) ? document.getElementById(attrs.disableElementId) : element[0];
  46. scope.$watch(attrs.disableAll, function (isDisabled) {
  47. if (isDisabled)
  48. disableAll(disabledElement);
  49. else
  50. enableAll(disabledElement);
  51. });
  52. scope.$on('$destroy', function() {
  53. enableAll(disabledElement);
  54. });
  55. }
  56. };
  57. }
  58. /**
  59. * Disables everything in the given element.
  60. *
  61. * @param {HTMLElement} element
  62. */
  63. var disableAll = function(element) {
  64. angular.element(element).addClass('disable-all');
  65. element.style.color = 'gray';
  66. disableElements(element.getElementsByTagName('input'));
  67. disableElements(element.getElementsByTagName('button'));
  68. disableElements(element.getElementsByTagName('textarea'));
  69. disableElements(element.getElementsByTagName('select'));
  70. element.addEventListener('click', preventDefault, true);
  71. };
  72. /**
  73. * Enables everything in the given element.
  74. *
  75. * @param {HTMLElement} element
  76. */
  77. var enableAll = function(element) {
  78. angular.element(element).removeClass('disable-all');
  79. element.style.color = 'inherit';
  80. enableElements(element.getElementsByTagName('input'));
  81. enableElements(element.getElementsByTagName('button'));
  82. enableElements(element.getElementsByTagName('textarea'));
  83. enableElements(element.getElementsByTagName('select'));
  84. element.removeEventListener('click', preventDefault, true);
  85. };
  86. /**
  87. * Callback used to prevent user clicks.
  88. *
  89. * @param {Event} event
  90. * @returns {boolean}
  91. */
  92. var preventDefault = function(event) {
  93. for (var i = 0; i < event.target.attributes.length; i++) {
  94. var atts = event.target.attributes[i];
  95. if(atts.name === "skip-disable"){
  96. return true;
  97. }
  98. }
  99. event.stopPropagation();
  100. event.preventDefault();
  101. return false;
  102. };
  103. /**
  104. * Disables given elements.
  105. *
  106. * @param {Array.<HTMLElement>|NodeList} elements List of dom elements that must be disabled
  107. */
  108. var disableElements = function(elements) {
  109. var len = elements.length;
  110. for (var i = 0; i < len; i++) {
  111. var shouldDisable = true;
  112. for (var j = 0; j < elements[i].attributes.length; j++) {
  113. var atts = elements[i].attributes[j];
  114. if(atts.name === "skip-disable"){
  115. shouldDisable = false;
  116. continue;
  117. }
  118. }
  119. if (shouldDisable && elements[i].disabled === false) {
  120. elements[i].disabled = true;
  121. elements[i].disabledIf = true;
  122. }
  123. }
  124. };
  125. /**
  126. * Enables given elements.
  127. *
  128. * @param {Array.<HTMLElement>|NodeList} elements List of dom elements that must be enabled
  129. */
  130. var enableElements = function(elements) {
  131. var len = elements.length;
  132. for (var i = 0; i < len; i++) {
  133. if (elements[i].disabled === true && elements[i].disabledIf === true) {
  134. elements[i].disabled = false;
  135. elements[i].disabledIf = null;
  136. }
  137. }
  138. };
  139. })();