222 lines
5.6 KiB
JavaScript
222 lines
5.6 KiB
JavaScript
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('<br>');
|
|
|
|
/*
|
|
* Text
|
|
*/
|
|
$text.innerHTML = params.html ? params.text : escapeHtml(params.text || '').split('\n').join('<br>');
|
|
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;
|