sweetalert.es6.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. // SweetAlert
  2. // 2014-2015 (c) - Tristan Edwards
  3. // github.com/t4t5/sweetalert
  4. /*
  5. * jQuery-like functions for manipulating the DOM
  6. */
  7. import {
  8. hasClass, addClass, removeClass,
  9. escapeHtml,
  10. _show, show, _hide, hide,
  11. isDescendant,
  12. getTopMargin,
  13. fadeIn, fadeOut,
  14. fireClick,
  15. stopEventPropagation
  16. } from './modules/handle-dom';
  17. /*
  18. * Handy utilities
  19. */
  20. import {
  21. extend,
  22. hexToRgb,
  23. isIE8,
  24. logStr,
  25. colorLuminance
  26. } from './modules/utils';
  27. /*
  28. * Handle sweetAlert's DOM elements
  29. */
  30. import {
  31. sweetAlertInitialize,
  32. getModal,
  33. getOverlay,
  34. getInput,
  35. setFocusStyle,
  36. openModal,
  37. resetInput,
  38. fixVerticalPosition
  39. } from './modules/handle-swal-dom';
  40. // Handle button events and keyboard events
  41. import { handleButton, handleConfirm, handleCancel } from './modules/handle-click';
  42. import handleKeyDown from './modules/handle-key';
  43. // Default values
  44. import defaultParams from './modules/default-params';
  45. import setParameters from './modules/set-params';
  46. /*
  47. * Remember state in cases where opening and handling a modal will fiddle with it.
  48. * (We also use window.previousActiveElement as a global variable)
  49. */
  50. var previousWindowKeyDown;
  51. var lastFocusedButton;
  52. /*
  53. * Global sweetAlert function
  54. * (this is what the user calls)
  55. */
  56. var sweetAlert, swal;
  57. export default sweetAlert = swal = function() {
  58. var customizations = arguments[0];
  59. addClass(document.body, 'stop-scrolling');
  60. resetInput();
  61. /*
  62. * Use argument if defined or default value from params object otherwise.
  63. * Supports the case where a default value is boolean true and should be
  64. * overridden by a corresponding explicit argument which is boolean false.
  65. */
  66. function argumentOrDefault(key) {
  67. var args = customizations;
  68. return (args[key] === undefined) ? defaultParams[key] : args[key];
  69. }
  70. if (customizations === undefined) {
  71. logStr('SweetAlert expects at least 1 attribute!');
  72. return false;
  73. }
  74. var params = extend({}, defaultParams);
  75. switch (typeof customizations) {
  76. // Ex: swal("Hello", "Just testing", "info");
  77. case 'string':
  78. params.title = customizations;
  79. params.text = arguments[1] || '';
  80. params.type = arguments[2] || '';
  81. break;
  82. // Ex: swal({ title:"Hello", text: "Just testing", type: "info" });
  83. case 'object':
  84. if (customizations.title === undefined) {
  85. logStr('Missing "title" argument!');
  86. return false;
  87. }
  88. params.title = customizations.title;
  89. for (let customName in defaultParams) {
  90. params[customName] = argumentOrDefault(customName);
  91. }
  92. // Show "Confirm" instead of "OK" if cancel button is visible
  93. params.confirmButtonText = params.showCancelButton ? 'Confirm' : defaultParams.confirmButtonText;
  94. params.confirmButtonText = argumentOrDefault('confirmButtonText');
  95. // Callback function when clicking on "OK"/"Cancel"
  96. params.doneFunction = arguments[1] || null;
  97. break;
  98. default:
  99. logStr('Unexpected type of argument! Expected "string" or "object", got ' + typeof customizations);
  100. return false;
  101. }
  102. setParameters(params);
  103. fixVerticalPosition();
  104. openModal(arguments[1]);
  105. // Modal interactions
  106. var modal = getModal();
  107. /*
  108. * Make sure all modal buttons respond to all events
  109. */
  110. var $buttons = modal.querySelectorAll('button');
  111. var buttonEvents = ['onclick', 'onmouseover', 'onmouseout', 'onmousedown', 'onmouseup', 'onfocus'];
  112. var onButtonEvent = (e) => handleButton(e, params, modal);
  113. for (let btnIndex = 0; btnIndex < $buttons.length; btnIndex++) {
  114. for (let evtIndex = 0; evtIndex < buttonEvents.length; evtIndex++) {
  115. let btnEvt = buttonEvents[evtIndex];
  116. $buttons[btnIndex][btnEvt] = onButtonEvent;
  117. }
  118. }
  119. // Clicking outside the modal dismisses it (if allowed by user)
  120. getOverlay().onclick = onButtonEvent;
  121. previousWindowKeyDown = window.onkeydown;
  122. var onKeyEvent = (e) => handleKeyDown(e, params, modal);
  123. window.onkeydown = onKeyEvent;
  124. window.onfocus = function () {
  125. // When the user has focused away and focused back from the whole window.
  126. setTimeout(function () {
  127. // Put in a timeout to jump out of the event sequence.
  128. // Calling focus() in the event sequence confuses things.
  129. if (lastFocusedButton !== undefined) {
  130. lastFocusedButton.focus();
  131. lastFocusedButton = undefined;
  132. }
  133. }, 0);
  134. };
  135. // Show alert with enabled buttons always
  136. swal.enableButtons();
  137. };
  138. /*
  139. * Set default params for each popup
  140. * @param {Object} userParams
  141. */
  142. sweetAlert.setDefaults = swal.setDefaults = function(userParams) {
  143. if (!userParams) {
  144. throw new Error('userParams is required');
  145. }
  146. if (typeof userParams !== 'object') {
  147. throw new Error('userParams has to be a object');
  148. }
  149. extend(defaultParams, userParams);
  150. };
  151. /*
  152. * Animation when closing modal
  153. */
  154. sweetAlert.close = swal.close = function() {
  155. var modal = getModal();
  156. fadeOut(getOverlay(), 5);
  157. fadeOut(modal, 5);
  158. removeClass(modal, 'showSweetAlert');
  159. addClass(modal, 'hideSweetAlert');
  160. removeClass(modal, 'visible');
  161. /*
  162. * Reset icon animations
  163. */
  164. var $successIcon = modal.querySelector('.sa-icon.sa-success');
  165. removeClass($successIcon, 'animate');
  166. removeClass($successIcon.querySelector('.sa-tip'), 'animateSuccessTip');
  167. removeClass($successIcon.querySelector('.sa-long'), 'animateSuccessLong');
  168. var $errorIcon = modal.querySelector('.sa-icon.sa-error');
  169. removeClass($errorIcon, 'animateErrorIcon');
  170. removeClass($errorIcon.querySelector('.sa-x-mark'), 'animateXMark');
  171. var $warningIcon = modal.querySelector('.sa-icon.sa-warning');
  172. removeClass($warningIcon, 'pulseWarning');
  173. removeClass($warningIcon.querySelector('.sa-body'), 'pulseWarningIns');
  174. removeClass($warningIcon.querySelector('.sa-dot'), 'pulseWarningIns');
  175. // Reset custom class (delay so that UI changes aren't visible)
  176. setTimeout(function() {
  177. var customClass = modal.getAttribute('data-custom-class');
  178. removeClass(modal, customClass);
  179. }, 300);
  180. // Make page scrollable again
  181. removeClass(document.body, 'stop-scrolling');
  182. // Reset the page to its previous state
  183. window.onkeydown = previousWindowKeyDown;
  184. if (window.previousActiveElement) {
  185. window.previousActiveElement.focus();
  186. }
  187. lastFocusedButton = undefined;
  188. clearTimeout(modal.timeout);
  189. return true;
  190. };
  191. /*
  192. * Validation of the input field is done by user
  193. * If something is wrong => call showInputError with errorMessage
  194. */
  195. sweetAlert.showInputError = swal.showInputError = function(errorMessage) {
  196. var modal = getModal();
  197. var $errorIcon = modal.querySelector('.sa-input-error');
  198. addClass($errorIcon, 'show');
  199. var $errorContainer = modal.querySelector('.sa-error-container');
  200. addClass($errorContainer, 'show');
  201. $errorContainer.querySelector('p').innerHTML = errorMessage;
  202. setTimeout(function() {
  203. sweetAlert.enableButtons();
  204. }, 1);
  205. modal.querySelector('input').focus();
  206. };
  207. /*
  208. * Reset input error DOM elements
  209. */
  210. sweetAlert.resetInputError = swal.resetInputError = function(event) {
  211. // If press enter => ignore
  212. if (event && event.keyCode === 13) {
  213. return false;
  214. }
  215. var $modal = getModal();
  216. var $errorIcon = $modal.querySelector('.sa-input-error');
  217. removeClass($errorIcon, 'show');
  218. var $errorContainer = $modal.querySelector('.sa-error-container');
  219. removeClass($errorContainer, 'show');
  220. };
  221. /*
  222. * Disable confirm and cancel buttons
  223. */
  224. sweetAlert.disableButtons = swal.disableButtons = function(event) {
  225. var modal = getModal();
  226. var $confirmButton = modal.querySelector('button.confirm');
  227. var $cancelButton = modal.querySelector('button.cancel');
  228. $confirmButton.disabled = true;
  229. $cancelButton.disabled = true;
  230. };
  231. /*
  232. * Enable confirm and cancel buttons
  233. */
  234. sweetAlert.enableButtons = swal.enableButtons = function(event) {
  235. var modal = getModal();
  236. var $confirmButton = modal.querySelector('button.confirm');
  237. var $cancelButton = modal.querySelector('button.cancel');
  238. $confirmButton.disabled = false;
  239. $cancelButton.disabled = false;
  240. };
  241. if (typeof window !== 'undefined') {
  242. // The 'handle-click' module requires
  243. // that 'sweetAlert' was set as global.
  244. window.sweetAlert = window.swal = sweetAlert;
  245. } else {
  246. logStr('SweetAlert is a frontend module!');
  247. }