167 lines
4.5 KiB
JavaScript
167 lines
4.5 KiB
JavaScript
|
'use strict';
|
||
|
|
||
|
var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
|
||
|
|
||
|
Object.defineProperty(exports, '__esModule', {
|
||
|
value: true
|
||
|
});
|
||
|
|
||
|
var _hexToRgb = require('./utils');
|
||
|
|
||
|
var _removeClass$getTopMargin$fadeIn$show$addClass = require('./handle-dom');
|
||
|
|
||
|
var _defaultParams = require('./default-params');
|
||
|
|
||
|
var _defaultParams2 = _interopRequireWildcard(_defaultParams);
|
||
|
|
||
|
/*
|
||
|
* Add modal + overlay to DOM
|
||
|
*/
|
||
|
|
||
|
var _injectedHTML = require('./injected-html');
|
||
|
|
||
|
var _injectedHTML2 = _interopRequireWildcard(_injectedHTML);
|
||
|
|
||
|
var modalClass = '.sweet-alert';
|
||
|
var overlayClass = '.sweet-overlay';
|
||
|
|
||
|
var sweetAlertInitialize = function sweetAlertInitialize() {
|
||
|
var sweetWrap = document.createElement('div');
|
||
|
sweetWrap.innerHTML = _injectedHTML2['default'];
|
||
|
|
||
|
// Append elements to body
|
||
|
while (sweetWrap.firstChild) {
|
||
|
document.body.appendChild(sweetWrap.firstChild);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
/*
|
||
|
* Get DOM element of modal
|
||
|
*/
|
||
|
var getModal = (function (_getModal) {
|
||
|
function getModal() {
|
||
|
return _getModal.apply(this, arguments);
|
||
|
}
|
||
|
|
||
|
getModal.toString = function () {
|
||
|
return _getModal.toString();
|
||
|
};
|
||
|
|
||
|
return getModal;
|
||
|
})(function () {
|
||
|
var $modal = document.querySelector(modalClass);
|
||
|
|
||
|
if (!$modal) {
|
||
|
sweetAlertInitialize();
|
||
|
$modal = getModal();
|
||
|
}
|
||
|
|
||
|
return $modal;
|
||
|
});
|
||
|
|
||
|
/*
|
||
|
* Get DOM element of input (in modal)
|
||
|
*/
|
||
|
var getInput = function getInput() {
|
||
|
var $modal = getModal();
|
||
|
if ($modal) {
|
||
|
return $modal.querySelector('input');
|
||
|
}
|
||
|
};
|
||
|
|
||
|
/*
|
||
|
* Get DOM element of overlay
|
||
|
*/
|
||
|
var getOverlay = function getOverlay() {
|
||
|
return document.querySelector(overlayClass);
|
||
|
};
|
||
|
|
||
|
/*
|
||
|
* Add box-shadow style to button (depending on its chosen bg-color)
|
||
|
*/
|
||
|
var setFocusStyle = function setFocusStyle($button, bgColor) {
|
||
|
var rgbColor = _hexToRgb.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 openModal(callback) {
|
||
|
var $modal = getModal();
|
||
|
_removeClass$getTopMargin$fadeIn$show$addClass.fadeIn(getOverlay(), 10);
|
||
|
_removeClass$getTopMargin$fadeIn$show$addClass.show($modal);
|
||
|
_removeClass$getTopMargin$fadeIn$show$addClass.addClass($modal, 'showSweetAlert');
|
||
|
_removeClass$getTopMargin$fadeIn$show$addClass.removeClass($modal, 'hideSweetAlert');
|
||
|
|
||
|
window.previousActiveElement = document.activeElement;
|
||
|
var $okButton = $modal.querySelector('button.confirm');
|
||
|
$okButton.focus();
|
||
|
|
||
|
setTimeout(function () {
|
||
|
_removeClass$getTopMargin$fadeIn$show$addClass.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 resetInput() {
|
||
|
var $modal = getModal();
|
||
|
var $input = getInput();
|
||
|
|
||
|
_removeClass$getTopMargin$fadeIn$show$addClass.removeClass($modal, 'show-input');
|
||
|
$input.value = _defaultParams2['default'].inputValue;
|
||
|
$input.setAttribute('type', _defaultParams2['default'].inputType);
|
||
|
$input.setAttribute('placeholder', _defaultParams2['default'].inputPlaceholder);
|
||
|
|
||
|
resetInputError();
|
||
|
};
|
||
|
|
||
|
var resetInputError = function resetInputError(event) {
|
||
|
// If press enter => ignore
|
||
|
if (event && event.keyCode === 13) {
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
var $modal = getModal();
|
||
|
|
||
|
var $errorIcon = $modal.querySelector('.sa-input-error');
|
||
|
_removeClass$getTopMargin$fadeIn$show$addClass.removeClass($errorIcon, 'show');
|
||
|
|
||
|
var $errorContainer = $modal.querySelector('.sa-error-container');
|
||
|
_removeClass$getTopMargin$fadeIn$show$addClass.removeClass($errorContainer, 'show');
|
||
|
};
|
||
|
|
||
|
/*
|
||
|
* Set "margin-top"-property on modal based on its computed height
|
||
|
*/
|
||
|
var fixVerticalPosition = function fixVerticalPosition() {
|
||
|
var $modal = getModal();
|
||
|
$modal.style.marginTop = _removeClass$getTopMargin$fadeIn$show$addClass.getTopMargin(getModal());
|
||
|
};
|
||
|
|
||
|
exports.sweetAlertInitialize = sweetAlertInitialize;
|
||
|
exports.getModal = getModal;
|
||
|
exports.getOverlay = getOverlay;
|
||
|
exports.getInput = getInput;
|
||
|
exports.setFocusStyle = setFocusStyle;
|
||
|
exports.openModal = openModal;
|
||
|
exports.resetInput = resetInput;
|
||
|
exports.resetInputError = resetInputError;
|
||
|
exports.fixVerticalPosition = fixVerticalPosition;
|