From 037f382d7251ef1acac7506e23981667f455c6e2 Mon Sep 17 00:00:00 2001 From: jeena Date: Mon, 9 Sep 2013 00:36:31 +0200 Subject: [PATCH] better conversation view --- WebKit/css/default.css | 49 +++++++++++--------- WebKit/scripts/controller/Conversation.js | 54 ++++++++++++++++++++--- WebKit/scripts/controller/Timeline.js | 12 +++-- WebKit/scripts/helper/ConversationNode.js | 25 +++++++++++ WebKit/scripts/helper/Core.js | 15 ++++--- 5 files changed, 120 insertions(+), 35 deletions(-) create mode 100644 WebKit/scripts/helper/ConversationNode.js diff --git a/WebKit/css/default.css b/WebKit/css/default.css index 3e6d74f..da008f0 100644 --- a/WebKit/css/default.css +++ b/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 { +#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; +} diff --git a/WebKit/scripts/controller/Conversation.js b/WebKit/scripts/controller/Conversation.js index 6116274..02287df 100644 --- a/WebKit/scripts/controller/Conversation.js +++ b/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; }); \ No newline at end of file diff --git a/WebKit/scripts/controller/Timeline.js b/WebKit/scripts/controller/Timeline.js index b6fcde9..a22bc6d 100644 --- a/WebKit/scripts/controller/Timeline.js +++ b/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 = {}; @@ -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]); } diff --git a/WebKit/scripts/helper/ConversationNode.js b/WebKit/scripts/helper/ConversationNode.js new file mode 100644 index 0000000..64c882c --- /dev/null +++ b/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; +}); \ No newline at end of file diff --git a/WebKit/scripts/helper/Core.js b/WebKit/scripts/helper/Core.js index ab65e60..c11b505 100644 --- a/WebKit/scripts/helper/Core.js +++ b/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.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; }