decidim-comments 0.27.6 → 0.28.0.rc4

data/app/packs/src/decidim/comments/comments.component.js

@@ -1,7 +1,6 @@
 /* eslint id-length: ["error", { "exceptions": ["$"] }] */
 /* eslint max-lines: ["error", {"max": 350, "skipBlankLines": true}] */
 
-
 /**
  * A plain Javascript component that handles the comments.
  *
@@ -12,11 +11,7 @@
 // This is necessary for testing purposes
 const $ = window.$;
 
-import Rails from "@rails/ujs";
-
-import { createCharacterCounter } from "src/decidim/input_character_counter"
-import ExternalLink from "src/decidim/external_link"
-import updateExternalDomainLinks from "src/decidim/external_domain_warning"
+import changeReportFormBehavior from "src/decidim/change_report_form_behavior"
 
 export default class CommentsComponent {
   constructor($element, config) {
@@ -48,8 +43,6 @@ export default class CommentsComponent {
           $(".add-comment textarea", this.$element).prop("disabled", false);
         });
       }
-
-      $(".order-by__dropdown .is-submenu-item a", this.$element).on("click.decidim-comments", () => this._onInitOrder());
     }
   }
 
@@ -63,9 +56,8 @@ export default class CommentsComponent {
       this.mounted = false;
       this._stopPolling();
 
-      $(".add-comment .opinion-toggle .button", this.$element).off("click.decidim-comments");
+      $(".add-comment .opinion-toggle button", this.$element).off("click.decidim-comments");
       $(".add-comment textarea", this.$element).off("input.decidim-comments");
-      $(".order-by__dropdown .is-submenu-item a", this.$element).off("click.decidim-comments");
       $(".add-comment form", this.$element).off("submit.decidim-comments");
       $(".add-comment textarea", this.$element).each((_i, el) => el.removeEventListener("emoji.added", this._onTextInput));
     }
@@ -102,7 +94,7 @@ export default class CommentsComponent {
     const $comment = $(replyHtml);
     const $replies = $(`#comment-${commentId}-replies`);
     this._addComment($replies, $comment);
-    $replies.siblings(".comment__additionalreply").removeClass("hide");
+    $replies.addClass("comment-reply");
     this._finalizeCommentCreation($parent, fromCurrentUser);
   }
 
@@ -125,7 +117,7 @@ export default class CommentsComponent {
     $(".add-comment", $parent).each((_i, el) => {
       const $add = $(el);
       const $form = $("form", $add);
-      const $opinionButtons = $(".opinion-toggle .button", $add);
+      const $opinionButtons = $(".opinion-toggle button", $add);
       const $text = $("textarea", $form);
 
       $opinionButtons.on("click.decidim-comments", this._onToggleOpinion);
@@ -140,6 +132,8 @@ export default class CommentsComponent {
         this._stopPolling();
       });
 
+      document.querySelectorAll(".new_report").forEach((container) => changeReportFormBehavior(container))
+
       if ($text.length && $text.get(0) !== null) {
         // Attach event to the DOM node, instead of the jQuery object
         $text.get(0).addEventListener("emoji.added", this._onTextInput);
@@ -164,14 +158,9 @@ export default class CommentsComponent {
     this.lastCommentId = parseInt($comment.data("comment-id"), 10);
 
     $target.append($container);
-    $container.foundation();
+
     this._initializeComments($container);
-    createCharacterCounter($(".add-comment textarea", $container));
-    $container.find('a[target="_blank"]').each((_i, elem) => {
-      const $link = $(elem);
-      $link.data("external-link", new ExternalLink($link));
-    });
-    updateExternalDomainLinks($container)
+    document.dispatchEvent(new CustomEvent("comments:loaded", { detail: {commentsIds: [this.lastCommentId] }}));
   }
 
   /**
@@ -185,16 +174,18 @@ export default class CommentsComponent {
    */
   _finalizeCommentCreation($parent, fromCurrentUser) {
     if (fromCurrentUser) {
-      const $add = $("> .add-comment", $parent);
-      const $text = $("textarea", $add);
-      const characterCounter = $text.data("remaining-characters-counter");
-      $text.val("");
-      if (characterCounter) {
-        characterCounter.updateStatus();
-      }
-      if (!$add.parent().is(".comments")) {
-        $add.addClass("hide");
-      }
+      const $add = $(".add-comment", $parent);
+      $("textarea", $add).each((_i, text) => {
+        const $text = $(text);
+        // Reset textarea content
+        $text.val("")
+        // Update characterCounter component
+        const characterCounter = $text.data("remaining-characters-counter");
+        if (characterCounter) {
+          characterCounter.handleInput();
+          characterCounter.updateStatus();
+        }
+      })
     }
 
     // Restart the polling
@@ -230,7 +221,7 @@ export default class CommentsComponent {
         "commentable_gid": this.commentableGid,
         "root_depth": this.rootDepth,
         "order": this.order,
-        "after": this.lastCommentId,
+        // From here, the rest of properties are optional
         ...(this.toggleTranslations && { "toggle_translations": this.toggleTranslations }),
         ...(this.lastCommentId && { "after": this.lastCommentId })
       }),
@@ -260,9 +251,9 @@ export default class CommentsComponent {
    * @returns {Void} - Returns nothing
    */
   _setLoading() {
-    const $container = $("> .comments-container", this.$element);
-    $("> .comments", $container).addClass("hide");
-    $("> .loading-comments", $container).removeClass("hide");
+    const $container = $("> #comments", this.$element);
+    $("> .comments", $container).addClass("hidden");
+    $("> .loading-comments", $container).removeClass("hidden");
   }
 
   /**
@@ -283,13 +274,13 @@ export default class CommentsComponent {
    */
   _onToggleOpinion(ev) {
     let $btn = $(ev.target);
-    if (!$btn.is(".button")) {
-      $btn = $btn.parents(".button");
+    if (!$btn.is("button")) {
+      $btn = $btn.parents("button");
     }
 
     const $add = $btn.closest(".add-comment");
     const $form = $("form", $add);
-    const $opinionButtons = $(".opinion-toggle .button", $add);
+    const $opinionButtons = $(".opinion-toggle button", $add);
     const $selectedState = $(".opinion-toggle .selected-state", $add);
     const $alignment = $(".alignment-input", $form);