js: fix and rewirte comment-tree

diff --git a/src/newslash_web/public/js/comment-tree.js b/src/newslash_web/public/js/comment-tree.js
index ba042aa..0ebe89d 100644 (file)
--- a/src/newslash_web/public/js/comment-tree.js
+++ b/src/newslash_web/public/js/comment-tree.js
@@ -1,91 +1,91 @@
 /* comment-tree.js */
 var commentTree = {};
 
-commentTree.init = function () {
+commentTree.run = function (params) {
+  /* define exotic parameters */
+  params = params || {};
+  var userConfig = params.userConfig || {};
+  var siteConfig = params.siteConfig || {};
+  var pageInfo = params.pageInfo || {};
+  var user = params.user || {};
+
+  if (!params.el) {
+    console.log('error in commentTree.run(): no element given');
+    return;
+  }
 
   /*
-   * register <comment-header>
+   * register <comment-tree>
    */
-  Vue.component('comment-header', {
-    template: '#comment-header-template',
+  Vue.component('comment-tree', {
+    template: '#comment-tree-template',
+    props: [
+    ],
     data: function () {
       return {
-        userConfig: userConfig.comment || {},
-        archived: page.archived || false,
-        commentAllowed: page.comment_allowed || false,
-        savable: user.is_login || false,
-        isConfigVisible: false,
+        comments: [],
+        commentAllowed: pageInfo.comment_allowed,
+        archived: pageInfo.archived,
+        discussionId: pageInfo.discussion_id,
+        rootId: pageInfo.id,
+        parentId: pageInfo.parent_id || 0,
       };
     },
-    methods: {
-      saveConfig: saveConfig,
+    created: function commentTreeCreated() {
+      newslash.getComments(this.discussionId, this.parentId).then(
+        (resp) => { // success
+          var comments = resp.comments;
+          
+          // build comment tree
+          var commentIndex = {};
+          comments.forEach(comment => {
+            comment._children = [];
+            commentIndex[comment.cid] = comment;
+            if (comment.pid && commentIndex[comment.pid]) {
+              commentIndex[comment.pid]._children.push(comment);
+            }
+          });
+          this.comments = resp.comments;
+        },
+        (resp) => { // fail
+          statusIndicator.error("comment_loading_error");
+        }
+      );
     },
   });
-  
-  function saveConfig() {
-    const data = {
-      type: "config",
-      config: this.$data.userConfig,
-    };
-    if (statusBar) {
-      statusBar.loading("saving");
-    }
-    this.$newslash.post('user', data,
-                        (response) => { // success
-                          statusBar.done("saved");
-                        },
-                        (response) => { // fail
-                          statusBar.error("save_failed");
-                        }
-                       );
-  }
 
   /*
-   * register <comment-tree>
+   * register <comment-header>
    */
-  Vue.component('comment-tree', {
-    template: '#comment-tree-template',
+  Vue.component('comment-header', {
+    template: '#comment-header-template',
     data: function () {
       return {
-        commentAllowed: page.comment_allowed,
-        archived: page.archived || false,
-        comments: [],
-        rootID: 0,
+        config: userConfig.comment || {},
+        savable: user.is_login || 0,
+        commentAllowed: pageInfo.comment_allowed,
+        archived: pageInfo.archived,
+        showPrefs: false,
       };
     },
-    created: commentTreeCreated,
-  });
-
-  function commentTreeCreated() {
-    if (!page.discussion_id) {
-      return;
-    }
-    var parentID;
-    if (page.type == "comment") {
-      parentID = page.comment_id;
-      this.rootID = page.comment_id;
-    }
-
-    newslash.getComments(page.discussion_id, parentID).then(
-      (resp) => { // success
-        var comments = resp.comments;
-
-        // build comment tree
-        var commentIndex = {};
-        comments.forEach(comment => {
-          comment._children = [];
-          commentIndex[comment.cid] = comment;
-          if (comment.pid && commentIndex[comment.pid]) {
-            commentIndex[comment.pid]._children.push(comment);
-          }
-        });
-        this.comments = resp.comments;
-      },
-      (resp) => { // fail
-        statusBar.error("comment_loading_error");
+    methods: {
+      saveConfig: function saveConfig() {
+        const data = {
+          type: "config",
+          config: this.$data.config,
+        };
+        statusIndicator.loading("saving");
+        this.$newslash.post('user', data,
+                            (response) => { // success
+                              statusIndicator.done("saved");
+                            },
+                            (response) => { // fail
+                              statusIndicator.error("save_failed");
+                            }
+                           );
       }
-    );
-  }
+    },
+  });
   
   /*
    * register <comment>
@@ -104,8 +104,8 @@ commentTree.init = function () {
         showShareButtons: false,
 
         displayForce: false,
-        commentAllowed: page.comment_allowed,
-        archived: page.archived || false,
+        commentAllowed: pageInfo.comment_allowed,
+        archived: pageInfo.archived || false,
 
         isFormVisible: false,
       };
@@ -137,32 +137,31 @@ commentTree.init = function () {
       },
       reasonText: function () {
         if (this.comment.reason != 0) {
-          return "：" + modReasons[this.comment.reason];
+          return "：" + siteConfig.modReasons[this.comment.reason];
         }
         return "";
       },
       isScoreVisible: function () {
-        return !userConfig.hide_score
+        return !userConfig.comment.hide_score
           && this.comment.lastmod != 0
           && this.comment.points != 0;
       },
       isFoldedComment: function () {
-        return this.comment.points < userConfig.fold_threshold
+        return this.comment.points < userConfig.comment.fold_threshold
           && !this.comment.isPreview
           && !this.displayForce;
       },
       isHiddenComment: function () {
-        return this.comment.points < userConfig.show_threshold
+        return this.comment.points < userConfig.comment.show_threshold
           && !this.comment.isPreview
           && !this.displayForce;
       },
       isHiddenBoxMode: function () {
         if (this.comment.isPreview
             || this.displayForce
-            || this.comment.points >= userConfig.show_threshold) {
+            || this.comment.points >= userConfig.comment.show_threshold) {
           return 0;
         }
-
         // 子アイテムの少なくとも1つが表示なら -> 「1件の非表示コメント」表示
         var count = _countHiddenItems(this.comment);
         if (count[0] != count[1]) {
@@ -172,7 +171,7 @@ commentTree.init = function () {
       },
       hiddenCount: function () {
         // when point >= threshold: hide "hidden" box.
-        if (this.comment.points >= userConfig.show_threshold) {
+        if (this.comment.points >= userConfig.comment.show_threshold) {
           return 0;
         }
         // 子アイテムの少なくとも1つが表示なら -> 「1件の非表示コメント」表示
@@ -190,7 +189,7 @@ commentTree.init = function () {
         return this.commentAllowed && !this.comment.isPreview;
       },
       isSignatureVisible: function () {
-        return !userConfig.hide_signature && this.comment.signature;
+        return !userConfig.comment.hide_signature && this.comment.signature;
       },
     },
     methods: {
@@ -260,7 +259,7 @@ commentTree.init = function () {
   function moderate() {
     var data = {
       reason: Number(this.moderateReason),
-      discussion_id: page.discussion_id,
+      discussion_id: pageInfo.discussion_id,
       cid: Number(this.comment.cid),
       action: 'moderate',
     };
@@ -304,12 +303,11 @@ commentTree.init = function () {
       }
     );
   }
-
   
   function _countHiddenItems(comment) {
     if (!comment || !comment._children) {
       console.log("_countHiddenItems: invalid parameter given");
-      return 0;
+      return [0, 0];
     }
     var result = [1, 0];
     for (var i = 0; i < comment._children.length; i++) {
@@ -317,7 +315,7 @@ commentTree.init = function () {
       result[0] += ret[0];
       result[1] += ret[1];
     }
-    if (comment.points < userConfig.show_threshold) {
+    if (comment.points < userConfig.comment.show_threshold) {
       result[1]++;
     }
     return result;
@@ -375,8 +373,8 @@ commentTree.init = function () {
     var data = {
       title: this.rawTitle,
       comment: this.rawComment,
-      discussion_id: page.discussion_id,
-      stoid: page.stoid,
+      discussion_id: pageInfo.discussion_id,
+      stoid: pageInfo.stoid,
       pid: this.replyTo ? this.replyTo.pid : 0,
       action: 'preview',
     };
@@ -396,7 +394,7 @@ commentTree.init = function () {
                         },
                         (response) => { // fail
                           if (response.body.message) {
-                            statusBar.error(response.body.message);
+                            statusIndicator.error(response.body.message);
                           }
                         }
                        );
@@ -411,8 +409,8 @@ commentTree.init = function () {
     var data = {
       title: this.rawTitle,
       comment: this.rawComment,
-      discussion_id: page.discussion_id,
-      stoid: page.stoid,
+      discussion_id: pageInfo.discussion_id,
+      stoid: pageInfo.stoid,
       pid: 0,
       action: 'post',
       csrf_token: this.csrfToken,
@@ -420,8 +418,8 @@ commentTree.init = function () {
 
     if (this.replyTo) {
       data.pid = this.replyTo.cid;
-    } else if (page.comment_id) {
-      data.pid = page.comment_id;
+    } else if (pageInfo.comment_id) {
+      data.pid = pageInfo.comment_id;
     }
 
     this.$newslash.post("comment", data,
@@ -445,21 +443,12 @@ commentTree.init = function () {
       },
       (response) => { // fail
         if (response.body.message) {
-          statusBar.error(response.body.message);
+          statusIndicator.error(response.body.message);
         }
       }
     );
   }
-};
-
-commentTree.init();
 
-commentTree.run = function (params) {
-  params = params || {};
-  if (!params.el) {
-    console.log('error in commentTree.run(): no element given');
-    return;
-  }
   this.vm = new Vue({el: params.el});
 };