Alerts as jQuery extension

misago/static/misago/js/misago-alerts.js

@@ -1,23 +1,81 @@
-// Alerts interactivity
-$(function() {
-  var $alerts = $('.misago-alerts');
-  var $alerts_list = $('.misago-alerts .alerts-list');
+// Misago alerts extension
+(function($) {
 
-  // Store and freeze alerts list height for affix
-  var $height = $alerts.height();
-  $alerts.height($height);
+  // Alerts handler class definition
+  // ===============================
 
-  // Affix alerts
-  $('.misago-alerts .alerts-list').affix({
+  var MisagoAlerts = function(options) {
+
+    this.options = $.extend({
+      alerts_container: ".misago-alerts",
+      generic_error: "Unspecified error occured",
+      error_template: "",
+      info_template: "",
+      success_template: ""
+    }, options);
+
+    // Get DOM elements
+    this.$alerts = $(this.options.alerts_container);
+    this.$alerts_list = this.$alerts.find('.alerts-list');
+
+    // Store and freeze alerts list height for affix
+    this.$height = this.$alerts.height();
+    this.$alerts.height(this.$height);
+
+    // Affix alerts
+    this.$alerts_list.affix({
       offset: {
-        top: $alerts.offset().top
+        top: this.$alerts.offset().top
       }
     });
 
-  // Slide up alert
-  $alerts.find('.close').click(function() {
-    var $alert = $(this).parent().parent();
-    $alerts.animate({height: $height - $alert.height()}, {queue: false});
-    $alert.slideUp();
-  });
-});
+    // Slide up alert
+    function bindCloseEvents(controller) {
+      controller.$alerts_list.on('click', '.alert-div .close', function() {
+        var $alert = $(this).parent().parent();
+        controller.$height -= $alert.height();
+        controller.$alerts.animate({height: controller.$height}, {queue: false});
+        $alert.slideUp();
+      });
+    }
+    bindCloseEvents(this);
+
+    // Alerts functions
+    this.add_alert = function(template, message) {
+      var $alert = $(template.replace('%message%', message));
+      this.$alerts_list.append($alert);
+
+      this.$height += $alert.height();
+      $alert.hide();
+      this.$alerts.animate({height: this.$height}, {queue: false});
+      $alert.slideDown();
+    }
+
+    this.error = function(message) {
+      this.add_alert(self.options.error_template, message);
+    }
+
+    this.info = function(message) {
+      this.add_alert(self.options.info_template, message);
+    }
+
+    this.success = function(message) {
+      this.add_alert(self.options.success_template, message);
+    }
+
+    // Return object
+    return this;
+
+  };
+
+  // Plugin definition
+  // ==========================
+
+  $.misago_alerts = function(options) {
+    if ($._misago_alerts == undefined) {
+      $._misago_alerts = MisagoAlerts(options)
+    }
+    return $._misago_alerts;
+  };
+
+}(jQuery));

misago/templates/misago/base.html

@@ -35,6 +35,16 @@
       var lang_no = "{% trans "No" %}";
     </script>
     {% compressed_js 'misago' %}
+    <script lang="JavaScript">
+      $(function() {
+        $.misago_alerts({
+          generic_error: "{% trans "Unspecified error occured." %}",
+          error_template: "<div class=\"alert-div\"><p class=\"alert alert-danger\"><span class=\"alert-icon fa fa-times-circle\"></span>%message% <button type=\"button\" class=\"close\">{% trans "Ok!" %}</button></p></div>",
+          info_template: "<div class=\"alert-div\"><p class=\"alert alert-info\"><span class=\"alert-icon fa fa-info-circle\"></span>%message% <button type=\"button\" class=\"close\">{% trans "Ok!" %}</button></p></div>",
+          success_template: "<div class=\"alert-div\"><p class=\"alert alert-success\"><span class=\"alert-icon fa fa-check-circle\"></span>%message% <button type=\"button\" class=\"close\">{% trans "Ok!" %}</button></p></div>"
+        });
+      });
+    </script>
     {% block javascripts %}{% endblock javascripts %}
 
   </body>