better conversation view

WebKit/css/default.css

@@ -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 > .post {
-
-}
-
-#content ol > li:first-child {
 	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 {
+#content ol > li > .post:hover {
-	background: #dedede;
+	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;
+}

WebKit/scripts/controller/Conversation.js

@@ -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;
 
 });

WebKit/scripts/controller/Timeline.js

@@ -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 = {};
 
@@ -61,6 +61,7 @@ function(Core, APICalls, HostApp, URI) {
         this.pages = _statuses.pages;
         
         statuses = _statuses.posts;
+
         if(statuses != null && statuses.length > 0) {
 
             this.before.loading = false;
@@ -73,6 +74,7 @@ function(Core, APICalls, HostApp, URI) {
                 if(!append) {
                     this.since_id = status.id;
                     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]);
             }

WebKit/scripts/helper/ConversationNode.js

@@ -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;
+});

WebKit/scripts/helper/Core.js

@@ -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.li.id = "post-" + status.id + "-" + this.action;
-        template.item.status = status;
+        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;
     }