wrgem 0.0.43 → 0.0.44
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/generators/wradmin/template/carrierwave.rb +15 -0
- data/lib/generators/wradmin/template/migrate/20140715192304_create_user.rb +5 -3
- data/lib/generators/wradmin/template/public/images/spritemap.png +0 -0
- data/lib/generators/wradmin/template/public/images/spritemap@2x.png +0 -0
- data/lib/generators/wradmin/template/views/layouts/admin.html.slim +1 -1
- data/lib/generators/wradmin/wradmin_generator.rb +3 -0
- data/lib/generators/wrstart/template/index.html.slim +1 -1
- data/lib/generators/wrstart/template/javascripts/requirements.js.coffee +5 -0
- data/lib/generators/wrstart/template/shared/_head.slim +1 -1
- data/lib/generators/wrstart/template/stylesheets/_requirements.sass +6 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/.bower.json +32 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/.editorconfig +11 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/.gitignore +5 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/LICENSE +22 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/README.md +94 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/bower.json +18 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/example/example.css +322 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/example/example.scss +412 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/example/images/logo_big.png +0 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/example/images/logo_big@2x.png +0 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/example/images/logo_small.png +0 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/example/images/logo_small@2x.png +0 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/example/images/te-logo-small.svg +12 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/example/images/thumbs-up.jpg +0 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/example/images/vs_icon.png +0 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/example/images/vs_icon@2x.png +0 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/example/index.html +433 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/gulpfile.js +48 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/lib/ie9.css +23 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/lib/sweet-alert.css +1 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/lib/sweet-alert.html +37 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/lib/sweet-alert.js +818 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/lib/sweet-alert.min.js +1 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/lib/sweet-alert.scss +444 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/package.json +37 -0
- data/lib/generators/wrstart/template/vendor/assets/components/sweetalert/sweetalert.gif +0 -0
- data/lib/generators/wrstart/wrstart_generator.rb +2 -0
- data/lib/wrgem/version.rb +1 -1
- data/wrgem.gemspec +2 -2
- metadata +39 -12
@@ -0,0 +1,433 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
|
3
|
+
<html>
|
4
|
+
|
5
|
+
<head>
|
6
|
+
<meta charset="utf-8">
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
8
|
+
<title>SweetAlert</title>
|
9
|
+
|
10
|
+
<link rel="stylesheet" href="./example.css">
|
11
|
+
|
12
|
+
<!-- This is what you need -->
|
13
|
+
<script src="../lib/sweet-alert.min.js"></script>
|
14
|
+
<link rel="stylesheet" href="../lib/sweet-alert.css">
|
15
|
+
<!--.......................-->
|
16
|
+
|
17
|
+
</head>
|
18
|
+
|
19
|
+
<body>
|
20
|
+
|
21
|
+
<h1>Sweet Alert</h1>
|
22
|
+
<h2>A beautiful replacement for Javascript's "Alert"</h2>
|
23
|
+
<button class="download">Download</button>
|
24
|
+
|
25
|
+
<!-- What does it do? -->
|
26
|
+
<h3>So... What does it do?</h3>
|
27
|
+
<p>Here’s a comparison of a standard error message. The first one uses the built-in <strong>alert</strong>-function, while the second is using <strong>sweetAlert</strong>.</p>
|
28
|
+
|
29
|
+
<div class="showcase normal">
|
30
|
+
<h4>Normal alert</h4>
|
31
|
+
<button>Show error message</button>
|
32
|
+
|
33
|
+
<h5>Code:</h5>
|
34
|
+
<pre><span class="func">alert</span>(<span class="str">"Oops... Something went wrong!"</span>);
|
35
|
+
|
36
|
+
</pre>
|
37
|
+
|
38
|
+
<div class="vs-icon"></div>
|
39
|
+
</div>
|
40
|
+
|
41
|
+
<div class="showcase sweet">
|
42
|
+
<h4>Sweet Alert</h4>
|
43
|
+
<button>Show error message</button>
|
44
|
+
|
45
|
+
<h5>Code:</h5>
|
46
|
+
<pre>sweetAlert(<span class="str">"Oops..."</span>, <span class="str">"Something went wrong!"</span>, <span class="str">"error"</span>);</pre>
|
47
|
+
</div>
|
48
|
+
|
49
|
+
<p>Pretty cool huh? SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!</p>
|
50
|
+
|
51
|
+
|
52
|
+
<!-- Examples -->
|
53
|
+
<h3>More examples</h3>
|
54
|
+
|
55
|
+
<p class="center">In these examples, we're using the shorthand function <strong>swal</strong> to call sweetAlert.</p>
|
56
|
+
|
57
|
+
<ul class="examples">
|
58
|
+
|
59
|
+
<li class="message">
|
60
|
+
<div class="ui">
|
61
|
+
<p>A basic message</p>
|
62
|
+
<button>Try me!</button>
|
63
|
+
</div>
|
64
|
+
<pre>swal(<span class="str">"Here's a message!"</span>)</pre>
|
65
|
+
</li>
|
66
|
+
|
67
|
+
<li class="title-text">
|
68
|
+
<div class="ui">
|
69
|
+
<p>A title with a text under</p>
|
70
|
+
<button>Try me!</button>
|
71
|
+
</div>
|
72
|
+
<pre>swal(<span class="str">"Here's a message!"</span>, <span class="str">"It's pretty, isn't it?"</span>)</pre>
|
73
|
+
</li>
|
74
|
+
|
75
|
+
<li class="success">
|
76
|
+
<div class="ui">
|
77
|
+
<p>A success message!</p>
|
78
|
+
<button>Try me!</button>
|
79
|
+
</div>
|
80
|
+
<pre>swal(<span class="str">"Good job!"</span>, <span class="str">"You clicked the button!"</span>, <span class="str">"success"</span>)</pre>
|
81
|
+
</li>
|
82
|
+
|
83
|
+
<li class="timer">
|
84
|
+
<div class="ui">
|
85
|
+
<p>A message with auto close timer</p>
|
86
|
+
<button>Try me!</button>
|
87
|
+
</div>
|
88
|
+
<pre>swal({
|
89
|
+
title: <span class="str">"Auto close alert!"</span>,
|
90
|
+
text: <span class="str">"I will close in 2 seconds."</span>,
|
91
|
+
timer: <span class="str">2000</span>
|
92
|
+
});</pre>
|
93
|
+
</li>
|
94
|
+
|
95
|
+
<li class="warning confirm">
|
96
|
+
<div class="ui">
|
97
|
+
<p>A warning message, with a function attached to the "Confirm"-button...</p>
|
98
|
+
<button>Try me!</button>
|
99
|
+
</div>
|
100
|
+
<pre>swal({
|
101
|
+
title: <span class="str">"Are you sure?"</span>,
|
102
|
+
text: <span class="str">"You will not be able to recover this imaginary file!"</span>,
|
103
|
+
type: <span class="str">"warning"</span>,
|
104
|
+
showCancelButton: <span class="val">true</span>,
|
105
|
+
confirmButtonColor: <span class="str">"#DD6B55"</span>,
|
106
|
+
confirmButtonText: <span class="str">"Yes, delete it!"</span>,
|
107
|
+
closeOnConfirm: <span class="val">false</span>
|
108
|
+
},
|
109
|
+
<span class="func"><i>function</i></span>(){
|
110
|
+
<span class="func">swal</span>(<span class="str">"Deleted!"</span>, <span class="str">"Your imaginary file has been deleted."</span>, <span class="str">"success"</span>);
|
111
|
+
});</pre>
|
112
|
+
</li>
|
113
|
+
|
114
|
+
<li class="warning cancel">
|
115
|
+
<div class="ui">
|
116
|
+
<p>... and by passing a parameter, you can execute something else for "Cancel".</p>
|
117
|
+
<button>Try me!</button>
|
118
|
+
</div>
|
119
|
+
<pre>swal({
|
120
|
+
title: <span class="str">"Are you sure?"</span>,
|
121
|
+
text: <span class="str">"You will not be able to recover this imaginary file!"</span>,
|
122
|
+
type: <span class="str">"warning"</span>,
|
123
|
+
showCancelButton: <span class="val">true</span>,
|
124
|
+
confirmButtonColor: <span class="str">"#DD6B55"</span>,
|
125
|
+
confirmButtonText: <span class="str">"Yes, delete it!"</span>,
|
126
|
+
cancelButtonText: <span class="str">"No, cancel plx!"</span>,
|
127
|
+
closeOnConfirm: <span class="val">false</span>,
|
128
|
+
closeOnCancel: <span class="val">false</span>
|
129
|
+
},
|
130
|
+
<span class="func"><i>function</i></span>(isConfirm){
|
131
|
+
<span class="tag">if</span> (isConfirm) {
|
132
|
+
<span class="func">swal</span>(<span class="str">"Deleted!"</span>, <span class="str">"Your imaginary file has been deleted."</span>, <span class="str">"success"</span>);
|
133
|
+
} <span class="tag">else</span> {
|
134
|
+
<span class="func">swal</span>(<span class="str">"Cancelled"</span>, <span class="str">"Your imaginary file is safe :)"</span>, <span class="str">"error"</span>);
|
135
|
+
}
|
136
|
+
});</pre>
|
137
|
+
</li>
|
138
|
+
|
139
|
+
<li class="custom-icon">
|
140
|
+
<div class="ui">
|
141
|
+
<p>A message with a custom icon</p>
|
142
|
+
<button>Try me!</button>
|
143
|
+
</div>
|
144
|
+
<pre>swal({
|
145
|
+
title: <span class="str">"Sweet!"</span>,
|
146
|
+
text: <span class="str">"Here's a custom image."</span>,
|
147
|
+
imageUrl: <span class="str">"images/thumbs-up.jpg"</span>
|
148
|
+
});</pre>
|
149
|
+
</li>
|
150
|
+
|
151
|
+
<li class="message-html">
|
152
|
+
<div class="ui">
|
153
|
+
<p>An HTML message</p>
|
154
|
+
<button>Try me!</button>
|
155
|
+
</div>
|
156
|
+
<pre>swal({
|
157
|
+
title: <span class="str">"HTML <small>Title</small>!"</span>,
|
158
|
+
text: <span class="str">"A custom <span style="color:#F8BB86">html<span> message."</span>,
|
159
|
+
html: <span class="str">true</span>
|
160
|
+
});</pre>
|
161
|
+
</li>
|
162
|
+
|
163
|
+
</ul>
|
164
|
+
|
165
|
+
|
166
|
+
<!-- Download & Install -->
|
167
|
+
<h3 id="download-section">Download & install</h3>
|
168
|
+
|
169
|
+
<div class="center-container">
|
170
|
+
<p class="center"><b>Method 1:</b> Install through bower:</p>
|
171
|
+
<pre class="center">$ bower install sweetalert</pre>
|
172
|
+
</div>
|
173
|
+
|
174
|
+
<p class="center"><b>Method 2:</b> Download the sweetAlert <strong>CSS</strong> and <strong>JavaScript</strong> files.</p>
|
175
|
+
|
176
|
+
<a class="button" href="https://github.com/t4t5/sweetalert/archive/master.zip" download>Download files</a>
|
177
|
+
|
178
|
+
<ol>
|
179
|
+
<li>
|
180
|
+
<p>Initialize the plugin by referencing the necessary files:</p>
|
181
|
+
<pre><<span class="tag">script</span> <span class="attr">src</span>=<span class="str">"lib/sweet-alert.min.js"</span>></<span class="tag">script</span>>
|
182
|
+
<<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"lib/sweet-alert.css"</span>></pre>
|
183
|
+
</li>
|
184
|
+
|
185
|
+
<li>
|
186
|
+
<p>Call the sweetAlert-function after the page has loaded</p>
|
187
|
+
<pre>swal({
|
188
|
+
title: <span class="str">"Error!"</span>,
|
189
|
+
text: <span class="str">"Here's my error message!"</span>,
|
190
|
+
type: <span class="str">"error"</span>,
|
191
|
+
confirmButtonText: <span class="str">"Cool"</span>
|
192
|
+
});
|
193
|
+
</pre>
|
194
|
+
</li>
|
195
|
+
</ol>
|
196
|
+
|
197
|
+
|
198
|
+
|
199
|
+
<!-- Configuration -->
|
200
|
+
<h3>Configuration</h3>
|
201
|
+
|
202
|
+
<p class="center">Here are the keys that you can use if you pass an object into sweetAlert:</p>
|
203
|
+
|
204
|
+
<table>
|
205
|
+
<tr class="titles">
|
206
|
+
<th>
|
207
|
+
<div class="border-left"></div>
|
208
|
+
Argument
|
209
|
+
</th>
|
210
|
+
<th>Default value</th>
|
211
|
+
<th>
|
212
|
+
<div class="border-right"></div>
|
213
|
+
Description
|
214
|
+
</th>
|
215
|
+
</tr>
|
216
|
+
<tr>
|
217
|
+
<td><b>title</b></td>
|
218
|
+
<td><i>null (required)</i></td>
|
219
|
+
<td>The title of the modal. It can either be added to the object under the key "title" or passed as the first parameter of the function.</td>
|
220
|
+
</tr>
|
221
|
+
<tr>
|
222
|
+
<td><b>text</b></td>
|
223
|
+
<td><i>null</i></td>
|
224
|
+
<td>A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function.</td>
|
225
|
+
</tr>
|
226
|
+
<tr>
|
227
|
+
<td><b>type</b></td>
|
228
|
+
<td><i>null</i></td>
|
229
|
+
<td>The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "<strong>warning</strong>", "<strong>error</strong>", "<strong>success</strong>" and "<strong>info"</strong>. It can either be put in the array under the key "type" or passed as the third parameter of the function.</td>
|
230
|
+
</tr>
|
231
|
+
<tr>
|
232
|
+
<td><b>allowEscapeKey</b></td>
|
233
|
+
<td><i>true</i></td>
|
234
|
+
<td>If set to <strong>true</strong>, the user can dismiss the modal by pressing the Escape key.</td>
|
235
|
+
</tr>
|
236
|
+
<tr>
|
237
|
+
<td><b>customClass</b></td>
|
238
|
+
<td><i>null</i></td>
|
239
|
+
<td>A custom CSS class for the modal. It can be added to the object under the key "customClass".</td>
|
240
|
+
</tr>
|
241
|
+
<tr>
|
242
|
+
<td><b>allowOutsideClick</b></td>
|
243
|
+
<td><i>false</i></td>
|
244
|
+
<td>If set to <strong>true</strong>, the user can dismiss the modal by clicking outside it.</td>
|
245
|
+
</tr>
|
246
|
+
<tr>
|
247
|
+
<td><b>showCancelButton</b></td>
|
248
|
+
<td><i>false</i></td>
|
249
|
+
<td>If set to <strong>true</strong>, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.</td>
|
250
|
+
</tr>
|
251
|
+
<tr>
|
252
|
+
<td><b>confirmButtonText</b></td>
|
253
|
+
<td><i>"OK"</i></td>
|
254
|
+
<td>Use this to change the text on the "Confirm"-button. If showCancelButton is set as true, the confirm button will automatically show "Confirm" instead of "OK".</td>
|
255
|
+
</tr>
|
256
|
+
<tr>
|
257
|
+
<td><b>confirmButtonColor</b></td>
|
258
|
+
<td><i>"#AEDEF4"</i></td>
|
259
|
+
<td>Use this to change the background color of the "Confirm"-button (must be a HEX value).</td>
|
260
|
+
</tr>
|
261
|
+
<tr>
|
262
|
+
<td><b>cancelButtonText</b></td>
|
263
|
+
<td><i>"Cancel"</i></td>
|
264
|
+
<td>Use this to change the text on the "Cancel"-button.</td>
|
265
|
+
</tr>
|
266
|
+
<tr>
|
267
|
+
<td><b>closeOnConfirm</b></td>
|
268
|
+
<td><i>true</i></td>
|
269
|
+
<td>Set to <i>false</i> if you want the modal to stay open even if the user presses the "Confirm"-button. This is especially useful if the function attached to the "Confirm"-button is another SweetAlert.</td>
|
270
|
+
</tr>
|
271
|
+
<tr>
|
272
|
+
<td><b>imageUrl</b></td>
|
273
|
+
<td><i>null</i></td>
|
274
|
+
<td>Add a customized icon for the modal. Should contain a string with the path to the image.</td>
|
275
|
+
</tr>
|
276
|
+
<tr>
|
277
|
+
<td><b>imageSize</b></td>
|
278
|
+
<td><i>"80x80"</i></td>
|
279
|
+
<td>If imageUrl is set, you can specify imageSize to describes how big you want the icon to be in px. Pass in a string with two values separated by an "x". The first value is the width, the second is the height.</td>
|
280
|
+
</tr>
|
281
|
+
<tr>
|
282
|
+
<td><b>timer</b></td>
|
283
|
+
<td><i>null</i></td>
|
284
|
+
<td>Auto close timer of the modal. Set in ms (milliseconds).</td>
|
285
|
+
</tr>
|
286
|
+
<tr>
|
287
|
+
<td><b>html</b></td>
|
288
|
+
<td><i>false</i></td>
|
289
|
+
<td>If set to true, will not escape title and text parameters. (Set to false if you're worried about XSS attacks.)</td>
|
290
|
+
</tr>
|
291
|
+
<tr>
|
292
|
+
<td><b>animation</b></td>
|
293
|
+
<td><i>true</i></td>
|
294
|
+
<td>If set to <strong>false</strong>, the modal's animation will be disabled.</td>
|
295
|
+
</tr>
|
296
|
+
</table>
|
297
|
+
|
298
|
+
|
299
|
+
<!-- Methods -->
|
300
|
+
<h3>Methods</h3>
|
301
|
+
|
302
|
+
<p class="center">SweetAlert also comes with some simple methods that you can call:</p>
|
303
|
+
|
304
|
+
<table>
|
305
|
+
<tr class="titles">
|
306
|
+
<th>
|
307
|
+
<div class="border-left"></div>
|
308
|
+
Function
|
309
|
+
</th>
|
310
|
+
<th>Example</th>
|
311
|
+
<th>
|
312
|
+
<div class="border-right"></div>
|
313
|
+
Description
|
314
|
+
</th>
|
315
|
+
</tr>
|
316
|
+
<tr>
|
317
|
+
<td>setDefaults</td>
|
318
|
+
<td><i>swal.setDefaults({ confirmButtonColor: '#0000' });</i></td>
|
319
|
+
<td>If you end up using a lot of the same settings when calling SweetAlert, you can use setDefaults at the start of your program to set them once and for all!</td>
|
320
|
+
</tr>
|
321
|
+
<tr>
|
322
|
+
<td>close</td>
|
323
|
+
<td><i>swal.close();</i></td>
|
324
|
+
<td>Close the currently open SweetAlert programatically.</td>
|
325
|
+
</tr>
|
326
|
+
</table>
|
327
|
+
|
328
|
+
|
329
|
+
|
330
|
+
<!-- Contribute -->
|
331
|
+
<h3>Contribute</h3>
|
332
|
+
<p>SweetAlert was created by <a href="http://tristanedwards.me" target="_blank">Tristan Edwards</a>, you can follow him on <a href="https://twitter.com/t4t5" target="_blank" class="twitter">Twitter</a> or <a href="https://dribbble.com/tristanedwards" target="_blank" class="dribbble">Dribbble</a> for updates and other cool projects!</p>
|
333
|
+
<p>Feel free to fork sweetAlert on <a href="https://github.com/t4t5/sweetalert" class="github">GitHub</a> if you have any features that you want to add!</p>
|
334
|
+
|
335
|
+
|
336
|
+
<footer>
|
337
|
+
<span class="te-logo">TE</span> • <script>document.write(new Date().getFullYear())</script>
|
338
|
+
</footer>
|
339
|
+
|
340
|
+
|
341
|
+
<script>
|
342
|
+
|
343
|
+
document.querySelector('button.download').onclick = function(){
|
344
|
+
$("html, body").animate({ scrollTop: $("#download-section").offset().top }, 1000);
|
345
|
+
};
|
346
|
+
|
347
|
+
document.querySelector('.showcase.normal button').onclick = function(){
|
348
|
+
alert("Oops... Something went wrong!");
|
349
|
+
};
|
350
|
+
|
351
|
+
document.querySelector('.showcase.sweet button').onclick = function(){
|
352
|
+
swal("Oops...", "Something went wrong!", "error");
|
353
|
+
};
|
354
|
+
|
355
|
+
document.querySelector('ul.examples li.message button').onclick = function(){
|
356
|
+
swal("Here's a message!");
|
357
|
+
};
|
358
|
+
|
359
|
+
document.querySelector('ul.examples li.timer button').onclick = function(){
|
360
|
+
swal({
|
361
|
+
title: "Auto close alert!",
|
362
|
+
text: "I will close in 2 seconds.",
|
363
|
+
timer: 2000
|
364
|
+
});
|
365
|
+
};
|
366
|
+
|
367
|
+
document.querySelector('ul.examples li.title-text button').onclick = function(){
|
368
|
+
swal("Here's a message!", "It's pretty, isn't it?");
|
369
|
+
};
|
370
|
+
|
371
|
+
document.querySelector('ul.examples li.success button').onclick = function(){
|
372
|
+
swal("Good job!", "You clicked the button!", "success");
|
373
|
+
};
|
374
|
+
|
375
|
+
document.querySelector('ul.examples li.warning.confirm button').onclick = function(){
|
376
|
+
swal({
|
377
|
+
title: "Are you sure?",
|
378
|
+
text: "You will not be able to recover this imaginary file!",
|
379
|
+
type: "warning",
|
380
|
+
showCancelButton: true,
|
381
|
+
confirmButtonColor: '#DD6B55',
|
382
|
+
confirmButtonText: 'Yes, delete it!',
|
383
|
+
closeOnConfirm: false
|
384
|
+
},
|
385
|
+
function(){
|
386
|
+
swal("Deleted!", "Your imaginary file has been deleted!", "success");
|
387
|
+
});
|
388
|
+
};
|
389
|
+
|
390
|
+
document.querySelector('ul.examples li.warning.cancel button').onclick = function(){
|
391
|
+
swal({
|
392
|
+
title: "Are you sure?",
|
393
|
+
text: "You will not be able to recover this imaginary file!",
|
394
|
+
type: "warning",
|
395
|
+
showCancelButton: true,
|
396
|
+
confirmButtonColor: '#DD6B55',
|
397
|
+
confirmButtonText: 'Yes, delete it!',
|
398
|
+
cancelButtonText: "No, cancel plx!",
|
399
|
+
closeOnConfirm: false,
|
400
|
+
closeOnCancel: false
|
401
|
+
},
|
402
|
+
function(isConfirm){
|
403
|
+
if (isConfirm){
|
404
|
+
swal("Deleted!", "Your imaginary file has been deleted!", "success");
|
405
|
+
} else {
|
406
|
+
swal("Cancelled", "Your imaginary file is safe :)", "error");
|
407
|
+
}
|
408
|
+
});
|
409
|
+
};
|
410
|
+
|
411
|
+
document.querySelector('ul.examples li.custom-icon button').onclick = function(){
|
412
|
+
swal({
|
413
|
+
title: "Sweet!",
|
414
|
+
text: "Here's a custom image.",
|
415
|
+
imageUrl: 'images/thumbs-up.jpg'
|
416
|
+
});
|
417
|
+
};
|
418
|
+
|
419
|
+
document.querySelector('ul.examples li.message-html button').onclick = function(){
|
420
|
+
swal({
|
421
|
+
title: "HTML <small>Title</small>!",
|
422
|
+
text: 'A custom <span style="color:#F8BB86">html<span> message.',
|
423
|
+
html: true
|
424
|
+
});
|
425
|
+
};
|
426
|
+
|
427
|
+
</script>
|
428
|
+
|
429
|
+
|
430
|
+
|
431
|
+
</body>
|
432
|
+
|
433
|
+
</html>
|
@@ -0,0 +1,48 @@
|
|
1
|
+
var gulp = require('gulp');
|
2
|
+
|
3
|
+
var jshint = require('gulp-jshint');
|
4
|
+
var sass = require('gulp-sass');
|
5
|
+
var concat = require('gulp-concat');
|
6
|
+
var uglify = require('gulp-uglify');
|
7
|
+
var rename = require('gulp-rename');
|
8
|
+
var minifyCSS = require('gulp-minify-css');
|
9
|
+
|
10
|
+
// Lint Task
|
11
|
+
gulp.task('lint', function() {
|
12
|
+
return gulp.src('lib/sweet-alert.js')
|
13
|
+
.pipe(jshint())
|
14
|
+
.pipe(jshint.reporter('default'));
|
15
|
+
});
|
16
|
+
|
17
|
+
// Compile Our Sass
|
18
|
+
gulp.task('sass', function() {
|
19
|
+
|
20
|
+
gulp.src('example/example.scss')
|
21
|
+
.pipe(sass())
|
22
|
+
.pipe(rename('example.css'))
|
23
|
+
.pipe(gulp.dest('example'));
|
24
|
+
|
25
|
+
return gulp.src(['lib/sweet-alert.scss', 'lib/ie9.css'])
|
26
|
+
.pipe(sass())
|
27
|
+
.pipe(concat('sweet-alert.css'))
|
28
|
+
.pipe(minifyCSS())
|
29
|
+
.pipe(gulp.dest('lib'));
|
30
|
+
});
|
31
|
+
|
32
|
+
// Concatenate & Minify JS
|
33
|
+
gulp.task('scripts', function() {
|
34
|
+
return gulp.src('lib/sweet-alert.js')
|
35
|
+
.pipe(gulp.dest('lib'))
|
36
|
+
.pipe(rename('sweet-alert.min.js'))
|
37
|
+
.pipe(uglify())
|
38
|
+
.pipe(gulp.dest('lib'));
|
39
|
+
});
|
40
|
+
|
41
|
+
// Watch Files For Changes
|
42
|
+
gulp.task('watch', function() {
|
43
|
+
gulp.watch('lib/*.js', ['lint', 'scripts']);
|
44
|
+
gulp.watch(['lib/*.scss', 'lib/*.css'], ['sass']);
|
45
|
+
});
|
46
|
+
|
47
|
+
// Default Task
|
48
|
+
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
|
@@ -0,0 +1,23 @@
|
|
1
|
+
/* Internet Explorer 9 has some special quirks that are fixed here */
|
2
|
+
/* The icons are not animated. */
|
3
|
+
/* This file is automatically merged into sweet-alert.min.js through Gulp */
|
4
|
+
|
5
|
+
/* Error icon */
|
6
|
+
.sweet-alert .icon.error .line.left {
|
7
|
+
-ms-transform: rotate(45deg)\9;
|
8
|
+
}
|
9
|
+
.sweet-alert .icon.error .line.right {
|
10
|
+
-ms-transform: rotate(-45deg)\9;
|
11
|
+
}
|
12
|
+
|
13
|
+
|
14
|
+
/* Success icon */
|
15
|
+
.sweet-alert .icon.success {
|
16
|
+
border-color: transparent\9;
|
17
|
+
}
|
18
|
+
.sweet-alert .icon.success .line.tip {
|
19
|
+
-ms-transform: rotate(45deg)\9;
|
20
|
+
}
|
21
|
+
.sweet-alert .icon.success .line.long {
|
22
|
+
-ms-transform: rotate(-45deg)\9;
|
23
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
.sweet-overlay{background-color:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";background-color:rgba(0,0,0,.4);position:fixed;left:0;right:0;top:0;bottom:0;display:none;z-index:10000}.sweet-alert{background-color:#fff;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;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:99999}@media all and (max-width:540px){.sweet-alert{width:auto;margin-left:0;margin-right:0;left:15px;right:15px}}.sweet-alert h2{color:#575757;font-size:30px;text-align:center;font-weight:600;text-transform:none;position:relative;margin:25px 0;padding:0;line-height:40px;display:block}.sweet-alert p{color:#797979;font-size:16px;font-weight:300;position:relative;text-align:inherit;float:none;margin:0;padding:0;line-height:normal}.sweet-alert button{background-color:#AEDEF4;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}.sweet-alert button:focus{outline:0;box-shadow:0 0 2px rgba(128,179,235,.5),inset 0 0 0 1px rgba(0,0,0,.05)}.sweet-alert button:hover{background-color:#a1d9f2}.sweet-alert button:active{background-color:#81ccee}.sweet-alert button.cancel{background-color:#D0D0D0}.sweet-alert button.cancel:hover{background-color:#c8c8c8}.sweet-alert button.cancel:active{background-color:#b6b6b6}.sweet-alert button.cancel:focus{box-shadow:rgba(197,205,211,.8) 0 0 2px,rgba(0,0,0,.0470588) 0 0 0 1px inset!important}.sweet-alert button::-moz-focus-inner{border:0}.sweet-alert[data-has-cancel-button=false] button{box-shadow:none!important}.sweet-alert .icon{width:80px;height:80px;border:4px solid gray;-webkit-border-radius:40px;border-radius:50%;margin:20px auto;padding:0;position:relative;box-sizing:content-box}.sweet-alert .icon.error{border-color:#F27474}.sweet-alert .icon.error .x-mark{position:relative;display:block}.sweet-alert .icon.error .line{position:absolute;height:5px;width:47px;background-color:#F27474;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:#F8BB86}.sweet-alert .icon.warning .body{position:absolute;width:5px;height:47px;left:50%;top:10px;-webkit-border-radius:2px;border-radius:2px;margin-left:-2px;background-color:#F8BB86}.sweet-alert .icon.warning .dot{position:absolute;width:7px;height:7px;-webkit-border-radius:50%;border-radius:50%;margin-left:-3px;left:50%;bottom:10px;background-color:#F8BB86}.sweet-alert .icon.info{border-color:#C9DAE1}.sweet-alert .icon.info::before{content:"";position:absolute;width:5px;height:29px;left:50%;bottom:17px;border-radius:2px;margin-left:-2px;background-color:#C9DAE1}.sweet-alert .icon.info::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;margin-left:-3px;top:19px;background-color:#C9DAE1}.sweet-alert .icon.success{border-color:#A5DC86}.sweet-alert .icon.success::after,.sweet-alert .icon.success::before{content:'';position:absolute;width:60px;height:120px;background:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.sweet-alert .icon.success::before{-webkit-border-radius:120px 0 0 120px;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{-webkit-border-radius:0 120px 120px 0;border-radius:0 120px 120px 0;top:-11px;left:30px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 60px;transform-origin:0 60px}.sweet-alert .icon.success .placeholder{width:80px;height:80px;border:4px solid rgba(165,220,134,.2);-webkit-border-radius:40px;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:#fff;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:#A5DC86;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}@-webkit-keyframes showSweetAlert{0%{transform:scale(.7);-webkit-transform:scale(.7)}45%{transform:scale(1.05);-webkit-transform:scale(1.05)}80%{transform:scale(.95);-webkit-tranform:scale(.95)}100%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes showSweetAlert{0%{transform:scale(.7);-webkit-transform:scale(.7)}45%{transform:scale(1.05);-webkit-transform:scale(1.05)}80%{transform:scale(.95);-webkit-tranform:scale(.95)}100%{transform:scale(1);-webkit-transform:scale(1)}}@-webkit-keyframes hideSweetAlert{0%{transform:scale(1);-webkit-transform:scale(1)}100%{transform:scale(.5);-webkit-transform:scale(.5)}}@keyframes hideSweetAlert{0%{transform:scale(1);-webkit-transform:scale(1)}100%{transform:scale(.5);-webkit-transform:scale(.5)}}.showSweetAlert{-webkit-animation:showSweetAlert .3s;animation:showSweetAlert .3s}.showSweetAlert[data-animation=none]{-webkit-animation:none;animation:none}.hideSweetAlert{-webkit-animation:hideSweetAlert .2s;animation:hideSweetAlert .2s}.hideSweetAlert[data-animation=none]{-webkit-animation:none;animation:none}@-webkit-keyframes animateSuccessTip{0%,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%,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%,65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@keyframes animateSuccessLong{0%,65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@-webkit-keyframes rotatePlaceholder{0%,5%{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}100%,12%{transform:rotate(-405deg);-webkit-transform:rotate(-405deg)}}@keyframes rotatePlaceholder{0%,5%{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}100%,12%{transform:rotate(-405deg);-webkit-transform:rotate(-405deg)}}.animateSuccessTip{-webkit-animation:animateSuccessTip .75s;animation:animateSuccessTip .75s}.animateSuccessLong{-webkit-animation:animateSuccessLong .75s;animation:animateSuccessLong .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 .5s;animation:animateErrorIcon .5s}@-webkit-keyframes animateXMark{0%,50%{transform:scale(.4);-webkit-transform:scale(.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%,50%{transform:scale(.4);-webkit-transform:scale(.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 .5s;animation:animateXMark .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 .75s infinite alternate;animation:pulseWarning .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 .75s infinite alternate;animation:pulseWarningIns .75s infinite alternate}
|
@@ -0,0 +1,37 @@
|
|
1
|
+
<!-- Note: this file is only intended for development use! -->
|
2
|
+
|
3
|
+
<div class="sweet-overlay"></div>
|
4
|
+
|
5
|
+
|
6
|
+
<!-- SweetAlert box -->
|
7
|
+
<div class="sweet-alert">
|
8
|
+
|
9
|
+
<div class="icon error">
|
10
|
+
<span class="x-mark">
|
11
|
+
<span class="line left"></span>
|
12
|
+
<span class="line right"></span>
|
13
|
+
</span>
|
14
|
+
</div>
|
15
|
+
|
16
|
+
<div class="icon warning">
|
17
|
+
<span class="body"></span>
|
18
|
+
<span class="dot"></span>
|
19
|
+
</div>
|
20
|
+
|
21
|
+
<div class="icon info"></div>
|
22
|
+
|
23
|
+
<div class="icon success">
|
24
|
+
<span class="line tip"></span>
|
25
|
+
<span class="line long"></span>
|
26
|
+
<div class="placeholder"></div>
|
27
|
+
<div class="fix"></div>
|
28
|
+
</div>
|
29
|
+
|
30
|
+
<div class="icon custom"></div>
|
31
|
+
|
32
|
+
|
33
|
+
<h2>Title</h2>
|
34
|
+
<p>Text</p>
|
35
|
+
<button class="cancel">Cancel</button>
|
36
|
+
<button class="confirm">OK</button>
|
37
|
+
</div>
|