handle-swal-dom.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. 'use strict';
  2. var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
  3. Object.defineProperty(exports, '__esModule', {
  4. value: true
  5. });
  6. var _hexToRgb = require('./utils');
  7. var _removeClass$getTopMargin$fadeIn$show$addClass = require('./handle-dom');
  8. var _defaultParams = require('./default-params');
  9. var _defaultParams2 = _interopRequireWildcard(_defaultParams);
  10. /*
  11. * Add modal + overlay to DOM
  12. */
  13. var _injectedHTML = require('./injected-html');
  14. var _injectedHTML2 = _interopRequireWildcard(_injectedHTML);
  15. var modalClass = '.sweet-alert';
  16. var overlayClass = '.sweet-overlay';
  17. var sweetAlertInitialize = function sweetAlertInitialize() {
  18. var sweetWrap = document.createElement('div');
  19. sweetWrap.innerHTML = _injectedHTML2['default'];
  20. // Append elements to body
  21. while (sweetWrap.firstChild) {
  22. document.body.appendChild(sweetWrap.firstChild);
  23. }
  24. };
  25. /*
  26. * Get DOM element of modal
  27. */
  28. var getModal = (function (_getModal) {
  29. function getModal() {
  30. return _getModal.apply(this, arguments);
  31. }
  32. getModal.toString = function () {
  33. return _getModal.toString();
  34. };
  35. return getModal;
  36. })(function () {
  37. var $modal = document.querySelector(modalClass);
  38. if (!$modal) {
  39. sweetAlertInitialize();
  40. $modal = getModal();
  41. }
  42. return $modal;
  43. });
  44. /*
  45. * Get DOM element of input (in modal)
  46. */
  47. var getInput = function getInput() {
  48. var $modal = getModal();
  49. if ($modal) {
  50. return $modal.querySelector('input');
  51. }
  52. };
  53. /*
  54. * Get DOM element of overlay
  55. */
  56. var getOverlay = function getOverlay() {
  57. return document.querySelector(overlayClass);
  58. };
  59. /*
  60. * Add box-shadow style to button (depending on its chosen bg-color)
  61. */
  62. var setFocusStyle = function setFocusStyle($button, bgColor) {
  63. var rgbColor = _hexToRgb.hexToRgb(bgColor);
  64. $button.style.boxShadow = '0 0 2px rgba(' + rgbColor + ', 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)';
  65. };
  66. /*
  67. * Animation when opening modal
  68. */
  69. var openModal = function openModal(callback) {
  70. var $modal = getModal();
  71. _removeClass$getTopMargin$fadeIn$show$addClass.fadeIn(getOverlay(), 10);
  72. _removeClass$getTopMargin$fadeIn$show$addClass.show($modal);
  73. _removeClass$getTopMargin$fadeIn$show$addClass.addClass($modal, 'showSweetAlert');
  74. _removeClass$getTopMargin$fadeIn$show$addClass.removeClass($modal, 'hideSweetAlert');
  75. window.previousActiveElement = document.activeElement;
  76. var $okButton = $modal.querySelector('button.confirm');
  77. $okButton.focus();
  78. setTimeout(function () {
  79. _removeClass$getTopMargin$fadeIn$show$addClass.addClass($modal, 'visible');
  80. }, 500);
  81. var timer = $modal.getAttribute('data-timer');
  82. if (timer !== 'null' && timer !== '') {
  83. var timerCallback = callback;
  84. $modal.timeout = setTimeout(function () {
  85. var doneFunctionExists = (timerCallback || null) && $modal.getAttribute('data-has-done-function') === 'true';
  86. if (doneFunctionExists) {
  87. timerCallback(null);
  88. } else {
  89. sweetAlert.close();
  90. }
  91. }, timer);
  92. }
  93. };
  94. /*
  95. * Reset the styling of the input
  96. * (for example if errors have been shown)
  97. */
  98. var resetInput = function resetInput() {
  99. var $modal = getModal();
  100. var $input = getInput();
  101. _removeClass$getTopMargin$fadeIn$show$addClass.removeClass($modal, 'show-input');
  102. $input.value = _defaultParams2['default'].inputValue;
  103. $input.setAttribute('type', _defaultParams2['default'].inputType);
  104. $input.setAttribute('placeholder', _defaultParams2['default'].inputPlaceholder);
  105. resetInputError();
  106. };
  107. var resetInputError = function resetInputError(event) {
  108. // If press enter => ignore
  109. if (event && event.keyCode === 13) {
  110. return false;
  111. }
  112. var $modal = getModal();
  113. var $errorIcon = $modal.querySelector('.sa-input-error');
  114. _removeClass$getTopMargin$fadeIn$show$addClass.removeClass($errorIcon, 'show');
  115. var $errorContainer = $modal.querySelector('.sa-error-container');
  116. _removeClass$getTopMargin$fadeIn$show$addClass.removeClass($errorContainer, 'show');
  117. };
  118. /*
  119. * Set "margin-top"-property on modal based on its computed height
  120. */
  121. var fixVerticalPosition = function fixVerticalPosition() {
  122. var $modal = getModal();
  123. $modal.style.marginTop = _removeClass$getTopMargin$fadeIn$show$addClass.getTopMargin(getModal());
  124. };
  125. exports.sweetAlertInitialize = sweetAlertInitialize;
  126. exports.getModal = getModal;
  127. exports.getOverlay = getOverlay;
  128. exports.getInput = getInput;
  129. exports.setFocusStyle = setFocusStyle;
  130. exports.openModal = openModal;
  131. exports.resetInput = resetInput;
  132. exports.resetInputError = resetInputError;
  133. exports.fixVerticalPosition = fixVerticalPosition;