implemented scroll to load more

WebKit/scripts/controller/Mentions.js

@@ -33,10 +33,12 @@ function(HostApp, Timeline, URI, Paths, Core) {
     }
 
 
-    Mentions.prototype.newStatus = function(statuses) {
+    Mentions.prototype.newStatus = function(statuses, append) {
-
-        Timeline.prototype.newStatus.call(this, statuses);
 
+        Timeline.prototype.newStatus.call(this, statuses, append);
+        
+        
+/*
         if(this.is_not_init) {
 
             this.unread_mentions += statuses.length;
@@ -55,10 +57,10 @@ function(HostApp, Timeline, URI, Paths, Core) {
             };
         }
 
-        this.is_not_init = true;
+        this.is_not_init = true;*/
     }
 
-    Mentions.prototype.getNewData = function(add_to_search) {
+    Mentions.prototype.getNewData = function(add_to_search, append) {
 
         add_to_search = add_to_search || {};
 
@@ -66,7 +68,7 @@ function(HostApp, Timeline, URI, Paths, Core) {
             add_to_search["mentioned_entity"] = HostApp.stringForKey("entity");
         }
 
-        Timeline.prototype.getNewData.call(this, add_to_search);
+        Timeline.prototype.getNewData.call(this, add_to_search, append);
     }
 
     Mentions.prototype.mentionRead = function(id, entity) {

WebKit/scripts/controller/Profile.js

@@ -178,6 +178,8 @@ function(HostApp, Core, Paths, URI) {
     Profile.prototype.clear = function() {
 
         this.server = null;
+        this.before = {id: null, entity: null, loading: false};
+
 
         this.profile_template.avatar.src = "img/default-avatar.png";
 
@@ -382,9 +384,11 @@ function(HostApp, Core, Paths, URI) {
     }
 
 
-    Profile.prototype.getStatuses = function(root_url) {
+    Profile.prototype.getStatuses = function(root_url, add_search, append) {
         var _this = this;
 
+        add_search = add_search || {};
+
         var url = URI(root_url + "/posts");
         url.addSearch("limit", 20);
 
@@ -395,29 +399,38 @@ function(HostApp, Core, Paths, URI) {
         ];
         url.addSearch("post_types", post_types.join(","));
 
+        for(var key in add_search) {
+            url.addSearch(key, add_search[key]);
+        }
+
         Paths.getURL(url.toString(), "GET", function(resp) {
 
             var statuses = JSON.parse(resp.responseText);
 
-            _this.newStatus(statuses);
+            _this.newStatus(statuses, append);
 
         }, null, false);
     }
 
 
-    Profile.prototype.newStatus = function(statuses) {
+    Profile.prototype.newStatus = function(statuses, append) {
+
         if(statuses != null && statuses.length > 0) {
+
+            var last_status = statuses[statuses.length -1];
+            this.before.id = last_status.id
+            this.before.entity = last_status.entity;
+            this.before.loading = false;
+
             for(var i = statuses.length-1, c=0; i>=c; --i) {
 
                 var status = statuses[i];
-                this.since_id = status.id;
-                this.since_id_entity = status.entity;
 
                 if (status.type == "https://tent.io/types/post/status/v0.1.0" || status.type == "https://tent.io/types/post/photo/v0.1.0") {
 
                     var new_node = this.getStatusDOMElement(status);
 
-                    if(this.body.childNodes.length > 0) {
+                    if(!append && this.body.childNodes.length > 0) {
 
                         if(this.body.childNodes.length > this.max_length) {
 
@@ -433,7 +446,7 @@ function(HostApp, Core, Paths, URI) {
 
                 } else if (status.type == "https://tent.io/types/post/delete/v0.1.0") {
 
-                    var li = document.getElementById("post-" + status.content.id);
+                    var li = document.getElementById("post-" + status.content.id + "-" + this.action);
                     if (li) {
                         this.body.removeChild(li);
                     }
@@ -446,6 +459,17 @@ function(HostApp, Core, Paths, URI) {
         }
     }
 
+    Profile.prototype.getMoreStatusPosts = function() {
+        if (!this.before.loading && this.before.id) {
+            this.before.loading = true;
+            var add_search = {
+                "before_id": this.before.id,
+                "before_id_entity": this.before.entity
+            }
+            this.getStatuses(this.server, add_search, true);            
+        }
+    }
+
     Profile.prototype.mention = function() {
 
     }

WebKit/scripts/controller/Search.js

@@ -14,6 +14,8 @@ function(HostApp, Core, Paths, URI) {
 
         this.action = "search";
 
+        this.offset = 0;
+
         this.container = document.createElement("div");
         this.container.className = this.action;
         document.getElementById("content").appendChild(this.container);
@@ -27,8 +29,14 @@ function(HostApp, Core, Paths, URI) {
         this.input.placeholder = "Search";
         this.form.appendChild(this.input);
 
+        this.before = {loading: false};
+
         var _this = this;
-        this.form.onsubmit = function() { _this.doSearch(_this.input.value); return false; };
+        this.form.onsubmit = function() {
+            _this.offset = 0;
+            _this.before = {loading: false};
+            _this.doSearch(_this.input.value); return false;
+        };
         this.form.action = "#";
 
         this.container.appendChild(this.form);
@@ -49,9 +57,11 @@ function(HostApp, Core, Paths, URI) {
         Core.prototype.hide.call(this, this.container);
     }
 
-    Search.prototype.doSearch = function(query) {
+    Search.prototype.doSearch = function(query, add_search, append) {
 
-        this.body.innerHTML = ""; // remove old results
+        add_search = add_search || {};
+        
+        if(!append) this.body.innerHTML = ""; // remove old results
         
         if (query == "") return;
         this.input.value = query;
@@ -63,45 +73,69 @@ function(HostApp, Core, Paths, URI) {
         url.addSearch("api_key", api_key);
         url.addSearch("text", query);
 
+        for (key in add_search) {
+            url.addSearch(key, add_search[key]);
+        }
+
         var _this = this;
 
         Paths.getURL(url.toString(), "GET", function(resp) {
 
             var results = JSON.parse(resp.responseText).results;
-            var statuses = [];
+            if (results && results.length > 0) {
-            for (var i = 0; i < results.length; i++) {
+
-                var result = results[i].source;
+                _this.before.loading = false;
-                var status = {
+
-                    entity: result.entity,
+                var statuses = [];
-                    content: {
+                for (var i = 0; i < results.length; i++) {
-                        text: result.content
+                    var result = results[i].source;
-                    },
+                    var status = {
-                    published_at: result.published_at,
+                        entity: result.entity,
-                    id: result.public_id,
+                        content: {
-                    type: result.post_type,
+                            text: result.content
-                    version: result.post_version,
+                        },
-                    app: {
+                        published_at: result.published_at,
-                        url: "http://skate.io",
+                        id: result.public_id,
-                        name: "skate.io"
+                        type: result.post_type,
-                    },
+                        version: result.post_version,
-                    mentions: []
+                        app: {
+                            url: "http://skate.io",
+                            name: "skate.io"
+                        },
+                        mentions: []
+                    }
+
+                    statuses.push(status);
                 }
 
-                statuses.push(status);
+                for(var i = 0; i < statuses.length; i++) {
-            }
+                    var status = statuses[i];
+                    if (status.type == "https://tent.io/types/post/status/v0.1.0") {
 
-            for(var i = 0; i < statuses.length; i++) {
+                        var new_node = _this.getStatusDOMElement(status);
-                var status = statuses[i];
+                        _this.body.appendChild(new_node);
-                if (status.type == "https://tent.io/types/post/status/v0.1.0") {
+                    }
-
-                    var new_node = _this.getStatusDOMElement(status);
-                    _this.body.appendChild(new_node);
                 }
             }
 
         }, null, false);
     }
 
+    Search.prototype.getMoreStatusPosts = function() {
+
+        if (!this.before.loading) {
+
+            this.offset += 20;
+            
+            this.before.loading = true;
+            var add_search = {
+                "offset": this.offset
+            }
+
+            this.doSearch(this.input.value, add_search, true);
+        }
+    }
+
     Search.prototype.searchFor = function(query) {
         this.doSearch(query);
         bungloo.sidebar.onSearch();

WebKit/scripts/controller/Sidebar.js

@@ -44,6 +44,7 @@ function(HostApp, Paths, Cache) {
         document.body.className = "body-timeline";
 
         this.setEntityAvatar();
+        this.setOnScroll();
     }
 
     Sidebar.prototype.createItem = function(name, callback, src_inactive, src_active, active) {
@@ -153,6 +154,7 @@ function(HostApp, Paths, Cache) {
         }
 
         active_part.show();
+        this.active_view = active_part;
 
         // Replace <body> class
         document.body.className = "body-" + active_li.className.split("-")[1];
@@ -188,8 +190,23 @@ function(HostApp, Paths, Cache) {
                 return;
             }
         }
+    }
 
+    Sidebar.prototype.showContentForTimeline = function() {
+        this.showContentFor(bungloo.timeline, this.menu.timeline);
+    }
 
+    // runs get more posts when scrolling down and
+    // it is possible for the active view
+    Sidebar.prototype.setOnScroll = function() {
+        var _this = this;
+        window.onscroll = function() {
+            if (document.body.scrollHeight <= (document.body.scrollTop + window.outerHeight)) {
+                if (typeof _this.active_view["getMoreStatusPosts"] != "undefined") {
+                    _this.active_view.getMoreStatusPosts();
+                }
+            }
+        }
     }
 
     Sidebar.prototype.setUnreadMentions = function(count) {

WebKit/scripts/controller/Timeline.js

@@ -20,6 +20,8 @@ function(Core, Paths, HostApp, URI) {
         this.since_id_entity = null;
         this.since_time = 0;
 
+        this.before = {id: null, entity: null, loading: false};
+
         this.container = document.createElement("div");
         this.container.className = this.action;
         this.body = document.createElement("ol");
@@ -43,20 +45,28 @@ function(Core, Paths, HostApp, URI) {
     }
     
 
-    Timeline.prototype.newStatus = function(statuses) {
+    Timeline.prototype.newStatus = function(statuses, append) {
 
         if(statuses != null && statuses.length > 0) {
+
+            var last_status = statuses[statuses.length -1];
+            this.before.id = last_status.id
+            this.before.entity = last_status.entity;
+            this.before.loading = false;
+
             for(var i = statuses.length-1, c=0; i>=c; --i) {
 
                 var status = statuses[i];
-                this.since_id = status.id;
+                if(!append) {
-                this.since_id_entity = status.entity;
+                    this.since_id = status.id;
+                    this.since_id_entity = status.entity;                    
+                }
 
                 if (status.type == "https://tent.io/types/post/status/v0.1.0" || status.type == "https://tent.io/types/post/photo/v0.1.0") {
 
                     var new_node = this.getStatusDOMElement(status);
 
-                    if(this.body.childNodes.length > 0) {
+                    if(!append && this.body.childNodes.length > 0) {
 
                         if(this.body.childNodes.length > this.max_length) {
 
@@ -76,14 +86,14 @@ function(Core, Paths, HostApp, URI) {
 
                 } else if (status.type == "https://tent.io/types/post/repost/v0.1.0") {
 
-                    this.getRepost(status, this.body.firstChild);
+                    this.getRepost(status, append ? this.body.lastChild : this.body.firstChild, append);
                 }
 
             }
         }
     }
 
-    Timeline.prototype.getNewData = function(add_to_search) {
+    Timeline.prototype.getNewData = function(add_to_search, append) {
 
         add_to_search = add_to_search || {};
 
@@ -100,7 +110,7 @@ function(Core, Paths, HostApp, URI) {
 
         url.addSearch("limit", this.max_length);
 
-        if(this.since_id) {
+        if(this.since_id  && !append) {
             url.addSearch("since_id", this.since_id);
             url.addSearch("since_id_entity", this.since_id_entity);
         }
@@ -116,8 +126,8 @@ function(Core, Paths, HostApp, URI) {
 
             try {
 
-                var json = JSON.parse(resp.responseText)
+                var json = JSON.parse(resp.responseText);
-                those.newStatus(json);
+                those.newStatus(json, append);
 
             } catch (e) {
                 console.error(url + " JSON parse error");
@@ -136,6 +146,17 @@ function(Core, Paths, HostApp, URI) {
         }
     }
 
+    Timeline.prototype.getMoreStatusPosts = function() {
+        if (!this.before.loading && this.before.id) {
+            this.before.loading = true;
+            var add_search = {
+                "before_id": this.before.id,
+                "before_id_entity": this.before.entity
+            }
+            this.getNewData(add_search, true);            
+        }
+    }
+
     Timeline.prototype.sendNewMessage = function(content, in_reply_to_status_id, in_reply_to_entity, location, image_data_uri, is_private) {
         var _this = this;
         var callback = function(data) { _this.getNewData(); }

WebKit/scripts/main.js

@@ -44,6 +44,8 @@ function start(view) {
             bungloo.conversation = new Conversation();
             bungloo.search = new Search();
 
+            bungloo.sidebar.showContentForTimeline();
+
         });
 
     }