sweetalert-rails 0.5.0 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/README.md +13 -3
- data/lib/sweetalert-rails/version.rb +1 -1
- data/vendor/assets/javascripts/sweetalert.js +1285 -0
- data/vendor/assets/stylesheets/sweetalert.css +932 -0
- data/vendor/assets/stylesheets/sweetalert/themes/facebook.css +111 -0
- data/vendor/assets/stylesheets/sweetalert/themes/google.css +115 -0
- data/vendor/assets/stylesheets/sweetalert/themes/twitter.css +140 -0
- metadata +8 -5
- data/vendor/assets/javascripts/sweet-alert.js +0 -917
- data/vendor/assets/stylesheets/sweet-alert.css +0 -1
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
.sweet-overlay {
|
|
2
|
+
border-radius: 3px; }
|
|
3
|
+
|
|
4
|
+
.sweet-alert {
|
|
5
|
+
font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
|
|
6
|
+
padding: 12px;
|
|
7
|
+
padding-top: 53px;
|
|
8
|
+
text-align: right;
|
|
9
|
+
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.11), 0px 6px 30px rgba(0, 0, 0, 0.14); }
|
|
10
|
+
.sweet-alert h2 {
|
|
11
|
+
position: absolute;
|
|
12
|
+
top: 0;
|
|
13
|
+
left: 0;
|
|
14
|
+
right: 0;
|
|
15
|
+
height: 41px;
|
|
16
|
+
background-color: #f6f7f8;
|
|
17
|
+
margin: 0;
|
|
18
|
+
font-size: 15px;
|
|
19
|
+
text-align: left;
|
|
20
|
+
padding-left: 12px;
|
|
21
|
+
color: #131722;
|
|
22
|
+
border-bottom: 1px solid #e5e5e5; }
|
|
23
|
+
.sweet-alert p {
|
|
24
|
+
display: block;
|
|
25
|
+
text-align: center;
|
|
26
|
+
color: #131722;
|
|
27
|
+
font-weight: 400;
|
|
28
|
+
font-size: 15px;
|
|
29
|
+
margin-top: 7px; }
|
|
30
|
+
.sweet-alert .sa-button-container {
|
|
31
|
+
border-top: 1px solid #dcdee3; }
|
|
32
|
+
.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
|
|
33
|
+
padding-bottom: 10px; }
|
|
34
|
+
.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] .sa-button-container {
|
|
35
|
+
display: none; }
|
|
36
|
+
.sweet-alert button {
|
|
37
|
+
font-size: 12px;
|
|
38
|
+
padding: 5px 10px;
|
|
39
|
+
border-radius: 2px;
|
|
40
|
+
box-shadow: none !important;
|
|
41
|
+
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
|
42
|
+
font-weight: 500;
|
|
43
|
+
margin: 0;
|
|
44
|
+
margin-top: 12px; }
|
|
45
|
+
.sweet-alert button:focus, .sweet-alert button.cancel:focus {
|
|
46
|
+
box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15) !important; }
|
|
47
|
+
.sweet-alert button.confirm {
|
|
48
|
+
border: 1px solid #3d5586;
|
|
49
|
+
background-color: #47639c !important;
|
|
50
|
+
margin-left: 4px; }
|
|
51
|
+
.sweet-alert button.cancel {
|
|
52
|
+
color: #4e5664;
|
|
53
|
+
background-color: #fafbfb;
|
|
54
|
+
text-shadow: 0px -1px 0px white;
|
|
55
|
+
border: 1px solid #c5c6c8;
|
|
56
|
+
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04) !important;
|
|
57
|
+
font-weight: 600; }
|
|
58
|
+
.sweet-alert button.cancel:hover {
|
|
59
|
+
background-color: #fafbfb; }
|
|
60
|
+
.sweet-alert .sa-icon:not(.sa-custom) {
|
|
61
|
+
transform: scale(0.7);
|
|
62
|
+
margin-bottom: -10px;
|
|
63
|
+
margin-top: -10px; }
|
|
64
|
+
.sweet-alert input {
|
|
65
|
+
border: 1px solid #bdc7d8;
|
|
66
|
+
padding: 3px;
|
|
67
|
+
border-radius: 0;
|
|
68
|
+
box-shadow: none;
|
|
69
|
+
font-size: 15px;
|
|
70
|
+
height: 33px;
|
|
71
|
+
margin: 10px 0; }
|
|
72
|
+
.sweet-alert input:focus {
|
|
73
|
+
box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15) !important; }
|
|
74
|
+
.sweet-alert fieldset .sa-input-error {
|
|
75
|
+
display: none; }
|
|
76
|
+
.sweet-alert .sa-error-container {
|
|
77
|
+
text-align: center;
|
|
78
|
+
background-color: #fdebe8;
|
|
79
|
+
margin: 0;
|
|
80
|
+
border: none; }
|
|
81
|
+
.sweet-alert .sa-error-container.show {
|
|
82
|
+
margin: 14px;
|
|
83
|
+
margin-top: 0;
|
|
84
|
+
border: 1px solid #d5512d; }
|
|
85
|
+
.sweet-alert .sa-error-container .icon {
|
|
86
|
+
display: none; }
|
|
87
|
+
.sweet-alert .sa-error-container p {
|
|
88
|
+
color: #303b44;
|
|
89
|
+
margin-top: 3px; }
|
|
90
|
+
|
|
91
|
+
@-webkit-keyframes animateErrorIcon {
|
|
92
|
+
0% {
|
|
93
|
+
transform: rotateX(100deg), scale(0.5);
|
|
94
|
+
-webkit-transform: rotateX(100deg), scale(0.5);
|
|
95
|
+
opacity: 0; }
|
|
96
|
+
|
|
97
|
+
100% {
|
|
98
|
+
transform: rotateX(0deg), scale(0.5);
|
|
99
|
+
-webkit-transform: rotateX(0deg), scale(0.5);
|
|
100
|
+
opacity: 1; } }
|
|
101
|
+
|
|
102
|
+
@keyframes animateErrorIcon {
|
|
103
|
+
0% {
|
|
104
|
+
transform: rotateX(100deg), scale(0.5);
|
|
105
|
+
-webkit-transform: rotateX(100deg), scale(0.5);
|
|
106
|
+
opacity: 0; }
|
|
107
|
+
|
|
108
|
+
100% {
|
|
109
|
+
transform: rotateX(0deg), scale(0.5);
|
|
110
|
+
-webkit-transform: rotateX(0deg), scale(0.5);
|
|
111
|
+
opacity: 1; } }
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
.sweet-overlay {
|
|
2
|
+
background: rgba(10, 10, 10, 0.6); }
|
|
3
|
+
|
|
4
|
+
.sweet-alert {
|
|
5
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
6
|
+
padding: 24px;
|
|
7
|
+
padding-top: 64px;
|
|
8
|
+
padding-bottom: 13px;
|
|
9
|
+
text-align: right;
|
|
10
|
+
border-radius: 0;
|
|
11
|
+
box-shadow: 0 0 14px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.48); }
|
|
12
|
+
.sweet-alert h2 {
|
|
13
|
+
position: absolute;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
height: auto;
|
|
18
|
+
font-weight: 400;
|
|
19
|
+
color: #212121;
|
|
20
|
+
margin: 20px 0;
|
|
21
|
+
font-size: 1.2em;
|
|
22
|
+
line-height: 1.25;
|
|
23
|
+
text-align: left;
|
|
24
|
+
padding: 0 24px; }
|
|
25
|
+
.sweet-alert p {
|
|
26
|
+
display: block;
|
|
27
|
+
text-align: center;
|
|
28
|
+
color: #212121;
|
|
29
|
+
font-weight: 400;
|
|
30
|
+
font-size: 14px;
|
|
31
|
+
margin: 20px 0; }
|
|
32
|
+
.sweet-alert button {
|
|
33
|
+
border-radius: 2px;
|
|
34
|
+
box-shadow: none !important;
|
|
35
|
+
background: none !important;
|
|
36
|
+
border-radius: 2px;
|
|
37
|
+
text-transform: uppercase;
|
|
38
|
+
font-size: 14px;
|
|
39
|
+
font-weight: 600;
|
|
40
|
+
padding: 8px 16px;
|
|
41
|
+
position: relative;
|
|
42
|
+
margin-top: 0; }
|
|
43
|
+
.sweet-alert button:hover, .sweet-alert button:focus {
|
|
44
|
+
background-color: #f6f6f6 !important; }
|
|
45
|
+
.sweet-alert button.confirm {
|
|
46
|
+
color: #3c80f6; }
|
|
47
|
+
.sweet-alert button.cancel {
|
|
48
|
+
color: #757575; }
|
|
49
|
+
.sweet-alert button.cancel:focus {
|
|
50
|
+
box-shadow: none !important; }
|
|
51
|
+
.sweet-alert .sa-icon:not(.sa-custom) {
|
|
52
|
+
transform: scale(0.8);
|
|
53
|
+
margin-bottom: -10px;
|
|
54
|
+
margin-top: -10px; }
|
|
55
|
+
.sweet-alert input {
|
|
56
|
+
border: none;
|
|
57
|
+
border-radius: 0;
|
|
58
|
+
border-bottom: 1px solid #c9c9c9;
|
|
59
|
+
color: #212121;
|
|
60
|
+
margin-bottom: 8px;
|
|
61
|
+
padding: 1px;
|
|
62
|
+
padding-bottom: 8px;
|
|
63
|
+
height: auto;
|
|
64
|
+
box-shadow: none;
|
|
65
|
+
font-size: 13px;
|
|
66
|
+
margin: 10px 0; }
|
|
67
|
+
.sweet-alert input:focus {
|
|
68
|
+
border: none;
|
|
69
|
+
border-bottom: 1px solid #3c80f6;
|
|
70
|
+
box-shadow: inset 0 -1px 0 #3c80f6; }
|
|
71
|
+
.sweet-alert fieldset {
|
|
72
|
+
padding: 0; }
|
|
73
|
+
.sweet-alert fieldset .sa-input-error {
|
|
74
|
+
display: none; }
|
|
75
|
+
.sweet-alert .sa-error-container {
|
|
76
|
+
display: none;
|
|
77
|
+
background: none;
|
|
78
|
+
height: auto;
|
|
79
|
+
padding: 0 24px;
|
|
80
|
+
margin: 0 -20px;
|
|
81
|
+
text-align: left; }
|
|
82
|
+
.sweet-alert .sa-error-container.show {
|
|
83
|
+
padding: 0 24px;
|
|
84
|
+
display: block; }
|
|
85
|
+
.sweet-alert .sa-error-container.show ~ fieldset input {
|
|
86
|
+
background: red;
|
|
87
|
+
border-bottom: 1px solid #d9453c;
|
|
88
|
+
box-shadow: inset 0 -1px 0 #d9453c; }
|
|
89
|
+
.sweet-alert .sa-error-container .icon {
|
|
90
|
+
display: none; }
|
|
91
|
+
.sweet-alert .sa-error-container p {
|
|
92
|
+
color: #d9453c;
|
|
93
|
+
margin-top: 0; }
|
|
94
|
+
|
|
95
|
+
@-webkit-keyframes animateErrorIcon {
|
|
96
|
+
0% {
|
|
97
|
+
transform: rotateX(100deg), scale(0.5);
|
|
98
|
+
-webkit-transform: rotateX(100deg), scale(0.5);
|
|
99
|
+
opacity: 0; }
|
|
100
|
+
|
|
101
|
+
100% {
|
|
102
|
+
transform: rotateX(0deg), scale(0.5);
|
|
103
|
+
-webkit-transform: rotateX(0deg), scale(0.5);
|
|
104
|
+
opacity: 1; } }
|
|
105
|
+
|
|
106
|
+
@keyframes animateErrorIcon {
|
|
107
|
+
0% {
|
|
108
|
+
transform: rotateX(100deg), scale(0.5);
|
|
109
|
+
-webkit-transform: rotateX(100deg), scale(0.5);
|
|
110
|
+
opacity: 0; }
|
|
111
|
+
|
|
112
|
+
100% {
|
|
113
|
+
transform: rotateX(0deg), scale(0.5);
|
|
114
|
+
-webkit-transform: rotateX(0deg), scale(0.5);
|
|
115
|
+
opacity: 1; } }
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
.sweet-overlay {
|
|
2
|
+
background: rgba(41, 47, 51, 0.9); }
|
|
3
|
+
|
|
4
|
+
.sweet-alert {
|
|
5
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
6
|
+
padding: 15px;
|
|
7
|
+
padding-top: 55px;
|
|
8
|
+
text-align: right;
|
|
9
|
+
border-radius: 6px;
|
|
10
|
+
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.11), 0px 6px 30px rgba(0, 0, 0, 0.14); }
|
|
11
|
+
.sweet-alert h2 {
|
|
12
|
+
position: absolute;
|
|
13
|
+
top: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
right: 0;
|
|
16
|
+
height: 40px;
|
|
17
|
+
line-height: 40px;
|
|
18
|
+
font-size: 16px;
|
|
19
|
+
font-weight: 400;
|
|
20
|
+
color: #8899a6;
|
|
21
|
+
margin: 0;
|
|
22
|
+
color: #66757f;
|
|
23
|
+
border-bottom: 1px solid #e1e8ed; }
|
|
24
|
+
.sweet-alert p {
|
|
25
|
+
display: block;
|
|
26
|
+
text-align: center;
|
|
27
|
+
color: #66757f;
|
|
28
|
+
font-weight: 400;
|
|
29
|
+
font-size: 13px;
|
|
30
|
+
margin-top: 7px; }
|
|
31
|
+
.sweet-alert .sa-button-container {
|
|
32
|
+
background-color: #f5f8fa;
|
|
33
|
+
border-top: 1px solid #e1e8ed;
|
|
34
|
+
box-shadow: 0px -1px 0px white;
|
|
35
|
+
margin: -15px;
|
|
36
|
+
margin-top: 0; }
|
|
37
|
+
.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
|
|
38
|
+
padding-bottom: 10px; }
|
|
39
|
+
.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] .sa-button-container {
|
|
40
|
+
display: none; }
|
|
41
|
+
.sweet-alert button {
|
|
42
|
+
border-radius: 2px;
|
|
43
|
+
box-shadow: none !important;
|
|
44
|
+
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
|
45
|
+
margin: 17px 0px;
|
|
46
|
+
border-radius: 4px;
|
|
47
|
+
font-size: 14px;
|
|
48
|
+
font-weight: 600;
|
|
49
|
+
padding: 8px 16px;
|
|
50
|
+
position: relative; }
|
|
51
|
+
.sweet-alert button:focus, .sweet-alert button.cancel:focus {
|
|
52
|
+
box-shadow: none !important; }
|
|
53
|
+
.sweet-alert button:focus::before, .sweet-alert button.cancel:focus::before {
|
|
54
|
+
content: "";
|
|
55
|
+
position: absolute;
|
|
56
|
+
left: -5px;
|
|
57
|
+
top: -5px;
|
|
58
|
+
right: -5px;
|
|
59
|
+
bottom: -5px;
|
|
60
|
+
border: 2px solid #a5b0b4;
|
|
61
|
+
border-radius: 8px; }
|
|
62
|
+
.sweet-alert button.confirm {
|
|
63
|
+
background-color: #55acee !important;
|
|
64
|
+
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
|
65
|
+
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#0C000000)";
|
|
66
|
+
border: 1px solid #3b88c3;
|
|
67
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
|
68
|
+
margin-right: 15px; }
|
|
69
|
+
.sweet-alert button.confirm:hover {
|
|
70
|
+
background-color: #55acee;
|
|
71
|
+
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15));
|
|
72
|
+
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)";
|
|
73
|
+
border-color: #3b88c3; }
|
|
74
|
+
.sweet-alert button.cancel {
|
|
75
|
+
color: #66757e;
|
|
76
|
+
background-color: #f5f8fa;
|
|
77
|
+
background-image: linear-gradient(#fff, #f5f8fa);
|
|
78
|
+
text-shadow: 0px -1px 0px white;
|
|
79
|
+
margin-right: 9px;
|
|
80
|
+
border: 1px solid #e1e8ed; }
|
|
81
|
+
.sweet-alert button.cancel:hover, .sweet-alert button.cancel:focus:hover {
|
|
82
|
+
background-color: #e1e8ed;
|
|
83
|
+
background-image: linear-gradient(#fff, #e1e8ed);
|
|
84
|
+
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
|
|
85
|
+
border-color: #e1e8ed; }
|
|
86
|
+
.sweet-alert button.cancel:focus {
|
|
87
|
+
background: #fff;
|
|
88
|
+
border-color: #fff; }
|
|
89
|
+
.sweet-alert .sa-icon:not(.sa-custom) {
|
|
90
|
+
transform: scale(0.72);
|
|
91
|
+
margin-bottom: -2px;
|
|
92
|
+
margin-top: -10px; }
|
|
93
|
+
.sweet-alert input {
|
|
94
|
+
border: 1px solid #e1e8ed;
|
|
95
|
+
border-radius: 3px;
|
|
96
|
+
padding: 10px 7px;
|
|
97
|
+
height: auto;
|
|
98
|
+
box-shadow: none;
|
|
99
|
+
font-size: 13px;
|
|
100
|
+
margin: 10px 0; }
|
|
101
|
+
.sweet-alert input:focus {
|
|
102
|
+
border-color: #94A1A6;
|
|
103
|
+
box-shadow: inset 0 0 0 1px rgba(77, 99, 107, 0.7); }
|
|
104
|
+
.sweet-alert fieldset .sa-input-error {
|
|
105
|
+
display: none; }
|
|
106
|
+
.sweet-alert .sa-error-container {
|
|
107
|
+
text-align: center;
|
|
108
|
+
border: none;
|
|
109
|
+
background-color: #fbedc0;
|
|
110
|
+
margin-bottom: 6px; }
|
|
111
|
+
.sweet-alert .sa-error-container.show {
|
|
112
|
+
border: 1px solid #f0e1b9; }
|
|
113
|
+
.sweet-alert .sa-error-container .icon {
|
|
114
|
+
display: none; }
|
|
115
|
+
.sweet-alert .sa-error-container p {
|
|
116
|
+
color: #292f33;
|
|
117
|
+
font-weight: 600;
|
|
118
|
+
margin-top: 0; }
|
|
119
|
+
|
|
120
|
+
@-webkit-keyframes animateErrorIcon {
|
|
121
|
+
0% {
|
|
122
|
+
transform: rotateX(100deg), scale(0.5);
|
|
123
|
+
-webkit-transform: rotateX(100deg), scale(0.5);
|
|
124
|
+
opacity: 0; }
|
|
125
|
+
|
|
126
|
+
100% {
|
|
127
|
+
transform: rotateX(0deg), scale(0.5);
|
|
128
|
+
-webkit-transform: rotateX(0deg), scale(0.5);
|
|
129
|
+
opacity: 1; } }
|
|
130
|
+
|
|
131
|
+
@keyframes animateErrorIcon {
|
|
132
|
+
0% {
|
|
133
|
+
transform: rotateX(100deg), scale(0.5);
|
|
134
|
+
-webkit-transform: rotateX(100deg), scale(0.5);
|
|
135
|
+
opacity: 0; }
|
|
136
|
+
|
|
137
|
+
100% {
|
|
138
|
+
transform: rotateX(0deg), scale(0.5);
|
|
139
|
+
-webkit-transform: rotateX(0deg), scale(0.5);
|
|
140
|
+
opacity: 1; } }
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: sweetalert-rails
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 1.1.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Rustam Sharshenov
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2016-05-09 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: railties
|
|
@@ -40,8 +40,11 @@ files:
|
|
|
40
40
|
- lib/sweetalert-rails/engine.rb
|
|
41
41
|
- lib/sweetalert-rails/version.rb
|
|
42
42
|
- sweetalert-rails.gemspec
|
|
43
|
-
- vendor/assets/javascripts/
|
|
44
|
-
- vendor/assets/stylesheets/
|
|
43
|
+
- vendor/assets/javascripts/sweetalert.js
|
|
44
|
+
- vendor/assets/stylesheets/sweetalert.css
|
|
45
|
+
- vendor/assets/stylesheets/sweetalert/themes/facebook.css
|
|
46
|
+
- vendor/assets/stylesheets/sweetalert/themes/google.css
|
|
47
|
+
- vendor/assets/stylesheets/sweetalert/themes/twitter.css
|
|
45
48
|
homepage: https://github.com/sharshenov/sweetalert-rails
|
|
46
49
|
licenses:
|
|
47
50
|
- MIT
|
|
@@ -62,7 +65,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
62
65
|
version: '0'
|
|
63
66
|
requirements: []
|
|
64
67
|
rubyforge_project:
|
|
65
|
-
rubygems_version: 2.
|
|
68
|
+
rubygems_version: 2.4.8
|
|
66
69
|
signing_key:
|
|
67
70
|
specification_version: 4
|
|
68
71
|
summary: Use SweerAlert with Rails
|
|
@@ -1,917 +0,0 @@
|
|
|
1
|
-
// SweetAlert
|
|
2
|
-
// 2014-2015 (c) - Tristan Edwards
|
|
3
|
-
// github.com/t4t5/sweetalert
|
|
4
|
-
;(function(window, document, undefined) {
|
|
5
|
-
|
|
6
|
-
var modalClass = '.sweet-alert',
|
|
7
|
-
overlayClass = '.sweet-overlay',
|
|
8
|
-
alertTypes = ['error', 'warning', 'info', 'success', 'input', 'prompt'],
|
|
9
|
-
defaultParams = {
|
|
10
|
-
title: '',
|
|
11
|
-
text: '',
|
|
12
|
-
type: null,
|
|
13
|
-
allowOutsideClick: false,
|
|
14
|
-
showConfirmButton: true,
|
|
15
|
-
showCancelButton: false,
|
|
16
|
-
closeOnConfirm: true,
|
|
17
|
-
closeOnCancel: true,
|
|
18
|
-
confirmButtonText: 'OK',
|
|
19
|
-
confirmButtonColor: '#AEDEF4',
|
|
20
|
-
cancelButtonText: 'Cancel',
|
|
21
|
-
imageUrl: null,
|
|
22
|
-
imageSize: null,
|
|
23
|
-
timer: null,
|
|
24
|
-
customClass: '',
|
|
25
|
-
html: false,
|
|
26
|
-
animation: true,
|
|
27
|
-
allowEscapeKey: true,
|
|
28
|
-
inputType: 'text'
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
/*
|
|
33
|
-
* Manipulate DOM
|
|
34
|
-
*/
|
|
35
|
-
|
|
36
|
-
var getModal = function() {
|
|
37
|
-
var $modal = document.querySelector(modalClass);
|
|
38
|
-
|
|
39
|
-
if (!$modal) {
|
|
40
|
-
sweetAlertInitialize();
|
|
41
|
-
$modal = getModal();
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
return $modal;
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
var getInput = function() {
|
|
48
|
-
var modal = getModal();
|
|
49
|
-
if (modal) {
|
|
50
|
-
return modal.querySelector('input');
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
getOverlay = function() {
|
|
54
|
-
return document.querySelector(overlayClass);
|
|
55
|
-
},
|
|
56
|
-
hasClass = function(elem, className) {
|
|
57
|
-
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
|
|
58
|
-
},
|
|
59
|
-
addClass = function(elem, className) {
|
|
60
|
-
if (!hasClass(elem, className)) {
|
|
61
|
-
elem.className += ' ' + className;
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
removeClass = function(elem, className) {
|
|
65
|
-
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
|
|
66
|
-
if (hasClass(elem, className)) {
|
|
67
|
-
while (newClass.indexOf(' ' + className + ' ') >= 0) {
|
|
68
|
-
newClass = newClass.replace(' ' + className + ' ', ' ');
|
|
69
|
-
}
|
|
70
|
-
elem.className = newClass.replace(/^\s+|\s+$/g, '');
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
escapeHtml = function(str) {
|
|
74
|
-
var div = document.createElement('div');
|
|
75
|
-
div.appendChild(document.createTextNode(str));
|
|
76
|
-
return div.innerHTML;
|
|
77
|
-
},
|
|
78
|
-
_show = function(elem) {
|
|
79
|
-
elem.style.opacity = '';
|
|
80
|
-
elem.style.display = 'block';
|
|
81
|
-
},
|
|
82
|
-
show = function(elems) {
|
|
83
|
-
if (elems && !elems.length) {
|
|
84
|
-
return _show(elems);
|
|
85
|
-
}
|
|
86
|
-
for (var i = 0; i < elems.length; ++i) {
|
|
87
|
-
_show(elems[i]);
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
_hide = function(elem) {
|
|
91
|
-
elem.style.opacity = '';
|
|
92
|
-
elem.style.display = 'none';
|
|
93
|
-
},
|
|
94
|
-
hide = function(elems) {
|
|
95
|
-
if (elems && !elems.length) {
|
|
96
|
-
return _hide(elems);
|
|
97
|
-
}
|
|
98
|
-
for (var i = 0; i < elems.length; ++i) {
|
|
99
|
-
_hide(elems[i]);
|
|
100
|
-
}
|
|
101
|
-
},
|
|
102
|
-
isDescendant = function(parent, child) {
|
|
103
|
-
var node = child.parentNode;
|
|
104
|
-
while (node !== null) {
|
|
105
|
-
if (node === parent) {
|
|
106
|
-
return true;
|
|
107
|
-
}
|
|
108
|
-
node = node.parentNode;
|
|
109
|
-
}
|
|
110
|
-
return false;
|
|
111
|
-
},
|
|
112
|
-
getTopMargin = function(elem) {
|
|
113
|
-
elem.style.left = '-9999px';
|
|
114
|
-
elem.style.display = 'block';
|
|
115
|
-
|
|
116
|
-
var height = elem.clientHeight,
|
|
117
|
-
padding;
|
|
118
|
-
if (typeof getComputedStyle !== "undefined") { // IE 8
|
|
119
|
-
padding = parseInt(getComputedStyle(elem).getPropertyValue('padding-top'), 10);
|
|
120
|
-
} else {
|
|
121
|
-
padding = parseInt(elem.currentStyle.padding);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
elem.style.left = '';
|
|
125
|
-
elem.style.display = 'none';
|
|
126
|
-
return ('-' + parseInt((height + padding) / 2) + 'px');
|
|
127
|
-
},
|
|
128
|
-
fadeIn = function(elem, interval) {
|
|
129
|
-
if (+elem.style.opacity < 1) {
|
|
130
|
-
interval = interval || 16;
|
|
131
|
-
elem.style.opacity = 0;
|
|
132
|
-
elem.style.display = 'block';
|
|
133
|
-
var last = +new Date();
|
|
134
|
-
var tick = function() {
|
|
135
|
-
elem.style.opacity = +elem.style.opacity + (new Date() - last) / 100;
|
|
136
|
-
last = +new Date();
|
|
137
|
-
|
|
138
|
-
if (+elem.style.opacity < 1) {
|
|
139
|
-
setTimeout(tick, interval);
|
|
140
|
-
}
|
|
141
|
-
};
|
|
142
|
-
tick();
|
|
143
|
-
}
|
|
144
|
-
elem.style.display = 'block'; //fallback IE8
|
|
145
|
-
},
|
|
146
|
-
fadeOut = function(elem, interval) {
|
|
147
|
-
interval = interval || 16;
|
|
148
|
-
elem.style.opacity = 1;
|
|
149
|
-
var last = +new Date();
|
|
150
|
-
var tick = function() {
|
|
151
|
-
elem.style.opacity = +elem.style.opacity - (new Date() - last) / 100;
|
|
152
|
-
last = +new Date();
|
|
153
|
-
|
|
154
|
-
if (+elem.style.opacity > 0) {
|
|
155
|
-
setTimeout(tick, interval);
|
|
156
|
-
} else {
|
|
157
|
-
elem.style.display = 'none';
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
|
-
tick();
|
|
161
|
-
},
|
|
162
|
-
fireClick = function(node) {
|
|
163
|
-
// Taken from http://www.nonobtrusive.com/2011/11/29/programatically-fire-crossbrowser-click-event-with-javascript/
|
|
164
|
-
// Then fixed for today's Chrome browser.
|
|
165
|
-
if (typeof MouseEvent === 'function') {
|
|
166
|
-
// Up-to-date approach
|
|
167
|
-
var mevt = new MouseEvent('click', {
|
|
168
|
-
view: window,
|
|
169
|
-
bubbles: false,
|
|
170
|
-
cancelable: true
|
|
171
|
-
});
|
|
172
|
-
node.dispatchEvent(mevt);
|
|
173
|
-
} else if ( document.createEvent ) {
|
|
174
|
-
// Fallback
|
|
175
|
-
var evt = document.createEvent('MouseEvents');
|
|
176
|
-
evt.initEvent('click', false, false);
|
|
177
|
-
node.dispatchEvent(evt);
|
|
178
|
-
} else if (document.createEventObject) {
|
|
179
|
-
node.fireEvent('onclick') ;
|
|
180
|
-
} else if (typeof node.onclick === 'function' ) {
|
|
181
|
-
node.onclick();
|
|
182
|
-
}
|
|
183
|
-
},
|
|
184
|
-
stopEventPropagation = function(e) {
|
|
185
|
-
// In particular, make sure the space bar doesn't scroll the main window.
|
|
186
|
-
if (typeof e.stopPropagation === 'function') {
|
|
187
|
-
e.stopPropagation();
|
|
188
|
-
e.preventDefault();
|
|
189
|
-
} else if (window.event && window.event.hasOwnProperty('cancelBubble')) {
|
|
190
|
-
window.event.cancelBubble = true;
|
|
191
|
-
}
|
|
192
|
-
};
|
|
193
|
-
|
|
194
|
-
// Remember state in cases where opening and handling a modal will fiddle with it.
|
|
195
|
-
var previousActiveElement,
|
|
196
|
-
previousWindowKeyDown,
|
|
197
|
-
lastFocusedButton;
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
/*
|
|
201
|
-
* Add modal + overlay to DOM
|
|
202
|
-
*/
|
|
203
|
-
|
|
204
|
-
var sweetAlertInitialize = function() {
|
|
205
|
-
var sweetHTML = '<div class="sweet-overlay" tabIndex="-1"></div><div class="sweet-alert"><div class="sa-icon sa-error"><span class="sa-x-mark"><span class="sa-line sa-left"></span><span class="sa-line sa-right"></span></span></div><div class="sa-icon sa-warning"> <span class="sa-body"></span> <span class="sa-dot"></span> </div> <div class="sa-icon sa-info"></div> <div class="sa-icon sa-success"> <span class="sa-line sa-tip"></span> <span class="sa-line sa-long"></span> <div class="sa-placeholder"></div> <div class="sa-fix"></div> </div> <div class="sa-icon sa-custom"></div> <h2>Title</h2><p>Text</p><fieldset><input type="text" tabIndex="3" /><div class="sa-input-error"></div></fieldset> <div class="sa-error-container"><div class="icon">!</div> <p>Not valid!</p></div> <button class="cancel" tabIndex="2">Cancel</button><button class="confirm" tabIndex="1">OK</button></div>',
|
|
206
|
-
sweetWrap = document.createElement('div');
|
|
207
|
-
|
|
208
|
-
sweetWrap.innerHTML = sweetHTML;
|
|
209
|
-
|
|
210
|
-
// Append elements to body
|
|
211
|
-
while (sweetWrap.firstChild) {
|
|
212
|
-
document.body.appendChild(sweetWrap.firstChild);
|
|
213
|
-
}
|
|
214
|
-
};
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
/*
|
|
219
|
-
* Global sweetAlert function
|
|
220
|
-
*/
|
|
221
|
-
var sweetAlert, swal;
|
|
222
|
-
|
|
223
|
-
sweetAlert = swal = function() {
|
|
224
|
-
var customizations = arguments[0];
|
|
225
|
-
|
|
226
|
-
addClass(document.body, 'stop-scrolling');
|
|
227
|
-
|
|
228
|
-
resetInput();
|
|
229
|
-
|
|
230
|
-
/*
|
|
231
|
-
* Use argument if defined or default value from params object otherwise.
|
|
232
|
-
* Supports the case where a default value is boolean true and should be
|
|
233
|
-
* overridden by a corresponding explicit argument which is boolean false.
|
|
234
|
-
*/
|
|
235
|
-
function argumentOrDefault(key) {
|
|
236
|
-
var args = customizations;
|
|
237
|
-
|
|
238
|
-
if (typeof args[key] !== 'undefined') {
|
|
239
|
-
return args[key];
|
|
240
|
-
} else {
|
|
241
|
-
return defaultParams[key];
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
if (arguments[0] === undefined) {
|
|
246
|
-
logStr('SweetAlert expects at least 1 attribute!');
|
|
247
|
-
return false;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
var params = extend({}, defaultParams);
|
|
251
|
-
|
|
252
|
-
switch (typeof arguments[0]) {
|
|
253
|
-
|
|
254
|
-
// Ex: swal("Hello", "Just testing", "info");
|
|
255
|
-
case 'string':
|
|
256
|
-
params.title = arguments[0];
|
|
257
|
-
params.text = arguments[1] || '';
|
|
258
|
-
params.type = arguments[2] || '';
|
|
259
|
-
|
|
260
|
-
break;
|
|
261
|
-
|
|
262
|
-
// Ex: swal({title:"Hello", text: "Just testing", type: "info"});
|
|
263
|
-
case 'object':
|
|
264
|
-
if (arguments[0].title === undefined) {
|
|
265
|
-
logStr('Missing "title" argument!');
|
|
266
|
-
return false;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
params.title = arguments[0].title;
|
|
270
|
-
|
|
271
|
-
var availableCustoms = [
|
|
272
|
-
'text',
|
|
273
|
-
'type',
|
|
274
|
-
'customClass',
|
|
275
|
-
'allowOutsideClick',
|
|
276
|
-
'showConfirmButton',
|
|
277
|
-
'showCancelButton',
|
|
278
|
-
'closeOnConfirm',
|
|
279
|
-
'closeOnCancel',
|
|
280
|
-
'timer',
|
|
281
|
-
'confirmButtonColor',
|
|
282
|
-
'cancelButtonText',
|
|
283
|
-
'imageUrl',
|
|
284
|
-
'imageSize',
|
|
285
|
-
'html',
|
|
286
|
-
'animation',
|
|
287
|
-
'allowEscapeKey',
|
|
288
|
-
'inputType'];
|
|
289
|
-
|
|
290
|
-
// It would be nice to just use .forEach here, but IE8... :(
|
|
291
|
-
var numCustoms = availableCustoms.length;
|
|
292
|
-
for (var customIndex = 0; customIndex < numCustoms; customIndex++) {
|
|
293
|
-
var customName = availableCustoms[customIndex];
|
|
294
|
-
params[customName] = argumentOrDefault(customName);
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
// Show "Confirm" instead of "OK" if cancel button is visible
|
|
298
|
-
params.confirmButtonText = (params.showCancelButton) ? 'Confirm' : defaultParams.confirmButtonText;
|
|
299
|
-
params.confirmButtonText = argumentOrDefault('confirmButtonText');
|
|
300
|
-
|
|
301
|
-
// Function to call when clicking on cancel/OK
|
|
302
|
-
params.doneFunction = arguments[1] || null;
|
|
303
|
-
|
|
304
|
-
break;
|
|
305
|
-
|
|
306
|
-
default:
|
|
307
|
-
logStr('Unexpected type of argument! Expected "string" or "object", got ' + typeof arguments[0]);
|
|
308
|
-
return false;
|
|
309
|
-
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
setParameters(params);
|
|
313
|
-
fixVerticalPosition();
|
|
314
|
-
openModal();
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
// Modal interactions
|
|
318
|
-
var modal = getModal();
|
|
319
|
-
|
|
320
|
-
// Mouse interactions
|
|
321
|
-
var onButtonEvent = function(event) {
|
|
322
|
-
var e = event || window.event;
|
|
323
|
-
var target = e.target || e.srcElement,
|
|
324
|
-
targetedConfirm = (target.className.indexOf("confirm") !== -1),
|
|
325
|
-
targetedOverlay = (target.className.indexOf("sweet-overlay") !== -1),
|
|
326
|
-
modalIsVisible = hasClass(modal, 'visible'),
|
|
327
|
-
doneFunctionExists = (params.doneFunction && modal.getAttribute('data-has-done-function') === 'true');
|
|
328
|
-
|
|
329
|
-
switch (e.type) {
|
|
330
|
-
case ("mouseover"):
|
|
331
|
-
if (targetedConfirm && params.confirmButtonColor) {
|
|
332
|
-
target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.04);
|
|
333
|
-
}
|
|
334
|
-
break;
|
|
335
|
-
case ("mouseout"):
|
|
336
|
-
if (targetedConfirm && params.confirmButtonColor) {
|
|
337
|
-
target.style.backgroundColor = params.confirmButtonColor;
|
|
338
|
-
}
|
|
339
|
-
break;
|
|
340
|
-
case ("mousedown"):
|
|
341
|
-
if (targetedConfirm && params.confirmButtonColor) {
|
|
342
|
-
target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.14);
|
|
343
|
-
}
|
|
344
|
-
break;
|
|
345
|
-
case ("mouseup"):
|
|
346
|
-
if (targetedConfirm && params.confirmButtonColor) {
|
|
347
|
-
target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.04);
|
|
348
|
-
}
|
|
349
|
-
break;
|
|
350
|
-
case ("focus"):
|
|
351
|
-
var $confirmButton = modal.querySelector('button.confirm'),
|
|
352
|
-
$cancelButton = modal.querySelector('button.cancel');
|
|
353
|
-
|
|
354
|
-
if (targetedConfirm) {
|
|
355
|
-
$cancelButton.style.boxShadow = 'none';
|
|
356
|
-
} else {
|
|
357
|
-
$confirmButton.style.boxShadow = 'none';
|
|
358
|
-
}
|
|
359
|
-
break;
|
|
360
|
-
case ("click"):
|
|
361
|
-
if (targetedConfirm && doneFunctionExists && modalIsVisible) { // Clicked "confirm"
|
|
362
|
-
handleConfirm();
|
|
363
|
-
} else if ((doneFunctionExists && modalIsVisible) || targetedOverlay) { // Clicked "cancel"
|
|
364
|
-
handleCancel();
|
|
365
|
-
} else if (isDescendant(modal, target) && target.tagName === "BUTTON") {
|
|
366
|
-
sweetAlert.close();
|
|
367
|
-
}
|
|
368
|
-
break;
|
|
369
|
-
}
|
|
370
|
-
};
|
|
371
|
-
|
|
372
|
-
function handleConfirm() {
|
|
373
|
-
var callbackValue = true;
|
|
374
|
-
|
|
375
|
-
if (hasClass(modal, 'show-input')) {
|
|
376
|
-
callbackValue = modal.querySelector('input').value;
|
|
377
|
-
|
|
378
|
-
if (!callbackValue) {
|
|
379
|
-
callbackValue = "";
|
|
380
|
-
}
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
params.doneFunction(callbackValue);
|
|
384
|
-
|
|
385
|
-
if (params.closeOnConfirm) {
|
|
386
|
-
sweetAlert.close();
|
|
387
|
-
}
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
function handleCancel() {
|
|
391
|
-
// Check if callback function expects a parameter (to track cancel actions)
|
|
392
|
-
var functionAsStr = String(params.doneFunction).replace(/\s/g, '');
|
|
393
|
-
var functionHandlesCancel = functionAsStr.substring(0, 9) === "function(" && functionAsStr.substring(9, 10) !== ")";
|
|
394
|
-
|
|
395
|
-
if (functionHandlesCancel) {
|
|
396
|
-
params.doneFunction(false);
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
if (params.closeOnCancel) {
|
|
400
|
-
sweetAlert.close();
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
var $buttons = modal.querySelectorAll('button');
|
|
405
|
-
for (var i = 0; i < $buttons.length; i++) {
|
|
406
|
-
$buttons[i].onclick = onButtonEvent;
|
|
407
|
-
$buttons[i].onmouseover = onButtonEvent;
|
|
408
|
-
$buttons[i].onmouseout = onButtonEvent;
|
|
409
|
-
$buttons[i].onmousedown = onButtonEvent;
|
|
410
|
-
$buttons[i].onmouseup = onButtonEvent;
|
|
411
|
-
$buttons[i].onfocus = onButtonEvent;
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
getOverlay().onclick = onButtonEvent;
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
// Keyboard interactions
|
|
418
|
-
var $okButton = modal.querySelector('button.confirm'),
|
|
419
|
-
$cancelButton = modal.querySelector('button.cancel'),
|
|
420
|
-
$modalButtons = modal.querySelectorAll('button[tabindex]');
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
function handleKeyDown(event) {
|
|
424
|
-
var e = event || window.event;
|
|
425
|
-
var keyCode = e.keyCode || e.which;
|
|
426
|
-
|
|
427
|
-
if ([9,13,32,27].indexOf(keyCode) === -1) {
|
|
428
|
-
// Don't do work on keys we don't care about.
|
|
429
|
-
return;
|
|
430
|
-
}
|
|
431
|
-
|
|
432
|
-
var $targetElement = e.target || e.srcElement;
|
|
433
|
-
|
|
434
|
-
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
|
|
435
|
-
for (var i = 0; i < $modalButtons.length; i++) {
|
|
436
|
-
if ($targetElement === $modalButtons[i]) {
|
|
437
|
-
btnIndex = i;
|
|
438
|
-
break;
|
|
439
|
-
}
|
|
440
|
-
}
|
|
441
|
-
|
|
442
|
-
if (keyCode === 9) {
|
|
443
|
-
// TAB
|
|
444
|
-
if (btnIndex === -1) {
|
|
445
|
-
// No button focused. Jump to the confirm button.
|
|
446
|
-
$targetElement = $okButton;
|
|
447
|
-
} else {
|
|
448
|
-
// Cycle to the next button
|
|
449
|
-
if (btnIndex === $modalButtons.length - 1) {
|
|
450
|
-
$targetElement = $modalButtons[0];
|
|
451
|
-
} else {
|
|
452
|
-
$targetElement = $modalButtons[btnIndex + 1];
|
|
453
|
-
}
|
|
454
|
-
}
|
|
455
|
-
|
|
456
|
-
stopEventPropagation(e);
|
|
457
|
-
$targetElement.focus();
|
|
458
|
-
|
|
459
|
-
if (params.confirmButtonColor) {
|
|
460
|
-
setFocusStyle($targetElement, params.confirmButtonColor);
|
|
461
|
-
}
|
|
462
|
-
|
|
463
|
-
} else {
|
|
464
|
-
if (keyCode === 13) {
|
|
465
|
-
if ($targetElement.tagName === "INPUT") {
|
|
466
|
-
$targetElement = $okButton;
|
|
467
|
-
$okButton.focus();
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
if (btnIndex === -1) {
|
|
471
|
-
// ENTER/SPACE clicked outside of a button.
|
|
472
|
-
$targetElement = $okButton;
|
|
473
|
-
} else {
|
|
474
|
-
// Do nothing - let the browser handle it.
|
|
475
|
-
$targetElement = undefined;
|
|
476
|
-
}
|
|
477
|
-
} else if (keyCode === 27 && params.allowEscapeKey === true) {
|
|
478
|
-
$targetElement = $cancelButton;
|
|
479
|
-
fireClick($targetElement, e);
|
|
480
|
-
} else {
|
|
481
|
-
// Fallback - let the browser handle it.
|
|
482
|
-
$targetElement = undefined;
|
|
483
|
-
}
|
|
484
|
-
}
|
|
485
|
-
}
|
|
486
|
-
|
|
487
|
-
previousWindowKeyDown = window.onkeydown;
|
|
488
|
-
|
|
489
|
-
window.onkeydown = handleKeyDown;
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
/*
|
|
493
|
-
* Makes stuff unselectable. Is it needed? -->
|
|
494
|
-
*/
|
|
495
|
-
|
|
496
|
-
// function handleOnBlur(event) {
|
|
497
|
-
// var e = event || window.event;
|
|
498
|
-
// var $targetElement = e.target || e.srcElement,
|
|
499
|
-
// $focusElement = e.relatedTarget,
|
|
500
|
-
// modalIsVisible = hasClass(modal, 'visible');
|
|
501
|
-
|
|
502
|
-
// if (modalIsVisible) {
|
|
503
|
-
// var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
|
|
504
|
-
|
|
505
|
-
// if ($focusElement !== null) {
|
|
506
|
-
// // If we picked something in the DOM to focus to, let's see if it was a button.
|
|
507
|
-
// for (var i = 0; i < $modalButtons.length; i++) {
|
|
508
|
-
// if ($focusElement === $modalButtons[i]) {
|
|
509
|
-
// btnIndex = i;
|
|
510
|
-
// break;
|
|
511
|
-
// }
|
|
512
|
-
// }
|
|
513
|
-
|
|
514
|
-
// if (btnIndex === -1) {
|
|
515
|
-
// // Something in the dom, but not a visible button. Focus back on the button.
|
|
516
|
-
// $targetElement.focus();
|
|
517
|
-
// }
|
|
518
|
-
// } else {
|
|
519
|
-
// // Exiting the DOM (e.g. clicked in the URL bar);
|
|
520
|
-
// lastFocusedButton = $targetElement;
|
|
521
|
-
// }
|
|
522
|
-
// }
|
|
523
|
-
// }
|
|
524
|
-
|
|
525
|
-
// $okButton.onblur = handleOnBlur;
|
|
526
|
-
// $cancelButton.onblur = handleOnBlur;
|
|
527
|
-
|
|
528
|
-
window.onfocus = function() {
|
|
529
|
-
// When the user has focused away and focused back from the whole window.
|
|
530
|
-
window.setTimeout(function() {
|
|
531
|
-
// Put in a timeout to jump out of the event sequence. Calling focus() in the event
|
|
532
|
-
// sequence confuses things.
|
|
533
|
-
if (lastFocusedButton !== undefined) {
|
|
534
|
-
lastFocusedButton.focus();
|
|
535
|
-
lastFocusedButton = undefined;
|
|
536
|
-
}
|
|
537
|
-
}, 0);
|
|
538
|
-
};
|
|
539
|
-
};
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
/*
|
|
543
|
-
* Set default params for each popup
|
|
544
|
-
* @param {Object} userParams
|
|
545
|
-
*/
|
|
546
|
-
sweetAlert.setDefaults = swal.setDefaults = function(userParams) {
|
|
547
|
-
if (!userParams) {
|
|
548
|
-
throw new Error('userParams is required');
|
|
549
|
-
}
|
|
550
|
-
if (typeof userParams !== 'object') {
|
|
551
|
-
throw new Error('userParams has to be a object');
|
|
552
|
-
}
|
|
553
|
-
|
|
554
|
-
extend(defaultParams, userParams);
|
|
555
|
-
};
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
/*
|
|
559
|
-
* Set type, text and actions on modal
|
|
560
|
-
*/
|
|
561
|
-
|
|
562
|
-
function setParameters(params) {
|
|
563
|
-
var modal = getModal();
|
|
564
|
-
|
|
565
|
-
var $title = modal.querySelector('h2'),
|
|
566
|
-
$text = modal.querySelector('p'),
|
|
567
|
-
$cancelBtn = modal.querySelector('button.cancel'),
|
|
568
|
-
$confirmBtn = modal.querySelector('button.confirm');
|
|
569
|
-
|
|
570
|
-
// Title
|
|
571
|
-
$title.innerHTML = (params.html) ? params.title : escapeHtml(params.title).split("\n").join("<br>");
|
|
572
|
-
|
|
573
|
-
// Text
|
|
574
|
-
$text.innerHTML = (params.html) ? params.text : escapeHtml(params.text || '').split("\n").join("<br>");
|
|
575
|
-
|
|
576
|
-
if (params.text) {
|
|
577
|
-
show($text);
|
|
578
|
-
}
|
|
579
|
-
|
|
580
|
-
//Custom Class
|
|
581
|
-
if (params.customClass) {
|
|
582
|
-
addClass(modal, params.customClass);
|
|
583
|
-
modal.setAttribute('data-custom-class', params.customClass);
|
|
584
|
-
} else {
|
|
585
|
-
// Find previously set classes and remove them
|
|
586
|
-
var customClass = modal.getAttribute('data-custom-class');
|
|
587
|
-
removeClass(modal, customClass);
|
|
588
|
-
modal.setAttribute('data-custom-class', "");
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
// Icon
|
|
592
|
-
hide(modal.querySelectorAll('.sa-icon'));
|
|
593
|
-
if (params.type && !isIE8()) {
|
|
594
|
-
var validType = false;
|
|
595
|
-
for (var i = 0; i < alertTypes.length; i++) {
|
|
596
|
-
if (params.type === alertTypes[i]) {
|
|
597
|
-
validType = true;
|
|
598
|
-
break;
|
|
599
|
-
}
|
|
600
|
-
}
|
|
601
|
-
if (!validType) {
|
|
602
|
-
logStr('Unknown alert type: ' + params.type);
|
|
603
|
-
return false;
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
var typesWithIcons = ['success', 'error', 'warning', 'info'];
|
|
607
|
-
var $icon;
|
|
608
|
-
|
|
609
|
-
if (typesWithIcons.indexOf(params.type) !== -1) {
|
|
610
|
-
$icon = modal.querySelector('.sa-icon.' + 'sa-' + params.type);
|
|
611
|
-
show($icon);
|
|
612
|
-
}
|
|
613
|
-
|
|
614
|
-
var $input = getInput();
|
|
615
|
-
|
|
616
|
-
// Animate icon
|
|
617
|
-
switch (params.type) {
|
|
618
|
-
|
|
619
|
-
case "success":
|
|
620
|
-
addClass($icon, 'animate');
|
|
621
|
-
addClass($icon.querySelector('.sa-tip'), 'animateSuccessTip');
|
|
622
|
-
addClass($icon.querySelector('.sa-long'), 'animateSuccessLong');
|
|
623
|
-
break;
|
|
624
|
-
|
|
625
|
-
case "error":
|
|
626
|
-
addClass($icon, 'animateErrorIcon');
|
|
627
|
-
addClass($icon.querySelector('.sa-x-mark'), 'animateXMark');
|
|
628
|
-
break;
|
|
629
|
-
|
|
630
|
-
case "warning":
|
|
631
|
-
addClass($icon, 'pulseWarning');
|
|
632
|
-
addClass($icon.querySelector('.sa-body'), 'pulseWarningIns');
|
|
633
|
-
addClass($icon.querySelector('.sa-dot'), 'pulseWarningIns');
|
|
634
|
-
break;
|
|
635
|
-
|
|
636
|
-
case "input":
|
|
637
|
-
case "prompt":
|
|
638
|
-
$input.setAttribute('type', params.inputType);
|
|
639
|
-
addClass(modal, 'show-input');
|
|
640
|
-
setTimeout(function() {
|
|
641
|
-
$input.focus();
|
|
642
|
-
$input.addEventListener('keyup', swal.resetInputError);
|
|
643
|
-
}, 400);
|
|
644
|
-
break;
|
|
645
|
-
}
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
// Custom image
|
|
649
|
-
if (params.imageUrl) {
|
|
650
|
-
var $customIcon = modal.querySelector('.sa-icon.sa-custom');
|
|
651
|
-
|
|
652
|
-
$customIcon.style.backgroundImage = 'url(' + params.imageUrl + ')';
|
|
653
|
-
show($customIcon);
|
|
654
|
-
|
|
655
|
-
var _imgWidth = 80,
|
|
656
|
-
_imgHeight = 80;
|
|
657
|
-
|
|
658
|
-
if (params.imageSize) {
|
|
659
|
-
var dimensions = params.imageSize.toString().split('x');
|
|
660
|
-
var imgWidth = dimensions[0];
|
|
661
|
-
var imgHeight = dimensions[1];
|
|
662
|
-
|
|
663
|
-
if (!imgWidth || !imgHeight) {
|
|
664
|
-
logStr("Parameter imageSize expects value with format WIDTHxHEIGHT, got " + params.imageSize);
|
|
665
|
-
} else {
|
|
666
|
-
_imgWidth = imgWidth;
|
|
667
|
-
_imgHeight = imgHeight;
|
|
668
|
-
}
|
|
669
|
-
}
|
|
670
|
-
$customIcon.setAttribute('style', $customIcon.getAttribute('style') + 'width:' + _imgWidth + 'px; height:' + _imgHeight + 'px');
|
|
671
|
-
}
|
|
672
|
-
|
|
673
|
-
// Show cancel button?
|
|
674
|
-
modal.setAttribute('data-has-cancel-button', params.showCancelButton);
|
|
675
|
-
if (params.showCancelButton) {
|
|
676
|
-
$cancelBtn.style.display = 'inline-block';
|
|
677
|
-
} else {
|
|
678
|
-
hide($cancelBtn);
|
|
679
|
-
}
|
|
680
|
-
|
|
681
|
-
// Show confirm button?
|
|
682
|
-
modal.setAttribute('data-has-confirm-button', params.showConfirmButton);
|
|
683
|
-
if (params.showConfirmButton) {
|
|
684
|
-
$confirmBtn.style.display = 'inline-block';
|
|
685
|
-
} else {
|
|
686
|
-
hide($confirmBtn);
|
|
687
|
-
}
|
|
688
|
-
|
|
689
|
-
// Edit text on cancel and confirm buttons
|
|
690
|
-
if (params.cancelButtonText) {
|
|
691
|
-
$cancelBtn.innerHTML = escapeHtml(params.cancelButtonText);
|
|
692
|
-
}
|
|
693
|
-
if (params.confirmButtonText) {
|
|
694
|
-
$confirmBtn.innerHTML = escapeHtml(params.confirmButtonText);
|
|
695
|
-
}
|
|
696
|
-
|
|
697
|
-
if (params.confirmButtonColor) {
|
|
698
|
-
// Set confirm button to selected background color
|
|
699
|
-
$confirmBtn.style.backgroundColor = params.confirmButtonColor;
|
|
700
|
-
|
|
701
|
-
// Set box-shadow to default focused button
|
|
702
|
-
setFocusStyle($confirmBtn, params.confirmButtonColor);
|
|
703
|
-
}
|
|
704
|
-
|
|
705
|
-
// Allow outside click?
|
|
706
|
-
modal.setAttribute('data-allow-ouside-click', params.allowOutsideClick);
|
|
707
|
-
|
|
708
|
-
// Done-function
|
|
709
|
-
var hasDoneFunction = (params.doneFunction) ? true : false;
|
|
710
|
-
modal.setAttribute('data-has-done-function', hasDoneFunction);
|
|
711
|
-
|
|
712
|
-
if (!params.animation) { // No animation
|
|
713
|
-
modal.setAttribute('data-animation', 'none');
|
|
714
|
-
} else if (typeof(params.animation) === "string") {
|
|
715
|
-
modal.setAttribute('data-animation', params.animation); // Custom animation
|
|
716
|
-
} else {
|
|
717
|
-
modal.setAttribute('data-animation', 'pop');
|
|
718
|
-
}
|
|
719
|
-
|
|
720
|
-
// Close timer
|
|
721
|
-
modal.setAttribute('data-timer', params.timer);
|
|
722
|
-
}
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
/*
|
|
726
|
-
* Set hover, active and focus-states for buttons (source: http://www.sitepoint.com/javascript-generate-lighter-darker-color)
|
|
727
|
-
*/
|
|
728
|
-
|
|
729
|
-
function colorLuminance(hex, lum) {
|
|
730
|
-
// Validate hex string
|
|
731
|
-
hex = String(hex).replace(/[^0-9a-f]/gi, '');
|
|
732
|
-
if (hex.length < 6) {
|
|
733
|
-
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
|
|
734
|
-
}
|
|
735
|
-
lum = lum || 0;
|
|
736
|
-
|
|
737
|
-
// Convert to decimal and change luminosity
|
|
738
|
-
var rgb = "#", c, i;
|
|
739
|
-
for (i = 0; i < 3; i++) {
|
|
740
|
-
c = parseInt(hex.substr(i*2,2), 16);
|
|
741
|
-
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
|
|
742
|
-
rgb += ("00"+c).substr(c.length);
|
|
743
|
-
}
|
|
744
|
-
|
|
745
|
-
return rgb;
|
|
746
|
-
}
|
|
747
|
-
|
|
748
|
-
function extend(a, b){
|
|
749
|
-
for (var key in b) {
|
|
750
|
-
if (b.hasOwnProperty(key)) {
|
|
751
|
-
a[key] = b[key];
|
|
752
|
-
}
|
|
753
|
-
}
|
|
754
|
-
|
|
755
|
-
return a;
|
|
756
|
-
}
|
|
757
|
-
|
|
758
|
-
function hexToRgb(hex) {
|
|
759
|
-
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
760
|
-
return result ? parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) : null;
|
|
761
|
-
}
|
|
762
|
-
|
|
763
|
-
// Add box-shadow style to button (depending on its chosen bg-color)
|
|
764
|
-
function setFocusStyle($button, bgColor) {
|
|
765
|
-
var rgbColor = hexToRgb(bgColor);
|
|
766
|
-
$button.style.boxShadow = '0 0 2px rgba(' + rgbColor +', 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)';
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
// Animation when opening modal
|
|
771
|
-
function openModal() {
|
|
772
|
-
var modal = getModal();
|
|
773
|
-
fadeIn(getOverlay(), 10);
|
|
774
|
-
show(modal);
|
|
775
|
-
addClass(modal, 'showSweetAlert');
|
|
776
|
-
removeClass(modal, 'hideSweetAlert');
|
|
777
|
-
|
|
778
|
-
previousActiveElement = document.activeElement;
|
|
779
|
-
var $okButton = modal.querySelector('button.confirm');
|
|
780
|
-
$okButton.focus();
|
|
781
|
-
|
|
782
|
-
setTimeout(function() {
|
|
783
|
-
addClass(modal, 'visible');
|
|
784
|
-
}, 500);
|
|
785
|
-
|
|
786
|
-
var timer = modal.getAttribute('data-timer');
|
|
787
|
-
|
|
788
|
-
if (timer !== "null" && timer !== "") {
|
|
789
|
-
modal.timeout = setTimeout(function() {
|
|
790
|
-
sweetAlert.close();
|
|
791
|
-
}, timer);
|
|
792
|
-
}
|
|
793
|
-
}
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
// Aninmation when closing modal
|
|
797
|
-
sweetAlert.close = swal.close = function() {
|
|
798
|
-
var modal = getModal();
|
|
799
|
-
|
|
800
|
-
fadeOut(getOverlay(), 5);
|
|
801
|
-
fadeOut(modal, 5);
|
|
802
|
-
removeClass(modal, 'showSweetAlert');
|
|
803
|
-
addClass(modal, 'hideSweetAlert');
|
|
804
|
-
removeClass(modal, 'visible');
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
// Reset icon animations
|
|
808
|
-
|
|
809
|
-
var $successIcon = modal.querySelector('.sa-icon.sa-success');
|
|
810
|
-
removeClass($successIcon, 'animate');
|
|
811
|
-
removeClass($successIcon.querySelector('.sa-tip'), 'animateSuccessTip');
|
|
812
|
-
removeClass($successIcon.querySelector('.sa-long'), 'animateSuccessLong');
|
|
813
|
-
|
|
814
|
-
var $errorIcon = modal.querySelector('.sa-icon.sa-error');
|
|
815
|
-
removeClass($errorIcon, 'animateErrorIcon');
|
|
816
|
-
removeClass($errorIcon.querySelector('.sa-x-mark'), 'animateXMark');
|
|
817
|
-
|
|
818
|
-
var $warningIcon = modal.querySelector('.sa-icon.sa-warning');
|
|
819
|
-
removeClass($warningIcon, 'pulseWarning');
|
|
820
|
-
removeClass($warningIcon.querySelector('.sa-body'), 'pulseWarningIns');
|
|
821
|
-
removeClass($warningIcon.querySelector('.sa-dot'), 'pulseWarningIns');
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
removeClass(document.body, 'stop-scrolling');
|
|
825
|
-
|
|
826
|
-
// Reset the page to its previous state
|
|
827
|
-
window.onkeydown = previousWindowKeyDown;
|
|
828
|
-
if (previousActiveElement) {
|
|
829
|
-
previousActiveElement.focus();
|
|
830
|
-
}
|
|
831
|
-
lastFocusedButton = undefined;
|
|
832
|
-
clearTimeout(modal.timeout);
|
|
833
|
-
};
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
/*
|
|
837
|
-
* Validation of the input field is done by user
|
|
838
|
-
* If something is wrong => call showInputError with errorMessage
|
|
839
|
-
*/
|
|
840
|
-
|
|
841
|
-
sweetAlert.showInputError = swal.showInputError = function(errorMessage) {
|
|
842
|
-
var modal = getModal();
|
|
843
|
-
|
|
844
|
-
var $errorIcon = modal.querySelector('.sa-input-error');
|
|
845
|
-
addClass($errorIcon, 'show');
|
|
846
|
-
|
|
847
|
-
var $errorContainer = modal.querySelector('.sa-error-container');
|
|
848
|
-
addClass($errorContainer, 'show');
|
|
849
|
-
|
|
850
|
-
$errorContainer.querySelector('p').innerHTML = errorMessage;
|
|
851
|
-
|
|
852
|
-
modal.querySelector('input').focus();
|
|
853
|
-
};
|
|
854
|
-
|
|
855
|
-
function resetInput() {
|
|
856
|
-
var $modal = getModal();
|
|
857
|
-
var $input = getInput();
|
|
858
|
-
|
|
859
|
-
removeClass($modal, 'show-input');
|
|
860
|
-
$input.value = "";
|
|
861
|
-
$input.setAttribute('type', defaultParams.inputType);
|
|
862
|
-
|
|
863
|
-
swal.resetInputError();
|
|
864
|
-
}
|
|
865
|
-
|
|
866
|
-
sweetAlert.resetInputError = swal.resetInputError = function(event) {
|
|
867
|
-
// If press enter => ignore
|
|
868
|
-
if (event && event.keyCode === 13) {
|
|
869
|
-
return false;
|
|
870
|
-
}
|
|
871
|
-
|
|
872
|
-
var $modal = getModal();
|
|
873
|
-
|
|
874
|
-
var $errorIcon = $modal.querySelector('.sa-input-error');
|
|
875
|
-
removeClass($errorIcon, 'show');
|
|
876
|
-
|
|
877
|
-
var $errorContainer = $modal.querySelector('.sa-error-container');
|
|
878
|
-
removeClass($errorContainer, 'show');
|
|
879
|
-
};
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
/*
|
|
884
|
-
* Set "margin-top"-property on modal based on its computed height
|
|
885
|
-
*/
|
|
886
|
-
|
|
887
|
-
function fixVerticalPosition() {
|
|
888
|
-
var modal = getModal();
|
|
889
|
-
|
|
890
|
-
modal.style.marginTop = getTopMargin(getModal());
|
|
891
|
-
}
|
|
892
|
-
|
|
893
|
-
// If browser is Internet Explorer 8
|
|
894
|
-
function isIE8() {
|
|
895
|
-
if (window.attachEvent && !window.addEventListener) {
|
|
896
|
-
return true;
|
|
897
|
-
} else {
|
|
898
|
-
return false;
|
|
899
|
-
}
|
|
900
|
-
}
|
|
901
|
-
|
|
902
|
-
// Error messages for developers
|
|
903
|
-
function logStr(string) {
|
|
904
|
-
if (window.console) { // IE...
|
|
905
|
-
window.console.log("SweetAlert: " + string);
|
|
906
|
-
}
|
|
907
|
-
}
|
|
908
|
-
|
|
909
|
-
if (typeof define === 'function' && define.amd) {
|
|
910
|
-
define(function() { return sweetAlert; });
|
|
911
|
-
} else if (typeof module !== 'undefined' && module.exports) {
|
|
912
|
-
module.exports = sweetAlert;
|
|
913
|
-
} else if (typeof window !== 'undefined') {
|
|
914
|
-
window.sweetAlert = window.swal = sweetAlert;
|
|
915
|
-
}
|
|
916
|
-
|
|
917
|
-
})(window, document);
|