lavkach3

Форк
0
/
sweet-alert.init.js 
385 строк · 10.8 Кб
1
!(function ($) {
2
  "use strict";
3

4
  var SweetAlert = function () {};
5

6
  //examples
7
  (SweetAlert.prototype.init = function () {
8
    //Basic
9
    $("#sa-basic").click(function () {
10
      Swal.fire("Here's a message!");
11
    });
12

13
    //A title with a text under
14
    $("#sa-title").click(function () {
15
      Swal.fire(
16
        "Here's a message!",
17
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed."
18
      );
19
    });
20

21
    //Success Message
22
    $("#sa-success").click(function () {
23
      Swal.fire(
24
        "Good job!",
25
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed.",
26
        "success"
27
      );
28
    });
29

30
    //Warning Message
31
    $("#sa-warning").click(function () {
32
      Swal.fire(
33
        {
34
          title: "Are you sure?",
35
          text: "You will not be able to recover this imaginary file!",
36
          type: "warning",
37
          showCancelButton: true,
38
          confirmButtonColor: "#DD6B55",
39
          confirmButtonText: "Yes, delete it!",
40
          closeOnConfirm: false,
41
        },
42
        function () {
43
          swal("Deleted!", "Your imaginary file has been deleted.", "success");
44
        }
45
      );
46
    });
47

48
    //Custom Image
49
    $("#sa-image").click(function () {
50
      Swal.fire({
51
        title: "Govinda!",
52
        text: "Recently joined twitter",
53
        imageUrl: "../assets/images/profile/user-2.jpg",
54
      });
55
    });
56

57
    //Auto Close Timer
58
    $("#sa-close").click(function () {
59
      Swal.fire({
60
        title: "Auto close alert!",
61
        text: "I will close in 2 seconds.",
62
        timer: 2000,
63
        showConfirmButton: false,
64
      });
65
    });
66

67
    $("#model-error-icon").click(function () {
68
      Swal.fire({
69
        type: "error",
70
        title: "Oops...",
71
        text: "Something went wrong!",
72
        footer: "<a href>Why do I have this issue?</a>",
73
      });
74
    });
75

76
    $("#sa-html").click(function () {
77
      Swal.fire({
78
        title: "<strong>HTML <u>example</u></strong>",
79
        type: "info",
80
        html:
81
          "You can use <b>bold text</b>, " +
82
          '<a href="//github.com">links</a> ' +
83
          "and other HTML tags",
84
        showCloseButton: true,
85
        showCancelButton: true,
86
        focusConfirm: false,
87
        confirmButtonText: '<i class="ti ti-thumb-up"></i> Great!',
88
        confirmButtonAriaLabel: "Thumbs up, great!",
89
        cancelButtonText: '<i class="ti ti-thumb-down"></i>',
90
        cancelButtonAriaLabel: "Thumbs down",
91
      });
92
    });
93

94
    $("#sa-position").click(function () {
95
      Swal.fire({
96
        position: "top-end",
97
        type: "success",
98
        title: "Your work has been saved",
99
        showConfirmButton: false,
100
        timer: 1500,
101
      });
102
    });
103

104
    $("#sa-animation").click(function () {
105
      Swal.fire({
106
        title: "Custom animation with Animate.css",
107
        animation: false,
108
        customClass: {
109
          popup: "animated tada",
110
        },
111
      });
112
    });
113

114
    $("#sa-confirm").click(function () {
115
      Swal.fire({
116
        title: "Are you sure?",
117
        text: "You won't be able to revert this!",
118
        type: "warning",
119
        showCancelButton: true,
120
        confirmButtonColor: "#3085d6",
121
        cancelButtonColor: "#d33",
122
        confirmButtonText: "Yes, delete it!",
123
      }).then((result) => {
124
        if (result.value) {
125
          Swal.fire("Deleted!", "Your file has been deleted.", "success");
126
        }
127
      });
128
    });
129

130
    $("#sa-passparameter").click(function () {
131
      const swalWithBootstrapButtons = Swal.mixin({
132
        customClass: {
133
          confirmButton: "btn btn-success",
134
          cancelButton: "me-6 btn btn-danger",
135
        },
136
        buttonsStyling: false,
137
      });
138

139
      swalWithBootstrapButtons
140
        .fire({
141
          title: "Are you sure?",
142
          text: "You won't be able to revert this!",
143
          type: "warning",
144
          showCancelButton: true,
145
          confirmButtonText: "Yes, delete it!",
146
          cancelButtonText: "No, cancel!",
147
          reverseButtons: true,
148
        })
149
        .then((result) => {
150
          if (result.value) {
151
            swalWithBootstrapButtons.fire(
152
              "Deleted!",
153
              "Your file has been deleted.",
154
              "success"
155
            );
156
          } else if (
157
            // Read more about handling dismissals
158
            result.dismiss === Swal.DismissReason.cancel
159
          ) {
160
            swalWithBootstrapButtons.fire(
161
              "Cancelled",
162
              "Your imaginary file is safe :)",
163
              "error"
164
            );
165
          }
166
        });
167
    });
168

169
    $("#sa-bg").click(function () {
170
      Swal.fire({
171
        title: "Custom width, padding, background.",
172
        width: 600,
173
        padding: "3em",
174
        background:
175
          "var(--bs-body-bg) url(../assets/images/backgrounds/active-bg.png)",
176
        backdrop: `
177
                          rgba(0,0,123,0.4)
178
                          url("../assets/images/backgrounds/nyan-cat.gif")
179
                          center left
180
                          no-repeat
181
                      `,
182
      });
183
    });
184

185
    $("#sa-autoclose").click(function () {
186
      let timerInterval;
187
      Swal.fire({
188
        title: "Auto close alert!",
189
        html: "I will close in <strong></strong> seconds.",
190
        timer: 2000,
191
        onBeforeOpen: () => {
192
          Swal.showLoading();
193
          timerInterval = setInterval(() => {
194
            Swal.getContent().querySelector("strong").textContent =
195
              Swal.getTimerLeft();
196
          }, 100);
197
        },
198
        onClose: () => {
199
          clearInterval(timerInterval);
200
        },
201
      }).then((result) => {
202
        if (
203
          // Read more about handling dismissals
204
          result.dismiss === Swal.DismissReason.timer
205
        ) {
206
          console.log("I was closed by the timer");
207
        }
208
      });
209
    });
210

211
    $("#sa-rtl").click(function () {
212
      Swal.fire({
213
        title: "هل تريد الاستمرار؟",
214
        type: "question",
215
        customClass: {
216
          icon: "swal2-arabic-question-mark",
217
        },
218
        confirmButtonText: "نعم",
219
        cancelButtonText: "لا",
220
        showCancelButton: true,
221
        showCloseButton: true,
222
      });
223
    });
224

225
    $("#sa-ajax").click(function () {
226
      Swal.fire({
227
        title: "Submit your Github username",
228
        input: "text",
229
        inputAttributes: {
230
          autocapitalize: "off",
231
        },
232
        showCancelButton: true,
233
        confirmButtonText: "Look up",
234
        showLoaderOnConfirm: true,
235
        preConfirm: (login) => {
236
          return fetch(`//api.github.com/users/${login}`)
237
            .then((response) => {
238
              if (!response.ok) {
239
                throw new Error(response.statusText);
240
              }
241
              return response.json();
242
            })
243
            .catch((error) => {
244
              Swal.showValidationMessage(`Request failed: ${error}`);
245
            });
246
        },
247
        allowOutsideClick: () => !Swal.isLoading(),
248
      }).then((result) => {
249
        if (result.value) {
250
          Swal.fire({
251
            title: `${result.value.login}'s avatar`,
252
            imageUrl: result.value.avatar_url,
253
          });
254
        }
255
      });
256
    });
257

258
    $("#sa-chain").click(function () {
259
      Swal.mixin({
260
        input: "text",
261
        confirmButtonText: "Next &rarr;",
262
        showCancelButton: true,
263
        progressSteps: ["1", "2", "3"],
264
      })
265
        .queue([
266
          {
267
            title: "Question 1",
268
            text: "Chaining swal2 modals is easy",
269
          },
270
          "Question 2",
271
          "Question 3",
272
        ])
273
        .then((result) => {
274
          if (result.value) {
275
            Swal.fire({
276
              title: "All done!",
277
              html:
278
                "Your answers: <pre><code>" +
279
                JSON.stringify(result.value) +
280
                "</code></pre>",
281
              confirmButtonText: "Lovely!",
282
            });
283
          }
284
        });
285
    });
286

287
    $("#sa-queue").click(function () {
288
      const ipAPI = "https://api.ipify.org?format=json";
289

290
      Swal.queue([
291
        {
292
          title: "Your public IP",
293
          confirmButtonText: "Show my public IP",
294
          text: "Your public IP will be received " + "via AJAX request",
295
          showLoaderOnConfirm: true,
296
          preConfirm: () => {
297
            return fetch(ipAPI)
298
              .then((response) => response.json())
299
              .then((data) => Swal.insertQueueStep(data.ip))
300
              .catch(() => {
301
                Swal.insertQueueStep({
302
                  type: "error",
303
                  title: "Unable to get your public IP",
304
                });
305
              });
306
          },
307
        },
308
      ]);
309
    });
310

311
    $("#sa-timerfun").click(function () {
312
      let timerInterval;
313
      Swal.fire({
314
        title: "Auto close alert!",
315
        html:
316
          "I will close in <strong></strong> seconds.<br/><br/>" +
317
          '<button id="increase" class="btn bg-warning-subtle text-warning px-4">' +
318
          "I need 5 more seconds!" +
319
          "</button><br/>" +
320
          '<button id="stop" class="btn bg-danger-subtle text-danger px-4 mt-1">' +
321
          "Please stop the timer!!" +
322
          "</button><br/>" +
323
          '<button id="resume" class="btn bg-success-subtle text-success px-4 mt-1" disabled>' +
324
          "Phew... you can restart now!" +
325
          "</button><br/>" +
326
          '<button id="toggle" class="btn bg-primary-subtle text-primary px-4 mt-1">' +
327
          "Toggle" +
328
          "</button>",
329
        timer: 10000,
330
        onBeforeOpen: () => {
331
          const content = Swal.getContent();
332
          const $ = content.querySelector.bind(content);
333

334
          const stop = $("#stop");
335
          const resume = $("#resume");
336
          const toggle = $("#toggle");
337
          const increase = $("#increase");
338

339
          Swal.showLoading();
340

341
          function toggleButtons() {
342
            stop.disabled = !Swal.isTimerRunning();
343
            resume.disabled = Swal.isTimerRunning();
344
          }
345

346
          stop.addEventListener("click", () => {
347
            Swal.stopTimer();
348
            toggleButtons();
349
          });
350

351
          resume.addEventListener("click", () => {
352
            Swal.resumeTimer();
353
            toggleButtons();
354
          });
355

356
          toggle.addEventListener("click", () => {
357
            Swal.toggleTimer();
358
            toggleButtons();
359
          });
360

361
          increase.addEventListener("click", () => {
362
            Swal.increaseTimer(5000);
363
          });
364

365
          timerInterval = setInterval(() => {
366
            Swal.getContent().querySelector("strong").textContent = (
367
              Swal.getTimerLeft() / 1000
368
            ).toFixed(0);
369
          }, 100);
370
        },
371
        onClose: () => {
372
          clearInterval(timerInterval);
373
        },
374
      });
375
    });
376
  }),
377
    //init
378
    ($.SweetAlert = new SweetAlert()),
379
    ($.SweetAlert.Constructor = SweetAlert);
380
})(window.jQuery),
381
  //initializing
382
  (function ($) {
383
    "use strict";
384
    $.SweetAlert.init();
385
  })(window.jQuery);
386

Использование cookies

Мы используем файлы cookie в соответствии с Политикой конфиденциальности и Политикой использования cookies.

Нажимая кнопку «Принимаю», Вы даете АО «СберТех» согласие на обработку Ваших персональных данных в целях совершенствования нашего веб-сайта и Сервиса GitVerse, а также повышения удобства их использования.

Запретить использование cookies Вы можете самостоятельно в настройках Вашего браузера.