Some fixes about the infinite scroll.

see #585

modoboa/extensions/webmail/static/webmail/js/webmail.js

@@ -94,7 +94,6 @@ Webmail.prototype = {
 
         this.resize();
 
-        this.setup_infinite_scroll();
         this.init_droppables();
         this.register_navcallbacks();
         this.listen();
@@ -174,6 +173,13 @@ Webmail.prototype = {
                 var content = $("#emails").html() + data.listing;
 
                 $("#emails").html(content);
+            },
+            end_of_list_reached: function($element) {
+                $element.append(
+                    $("<div class='alert alert-info text-center' />").html(
+                        gettext("No more message in this mailbox.")
+                    )
+                );
             }
         });
     },
@@ -911,6 +917,7 @@ Webmail.prototype = {
         this.htmltable = $("#emails").data("htmltable");
         this.init_draggables();
         $("#listing").css("overflow", "auto");
+        this.setup_infinite_scroll();
     },
 
     add_field: function(e, name) {

modoboa/extensions/webmail/templates/webmail/email_list.html

@@ -1,8 +1,8 @@
 {% load i18n %}
 {% load webmail_tags %}
 
-<div id="emails">
-  {% for email in emails %}
+{% if with_top_div %}<div id="emails">{% endif %}
+  {% for email in email_list %}
   <div id="{{ email.imapid }}" class="row email{% if email.style %} {{ email.style }}{% endif %}">
     <div class="hidden-xs col-sm-1">
       <img name="drag" src="{{ STATIC_URL }}pics/grippy.png" class="draggable" />
@@ -21,4 +21,4 @@
     </div>
   </div>
   {% endfor %}
-</div>
+{% if with_top_div %}</div>{% endif %}

modoboa/extensions/webmail/views.py

@@ -345,13 +345,18 @@ def listmailbox(request, defmailbox="INBOX", update_session=True):
         elems_per_page=int(parameters.get_user(request.user, "MESSAGES_PER_PAGE")),
         **request.session["webmail_navparams"]
     )
-    page = lst.paginator.getpage(navparams.get('page'))
+    page_id = int(navparams.get('page'))
+    page = lst.paginator.getpage(page_id)
     if page is not None:
+        email_list = lst.mbc.fetch(
+            page.id_start, page.id_stop, mbox,
+            nbelems=int(parameters.get_user(request.user, "MESSAGES_PER_PAGE"))
+        )
         content = _render_to_string(request, "webmail/email_list.html", {
-            "emails": lst.mbc.fetch(page.id_start, page.id_stop, mbox, nbelems=40)
+            "email_list": email_list, "with_top_div": page_id == 1
         })
     else:
-        content = "<div class='alert alert-info'>%s</div>" % _("Empty mailbox")
+        content = ""
     return {"listing": content, "length": len(content)}
     #return lst.render(request, navparams.get('page'))
 

modoboa/static/js/jquery.infinitescroll.js

@@ -44,7 +44,7 @@
                     $this.$options.process_results(data);
                     if (data.length === 0) {
                         $this.end_of_results = true;
-                        /*$this.$element.find('#end-of-results').removeClass('hide');*/
+                        $this.$options.end_of_list_reached($this.$element);
                     }
                     //$this.$element.find('.spinner').addClass('hide');
                     $this.executing = false;

modoboa/static/js/notify.js

@@ -11,7 +11,7 @@
             if (bid === undefined) {
                 bid = "notifybox";
             }
-            var div = $("<div class='alert' />", {
+            var div = $("<div class='alert alert-dismissible' role='alert' />", {
                 id: bid,
                 click: $.proxy(this.destroy_box, this)
             }).css({