comunicationLeap/node_modules/toastr-master/demo.html
node_modules/toastr-master/demo.htmlRaw
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8" />
5 <title>toastr examples</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7 <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
8 <link href="build/toastr.css" rel="stylesheet" type="text/css" />
9 <style>
10 .row {
11 margin-left: 0;
12 }
13 </style>
14</head>
15
16<body class="container">
17<section class="row">
18 <h1>toastr</h1>
19
20 <div class="well row">
21 <div class="row">
22 <div class="span4">
23 <div class="control-group">
24 <div class="controls">
25 <label class="control-label" for="title">Title</label>
26 <input id="title" type="text" class="input-large" placeholder="Enter a title ..." />
27 <label class="control-label" for="message">Message</label>
28 <textarea class="input-large" id="message" rows="3" placeholder="Enter a message ..."></textarea>
29 </div>
30 </div>
31 <div class="control-group">
32 <div class="controls">
33 <label class="checkbox" for="closeButton">
34 <input id="closeButton" type="checkbox" value="checked" class="input-mini" />Close Button
35 </label>
36 </div>
37 <div class="controls">
38 <label class="checkbox" for="addBehaviorOnToastClick">
39 <input id="addBehaviorOnToastClick" type="checkbox" value="checked" class="input-mini" />Add behavior on toast click
40 </label>
41 </div>
42 <div class="controls">
43 <label class="checkbox" for="debugInfo">
44 <input id="debugInfo" type="checkbox" value="checked" class="input-mini" />Debug
45 </label>
46 </div>
47 <div class="controls">
48 <label class="checkbox" for="progressBar">
49 <input id="progressBar" type="checkbox" value="checked" class="input-mini" />Progress Bar
50 </label>
51 </div>
52 <div class="controls">
53 <label class="checkbox" for="preventDuplicates">
54 <input id="preventDuplicates" type="checkbox" value="checked" class="input-mini" />Prevent Duplicates
55 </label>
56 </div>
57 <div class="controls">
58 <label class="checkbox" for="addClear">
59 <input id="addClear" type="checkbox" value="checked" class="input-mini" />Add button to force clearing a toast, ignoring focus
60 </label>
61 </div>
62 <div class="controls">
63 <label class="checkbox" for="newestOnTop">
64 <input id="newestOnTop" type="checkbox" value="checked" class="input-mini" />Newest on top
65 </label>
66 </div>
67 </div>
68 </div>
69
70 <div class="span2">
71 <div class="control-group" id="toastTypeGroup">
72 <div class="controls">
73 <label>Toast Type</label>
74 <label class="radio">
75 <input type="radio" name="toasts" value="success" checked />Success
76 </label>
77 <label class="radio">
78 <input type="radio" name="toasts" value="info" />Info
79 </label>
80 <label class="radio">
81 <input type="radio" name="toasts" value="warning" />Warning
82 </label>
83 <label class="radio">
84 <input type="radio" name="toasts" value="error" />Error
85 </label>
86 </div>
87 </div>
88 <div class="control-group" id="positionGroup">
89 <div class="controls">
90 <label>Position</label>
91 <label class="radio">
92 <input type="radio" name="positions" value="toast-top-right" checked />Top Right
93 </label>
94 <label class="radio">
95 <input type="radio" name="positions" value="toast-bottom-right" />Bottom Right
96 </label>
97 <label class="radio">
98 <input type="radio" name="positions" value="toast-bottom-left" />Bottom Left
99 </label>
100 <label class="radio">
101 <input type="radio" name="positions" value="toast-top-left" />Top Left
102 </label>
103 <label class="radio">
104 <input type="radio" name="positions" value="toast-top-full-width" />Top Full Width
105 </label>
106 <label class="radio">
107 <input type="radio" name="positions" value="toast-bottom-full-width" />Bottom Full Width
108 </label>
109 <label class="radio">
110 <input type="radio" name="positions" value="toast-top-center" />Top Center
111 </label>
112 <label class="radio">
113 <input type="radio" name="positions" value="toast-bottom-center" />Bottom Center
114 </label>
115 </div>
116 </div>
117 </div>
118
119 <div class="span2">
120 <div class="control-group">
121 <div class="controls">
122 <label class="control-label" for="showEasing">Show Easing</label>
123 <input id="showEasing" type="text" placeholder="swing, linear" class="input-mini" value="swing" />
124
125 <label class="control-label" for="hideEasing">Hide Easing</label>
126 <input id="hideEasing" type="text" placeholder="swing, linear" class="input-mini" value="linear" />
127
128 <label class="control-label" for="showMethod">Show Method</label>
129 <input id="showMethod" type="text" placeholder="show, fadeIn, slideDown" class="input-mini" value="fadeIn" />
130
131 <label class="control-label" for="hideMethod">Hide Method</label>
132 <input id="hideMethod" type="text" placeholder="hide, fadeOut, slideUp" class="input-mini" value="fadeOut" />
133 </div>
134 </div>
135 </div>
136
137 <div class="span3">
138 <div class="control-group">
139 <div class="controls">
140 <label class="control-label" for="showDuration">Show Duration</label>
141 <input id="showDuration" type="text" placeholder="ms" class="input-mini" value="300" />
142
143 <label class="control-label" for="hideDuration">Hide Duration</label>
144 <input id="hideDuration" type="text" placeholder="ms" class="input-mini" value="1000" />
145
146 <label class="control-label" for="timeOut">Time out</label>
147 <input id="timeOut" type="text" placeholder="ms" class="input-mini" value="5000" />
148
149 <label class="control-label" for="extendedTimeOut">Extended time out</label>
150 <input id="extendedTimeOut" type="text" placeholder="ms" class="input-mini" value="1000" />
151 </div>
152 </div>
153 </div>
154 </div>
155
156 <div class="row">
157 <button type="button" class="btn btn-primary" id="showtoast">Show Toast</button>
158 <button type="button" class="btn btn-danger" id="cleartoasts">Clear Toasts</button>
159 <button type="button" class="btn btn-danger" id="clearlasttoast">Clear Last Toast</button>
160 </div>
161
162 <div class="row" style='margin-top: 25px;'>
163 <pre id='toastrOptions'></pre>
164 </div>
165 </div>
166</section>
167
168<footer class="row">
169 <h2>Links</h2>
170
171 <ul>
172 <li><a href="http://nuget.org/packages/toastr">NuGet</a></li>
173 <li><a href="https://github.com/CodeSeven/toastr">GitHub</a></li>
174 </ul>
175</footer>
176
177<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
178<script src="toastr.js"></script>
179
180<script type="text/javascript">
181 $(function () {
182 var i = -1;
183 var toastCount = 0;
184 var $toastlast;
185
186 var getMessage = function () {
187 var msgs = ['My name is Inigo Montoya. You killed my father. Prepare to die!',
188 '<div><input class="input-small" value="textbox"/> <a href="http://johnpapa.net" target="_blank">This is a hyperlink</a></div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="surpriseBtn" class="btn" style="margin: 0 8px 0 8px">Surprise me</button></div>',
189 'Are you the six fingered man?',
190 'Inconceivable!',
191 'I do not think that means what you think it means.',
192 'Have fun storming the castle!'
193 ];
194 i++;
195 if (i === msgs.length) {
196 i = 0;
197 }
198
199 return msgs[i];
200 };
201
202 var getMessageWithClearButton = function (msg) {
203 msg = msg ? msg : 'Clear itself?';
204 msg += '<br /><br /><button type="button" class="btn clear">Yes</button>';
205 return msg;
206 };
207
208 $('#showtoast').click(function () {
209 var shortCutFunction = $("#toastTypeGroup input:radio:checked").val();
210 var msg = $('#message').val();
211 var title = $('#title').val() || '';
212 var $showDuration = $('#showDuration');
213 var $hideDuration = $('#hideDuration');
214 var $timeOut = $('#timeOut');
215 var $extendedTimeOut = $('#extendedTimeOut');
216 var $showEasing = $('#showEasing');
217 var $hideEasing = $('#hideEasing');
218 var $showMethod = $('#showMethod');
219 var $hideMethod = $('#hideMethod');
220 var toastIndex = toastCount++;
221 var addClear = $('#addClear').prop('checked');
222
223 toastr.options = {
224 closeButton: $('#closeButton').prop('checked'),
225 debug: $('#debugInfo').prop('checked'),
226 newestOnTop: $('#newestOnTop').prop('checked'),
227 progressBar: $('#progressBar').prop('checked'),
228 positionClass: $('#positionGroup input:radio:checked').val() || 'toast-top-right',
229 preventDuplicates: $('#preventDuplicates').prop('checked'),
230 onclick: null
231 };
232
233 if ($('#addBehaviorOnToastClick').prop('checked')) {
234 toastr.options.onclick = function () {
235 alert('You can perform some custom action after a toast goes away');
236 };
237 }
238
239 if ($showDuration.val().length) {
240 toastr.options.showDuration = $showDuration.val();
241 }
242
243 if ($hideDuration.val().length) {
244 toastr.options.hideDuration = $hideDuration.val();
245 }
246
247 if ($timeOut.val().length) {
248 toastr.options.timeOut = addClear ? 0 : $timeOut.val();
249 }
250
251 if ($extendedTimeOut.val().length) {
252 toastr.options.extendedTimeOut = addClear ? 0 : $extendedTimeOut.val();
253 }
254
255 if ($showEasing.val().length) {
256 toastr.options.showEasing = $showEasing.val();
257 }
258
259 if ($hideEasing.val().length) {
260 toastr.options.hideEasing = $hideEasing.val();
261 }
262
263 if ($showMethod.val().length) {
264 toastr.options.showMethod = $showMethod.val();
265 }
266
267 if ($hideMethod.val().length) {
268 toastr.options.hideMethod = $hideMethod.val();
269 }
270
271 if (addClear) {
272 msg = getMessageWithClearButton(msg);
273 toastr.options.tapToDismiss = false;
274 }
275 if (!msg) {
276 msg = getMessage();
277 }
278
279 $('#toastrOptions').text('Command: toastr["'
280 + shortCutFunction
281 + '"]("'
282 + msg
283 + (title ? '", "' + title : '')
284 + '")\n\ntoastr.options = '
285 + JSON.stringify(toastr.options, null, 2)
286 );
287
288 var $toast = toastr[shortCutFunction](msg, title); // Wire up an event handler to a button in the toast, if it exists
289 $toastlast = $toast;
290
291 if(typeof $toast === 'undefined'){
292 return;
293 }
294
295 if ($toast.find('#okBtn').length) {
296 $toast.delegate('#okBtn', 'click', function () {
297 alert('you clicked me. i was toast #' + toastIndex + '. goodbye!');
298 $toast.remove();
299 });
300 }
301 if ($toast.find('#surpriseBtn').length) {
302 $toast.delegate('#surpriseBtn', 'click', function () {
303 alert('Surprise! you clicked me. i was toast #' + toastIndex + '. You could perform an action here.');
304 });
305 }
306 if ($toast.find('.clear').length) {
307 $toast.delegate('.clear', 'click', function () {
308 toastr.clear($toast, { force: true });
309 });
310 }
311 });
312
313 function getLastToast(){
314 return $toastlast;
315 }
316 $('#clearlasttoast').click(function () {
317 toastr.clear(getLastToast());
318 });
319 $('#cleartoasts').click(function () {
320 toastr.clear();
321 });
322 })
323</script>
324</body>
325</html>