mirror of
https://github.com/wintercms/winter.git
synced 2024-06-28 05:33:29 +02:00
Add sweet-alert library
This commit is contained in:
Samuel Georges
parent
52956f6f04
commit
b878e25a4d
255
modules/backend/assets/vendor/sweet-alert/sweet-alert-animations.less
vendored
Normal file
255
modules/backend/assets/vendor/sweet-alert/sweet-alert-animations.less
vendored
Normal file
@ -0,0 +1,255 @@
|
||||
@-webkit-keyframes showSweetAlert {
|
||||
0% {
|
||||
transform: scale(0.7);
|
||||
-webkit-transform: scale(0.7); }
|
||||
45% {
|
||||
transform: scale(1.05);
|
||||
-webkit-transform: scale(1.05); }
|
||||
80% {
|
||||
transform: scale(0.95);
|
||||
-webkit-tranform: scale(0.95); }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1); } }
|
||||
@keyframes showSweetAlert {
|
||||
0% {
|
||||
transform: scale(0.7);
|
||||
-webkit-transform: scale(0.7); }
|
||||
45% {
|
||||
transform: scale(1.05);
|
||||
-webkit-transform: scale(1.05); }
|
||||
80% {
|
||||
transform: scale(0.95);
|
||||
-webkit-tranform: scale(0.95); }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1); } }
|
||||
@-webkit-keyframes hideSweetAlert {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1); }
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
-webkit-transform: scale(0.5); } }
|
||||
@keyframes hideSweetAlert {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1); }
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
-webkit-transform: scale(0.5); } }
|
||||
.showSweetAlert {
|
||||
-webkit-animation: showSweetAlert 0.3s;
|
||||
animation: showSweetAlert 0.3s; }
|
||||
|
||||
.hideSweetAlert {
|
||||
-webkit-animation: hideSweetAlert 0.2s;
|
||||
animation: hideSweetAlert 0.2s; }
|
||||
|
||||
@-webkit-keyframes animateSuccessTip {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px; }
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px; }
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -8px;
|
||||
top: 37px; }
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px; }
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px; } }
|
||||
@keyframes animateSuccessTip {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px; }
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px; }
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -8px;
|
||||
top: 37px; }
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px; }
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px; } }
|
||||
@-webkit-keyframes animateSuccessLong {
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px; }
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px; }
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px; }
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px; } }
|
||||
@keyframes animateSuccessLong {
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px; }
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px; }
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px; }
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px; } }
|
||||
@-webkit-keyframes rotatePlaceholder {
|
||||
0% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg); }
|
||||
5% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg); }
|
||||
12% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg); }
|
||||
100% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg); } }
|
||||
@keyframes rotatePlaceholder {
|
||||
0% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg); }
|
||||
5% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg); }
|
||||
12% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg); }
|
||||
100% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg); } }
|
||||
.animateSuccessTip {
|
||||
-webkit-animation: animateSuccessTip 0.75s;
|
||||
animation: animateSuccessTip 0.75s; }
|
||||
|
||||
.animateSuccessLong {
|
||||
-webkit-animation: animateSuccessLong 0.75s;
|
||||
animation: animateSuccessLong 0.75s; }
|
||||
|
||||
.icon.success.animate::after {
|
||||
-webkit-animation: rotatePlaceholder 4.25s ease-in;
|
||||
animation: rotatePlaceholder 4.25s ease-in; }
|
||||
|
||||
@-webkit-keyframes animateErrorIcon {
|
||||
0% {
|
||||
transform: rotateX(100deg);
|
||||
-webkit-transform: rotateX(100deg);
|
||||
opacity: 0; }
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
opacity: 1; } }
|
||||
@keyframes animateErrorIcon {
|
||||
0% {
|
||||
transform: rotateX(100deg);
|
||||
-webkit-transform: rotateX(100deg);
|
||||
opacity: 0; }
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
opacity: 1; } }
|
||||
.animateErrorIcon {
|
||||
-webkit-animation: animateErrorIcon 0.5s;
|
||||
animation: animateErrorIcon 0.5s; }
|
||||
|
||||
@-webkit-keyframes animateXMark {
|
||||
0% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0; }
|
||||
50% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0; }
|
||||
80% {
|
||||
transform: scale(1.15);
|
||||
-webkit-transform: scale(1.15);
|
||||
margin-top: -6px; }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
margin-top: 0;
|
||||
opacity: 1; } }
|
||||
@keyframes animateXMark {
|
||||
0% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0; }
|
||||
50% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0; }
|
||||
80% {
|
||||
transform: scale(1.15);
|
||||
-webkit-transform: scale(1.15);
|
||||
margin-top: -6px; }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
margin-top: 0;
|
||||
opacity: 1; } }
|
||||
.animateXMark {
|
||||
-webkit-animation: animateXMark 0.5s;
|
||||
animation: animateXMark 0.5s; }
|
||||
|
||||
@-webkit-keyframes pulseWarning {
|
||||
0% {
|
||||
border-color: #F8D486; }
|
||||
100% {
|
||||
border-color: #F8BB86; } }
|
||||
@keyframes pulseWarning {
|
||||
0% {
|
||||
border-color: #F8D486; }
|
||||
100% {
|
||||
border-color: #F8BB86; } }
|
||||
.pulseWarning {
|
||||
-webkit-animation: pulseWarning 0.75s infinite alternate;
|
||||
animation: pulseWarning 0.75s infinite alternate; }
|
||||
|
||||
@-webkit-keyframes pulseWarningIns {
|
||||
0% {
|
||||
background-color: #F8D486; }
|
||||
100% {
|
||||
background-color: #F8BB86; } }
|
||||
@keyframes pulseWarningIns {
|
||||
0% {
|
||||
background-color: #F8D486; }
|
||||
100% {
|
||||
background-color: #F8BB86; } }
|
||||
.pulseWarningIns {
|
||||
-webkit-animation: pulseWarningIns 0.75s infinite alternate;
|
||||
animation: pulseWarningIns 0.75s infinite alternate; }
|
||||
7
modules/backend/assets/vendor/sweet-alert/sweet-alert-combine.less
vendored
Normal file
7
modules/backend/assets/vendor/sweet-alert/sweet-alert-combine.less
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
/*
|
||||
SweetAlert for Bootstrap
|
||||
https://github.com/lipis/bootstrap-sweetalert
|
||||
*/
|
||||
@import "../../../../system/assets/vendor/bootstrap/variables";
|
||||
@import "../../../../system/assets/vendor/bootstrap/mixins";
|
||||
@import "sweet-alert";
|
||||
564
modules/backend/assets/vendor/sweet-alert/sweet-alert.css
vendored
Normal file
564
modules/backend/assets/vendor/sweet-alert/sweet-alert.css
vendored
Normal file
@ -0,0 +1,564 @@
|
||||
@-webkit-keyframes showSweetAlert {
|
||||
0% {
|
||||
transform: scale(0.7);
|
||||
-webkit-transform: scale(0.7);
|
||||
}
|
||||
45% {
|
||||
transform: scale(1.05);
|
||||
-webkit-transform: scale(1.05);
|
||||
}
|
||||
80% {
|
||||
transform: scale(0.95);
|
||||
-webkit-tranform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes showSweetAlert {
|
||||
0% {
|
||||
transform: scale(0.7);
|
||||
-webkit-transform: scale(0.7);
|
||||
}
|
||||
45% {
|
||||
transform: scale(1.05);
|
||||
-webkit-transform: scale(1.05);
|
||||
}
|
||||
80% {
|
||||
transform: scale(0.95);
|
||||
-webkit-tranform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes hideSweetAlert {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
-webkit-transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
@keyframes hideSweetAlert {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
-webkit-transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
.showSweetAlert {
|
||||
-webkit-animation: showSweetAlert 0.3s;
|
||||
animation: showSweetAlert 0.3s;
|
||||
}
|
||||
.hideSweetAlert {
|
||||
-webkit-animation: hideSweetAlert 0.2s;
|
||||
animation: hideSweetAlert 0.2s;
|
||||
}
|
||||
@-webkit-keyframes animateSuccessTip {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -8px;
|
||||
top: 37px;
|
||||
}
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px;
|
||||
}
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px;
|
||||
}
|
||||
}
|
||||
@keyframes animateSuccessTip {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -8px;
|
||||
top: 37px;
|
||||
}
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px;
|
||||
}
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes animateSuccessLong {
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px;
|
||||
}
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
}
|
||||
}
|
||||
@keyframes animateSuccessLong {
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px;
|
||||
}
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rotatePlaceholder {
|
||||
0% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
5% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
12% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotatePlaceholder {
|
||||
0% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
5% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
12% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg);
|
||||
}
|
||||
}
|
||||
.animateSuccessTip {
|
||||
-webkit-animation: animateSuccessTip 0.75s;
|
||||
animation: animateSuccessTip 0.75s;
|
||||
}
|
||||
.animateSuccessLong {
|
||||
-webkit-animation: animateSuccessLong 0.75s;
|
||||
animation: animateSuccessLong 0.75s;
|
||||
}
|
||||
.icon.success.animate::after {
|
||||
-webkit-animation: rotatePlaceholder 4.25s ease-in;
|
||||
animation: rotatePlaceholder 4.25s ease-in;
|
||||
}
|
||||
@-webkit-keyframes animateErrorIcon {
|
||||
0% {
|
||||
transform: rotateX(100deg);
|
||||
-webkit-transform: rotateX(100deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes animateErrorIcon {
|
||||
0% {
|
||||
transform: rotateX(100deg);
|
||||
-webkit-transform: rotateX(100deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.animateErrorIcon {
|
||||
-webkit-animation: animateErrorIcon 0.5s;
|
||||
animation: animateErrorIcon 0.5s;
|
||||
}
|
||||
@-webkit-keyframes animateXMark {
|
||||
0% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0;
|
||||
}
|
||||
80% {
|
||||
transform: scale(1.15);
|
||||
-webkit-transform: scale(1.15);
|
||||
margin-top: -6px;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes animateXMark {
|
||||
0% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0;
|
||||
}
|
||||
80% {
|
||||
transform: scale(1.15);
|
||||
-webkit-transform: scale(1.15);
|
||||
margin-top: -6px;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.animateXMark {
|
||||
-webkit-animation: animateXMark 0.5s;
|
||||
animation: animateXMark 0.5s;
|
||||
}
|
||||
@-webkit-keyframes pulseWarning {
|
||||
0% {
|
||||
border-color: #F8D486;
|
||||
}
|
||||
100% {
|
||||
border-color: #F8BB86;
|
||||
}
|
||||
}
|
||||
@keyframes pulseWarning {
|
||||
0% {
|
||||
border-color: #F8D486;
|
||||
}
|
||||
100% {
|
||||
border-color: #F8BB86;
|
||||
}
|
||||
}
|
||||
.pulseWarning {
|
||||
-webkit-animation: pulseWarning 0.75s infinite alternate;
|
||||
animation: pulseWarning 0.75s infinite alternate;
|
||||
}
|
||||
@-webkit-keyframes pulseWarningIns {
|
||||
0% {
|
||||
background-color: #F8D486;
|
||||
}
|
||||
100% {
|
||||
background-color: #F8BB86;
|
||||
}
|
||||
}
|
||||
@keyframes pulseWarningIns {
|
||||
0% {
|
||||
background-color: #F8D486;
|
||||
}
|
||||
100% {
|
||||
background-color: #F8BB86;
|
||||
}
|
||||
}
|
||||
.pulseWarningIns {
|
||||
-webkit-animation: pulseWarningIns 0.75s infinite alternate;
|
||||
animation: pulseWarningIns 0.75s infinite alternate;
|
||||
}
|
||||
.sweet-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
z-index: 1040;
|
||||
}
|
||||
.sweet-alert {
|
||||
background-color: #ffffff;
|
||||
width: 478px;
|
||||
padding: 17px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -256px;
|
||||
margin-top: -200px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
z-index: 2000;
|
||||
}
|
||||
@media all and (max-width: 767px) {
|
||||
.sweet-alert {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
.sweet-alert .icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 4px solid gray;
|
||||
border-radius: 50%;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.sweet-alert .icon.error {
|
||||
border-color: #d43f3a;
|
||||
}
|
||||
.sweet-alert .icon.error .x-mark {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.sweet-alert .icon.error .line {
|
||||
position: absolute;
|
||||
height: 5px;
|
||||
width: 47px;
|
||||
background-color: #d9534f;
|
||||
display: block;
|
||||
top: 37px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.sweet-alert .icon.error .line.left {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
left: 17px;
|
||||
}
|
||||
.sweet-alert .icon.error .line.right {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
right: 16px;
|
||||
}
|
||||
.sweet-alert .icon.warning {
|
||||
border-color: #eea236;
|
||||
}
|
||||
.sweet-alert .icon.warning .body {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 47px;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
border-radius: 2px;
|
||||
margin-left: -2px;
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.sweet-alert .icon.warning .dot {
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
margin-left: -3px;
|
||||
left: 50%;
|
||||
bottom: 10px;
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.sweet-alert .icon.info {
|
||||
border-color: #46b8da;
|
||||
}
|
||||
.sweet-alert .icon.info::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 29px;
|
||||
left: 50%;
|
||||
bottom: 17px;
|
||||
border-radius: 2px;
|
||||
margin-left: -2px;
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.sweet-alert .icon.info::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
margin-left: -3px;
|
||||
top: 19px;
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.sweet-alert .icon.success {
|
||||
border-color: #4cae4c;
|
||||
}
|
||||
.sweet-alert .icon.success::before,
|
||||
.sweet-alert .icon.success::after {
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
background: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.sweet-alert .icon.success::before {
|
||||
border-radius: 120px 0 0 120px;
|
||||
top: -7px;
|
||||
left: -33px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform-origin: 60px 60px;
|
||||
transform-origin: 60px 60px;
|
||||
}
|
||||
.sweet-alert .icon.success::after {
|
||||
border-radius: 0 120px 120px 0;
|
||||
top: -11px;
|
||||
left: 30px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform-origin: 0px 60px;
|
||||
transform-origin: 0px 60px;
|
||||
}
|
||||
.sweet-alert .icon.success .placeholder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 4px solid rgba(92, 184, 92, 0.2);
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
z-index: 2;
|
||||
}
|
||||
.sweet-alert .icon.success .fix {
|
||||
width: 5px;
|
||||
height: 90px;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
top: 8px;
|
||||
z-index: 1;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.sweet-alert .icon.success .line {
|
||||
height: 5px;
|
||||
background-color: #5cb85c;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.sweet-alert .icon.success .line.tip {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 46px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.sweet-alert .icon.success .line.long {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.sweet-alert .icon.custom {
|
||||
background-size: contain;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.sweet-alert .btn-default:focus {
|
||||
border-color: #cccccc;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(204, 204, 204, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(204, 204, 204, 0.6);
|
||||
}
|
||||
.sweet-alert .btn-success:focus {
|
||||
border-color: #4cae4c;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(76, 174, 76, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(76, 174, 76, 0.6);
|
||||
}
|
||||
.sweet-alert .btn-info:focus {
|
||||
border-color: #46b8da;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 184, 218, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 184, 218, 0.6);
|
||||
}
|
||||
.sweet-alert .btn-danger:focus {
|
||||
border-color: #d43f3a;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(212, 63, 58, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(212, 63, 58, 0.6);
|
||||
}
|
||||
.sweet-alert .btn-warning:focus {
|
||||
border-color: #eea236;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 162, 54, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 162, 54, 0.6);
|
||||
}
|
||||
.sweet-alert button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
39
modules/backend/assets/vendor/sweet-alert/sweet-alert.html
vendored
Normal file
39
modules/backend/assets/vendor/sweet-alert/sweet-alert.html
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
<!-- Note: this file is only intended for development use! -->
|
||||
|
||||
<div class="sweet-overlay"></div>
|
||||
|
||||
|
||||
<!-- SweetAlert box -->
|
||||
<div class="sweet-alert">
|
||||
|
||||
<div class="icon error">
|
||||
<span class="x-mark">
|
||||
<span class="line left"></span>
|
||||
<span class="line right"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="icon warning">
|
||||
<span class="body"></span>
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
|
||||
<div class="icon info"></div>
|
||||
|
||||
<div class="icon success">
|
||||
<span class="line tip"></span>
|
||||
<span class="line long"></span>
|
||||
<div class="placeholder"></div>
|
||||
<div class="fix"></div>
|
||||
</div>
|
||||
|
||||
<div class="icon custom"></div>
|
||||
|
||||
|
||||
<h2>Title</h2>
|
||||
<p class="text-muted">Text</p>
|
||||
<p>
|
||||
<button class="cancel btn btn-lg btn-default">Cancel</button>
|
||||
<button class="confirm btn btn-lg">OK</button>
|
||||
</p>
|
||||
</div>
|
||||
711
modules/backend/assets/vendor/sweet-alert/sweet-alert.js
vendored
Normal file
711
modules/backend/assets/vendor/sweet-alert/sweet-alert.js
vendored
Normal file
@ -0,0 +1,711 @@
|
||||
// SweetAlert
|
||||
// 2014 (c) - Tristan Edwards
|
||||
// github.com/t4t5/sweetalert
|
||||
(function(window, document) {
|
||||
|
||||
var modalClass = '.sweet-alert',
|
||||
overlayClass = '.sweet-overlay',
|
||||
alertTypes = ['error', 'warning', 'info', 'success'],
|
||||
defaultParams = {
|
||||
title: '',
|
||||
text: '',
|
||||
type: null,
|
||||
allowOutsideClick: false,
|
||||
showCancelButton: false,
|
||||
closeOnConfirm: true,
|
||||
closeOnCancel: true,
|
||||
confirmButtonText: 'OK',
|
||||
confirmButtonClass: 'btn-primary',
|
||||
cancelButtonText: 'Cancel',
|
||||
cancelButtonClass: 'btn-default',
|
||||
imageUrl: null,
|
||||
imageSize: null,
|
||||
timer: null
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Manipulate DOM
|
||||
*/
|
||||
|
||||
var getModal = function() {
|
||||
return document.querySelector(modalClass);
|
||||
},
|
||||
getOverlay = function() {
|
||||
return document.querySelector(overlayClass);
|
||||
},
|
||||
hasClass = function(elem, className) {
|
||||
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
|
||||
},
|
||||
addClass = function(elem, className) {
|
||||
if (!hasClass(elem, className)) {
|
||||
elem.className += ' ' + className;
|
||||
}
|
||||
},
|
||||
removeClass = function(elem, className) {
|
||||
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
|
||||
if (hasClass(elem, className)) {
|
||||
while (newClass.indexOf(' ' + className + ' ') >= 0) {
|
||||
newClass = newClass.replace(' ' + className + ' ', ' ');
|
||||
}
|
||||
elem.className = newClass.replace(/^\s+|\s+$/g, '');
|
||||
}
|
||||
},
|
||||
escapeHtml = function(str) {
|
||||
var div = document.createElement('div');
|
||||
div.appendChild(document.createTextNode(str));
|
||||
return div.innerHTML;
|
||||
},
|
||||
_show = function(elem) {
|
||||
elem.style.opacity = '';
|
||||
elem.style.display = 'block';
|
||||
},
|
||||
show = function(elems) {
|
||||
if (elems && !elems.length) {
|
||||
return _show(elems);
|
||||
}
|
||||
for (var i = 0; i < elems.length; ++i) {
|
||||
_show(elems[i]);
|
||||
}
|
||||
},
|
||||
_hide = function(elem) {
|
||||
elem.style.opacity = '';
|
||||
elem.style.display = 'none';
|
||||
},
|
||||
hide = function(elems) {
|
||||
if (elems && !elems.length) {
|
||||
return _hide(elems);
|
||||
}
|
||||
for (var i = 0; i < elems.length; ++i) {
|
||||
_hide(elems[i]);
|
||||
}
|
||||
},
|
||||
isDescendant = function(parent, child) {
|
||||
var node = child.parentNode;
|
||||
while (node !== null) {
|
||||
if (node === parent) {
|
||||
return true;
|
||||
}
|
||||
node = node.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getTopMargin = function(elem) {
|
||||
elem.style.left = '-9999px';
|
||||
elem.style.display = 'block';
|
||||
|
||||
var height = elem.clientHeight;
|
||||
var padding = parseInt(getComputedStyle(elem).getPropertyValue('padding'), 10);
|
||||
|
||||
elem.style.left = '';
|
||||
elem.style.display = 'none';
|
||||
return ('-' + parseInt(height / 2 + padding) + 'px');
|
||||
},
|
||||
fadeIn = function(elem, interval) {
|
||||
if(+elem.style.opacity < 1) {
|
||||
interval = interval || 16;
|
||||
elem.style.opacity = 0;
|
||||
elem.style.display = 'block';
|
||||
var last = +new Date();
|
||||
var tick = function() {
|
||||
elem.style.opacity = +elem.style.opacity + (new Date() - last) / 100;
|
||||
last = +new Date();
|
||||
|
||||
if (+elem.style.opacity < 1) {
|
||||
setTimeout(tick, interval);
|
||||
}
|
||||
};
|
||||
tick();
|
||||
}
|
||||
},
|
||||
fadeOut = function(elem, interval) {
|
||||
interval = interval || 16;
|
||||
elem.style.opacity = 1;
|
||||
var last = +new Date();
|
||||
var tick = function() {
|
||||
elem.style.opacity = +elem.style.opacity - (new Date() - last) / 100;
|
||||
last = +new Date();
|
||||
|
||||
if (+elem.style.opacity > 0) {
|
||||
setTimeout(tick, interval);
|
||||
} else {
|
||||
elem.style.display = 'none';
|
||||
}
|
||||
};
|
||||
tick();
|
||||
},
|
||||
fireClick = function(node) {
|
||||
// Taken from http://www.nonobtrusive.com/2011/11/29/programatically-fire-crossbrowser-click-event-with-javascript/
|
||||
// Then fixed for today's Chrome browser.
|
||||
if (MouseEvent) {
|
||||
// Up-to-date approach
|
||||
var mevt = new MouseEvent('click', {
|
||||
view: window,
|
||||
bubbles: false,
|
||||
cancelable: true
|
||||
});
|
||||
node.dispatchEvent(mevt);
|
||||
} else if ( document.createEvent ) {
|
||||
// Fallback
|
||||
var evt = document.createEvent('MouseEvents');
|
||||
evt.initEvent('click', false, false);
|
||||
node.dispatchEvent(evt);
|
||||
} else if( document.createEventObject ) {
|
||||
node.fireEvent('onclick') ;
|
||||
} else if (typeof node.onclick === 'function' ) {
|
||||
node.onclick();
|
||||
}
|
||||
},
|
||||
stopEventPropagation = function(e) {
|
||||
// In particular, make sure the space bar doesn't scroll the main window.
|
||||
if (typeof e.stopPropagation === 'function') {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
} else if (window.event && window.event.hasOwnProperty('cancelBubble')) {
|
||||
window.event.cancelBubble = true;
|
||||
}
|
||||
};
|
||||
|
||||
// Remember state in cases where opening and handling a modal will fiddle with it.
|
||||
var previousActiveElement,
|
||||
previousDocumentClick,
|
||||
previousWindowKeyDown,
|
||||
lastFocusedButton;
|
||||
|
||||
/*
|
||||
* Add modal + overlay to DOM
|
||||
*/
|
||||
|
||||
window.sweetAlertInitialize = function() {
|
||||
var sweetHTML = '<div class="sweet-overlay" tabIndex="-1"></div><div class="sweet-alert" tabIndex="-1"><div class="icon error"><span class="x-mark"><span class="line left"></span><span class="line right"></span></span></div><div class="icon warning"> <span class="body"></span> <span class="dot"></span> </div> <div class="icon info"></div> <div class="icon success"> <span class="line tip"></span> <span class="line long"></span> <div class="placeholder"></div> <div class="fix"></div> </div> <div class="icon custom"></div> <h2>Title</h2><p class="lead text-muted">Text</p><p><button class="cancel btn btn-lg" tabIndex="2">Cancel</button> <button class="confirm btn btn-lg" tabIndex="1">OK</button></p></div>',
|
||||
sweetWrap = document.createElement('div');
|
||||
|
||||
sweetWrap.innerHTML = sweetHTML;
|
||||
|
||||
// For readability: check sweet-alert.html
|
||||
document.body.appendChild(sweetWrap);
|
||||
|
||||
// For development use only!
|
||||
/*jQuery.ajax({
|
||||
url: '../lib/sweet-alert.html', // Change path depending on file location
|
||||
dataType: 'html'
|
||||
})
|
||||
.done(function(html) {
|
||||
jQuery('body').append(html);
|
||||
});*/
|
||||
}
|
||||
|
||||
/*
|
||||
* Global sweetAlert function
|
||||
*/
|
||||
|
||||
window.sweetAlert = window.swal = function() {
|
||||
if (arguments[0] === undefined) {
|
||||
window.console.error('sweetAlert expects at least 1 attribute!');
|
||||
return false;
|
||||
}
|
||||
|
||||
var params = extend({}, defaultParams);
|
||||
|
||||
switch (typeof arguments[0]) {
|
||||
|
||||
case 'string':
|
||||
params.title = arguments[0];
|
||||
params.text = arguments[1] || '';
|
||||
params.type = arguments[2] || '';
|
||||
|
||||
break;
|
||||
|
||||
case 'object':
|
||||
if (arguments[0].title === undefined) {
|
||||
window.console.error('Missing "title" argument!');
|
||||
return false;
|
||||
}
|
||||
|
||||
params.title = arguments[0].title;
|
||||
params.text = arguments[0].text || defaultParams.text;
|
||||
params.type = arguments[0].type || defaultParams.type;
|
||||
params.allowOutsideClick = arguments[0].allowOutsideClick || defaultParams.allowOutsideClick;
|
||||
params.showCancelButton = arguments[0].showCancelButton !== undefined ? arguments[0].showCancelButton : defaultParams.showCancelButton;
|
||||
params.closeOnConfirm = arguments[0].closeOnConfirm !== undefined ? arguments[0].closeOnConfirm : defaultParams.closeOnConfirm;
|
||||
params.closeOnCancel = arguments[0].closeOnCancel !== undefined ? arguments[0].closeOnCancel : defaultParams.closeOnCancel;
|
||||
params.timer = arguments[0].timer || defaultParams.timer;
|
||||
|
||||
// Show "Confirm" instead of "OK" if cancel button is visible
|
||||
params.confirmButtonText = (defaultParams.showCancelButton) ? 'Confirm' : defaultParams.confirmButtonText;
|
||||
params.confirmButtonText = arguments[0].confirmButtonText || defaultParams.confirmButtonText;
|
||||
params.confirmButtonClass = arguments[0].confirmButtonClass || defaultParams.confirmButtonClass;
|
||||
params.cancelButtonText = arguments[0].cancelButtonText || defaultParams.cancelButtonText;
|
||||
params.cancelButtonClass = arguments[0].cancelButtonClass || defaultParams.cancelButtonClass;
|
||||
params.imageUrl = arguments[0].imageUrl || defaultParams.imageUrl;
|
||||
params.imageSize = arguments[0].imageSize || defaultParams.imageSize;
|
||||
params.doneFunction = arguments[1] || null;
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
window.console.error('Unexpected type of argument! Expected "string" or "object", got ' + typeof arguments[0]);
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
setParameters(params);
|
||||
fixVerticalPosition();
|
||||
openModal();
|
||||
|
||||
|
||||
// Modal interactions
|
||||
var modal = getModal();
|
||||
|
||||
// Mouse interactions
|
||||
var onButtonEvent = function(e) {
|
||||
|
||||
var target = e.target || e.srcElement,
|
||||
targetedConfirm = (target.className.indexOf('confirm') > -1),
|
||||
modalIsVisible = hasClass(modal, 'visible'),
|
||||
doneFunctionExists = (params.doneFunction && modal.getAttribute('data-has-done-function') === 'true');
|
||||
|
||||
switch (e.type) {
|
||||
case ("click"):
|
||||
if (targetedConfirm && doneFunctionExists && modalIsVisible) { // Clicked "confirm"
|
||||
|
||||
params.doneFunction(true);
|
||||
|
||||
if (params.closeOnConfirm) {
|
||||
closeModal();
|
||||
}
|
||||
} else if (doneFunctionExists && modalIsVisible) { // Clicked "cancel"
|
||||
|
||||
// Check if callback function expects a parameter (to track cancel actions)
|
||||
var functionAsStr = String(params.doneFunction).replace(/\s/g, '');
|
||||
var functionHandlesCancel = functionAsStr.substring(0, 9) === "function(" && functionAsStr.substring(9, 10) !== ")";
|
||||
|
||||
if (functionHandlesCancel) {
|
||||
params.doneFunction(false);
|
||||
}
|
||||
|
||||
if (params.closeOnCancel) {
|
||||
closeModal();
|
||||
}
|
||||
} else {
|
||||
closeModal();
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
var $buttons = modal.querySelectorAll('button');
|
||||
for (var i = 0; i < $buttons.length; i++) {
|
||||
$buttons[i].onclick = onButtonEvent;
|
||||
}
|
||||
|
||||
// Remember the current document.onclick event.
|
||||
previousDocumentClick = document.onclick;
|
||||
document.onclick = function(e) {
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
var clickedOnModal = (modal === target),
|
||||
clickedOnModalChild = isDescendant(modal, e.target),
|
||||
modalIsVisible = hasClass(modal, 'visible'),
|
||||
outsideClickIsAllowed = modal.getAttribute('data-allow-ouside-click') === 'true';
|
||||
|
||||
if (!clickedOnModal && !clickedOnModalChild && modalIsVisible && outsideClickIsAllowed) {
|
||||
closeModal();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Keyboard interactions
|
||||
var $okButton = modal.querySelector('button.confirm'),
|
||||
$cancelButton = modal.querySelector('button.cancel'),
|
||||
$modalButtons = modal.querySelectorAll('button:not([type=hidden])');
|
||||
|
||||
|
||||
function handleKeyDown(e) {
|
||||
var keyCode = e.keyCode || e.which;
|
||||
|
||||
if ([9,13,32,27].indexOf(keyCode) === -1) {
|
||||
// Don't do work on keys we don't care about.
|
||||
return;
|
||||
}
|
||||
|
||||
var $targetElement = e.target || e.srcElement;
|
||||
|
||||
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
|
||||
for (var i = 0; i < $modalButtons.length; i++) {
|
||||
if ($targetElement === $modalButtons[i]) {
|
||||
btnIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (keyCode === 9) {
|
||||
// TAB
|
||||
if (btnIndex === -1) {
|
||||
// No button focused. Jump to the confirm button.
|
||||
$targetElement = $okButton;
|
||||
} else {
|
||||
// Cycle to the next button
|
||||
if (btnIndex === $modalButtons.length - 1) {
|
||||
$targetElement = $modalButtons[0];
|
||||
} else {
|
||||
$targetElement = $modalButtons[btnIndex + 1];
|
||||
}
|
||||
}
|
||||
|
||||
stopEventPropagation(e);
|
||||
$targetElement.focus();
|
||||
|
||||
} else {
|
||||
if (keyCode === 13 || keyCode === 32) {
|
||||
if (btnIndex === -1) {
|
||||
// ENTER/SPACE clicked outside of a button.
|
||||
$targetElement = $okButton;
|
||||
} else {
|
||||
// Do nothing - let the browser handle it.
|
||||
$targetElement = undefined;
|
||||
}
|
||||
} else if (keyCode === 27 && !($cancelButton.hidden || $cancelButton.style.display === 'none')) {
|
||||
// ESC to cancel only if there's a cancel button displayed (like the alert() window).
|
||||
$targetElement = $cancelButton;
|
||||
} else {
|
||||
// Fallback - let the browser handle it.
|
||||
$targetElement = undefined;
|
||||
}
|
||||
|
||||
if ($targetElement !== undefined) {
|
||||
fireClick($targetElement, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
previousWindowKeyDown = window.onkeydown;
|
||||
window.onkeydown = handleKeyDown;
|
||||
|
||||
function handleOnBlur(e) {
|
||||
var $targetElement = e.target || e.srcElement,
|
||||
$focusElement = e.relatedTarget,
|
||||
modalIsVisible = hasClass(modal, 'visible');
|
||||
|
||||
if (modalIsVisible) {
|
||||
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
|
||||
|
||||
if ($focusElement !== null) {
|
||||
// If we picked something in the DOM to focus to, let's see if it was a button.
|
||||
for (var i = 0; i < $modalButtons.length; i++) {
|
||||
if ($focusElement === $modalButtons[i]) {
|
||||
btnIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (btnIndex === -1) {
|
||||
// Something in the dom, but not a visible button. Focus back on the button.
|
||||
$targetElement.focus();
|
||||
}
|
||||
} else {
|
||||
// Exiting the DOM (e.g. clicked in the URL bar);
|
||||
lastFocusedButton = $targetElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$okButton.onblur = handleOnBlur;
|
||||
$cancelButton.onblur = handleOnBlur;
|
||||
|
||||
window.onfocus = function() {
|
||||
// When the user has focused away and focused back from the whole window.
|
||||
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);
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Set default params for each popup
|
||||
* @param {Object} userParams
|
||||
*/
|
||||
window.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);
|
||||
};
|
||||
|
||||
/*
|
||||
* Set type, text and actions on modal
|
||||
*/
|
||||
|
||||
function setParameters(params) {
|
||||
var modal = getModal();
|
||||
|
||||
var $title = modal.querySelector('h2'),
|
||||
$text = modal.querySelector('p'),
|
||||
$cancelBtn = modal.querySelector('button.cancel'),
|
||||
$confirmBtn = modal.querySelector('button.confirm');
|
||||
|
||||
// Title
|
||||
$title.innerHTML = escapeHtml(params.title).split("\n").join("<br>");
|
||||
|
||||
// Text
|
||||
$text.innerHTML = escapeHtml(params.text || '').split("\n").join("<br>");
|
||||
if (params.text) {
|
||||
show($text);
|
||||
}
|
||||
|
||||
// Icon
|
||||
hide(modal.querySelectorAll('.icon'));
|
||||
if (params.type) {
|
||||
var validType = false;
|
||||
for (var i = 0; i < alertTypes.length; i++) {
|
||||
if (params.type === alertTypes[i]) {
|
||||
validType = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!validType) {
|
||||
window.console.error('Unknown alert type: ' + params.type);
|
||||
return false;
|
||||
}
|
||||
var $icon = modal.querySelector('.icon.' + params.type);
|
||||
show($icon);
|
||||
|
||||
// Animate icon
|
||||
switch (params.type) {
|
||||
case "success":
|
||||
addClass($icon, 'animate');
|
||||
addClass($icon.querySelector('.tip'), 'animateSuccessTip');
|
||||
addClass($icon.querySelector('.long'), 'animateSuccessLong');
|
||||
break;
|
||||
case "error":
|
||||
addClass($icon, 'animateErrorIcon');
|
||||
addClass($icon.querySelector('.x-mark'), 'animateXMark');
|
||||
break;
|
||||
case "warning":
|
||||
addClass($icon, 'pulseWarning');
|
||||
addClass($icon.querySelector('.body'), 'pulseWarningIns');
|
||||
addClass($icon.querySelector('.dot'), 'pulseWarningIns');
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Custom image
|
||||
if (params.imageUrl) {
|
||||
var $customIcon = modal.querySelector('.icon.custom');
|
||||
|
||||
$customIcon.style.backgroundImage = 'url(' + params.imageUrl + ')';
|
||||
show($customIcon);
|
||||
|
||||
var _imgWidth = 80,
|
||||
_imgHeight = 80;
|
||||
|
||||
if (params.imageSize) {
|
||||
var imgWidth = params.imageSize.split('x')[0];
|
||||
var imgHeight = params.imageSize.split('x')[1];
|
||||
|
||||
if (!imgWidth || !imgHeight) {
|
||||
window.console.error("Parameter imageSize expects value with format WIDTHxHEIGHT, got " + params.imageSize);
|
||||
} else {
|
||||
_imgWidth = imgWidth;
|
||||
_imgHeight = imgHeight;
|
||||
|
||||
$customIcon.css({
|
||||
'width': imgWidth + 'px',
|
||||
'height': imgHeight + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
$customIcon.setAttribute('style', $customIcon.getAttribute('style') + 'width:' + _imgWidth + 'px; height:' + _imgHeight + 'px');
|
||||
}
|
||||
|
||||
// Cancel button
|
||||
modal.setAttribute('data-has-cancel-button', params.showCancelButton);
|
||||
if (params.showCancelButton) {
|
||||
$cancelBtn.style.display = 'inline-block';
|
||||
} else {
|
||||
hide($cancelBtn);
|
||||
}
|
||||
|
||||
// Edit text on cancel and confirm buttons
|
||||
if (params.cancelButtonText) {
|
||||
$cancelBtn.innerHTML = escapeHtml(params.cancelButtonText);
|
||||
}
|
||||
if (params.confirmButtonText) {
|
||||
$confirmBtn.innerHTML = escapeHtml(params.confirmButtonText);
|
||||
}
|
||||
|
||||
// Reset confirm buttons to default class (Ugly fix)
|
||||
$confirmBtn.className = 'confirm btn btn-lg'
|
||||
|
||||
// Set confirm button to selected class
|
||||
addClass($confirmBtn, params.confirmButtonClass);
|
||||
|
||||
// Set cancel button to selected class
|
||||
addClass($cancelBtn, params.cancelButtonClass);
|
||||
|
||||
// Allow outside click?
|
||||
modal.setAttribute('data-allow-ouside-click', params.allowOutsideClick);
|
||||
|
||||
// Done-function
|
||||
var hasDoneFunction = (params.doneFunction) ? true : false;
|
||||
modal.setAttribute('data-has-done-function', hasDoneFunction);
|
||||
|
||||
// Close timer
|
||||
modal.setAttribute('data-timer', params.timer);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Set hover, active and focus-states for buttons (source: http://www.sitepoint.com/javascript-generate-lighter-darker-color)
|
||||
*/
|
||||
|
||||
function colorLuminance(hex, lum) {
|
||||
// Validate hex string
|
||||
hex = String(hex).replace(/[^0-9a-f]/gi, '');
|
||||
if (hex.length < 6) {
|
||||
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
|
||||
}
|
||||
lum = lum || 0;
|
||||
|
||||
// Convert to decimal and change luminosity
|
||||
var rgb = "#", c, i;
|
||||
for (i = 0; i < 3; i++) {
|
||||
c = parseInt(hex.substr(i*2,2), 16);
|
||||
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
|
||||
rgb += ("00"+c).substr(c.length);
|
||||
}
|
||||
|
||||
return rgb;
|
||||
}
|
||||
|
||||
function extend(a, b){
|
||||
for (var key in b) {
|
||||
if (b.hasOwnProperty(key)) {
|
||||
a[key] = b[key];
|
||||
}
|
||||
}
|
||||
|
||||
return a;
|
||||
}
|
||||
|
||||
function hexToRgb(hex) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) : null;
|
||||
}
|
||||
|
||||
// Add box-shadow style to button (depending on its chosen bg-color)
|
||||
function setFocusStyle($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)';
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Animations
|
||||
*/
|
||||
|
||||
function openModal() {
|
||||
var modal = getModal();
|
||||
fadeIn(getOverlay(), 10);
|
||||
show(modal);
|
||||
addClass(modal, 'showSweetAlert');
|
||||
removeClass(modal, 'hideSweetAlert');
|
||||
|
||||
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 !== "") {
|
||||
setTimeout(function() {
|
||||
closeModal();
|
||||
}, timer);
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
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('.icon.success');
|
||||
removeClass($successIcon, 'animate');
|
||||
removeClass($successIcon.querySelector('.tip'), 'animateSuccessTip');
|
||||
removeClass($successIcon.querySelector('.long'), 'animateSuccessLong');
|
||||
|
||||
var $errorIcon = modal.querySelector('.icon.error');
|
||||
removeClass($errorIcon, 'animateErrorIcon');
|
||||
removeClass($errorIcon.querySelector('.x-mark'), 'animateXMark');
|
||||
|
||||
var $warningIcon = modal.querySelector('.icon.warning');
|
||||
removeClass($warningIcon, 'pulseWarning');
|
||||
removeClass($warningIcon.querySelector('.body'), 'pulseWarningIns');
|
||||
removeClass($warningIcon.querySelector('.dot'), 'pulseWarningIns');
|
||||
|
||||
|
||||
// Reset the page to its previous state
|
||||
window.onkeydown = previousWindowKeyDown;
|
||||
document.onclick = previousDocumentClick;
|
||||
if (previousActiveElement) {
|
||||
previousActiveElement.focus();
|
||||
}
|
||||
lastFocusedButton = undefined;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Set "margin-top"-property on modal based on its computed height
|
||||
*/
|
||||
|
||||
function fixVerticalPosition() {
|
||||
var modal = getModal();
|
||||
modal.style.marginTop = getTopMargin(getModal());
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* If library is injected after page has loaded
|
||||
*/
|
||||
|
||||
(function () {
|
||||
if (document.readyState === "complete" || document.readyState === "interactive" && document.body) {
|
||||
sweetAlertInitialize();
|
||||
} else {
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('DOMContentLoaded', function factorial() {
|
||||
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
|
||||
sweetAlertInitialize();
|
||||
}, false);
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent('onreadystatechange', function() {
|
||||
if (document.readyState === 'complete') {
|
||||
document.detachEvent('onreadystatechange', arguments.callee);
|
||||
sweetAlertInitialize();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
})(window, document);
|
||||
254
modules/backend/assets/vendor/sweet-alert/sweet-alert.less
vendored
Normal file
254
modules/backend/assets/vendor/sweet-alert/sweet-alert.less
vendored
Normal file
@ -0,0 +1,254 @@
|
||||
// SweetAlert
|
||||
// 2014 (c) - Tristan Edwards
|
||||
// github.com/t4t5/sweetalert
|
||||
|
||||
@import "sweet-alert-animations";
|
||||
|
||||
.sweet-overlay {
|
||||
background-color: fade(#000, 40%);
|
||||
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: none;
|
||||
z-index: @zindex-modal;
|
||||
}
|
||||
|
||||
.sweet-alert {
|
||||
@width: 478px;
|
||||
@padding: 17px;
|
||||
|
||||
background-color: @body-bg;
|
||||
width: @width;
|
||||
padding: @padding;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -(@width / 2 + @padding);
|
||||
margin-top: -200px;
|
||||
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
z-index: 2000;
|
||||
|
||||
@media all and (max-width: @screen-xs-max) {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
left: (@grid-gutter-width / 2);
|
||||
right: (@grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 4px solid gray;
|
||||
border-radius: 50%;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
|
||||
&.error {
|
||||
border-color: @btn-danger-border;
|
||||
|
||||
.x-mark {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
height: 5px;
|
||||
width: 47px;
|
||||
background-color: @btn-danger-bg;
|
||||
display: block;
|
||||
top: 37px;
|
||||
border-radius: 2px;
|
||||
|
||||
&.left {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
left: 17px;
|
||||
}
|
||||
&.right {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
border-color: @btn-warning-border;
|
||||
|
||||
.body { // Exclamation mark body
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 47px;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
border-radius: 2px;
|
||||
margin-left: -2px;
|
||||
background-color: @btn-warning-bg;
|
||||
}
|
||||
.dot { // Exclamation mark dot
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
margin-left: -3px;
|
||||
left: 50%;
|
||||
bottom: 10px;
|
||||
background-color: @btn-warning-bg;
|
||||
}
|
||||
}
|
||||
&.info {
|
||||
border-color: @btn-info-border;
|
||||
|
||||
&::before { // i-letter body
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 29px;
|
||||
left: 50%;
|
||||
bottom: 17px;
|
||||
border-radius: 2px;
|
||||
margin-left: -2px;
|
||||
background-color: @btn-info-bg;
|
||||
}
|
||||
&::after { // i-letter dot
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
margin-left: -3px;
|
||||
top: 19px;
|
||||
background-color: @btn-info-bg;
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
border-color: @btn-success-border;
|
||||
|
||||
&::before, &::after { // Emulate moving circular line
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
background: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&::before {
|
||||
border-radius: 120px 0 0 120px;
|
||||
top: -7px;
|
||||
left: -33px;
|
||||
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform-origin: 60px 60px;
|
||||
transform-origin: 60px 60px;
|
||||
}
|
||||
&::after {
|
||||
border-radius: 0 120px 120px 0;
|
||||
top: -11px;
|
||||
left: 30px;
|
||||
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform-origin: 0px 60px;
|
||||
transform-origin: 0px 60px;
|
||||
}
|
||||
|
||||
.placeholder { // Ring
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 4px solid fade(@brand-success, 20%);
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.fix { // Hide corners left from animation
|
||||
width: 5px;
|
||||
height: 90px;
|
||||
background-color: @body-bg;
|
||||
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
top: 8px;
|
||||
z-index: 1;
|
||||
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 5px;
|
||||
background-color: @btn-success-bg;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
&.tip {
|
||||
width: 25px;
|
||||
|
||||
left: 14px;
|
||||
top: 46px;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&.long {
|
||||
width: 47px;
|
||||
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.custom {
|
||||
background-size: contain;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
.form-control-focus(@btn-default-border);
|
||||
}
|
||||
.btn-success {
|
||||
.form-control-focus(@btn-success-border);
|
||||
}
|
||||
.btn-info {
|
||||
.form-control-focus(@btn-info-border);
|
||||
}
|
||||
.btn-danger {
|
||||
.form-control-focus(@btn-danger-border);
|
||||
}
|
||||
.btn-warning {
|
||||
.form-control-focus(@btn-warning-border);
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
1
modules/backend/assets/vendor/sweet-alert/sweet-alert.min.js
vendored
Normal file
1
modules/backend/assets/vendor/sweet-alert/sweet-alert.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -6,6 +6,7 @@
|
||||
<?= e(trans($this->pageTitle)) ?> | <?= e(Backend\Models\BrandSettings::get('app_name')) ?>
|
||||
</title>
|
||||
|
||||
<link href="<?= Backend::skinAsset('assets/vendor/sweet-alert/sweet-alert.css') ?>" rel="stylesheet">
|
||||
<link href="<?= Backend::skinAsset('assets/vendor/select2/select2.css') ?>" rel="stylesheet">
|
||||
<link href="<?= Backend::skinAsset('assets/css/october.css') ?>?v<?= System\Models\Parameters::get('system::core.build', 1) ?>" rel="stylesheet">
|
||||
|
||||
@ -23,6 +24,7 @@
|
||||
<script src="<?= Backend::skinAsset('assets/vendor/select2/select2.js') ?>"></script>
|
||||
<script src="<?= Backend::skinAsset('assets/vendor/mustache/mustache.min.js') ?>"></script>
|
||||
<script src="<?= Backend::skinAsset('assets/vendor/dropzone/dropzone.js') ?>"></script>
|
||||
<script src="<?= Backend::skinAsset('assets/vendor/sweet-alert/sweet-alert.js') ?>"></script>
|
||||
|
||||
<script src="<?= URL::asset('modules/system/assets/vendor/bootstrap/js/tooltip.js') ?>"></script>
|
||||
<script src="<?= URL::asset('modules/system/assets/vendor/bootstrap/js/modal.js') ?>"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user