Browse Source

Add jquery bootstrap growl for ajax failure notifications

Dashie der otter 1 year ago
parent
commit
aed34b7e9c
Signed by: Dashie <dashie@sigpipe.me> GPG Key ID: C2D57B325840B755

+ 77
- 0
static/js/jquery.bootstrap-growl.js View File

@@ -0,0 +1,77 @@
1
+(function() {
2
+  var $;
3
+
4
+  $ = jQuery;
5
+
6
+  $.bootstrapGrowl = function(message, options) {
7
+    var $alert, css, offsetAmount;
8
+    options = $.extend({}, $.bootstrapGrowl.default_options, options);
9
+    $alert = $("<div>");
10
+    $alert.attr("class", "bootstrap-growl alert");
11
+    if (options.type) {
12
+      $alert.addClass("alert-" + options.type);
13
+    }
14
+    if (options.allow_dismiss) {
15
+      $alert.addClass("alert-dismissible");
16
+      $alert.append("<button  class=\"close\" data-dismiss=\"alert\" type=\"button\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>");
17
+    }
18
+    $alert.append(message);
19
+    if (options.top_offset) {
20
+      options.offset = {
21
+        from: "top",
22
+        amount: options.top_offset
23
+      };
24
+    }
25
+    offsetAmount = options.offset.amount;
26
+    $(".bootstrap-growl").each(function() {
27
+      return offsetAmount = Math.max(offsetAmount, parseInt($(this).css(options.offset.from)) + $(this).outerHeight() + options.stackup_spacing);
28
+    });
29
+    css = {
30
+      "position": (options.ele === "body" ? "fixed" : "absolute"),
31
+      "margin": 0,
32
+      "z-index": "9999",
33
+      "display": "none"
34
+    };
35
+    css[options.offset.from] = offsetAmount + "px";
36
+    $alert.css(css);
37
+    if (options.width !== "auto") {
38
+      $alert.css("width", options.width + "px");
39
+    }
40
+    $(options.ele).append($alert);
41
+    switch (options.align) {
42
+      case "center":
43
+        $alert.css({
44
+          "left": "50%",
45
+          "margin-left": "-" + ($alert.outerWidth() / 2) + "px"
46
+        });
47
+        break;
48
+      case "left":
49
+        $alert.css("left", "20px");
50
+        break;
51
+      default:
52
+        $alert.css("right", "20px");
53
+    }
54
+    $alert.fadeIn();
55
+    if (options.delay > 0) {
56
+      $alert.delay(options.delay).fadeOut(function() {
57
+        return $(this).alert("close");
58
+      });
59
+    }
60
+    return $alert;
61
+  };
62
+
63
+  $.bootstrapGrowl.default_options = {
64
+    ele: "body",
65
+    type: "info",
66
+    offset: {
67
+      from: "top",
68
+      amount: 20
69
+    },
70
+    align: "right",
71
+    width: 250,
72
+    delay: 4000,
73
+    allow_dismiss: true,
74
+    stackup_spacing: 10
75
+  };
76
+
77
+}).call(this);

+ 1
- 0
static/js/jquery.bootstrap-growl.min.js
File diff suppressed because it is too large
View File


+ 19
- 0
templates/base/footer.tmpl View File

@@ -25,12 +25,31 @@
25 25
 <!-- Placed at the end of the document so the pages load faster -->
26 26
 <script src="{{AppSubURL}}/js/jquery-3.2.1.min.js"></script>
27 27
 <script src="{{AppSubURL}}/js/bootstrap.min.js"></script>
28
+<script src="{{AppSubURL}}/js/jquery.bootstrap-growl.min.js"></script>
28 29
 
29 30
 <script>
30 31
     var csrf;
31 32
     var suburl;
32 33
     csrf = $('meta[name=_csrf]').attr("content");
33 34
     suburl = $('meta[name=_suburl]').attr("content");
35
+
36
+    function show_alert(type, title, message) {
37
+        console.log('Alert: ' + type + ' - ' + title + ' - ' + message);
38
+        // type null, danger, info, success
39
+        msg = title + "<br/><small>" + message + "</small>";
40
+        $.bootstrapGrowl(msg, {type: type})
41
+    }
42
+
43
+    $(document).ajaxError(function (event, request, settings) {
44
+        console.log('triggered');
45
+        if (request.status === 500) {
46
+            return show_alert("danger", "Ajax query failed", "Error 500 :(");
47
+        }
48
+        if (request.responseJSON) {
49
+            return show_alert("danger", "Ajax query failed", request.responseJSON.message);
50
+        }
51
+        show_alert("danger", "Ajax query failed", "Unknown error");
52
+    });
34 53
 </script>
35 54
 
36 55
 {{if (or .PageIsGitxtNewPost .PageIsGitxtNew .PageIsGitxtEdit .PageIsGitxtEditPost)}}

Loading…
Cancel
Save