From 0149feee2036bebc708cdb6e073e5595efeab0d7 Mon Sep 17 00:00:00 2001
From: cdujeu <charles@ajaxplorer.info>
Date: Wed, 11 Sep 2013 23:00:11 +0200
Subject: [PATCH] Comments feed

---
 .../class.CommentsMetaManager.php             |  6 ++
 .../meta.comments/class.CommentsPanel.js      | 75 ++++++++++++-----
 .../plugins/meta.comments/comments_feed.css   | 81 +++++++++++++++++--
 3 files changed, 135 insertions(+), 27 deletions(-)

diff --git a/core/src/plugins/meta.comments/class.CommentsMetaManager.php b/core/src/plugins/meta.comments/class.CommentsMetaManager.php
index 225cfde716..e1041d6fd8 100644
--- a/core/src/plugins/meta.comments/class.CommentsMetaManager.php
+++ b/core/src/plugins/meta.comments/class.CommentsMetaManager.php
@@ -42,6 +42,7 @@ public function switchActions($actionName, $httpVars, $fileVars)
         if($existingFeed == null){
             $existingFeed = array();
         }
+        $mess = ConfService::getMessages();
         switch($actionName){
 
             case "post_comment":
@@ -56,6 +57,7 @@ public function switchActions($actionName, $httpVars, $fileVars)
                 $uniqNode->removeMetadata(AJXP_META_SPACE_COMMENTS, false);
                 $uniqNode->setMetadata(AJXP_META_SPACE_COMMENTS, $existingFeed, false);
                 HTMLWriter::charsetHeader("application/json");
+                $com["hdate"] = AJXP_Utils::relativeDate($com["date"], $mess);
                 echo json_encode($com);
 
                 break;
@@ -63,6 +65,9 @@ public function switchActions($actionName, $httpVars, $fileVars)
             case "load_comments_feed":
 
                 HTMLWriter::charsetHeader("application/json");
+                foreach($existingFeed as &$item){
+                    $item["hdate"] = AJXP_Utils::relativeDate($item["date"], $mess);
+                }
                 echo json_encode($existingFeed);
 
                 break;
@@ -77,6 +82,7 @@ public function switchActions($actionName, $httpVars, $fileVars)
                         continue;
                     }
                     $reFeed[] = $fElement;
+                    $reFeed["hdate"] = AJXP_Utils::relativeDate($reFeed["date"], $mess);
                 }
                 $uniqNode->removeMetadata(AJXP_META_SPACE_COMMENTS, false);
                 $uniqNode->setMetadata(AJXP_META_SPACE_COMMENTS, $reFeed, false);
diff --git a/core/src/plugins/meta.comments/class.CommentsPanel.js b/core/src/plugins/meta.comments/class.CommentsPanel.js
index 5725c3dbd7..6d318830d3 100644
--- a/core/src/plugins/meta.comments/class.CommentsPanel.js
+++ b/core/src/plugins/meta.comments/class.CommentsPanel.js
@@ -22,9 +22,7 @@ Class.create("CommentsPanel", {
     // Warning, method is called statically, there is no "this"
     loadInfoPanel : function(container, node){
 
-        console.log(container);
-
-        container.down("#comments_container").update("Loading comments...");
+        container.down("#comments_container");
         container.down("textarea").observe("focus", function(){
             ajaxplorer.disableAllKeyBindings();
         });
@@ -34,20 +32,38 @@ Class.create("CommentsPanel", {
 
         if(node.getMetadata().get("ajxp_has_comments_feed")){
 
-            var conn = new Connexion();
-            conn.setParameters({
-                file: node.getPath(),
-                get_action: "load_comments_feed"
-            });
-            conn.onComplete = function(transport){
-                container.down("#comments_container").update('');
-                var feed = transport.responseJSON;
-                for(var i=0;i<feed.length;i++){
-                    CommentsPanel.prototype.commentObjectToDOM($H(feed[i]), container, node);
+            var loader = function(pe){
+
+                try{
+                    if(pe && ajaxplorer.getContextHolder().getSelectedNodes()[0] != node){
+                        pe.stop();
+                        return;
+                    }
+                }catch (e){
+                    pe.stop();
+                    return;
                 }
-            };
 
-            conn.sendAsync();
+                var conn = new Connexion();
+                conn.setParameters({
+                    file: node.getPath(),
+                    get_action: "load_comments_feed"
+                });
+                conn.discrete = true;
+                conn.onComplete = function(transport){
+                    container.down("#comments_container").update('');
+                    var feed = transport.responseJSON;
+                    for(var i=0;i<feed.length;i++){
+                        CommentsPanel.prototype.commentObjectToDOM($H(feed[i]), container, node, pe?true:false);
+                    }
+                    CommentsPanel.prototype.refreshScroller(container);
+                };
+
+                conn.sendAsync();
+
+            }
+            loader();
+            var pe = new PeriodicalExecuter(loader, 5);
 
         }
 
@@ -65,6 +81,8 @@ Class.create("CommentsPanel", {
             conn.setMethod('POST');
             conn.onComplete = function(transport){
                 CommentsPanel.prototype.commentObjectToDOM($H(transport.responseJSON), container, node);
+                container.down('textarea').setValue("");
+                CommentsPanel.prototype.refreshScroller(container);
             };
 
             conn.sendAsync();
@@ -73,12 +91,15 @@ Class.create("CommentsPanel", {
 
     },
 
-    commentObjectToDOM: function(hash, container, node){
+    commentObjectToDOM: function(hash, container, node, skipAnim){
+
+        var tpl = new Template('<div class="comment_legend"><span class="icon-remove comment_delete"></span>#{author}, #{hdate}</div><div class="comment_text">#{content}</div>');
+        var el = new Element("div", {className:'comment_content'}).update(tpl.evaluate(hash._object));
 
-        var el = new Element("div").update("<div class='comment_content'><div class='comment_delete'>X</div>"+hash.get("content")+"</div><div class='comment_legend'>By "+hash.get("author")+" on "+hash.get("date")+"</div>");
-        el.setStyle({opacity:0, display:'block'});
+        if(!skipAnim) el.setStyle({opacity:0, display:'block'});
         container.down("#comments_container").insert(el);
-        new Effect.Appear(el, {duration:0.3});
+        if(!skipAnim) new Effect.Appear(el, {duration:0.3});
+
         if(hash.get("author") != ajaxplorer.user.id){
             el.down('.comment_delete').remove();
             return;
@@ -96,12 +117,24 @@ Class.create("CommentsPanel", {
                 container.down("#comments_container").update('');
                 var feed = transport.responseJSON;
                 for(var i=0;i<feed.length;i++){
-                    CommentsPanel.prototype.commentObjectToDOM($H(feed[i]), container, node);
+                    CommentsPanel.prototype.commentObjectToDOM($H(feed[i]), container, node, true);
                 }
+                CommentsPanel.prototype.refreshScroller(container);
             };
-            conn.sendAsync();
+            new Effect.Fade(el, {
+                duration: 0.3,
+                afterFinish:function(){
+                    conn.sendAsync();
+                }
+            });
         });
 
+    },
+
+    refreshScroller:function(container){
+
+        container.up('div[@ajxpClass="infoPanel"]').ajxpPaneObject.scrollbar.recalculateLayout();
+
     }
 
 });
\ No newline at end of file
diff --git a/core/src/plugins/meta.comments/comments_feed.css b/core/src/plugins/meta.comments/comments_feed.css
index 730f380b80..174a16ac34 100644
--- a/core/src/plugins/meta.comments/comments_feed.css
+++ b/core/src/plugins/meta.comments/comments_feed.css
@@ -1,18 +1,87 @@
 #comments_container{
-
     padding: 5px 0;
-
+    color: #555555;
 }
 
 #comments_form{
+    padding: 5px 0;
+    position: relative;
+}
 
+#comments_form textarea{
+    width: 100%;
+    height: 70px;
+    border-radius: 0;
+    border-width: 1px 0;
     padding: 5px;
+    font-size: 12px;
+}
 
+div.double #comments_form textarea, div.triple #comments_form textarea{
+    border-width: 1px 1px;
+    width: 96%;
 }
 
-#comments_form textarea{
+#comments_submit{
+    position: absolute;
+    top: 11px;
+    right: 5px;
+    color: #ffffff;
+    padding: 2px 4px;
+    cursor: pointer;
+}
 
-    width: 100%;
-    height: 70px;
+.scrolling #comments_submit{
+    right: 16px;
+}
+
+.comment_delete {
+    float: right;
+    cursor: pointer;
+    font-size: 10px;
+    color: rgb(174, 183, 192);
+    display: inline-block !important;
+    padding-top: 3px;
+    padding-left: 5px;
+}
+
+.comment_legend {
+    color: rgba(184, 184, 184, 0.6);
+    font-size: 11px;
+    text-transform: lowercase;
+    text-align: center;
+    top: -10px;
+    background-color: #ebedf0;
+    display: inline-block;
+    position: absolute;
+    padding: 0 6px;
+    left: 27%;
+}
+
+.foldedPanel_tooltip .comment_legend{
+    display: none;
+}
+
+.comment_content {
+    border-top: 1px solid #ffffff;
+    font-size: 13px;
+    padding: 10px 5px 0 5px;
+    margin: 10px 0;
+    position: relative;
+}
 
-}
\ No newline at end of file
+.comment_content:nth-child(even) .comment_text {
+    text-align: right;
+}
+
+.scrolling div.comment_text{
+    padding-right: 10px;
+}
+
+.foldedPanel_tooltip .comment_text{
+    color: white;
+}
+
+.foldedPanel_tooltip .comment_content:nth-child(even) .comment_text {
+    text-align: left;
+}