var alertTypes = ['error', 'warning', 'info', 'success', 'input', 'prompt']; import { isIE8 } from './utils'; import { getModal, getInput, setFocusStyle } from './handle-swal-dom'; import { hasClass, addClass, removeClass, escapeHtml, _show, show, _hide, hide } from './handle-dom'; /* * Set type, text and actions on modal */ var setParameters = function(params) { var modal = getModal(); var $title = modal.querySelector('h2'); var $text = modal.querySelector('p'); var $cancelBtn = modal.querySelector('button.cancel'); var $confirmBtn = modal.querySelector('button.confirm'); /* * Title */ $title.innerHTML = params.html ? params.title : escapeHtml(params.title).split('\n').join('
'); /* * Text */ $text.innerHTML = params.html ? params.text : escapeHtml(params.text || '').split('\n').join('
'); if (params.text) show($text); /* * Custom class */ if (params.customClass) { addClass(modal, params.customClass); modal.setAttribute('data-custom-class', params.customClass); } else { // Find previously set classes and remove them let customClass = modal.getAttribute('data-custom-class'); removeClass(modal, customClass); modal.setAttribute('data-custom-class', ''); } /* * Icon */ hide(modal.querySelectorAll('.sa-icon')); if (params.type && !isIE8()) { let validType = false; for (let i = 0; i < alertTypes.length; i++) { if (params.type === alertTypes[i]) { validType = true; break; } } if (!validType) { logStr('Unknown alert type: ' + params.type); return false; } let typesWithIcons = ['success', 'error', 'warning', 'info']; let $icon; if (typesWithIcons.indexOf(params.type) !== -1) { $icon = modal.querySelector('.sa-icon.' + 'sa-' + params.type); show($icon); } let $input = getInput(); // Animate icon switch (params.type) { case 'success': addClass($icon, 'animate'); addClass($icon.querySelector('.sa-tip'), 'animateSuccessTip'); addClass($icon.querySelector('.sa-long'), 'animateSuccessLong'); break; case 'error': addClass($icon, 'animateErrorIcon'); addClass($icon.querySelector('.sa-x-mark'), 'animateXMark'); break; case 'warning': addClass($icon, 'pulseWarning'); addClass($icon.querySelector('.sa-body'), 'pulseWarningIns'); addClass($icon.querySelector('.sa-dot'), 'pulseWarningIns'); break; case 'input': case 'prompt': $input.setAttribute('type', params.inputType); $input.value = params.inputValue; $input.setAttribute('placeholder', params.inputPlaceholder); addClass(modal, 'show-input'); setTimeout(function () { $input.focus(); $input.addEventListener('keyup', swal.resetInputError); }, 400); break; } } /* * Custom image */ if (params.imageUrl) { let $customIcon = modal.querySelector('.sa-icon.sa-custom'); $customIcon.style.backgroundImage = 'url(' + params.imageUrl + ')'; show($customIcon); let _imgWidth = 80; let _imgHeight = 80; if (params.imageSize) { let dimensions = params.imageSize.toString().split('x'); let imgWidth = dimensions[0]; let imgHeight = dimensions[1]; if (!imgWidth || !imgHeight) { logStr('Parameter imageSize expects value with format WIDTHxHEIGHT, got ' + params.imageSize); } else { _imgWidth = imgWidth; _imgHeight = imgHeight; } } $customIcon.setAttribute('style', $customIcon.getAttribute('style') + 'width:' + _imgWidth + 'px; height:' + _imgHeight + 'px'); } /* * Show cancel button? */ modal.setAttribute('data-has-cancel-button', params.showCancelButton); if (params.showCancelButton) { $cancelBtn.style.display = 'inline-block'; } else { hide($cancelBtn); } /* * Show confirm button? */ modal.setAttribute('data-has-confirm-button', params.showConfirmButton); if (params.showConfirmButton) { $confirmBtn.style.display = 'inline-block'; } else { hide($confirmBtn); } /* * Custom text on cancel/confirm buttons */ if (params.cancelButtonText) { $cancelBtn.innerHTML = escapeHtml(params.cancelButtonText); } if (params.confirmButtonText) { $confirmBtn.innerHTML = escapeHtml(params.confirmButtonText); } /* * Custom color on confirm button */ if (params.confirmButtonColor) { // Set confirm button to selected background color $confirmBtn.style.backgroundColor = params.confirmButtonColor; // Set the confirm button color to the loading ring $confirmBtn.style.borderLeftColor = params.confirmLoadingButtonColor; $confirmBtn.style.borderRightColor = params.confirmLoadingButtonColor; // Set box-shadow to default focused button setFocusStyle($confirmBtn, params.confirmButtonColor); } /* * Allow outside click */ modal.setAttribute('data-allow-outside-click', params.allowOutsideClick); /* * Callback function */ var hasDoneFunction = params.doneFunction ? true : false; modal.setAttribute('data-has-done-function', hasDoneFunction); /* * Animation */ if (!params.animation) { modal.setAttribute('data-animation', 'none'); } else if (typeof params.animation === 'string') { modal.setAttribute('data-animation', params.animation); // Custom animation } else { modal.setAttribute('data-animation', 'pop'); } /* * Timer */ modal.setAttribute('data-timer', params.timer); }; export default setParameters;