implemented scroll to load more
This commit is contained in:
parent
4c22917d8b
commit
b210e6ee32
6 changed files with 150 additions and 50 deletions
|
@ -33,10 +33,12 @@ function(HostApp, Timeline, URI, Paths, Core) {
|
|||
}
|
||||
|
||||
|
||||
Mentions.prototype.newStatus = function(statuses) {
|
||||
|
||||
Timeline.prototype.newStatus.call(this, statuses);
|
||||
Mentions.prototype.newStatus = function(statuses, append) {
|
||||
|
||||
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) {
|
||||
|
|
|
@ -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() {
|
||||
|
||||
}
|
||||
|
|
|
@ -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 = [];
|
||||
for (var i = 0; i < results.length; i++) {
|
||||
var result = results[i].source;
|
||||
var status = {
|
||||
entity: result.entity,
|
||||
content: {
|
||||
text: result.content
|
||||
},
|
||||
published_at: result.published_at,
|
||||
id: result.public_id,
|
||||
type: result.post_type,
|
||||
version: result.post_version,
|
||||
app: {
|
||||
url: "http://skate.io",
|
||||
name: "skate.io"
|
||||
},
|
||||
mentions: []
|
||||
if (results && results.length > 0) {
|
||||
|
||||
_this.before.loading = false;
|
||||
|
||||
var statuses = [];
|
||||
for (var i = 0; i < results.length; i++) {
|
||||
var result = results[i].source;
|
||||
var status = {
|
||||
entity: result.entity,
|
||||
content: {
|
||||
text: result.content
|
||||
},
|
||||
published_at: result.published_at,
|
||||
id: result.public_id,
|
||||
type: result.post_type,
|
||||
version: result.post_version,
|
||||
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 status = statuses[i];
|
||||
if (status.type == "https://tent.io/types/post/status/v0.1.0") {
|
||||
|
||||
var new_node = _this.getStatusDOMElement(status);
|
||||
_this.body.appendChild(new_node);
|
||||
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();
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
this.since_id_entity = status.entity;
|
||||
if(!append) {
|
||||
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)
|
||||
those.newStatus(json);
|
||||
var json = JSON.parse(resp.responseText);
|
||||
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(); }
|
||||
|
|
Reference in a new issue