Browse Source

Add jquery bootstrap growl for ajax failure notifications

feature/frontv2
squeaky otter 4 years ago
parent
commit
aed34b7e9c
Signed by: dashie GPG Key ID: C2D57B325840B755
  1. 77
      static/js/jquery.bootstrap-growl.js
  2. 1
      static/js/jquery.bootstrap-growl.min.js
  3. 19
      templates/base/footer.tmpl

77
static/js/jquery.bootstrap-growl.js

@ -0,0 +1,77 @@
(function() {
var $;
$ = jQuery;
$.bootstrapGrowl = function(message, options) {
var $alert, css, offsetAmount;
options = $.extend({}, $.bootstrapGrowl.default_options, options);
$alert = $("<div>");
$alert.attr("class", "bootstrap-growl alert");
if (options.type) {
$alert.addClass("alert-" + options.type);
}
if (options.allow_dismiss) {
$alert.addClass("alert-dismissible");
$alert.append("<button class=\"close\" data-dismiss=\"alert\" type=\"button\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>");
}
$alert.append(message);
if (options.top_offset) {
options.offset = {
from: "top",
amount: options.top_offset
};
}
offsetAmount = options.offset.amount;
$(".bootstrap-growl").each(function() {
return offsetAmount = Math.max(offsetAmount, parseInt($(this).css(options.offset.from)) + $(this).outerHeight() + options.stackup_spacing);
});
css = {
"position": (options.ele === "body" ? "fixed" : "absolute"),
"margin": 0,
"z-index": "9999",
"display": "none"
};
css[options.offset.from] = offsetAmount + "px";
$alert.css(css);
if (options.width !== "auto") {
$alert.css("width", options.width + "px");
}
$(options.ele).append($alert);
switch (options.align) {
case "center":
$alert.css({
"left": "50%",
"margin-left": "-" + ($alert.outerWidth() / 2) + "px"
});
break;
case "left":
$alert.css("left", "20px");
break;
default:
$alert.css("right", "20px");
}
$alert.fadeIn();
if (options.delay > 0) {
$alert.delay(options.delay).fadeOut(function() {
return $(this).alert("close");
});
}
return $alert;
};
$.bootstrapGrowl.default_options = {
ele: "body",
type: "info",
offset: {
from: "top",
amount: 20
},
align: "right",
width: 250,
delay: 4000,
allow_dismiss: true,
stackup_spacing: 10
};
}).call(this);

1
static/js/jquery.bootstrap-growl.min.js

@ -0,0 +1 @@
(function(){var c;c=jQuery;c.bootstrapGrowl=function(f,a){var b,e,d;a=c.extend({},c.bootstrapGrowl.default_options,a);b=c("<div>");b.attr("class","bootstrap-growl alert");a.type&&b.addClass("alert-"+a.type);a.allow_dismiss&&(b.addClass("alert-dismissible"),b.append('<button class="close" data-dismiss="alert" type="button"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>'));b.append(f);a.top_offset&&(a.offset={from:"top",amount:a.top_offset});d=a.offset.amount;c(".bootstrap-growl").each(function(){return d= Math.max(d,parseInt(c(this).css(a.offset.from))+c(this).outerHeight()+a.stackup_spacing)});e={position:"body"===a.ele?"fixed":"absolute",margin:0,"z-index":"9999",display:"none"};e[a.offset.from]=d+"px";b.css(e);"auto"!==a.width&&b.css("width",a.width+"px");c(a.ele).append(b);switch(a.align){case "center":b.css({left:"50%","margin-left":"-"+b.outerWidth()/2+"px"});break;case "left":b.css("left","20px");break;default:b.css("right","20px")}b.fadeIn();0<a.delay&&b.delay(a.delay).fadeOut(function(){return c(this).alert("close")}); return b};c.bootstrapGrowl.default_options={ele:"body",type:"info",offset:{from:"top",amount:20},align:"right",width:250,delay:4E3,allow_dismiss:!0,stackup_spacing:10}}).call(this);

19
templates/base/footer.tmpl

@ -25,12 +25,31 @@
<!-- Placed at the end of the document so the pages load faster -->
<script src="{{AppSubURL}}/js/jquery-3.2.1.min.js"></script>
<script src="{{AppSubURL}}/js/bootstrap.min.js"></script>
<script src="{{AppSubURL}}/js/jquery.bootstrap-growl.min.js"></script>
<script>
var csrf;
var suburl;
csrf = $('meta[name=_csrf]').attr("content");
suburl = $('meta[name=_suburl]').attr("content");
function show_alert(type, title, message) {
console.log('Alert: ' + type + ' - ' + title + ' - ' + message);
// type null, danger, info, success
msg = title + "<br/><small>" + message + "</small>";
$.bootstrapGrowl(msg, {type: type})
}
$(document).ajaxError(function (event, request, settings) {
console.log('triggered');
if (request.status === 500) {
return show_alert("danger", "Ajax query failed", "Error 500 :(");
}
if (request.responseJSON) {
return show_alert("danger", "Ajax query failed", request.responseJSON.message);
}
show_alert("danger", "Ajax query failed", "Unknown error");
});
</script>
{{if (or .PageIsGitxtNewPost .PageIsGitxtNew .PageIsGitxtEdit .PageIsGitxtEditPost)}}