jeena/Bungloo
Archived
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

better conversation view

Browse source
This commit is contained in:
jeena 2013-09-09 00:36:31 +02:00
parent 25e3f203e6
commit 037f382d72
5 changed files with 120 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

49
WebKit/css/default.css
View file

@ -92,7 +92,7 @@ ol {
padding: 0;
}
ol li, .error, header.profile {
ol li .post, .error, header.profile {
clear: both;
padding: 8px;
background: #eee;
@ -109,37 +109,33 @@ ol li, .error, header.profile {
color: red;
}
#content ol > li {
}
#content ol > li:first-child {
#content ol > li:first-child > .post {
border-top: 0;
}
#content ol > li:nth-child(odd), .error, header.profile {
#content ol > li:nth-child(odd) > .post, .error, header.profile, #content #conversation-tree li.odd > .post {
background: #fafafa;
}
#content ol > li:nth-child(even) {
#content ol > li:nth-child(even) > .post, #content #conversation-tree li.even > .post {
background: #f2f2f2;
}
#content ol > li:hover {
background: #dedede;
#content ol > li > .post:hover {
background: #dedede !important;
}
#content ol > li.highlighteffect {
#content ol > li.highlighteffect > .post {
background-color: #FFFBD0;
-webkit-transition: background-color 200ms linear;
}
#content ol > li.highlighteffect-after {
#content ol > li.highlighteffect-after > .post {
-webkit-transition: background-color 1000ms linear;
}
#content ol > li:after, header.profile:after {
#content ol > li .post:after, header.profile:after {
content: ".";
display: block;
clear: both;
@ -171,7 +167,7 @@ header.profile h1 + p {
margin-bottom: 10px;
}
.highlight {
.highlight > .post {
border-right: 5px solid #f17779;
}
@ -237,11 +233,11 @@ p {
font-weight: bold;
}
li:hover .from {
li .post:hover .from {
display: block;
}
li .from {
li .post .from {
position: absolute;
right: 3.5em;
display: none;
@ -260,7 +256,7 @@ li .from {
border-top: 0;
}
li:last-child:hover .from {
li:last-child:not(:first-child) .post:hover .from {
top: -1.8em;
bottom: auto;
-webkit-border-top-left-radius: 8px;
@ -290,7 +286,7 @@ aside {
display: none; /* FIXME: remove this; */
}
li:hover aside .reply_to, li:hover aside .repost, li:hover aside .remove, li:hover aside .ago:before {
li .post:hover > aside .reply_to, li .post:hover > aside .repost, li .post:hover > aside .remove, li .post:hover > aside .ago:before {
visibility: visible;
}
@ -317,11 +313,11 @@ li:hover aside .reply_to, li:hover aside .repost, li:hover aside .remove, li:hov
background-position: -128px 0;
}
li.mentioned {
li.mentioned .post {
border-right: 5px solid #00317a;
}
.mentions li.mentioned {
.mentions li.mentioned .post {
border-right: 0;
}
@ -483,3 +479,16 @@ p.noresult {
#status_bar p { float: right; margin: 0; padding: 0; }
#status_bar span { display: inline-block; margin: 4px 5px 0 5px; }
#conversation-tree ol {
border-left: 1px solid #c9c9c9;
clear: both;
}
#conversation-tree ol li {
clear: both !important;
padding-left: 14px;
}
#conversation-tree ol li .post {
border-left: 1px solid #c9c9c9;
}

54
WebKit/scripts/controller/Conversation.js
View file

@ -2,10 +2,11 @@ define([
"helper/HostApp",
"helper/Core",
"helper/APICalls",
"lib/URI"
"lib/URI",
"helper/ConversationNode"
],
function(HostApp, Core, APICalls, URI) {
function(HostApp, Core, APICalls, URI, ConversationNode) {
function Conversation(standalone) {
@ -30,6 +31,7 @@ function(HostApp, Core, APICalls, URI) {
$(document).keydown(function(e) {
if (e.keyCode == 27) { // Esc
_this.stopLoading = true;
_this.makeTree();
}
});
}
@ -46,7 +48,6 @@ function(HostApp, Core, APICalls, URI) {
Conversation.addStatus = function(status) {
this.body.appendChild(this.getStatusDOMElement(status));
}
@ -54,6 +55,7 @@ function(HostApp, Core, APICalls, URI) {
Conversation.prototype.showStatus = function(id, entity) {
this.body.innerHTML = "";
this.rootNode = null;
this.current_post_id = id;
this.current_entity = entity;
this.append(id, entity);
@ -85,17 +87,23 @@ function(HostApp, Core, APICalls, URI) {
var status = _statuses.post;
var dom_element = _this.getStatusDOMElement(status);
var cNode = new ConversationNode(dom_element);
dom_element.cNode = cNode;
if (node) {
if(add_after) {
if(add_after) { // is a child of node
node.parentNode.insertBefore(dom_element, node.nextSibling);
} else {
node.cNode.addChild(cNode);
} else { // is a parent of node
node.parentNode.insertBefore(dom_element, node);
cNode.addChild(node.cNode);
}
} else {
} else { // is start node (doesn't have to be root, can have parents)
dom_element.className = "highlight";
_this.body.appendChild(dom_element);
_this.rootNode = cNode;
}
// child posts
@ -115,6 +123,10 @@ function(HostApp, Core, APICalls, URI) {
}
}
if(!entity) {
entity = node.status.entity
}
var url = HostApp.serverUrl("post")
.replace(/\{entity\}/, encodeURIComponent(entity))
.replace(/\{post\}/, id)
@ -137,7 +149,7 @@ function(HostApp, Core, APICalls, URI) {
// don't load if it is already there
var not_already_there = !document.getElementById("post-" + status.post + "-" + _this.action);
if(not_already_there && status.type.startsWith("https://tent.io/types/status/v0")) {
_this.append(status.post, status.entity ,node, true);
_this.append(status.post, status.entity, node, true);
}
}
}
@ -153,6 +165,34 @@ function(HostApp, Core, APICalls, URI) {
}
Conversation.prototype.makeTree = function() {
var root_ul = document.createElement("ol");
root_ul.id = "conversation-tree";
var root_li = this.body.firstChild;
root_ul.appendChild(root_li);
function addChildren(node) {
var ul = document.createElement("ol");
node.appendChild(ul);
var children = node.cNode.children;
for (var i = 0; i < children.length; i++) {
var child = children[i].dom_node;
ul.appendChild(child);
addChildren(child);
};
}
addChildren(root_li);
this.body.parentNode.replaceChild(root_ul, this.body);
this.body = root_ul;
var lis = this.body.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className += " " + (i % 2 == 0 ? "odd" : "even");
};
};
return Conversation;
});

12
WebKit/scripts/controller/Timeline.js
View file

@ -19,7 +19,7 @@ function(Core, APICalls, HostApp, URI) {
this.timeout = 10 * 1000; // every 10 seconds
this.since_id = null;
this.since_id_entity = null;
this.since_time = 0;
this.since_time = null;
this.pages = {};
@ -59,8 +59,9 @@ function(Core, APICalls, HostApp, URI) {
}
this.pages = _statuses.pages;
statuses = _statuses.posts;
if(statuses != null && statuses.length > 0) {
this.before.loading = false;
@ -72,7 +73,8 @@ function(Core, APICalls, HostApp, URI) {
var status = statuses[i];
if(!append) {
this.since_id = status.id;
this.since_id_entity = status.entity;
this.since_id_entity = status.entity;
this.since_time = status.received_at;
}
if (status.type == "https://tent.io/types/status/v0#" || status.type == "https://tent.io/types/status/v0#reply") {
@ -132,6 +134,10 @@ function(Core, APICalls, HostApp, URI) {
uri.addSearch("max_refs", 20);
uri.addSearch("profiles", "entity");
if(this.since_time) {
uri.addSearch("since", this.since_time);
}
for (key in add_to_search) {
uri.addSearch(key, add_to_search[key]);
}

25
WebKit/scripts/helper/ConversationNode.js Normal file
View file

@ -0,0 +1,25 @@
define([
],
function() {
function ConversationNode(dom_node) {
this.dom_node = dom_node;
this.parent = null;
this.children = [];
}
ConversationNode.prototype.addChild = function(node) {
this.children.push(node);
node.parent = this;
};
ConversationNode.prototype.toString = function() {
return "{ \"" + this.dom_node.status.entity + "\": [" + this.children.toString() + "]}";
};
return ConversationNode;
});

15
WebKit/scripts/helper/Core.js
View file

@ -37,7 +37,11 @@ function(jQuery, APICalls, URI, HostApp, Markdown) {
var a = document.createElement("a");
var item = document.createElement("li");
var li = document.createElement("li");
var item = document.createElement("div");
item.className = "post";
li.appendChild(item);
var aside = document.createElement("aside");
item.appendChild(aside);
@ -143,6 +147,7 @@ function(jQuery, APICalls, URI, HostApp, Markdown) {
from.appendChild(source)
this.template = {
li: li,
item: item,
reply_to: reply_to,
is_private: is_private,
@ -188,8 +193,8 @@ function(jQuery, APICalls, URI, HostApp, Markdown) {
var template = this.getTemplate();
template.item.id = "post-" + status.id + "-" + this.action;
template.item.status = status;
template.li.id = "post-" + status.id + "-" + this.action;
template.li.status = status;
if (HostApp.stringForKey("entity") == status.entity && typeof status.__repost == "undefined") {
template.remove.onclick = function() {
@ -206,7 +211,7 @@ function(jQuery, APICalls, URI, HostApp, Markdown) {
}
if (HostApp.stringForKey("entity") == status.entity) {
template.item.className += " own";
template.li.className += " own";
}
template.reply_to.onclick = function() {
@ -361,7 +366,7 @@ function(jQuery, APICalls, URI, HostApp, Markdown) {
}
}
return template.item;
return template.li;
}