Y-SLD/assets/playkit/plugins/sweetalert/dev/modules/handle-swal-dom.js

149 lines
3.3 KiB
JavaScript

import { hexToRgb } from './utils';
import { removeClass, getTopMargin, fadeIn, show, addClass } from './handle-dom';
import defaultParams from './default-params';
var modalClass = '.sweet-alert';
var overlayClass = '.sweet-overlay';
/*
* Add modal + overlay to DOM
*/
import injectedHTML from './injected-html';
var sweetAlertInitialize = function() {
var sweetWrap = document.createElement('div');
sweetWrap.innerHTML = injectedHTML;
// Append elements to body
while (sweetWrap.firstChild) {
document.body.appendChild(sweetWrap.firstChild);
}
};
/*
* Get DOM element of modal
*/
var getModal = function() {
var $modal = document.querySelector(modalClass);
if (!$modal) {
sweetAlertInitialize();
$modal = getModal();
}
return $modal;
};
/*
* Get DOM element of input (in modal)
*/
var getInput = function() {
var $modal = getModal();
if ($modal) {
return $modal.querySelector('input');
}
};
/*
* Get DOM element of overlay
*/
var getOverlay = function() {
return document.querySelector(overlayClass);
};
/*
* Add box-shadow style to button (depending on its chosen bg-color)
*/
var setFocusStyle = function($button, bgColor) {
var rgbColor = hexToRgb(bgColor);
$button.style.boxShadow = '0 0 2px rgba(' + rgbColor + ', 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)';
};
/*
* Animation when opening modal
*/
var openModal = function(callback) {
var $modal = getModal();
fadeIn(getOverlay(), 10);
show($modal);
addClass($modal, 'showSweetAlert');
removeClass($modal, 'hideSweetAlert');
window.previousActiveElement = document.activeElement;
var $okButton = $modal.querySelector('button.confirm');
$okButton.focus();
setTimeout(function () {
addClass($modal, 'visible');
}, 500);
var timer = $modal.getAttribute('data-timer');
if (timer !== 'null' && timer !== '') {
var timerCallback = callback;
$modal.timeout = setTimeout(function() {
var doneFunctionExists = ((timerCallback || null) && $modal.getAttribute('data-has-done-function') === 'true');
if (doneFunctionExists) {
timerCallback(null);
}
else {
sweetAlert.close();
}
}, timer);
}
};
/*
* Reset the styling of the input
* (for example if errors have been shown)
*/
var resetInput = function() {
var $modal = getModal();
var $input = getInput();
removeClass($modal, 'show-input');
$input.value = defaultParams.inputValue;
$input.setAttribute('type', defaultParams.inputType);
$input.setAttribute('placeholder', defaultParams.inputPlaceholder);
resetInputError();
};
var 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');
};
/*
* Set "margin-top"-property on modal based on its computed height
*/
var fixVerticalPosition = function() {
var $modal = getModal();
$modal.style.marginTop = getTopMargin(getModal());
};
export {
sweetAlertInitialize,
getModal,
getOverlay,
getInput,
setFocusStyle,
openModal,
resetInput,
resetInputError,
fixVerticalPosition
};