make buttons disabled when there are no more posts in a given direction

src/posts.py

@@ -48,11 +48,11 @@ class Posts:
         doc_ids = [result.doc for result in results]
 
         if not doc_ids:
-            return jsonify(False)
+            return jsonify("end")
 
         if endkey and not startkey:
             if len(doc_ids) < 2 or doc_ids[0] == endkey:
-                return jsonify(False)
+                return jsonify("start")
             return jsonify(doc_ids[-2])
 
         if len(doc_ids) == 1:
@@ -62,7 +62,7 @@ class Posts:
             # if no startkey or endkey were specified, return the 0th post
             return jsonify(doc_ids[1 if startkey else 0])
 
-        return jsonify(False)
+        return jsonify("end")
 
     def allposts(self):
         result = self.db.iterview("blogPosts/blog-posts", 10, include_docs=True)

src/scripts/post.tag

@@ -1,5 +1,15 @@
 <post>
   <div class="posts-box post centered">
+    <div
+      data-is="postcontrols"
+      prevloading={this.prevloading}
+      prev={this.prev}
+      atstart={this.start}
+      atend={this.end}
+      nextloading={this.nextloading}
+      next={this.next}
+    >
+    </div>
     <div class="text-break animated fadeIn">
       <loading if={this.loading}></loading>
       <div
@@ -16,7 +26,8 @@
       data-is="postcontrols"
       prevloading={this.prevloading}
       prev={this.prev}
-      nomore={this.nomore}
+      atstart={this.start}
+      atend={this.end}
       nextloading={this.nextloading}
       next={this.next}
     >
@@ -45,13 +56,18 @@ self.title = "";
 self.content = "";
 self.prevloading = "";
 self.nextloading = "";
-self.nomore = false;
 self.content = "";
 self.swipe = false;
 self.loading = self.opts.state.loaded;
 
+this.start = false;
+this.end = false;
+
+const hashLength = 8;
+
 prev(ev) {
   ev.preventDefault();
+  self.end = false;
   if (self.prevloading || self.nextloading) {
     return;
   }
@@ -62,11 +78,12 @@ prev(ev) {
 
 next(ev) {
   ev.preventDefault();
+  self.start = false;
   if (self.nextloading || self.prevloading) {
     return;
   }
   self.nextloading = " loader-branded";
-  if (!self.nomore) {
+  if (!self.end) {
     self.update();
   }
   self.update({"swipe" : !self.swipe});
@@ -79,36 +96,30 @@ toTop() {
   }, 1000);
 }
 
-updatePost(body) {
+updatePost(postcontent) {
-  if (body === "false") {
+  if (postcontent == "end" || postcontent == "start") {
-    self.nomore = true;
-    self.prevloading = "";
-    self.nextloading = "";
-    self.loading = false;
-    self.update();
-    return;
-  }
-  else {
-    var postcontent = JSON.parse(body);
-    if (!postcontent) {
     self.prevloading = "";
     self.nextloading = "";
-      self.nomore = true;
     self.swipe = !self.swipe;
     self.loading = false;
+    self[postcontent] = true;
+    if (postcontent == "start") {
+      self.start = true;
+    }
+    else if (postcontent == "end") {
+      self.end = true;
+    }
     self.update();
     return;
   }
-    self._id = postcontent._id.slice(-8);
+  self._id = postcontent._id.slice(-hashLength);
   self.author = postcontent.author;
   self.content = postcontent.content;
   self.title = postcontent.title;
   self.swipe = !self.swipe;
-    self.nomore = false;
   self.loading = false;
   self.one("updated", self.toTop);
   self.update();
-  }
 
   self.prevloading = "";
   self.nextloading = "";
@@ -118,28 +129,44 @@ updatePost(body) {
 }
 
 nextPost(_id) {
-  fetch(`/blog/switchpost/${_id.slice(-8)}`)
+  fetch(`/blog/switchpost/${_id.slice(-hashLength)}`)
   .then((resp) => resp.text())
-  .then((resp) => { self.updatePost(resp) })
+  .then((resp) => {
+    var content = JSON.parse(resp);
+    if (content._id.slice(-hashLength) == self._id) {
+      /* Reached the end of the iterator */
+      self.update({
+        end : true,
+        loading : false,
+        prevloading : "",
+        nextloading : ""
+      });
+      return;
+    }
+    self.updatePost(content)
+  })
 }
 
 prevPost(_id) {
-  fetch(`/blog/prevpost/${_id.slice(-8)}`)
+  fetch(`/blog/prevpost/${_id.slice(-hashLength)}`)
   .then((resp) => resp.text())
-  .then((resp) => { self.updatePost(resp) })
+  .then((resp) => {
+    var content = JSON.parse(resp);
+    self.updatePost(JSON.parse(resp))
+  })
 }
 
 getPost(_id) {
   var url;
   if (_id !== undefined && _id) {
-    url = `/blog/getpost/${_id.slice(-8)}`;
+    url = `/blog/getpost/${_id.slice(-hashLength)}`;
   }
   else {
     url = "/blog/switchpost/";
   }
   fetch(url)
   .then((resp) => resp.text())
-  .then((resp) => {self.updatePost(resp) })
+  .then((resp) => { self.updatePost(JSON.parse(resp)) })
 }
 
 this.getPost(this.opts.state._id, "fadeIn");

src/scripts/postcontrols.tag

@@ -2,7 +2,7 @@
     <div class="controls container">
       <div class="columns">
         <div class="column col-6">
-          <button class={"btn btn-lg nav-button float-right " + (false ? "disabled" : " ") + this.opts.prevloading}
+          <button class={"btn btn-lg nav-button float-right " + (this.opts.atstart ? "disabled" : " ") + this.opts.prevloading}
                   onclick={this.opts.prev}
           >
 
@@ -10,7 +10,7 @@
           </button>
         </div>
         <div class="column col-6">
-          <button class={"btn btn-lg nav-button float-left  " + (false ? "disabled" : " ") + this.opts.nextloading}
+          <button class={"btn btn-lg nav-button float-left  " + (this.opts.atend ? "disabled" : " ") + this.opts.nextloading}
                   onclick={this.opts.next}
           >
             <i class="fa fa-arrow-right" aria-hidden="true"></i>

src/styles/riotblog.scss

@@ -133,6 +133,9 @@ p, h6, h4 {
 
 .mobile-menu {
   left: -100% !important;
+  border-radius: 5px !important;
+  border: 1px solid !important;
+  border-color: $branding !important;
 }
 
 .my-avatar {