123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311 |
- // SweetAlert
- // 2014-2015 (c) - Tristan Edwards
- // github.com/t4t5/sweetalert
- /*
- * jQuery-like functions for manipulating the DOM
- */
- import {
- hasClass, addClass, removeClass,
- escapeHtml,
- _show, show, _hide, hide,
- isDescendant,
- getTopMargin,
- fadeIn, fadeOut,
- fireClick,
- stopEventPropagation
- } from './modules/handle-dom';
- /*
- * Handy utilities
- */
- import {
- extend,
- hexToRgb,
- isIE8,
- logStr,
- colorLuminance
- } from './modules/utils';
- /*
- * Handle sweetAlert's DOM elements
- */
- import {
- sweetAlertInitialize,
- getModal,
- getOverlay,
- getInput,
- setFocusStyle,
- openModal,
- resetInput,
- fixVerticalPosition
- } from './modules/handle-swal-dom';
- // Handle button events and keyboard events
- import { handleButton, handleConfirm, handleCancel } from './modules/handle-click';
- import handleKeyDown from './modules/handle-key';
- // Default values
- import defaultParams from './modules/default-params';
- import setParameters from './modules/set-params';
- /*
- * Remember state in cases where opening and handling a modal will fiddle with it.
- * (We also use window.previousActiveElement as a global variable)
- */
- var previousWindowKeyDown;
- var lastFocusedButton;
- /*
- * Global sweetAlert function
- * (this is what the user calls)
- */
- var sweetAlert, swal;
- export default sweetAlert = swal = function() {
- var customizations = arguments[0];
- addClass(document.body, 'stop-scrolling');
- resetInput();
- /*
- * Use argument if defined or default value from params object otherwise.
- * Supports the case where a default value is boolean true and should be
- * overridden by a corresponding explicit argument which is boolean false.
- */
- function argumentOrDefault(key) {
- var args = customizations;
- return (args[key] === undefined) ? defaultParams[key] : args[key];
- }
- if (customizations === undefined) {
- logStr('SweetAlert expects at least 1 attribute!');
- return false;
- }
- var params = extend({}, defaultParams);
- switch (typeof customizations) {
- // Ex: swal("Hello", "Just testing", "info");
- case 'string':
- params.title = customizations;
- params.text = arguments[1] || '';
- params.type = arguments[2] || '';
- break;
- // Ex: swal({ title:"Hello", text: "Just testing", type: "info" });
- case 'object':
- if (customizations.title === undefined) {
- logStr('Missing "title" argument!');
- return false;
- }
- params.title = customizations.title;
- for (let customName in defaultParams) {
- params[customName] = argumentOrDefault(customName);
- }
- // Show "Confirm" instead of "OK" if cancel button is visible
- params.confirmButtonText = params.showCancelButton ? 'Confirm' : defaultParams.confirmButtonText;
- params.confirmButtonText = argumentOrDefault('confirmButtonText');
- // Callback function when clicking on "OK"/"Cancel"
- params.doneFunction = arguments[1] || null;
- break;
- default:
- logStr('Unexpected type of argument! Expected "string" or "object", got ' + typeof customizations);
- return false;
- }
- setParameters(params);
- fixVerticalPosition();
- openModal(arguments[1]);
- // Modal interactions
- var modal = getModal();
- /*
- * Make sure all modal buttons respond to all events
- */
- var $buttons = modal.querySelectorAll('button');
- var buttonEvents = ['onclick', 'onmouseover', 'onmouseout', 'onmousedown', 'onmouseup', 'onfocus'];
- var onButtonEvent = (e) => handleButton(e, params, modal);
- for (let btnIndex = 0; btnIndex < $buttons.length; btnIndex++) {
- for (let evtIndex = 0; evtIndex < buttonEvents.length; evtIndex++) {
- let btnEvt = buttonEvents[evtIndex];
- $buttons[btnIndex][btnEvt] = onButtonEvent;
- }
- }
- // Clicking outside the modal dismisses it (if allowed by user)
- getOverlay().onclick = onButtonEvent;
- previousWindowKeyDown = window.onkeydown;
- var onKeyEvent = (e) => handleKeyDown(e, params, modal);
- window.onkeydown = onKeyEvent;
- window.onfocus = function () {
- // When the user has focused away and focused back from the whole window.
- setTimeout(function () {
- // Put in a timeout to jump out of the event sequence.
- // Calling focus() in the event sequence confuses things.
- if (lastFocusedButton !== undefined) {
- lastFocusedButton.focus();
- lastFocusedButton = undefined;
- }
- }, 0);
- };
-
- // Show alert with enabled buttons always
- swal.enableButtons();
- };
- /*
- * Set default params for each popup
- * @param {Object} userParams
- */
- sweetAlert.setDefaults = swal.setDefaults = function(userParams) {
- if (!userParams) {
- throw new Error('userParams is required');
- }
- if (typeof userParams !== 'object') {
- throw new Error('userParams has to be a object');
- }
- extend(defaultParams, userParams);
- };
- /*
- * Animation when closing modal
- */
- sweetAlert.close = swal.close = function() {
- var modal = getModal();
- fadeOut(getOverlay(), 5);
- fadeOut(modal, 5);
- removeClass(modal, 'showSweetAlert');
- addClass(modal, 'hideSweetAlert');
- removeClass(modal, 'visible');
- /*
- * Reset icon animations
- */
- var $successIcon = modal.querySelector('.sa-icon.sa-success');
- removeClass($successIcon, 'animate');
- removeClass($successIcon.querySelector('.sa-tip'), 'animateSuccessTip');
- removeClass($successIcon.querySelector('.sa-long'), 'animateSuccessLong');
- var $errorIcon = modal.querySelector('.sa-icon.sa-error');
- removeClass($errorIcon, 'animateErrorIcon');
- removeClass($errorIcon.querySelector('.sa-x-mark'), 'animateXMark');
- var $warningIcon = modal.querySelector('.sa-icon.sa-warning');
- removeClass($warningIcon, 'pulseWarning');
- removeClass($warningIcon.querySelector('.sa-body'), 'pulseWarningIns');
- removeClass($warningIcon.querySelector('.sa-dot'), 'pulseWarningIns');
- // Reset custom class (delay so that UI changes aren't visible)
- setTimeout(function() {
- var customClass = modal.getAttribute('data-custom-class');
- removeClass(modal, customClass);
- }, 300);
- // Make page scrollable again
- removeClass(document.body, 'stop-scrolling');
- // Reset the page to its previous state
- window.onkeydown = previousWindowKeyDown;
- if (window.previousActiveElement) {
- window.previousActiveElement.focus();
- }
- lastFocusedButton = undefined;
- clearTimeout(modal.timeout);
- return true;
- };
- /*
- * Validation of the input field is done by user
- * If something is wrong => call showInputError with errorMessage
- */
- sweetAlert.showInputError = swal.showInputError = function(errorMessage) {
- var modal = getModal();
- var $errorIcon = modal.querySelector('.sa-input-error');
- addClass($errorIcon, 'show');
- var $errorContainer = modal.querySelector('.sa-error-container');
- addClass($errorContainer, 'show');
- $errorContainer.querySelector('p').innerHTML = errorMessage;
- setTimeout(function() {
- sweetAlert.enableButtons();
- }, 1);
- modal.querySelector('input').focus();
- };
- /*
- * Reset input error DOM elements
- */
- sweetAlert.resetInputError = swal.resetInputError = function(event) {
- // If press enter => ignore
- if (event && event.keyCode === 13) {
- return false;
- }
- var $modal = getModal();
- var $errorIcon = $modal.querySelector('.sa-input-error');
- removeClass($errorIcon, 'show');
- var $errorContainer = $modal.querySelector('.sa-error-container');
- removeClass($errorContainer, 'show');
- };
- /*
- * Disable confirm and cancel buttons
- */
- sweetAlert.disableButtons = swal.disableButtons = function(event) {
- var modal = getModal();
- var $confirmButton = modal.querySelector('button.confirm');
- var $cancelButton = modal.querySelector('button.cancel');
- $confirmButton.disabled = true;
- $cancelButton.disabled = true;
- };
- /*
- * Enable confirm and cancel buttons
- */
- sweetAlert.enableButtons = swal.enableButtons = function(event) {
- var modal = getModal();
- var $confirmButton = modal.querySelector('button.confirm');
- var $cancelButton = modal.querySelector('button.cancel');
- $confirmButton.disabled = false;
- $cancelButton.disabled = false;
- };
- if (typeof window !== 'undefined') {
- // The 'handle-click' module requires
- // that 'sweetAlert' was set as global.
- window.sweetAlert = window.swal = sweetAlert;
- } else {
- logStr('SweetAlert is a frontend module!');
- }
|