Added functionality to highlight a comment.

resources/assets/js/controllers.js

@@ -144,17 +144,4 @@ module.exports = function (ngApp, events) {
         };
 
     }]);
-
-    // Controller used to fetch all comments for a page
-    ngApp.controller('CommentListController', ['$scope', '$http', '$timeout', '$location', function ($scope, $http, $timeout, $location) {
-
-        function focusLinkedComment(linkedCommentId) {
-            let comment = angular.element('#' + linkedCommentId);
-            if (comment.length === 0) {
-                return;
-            }
-
-            window.setupPageShow.goToText(linkedCommentId);
-        }
-    }]);
 };

resources/assets/js/vues/components/comments/comment.js

@@ -59,7 +59,6 @@ const props = ['initialComment', 'index', 'level', 'permissions', 'currentUserId
 
 function data() {
     return {
-        commentHref: null,
         trans: trans,
         comments: [],
         showEditor: false,
@@ -144,13 +143,11 @@ const methods = {
 };
 
 const computed = {
-    commentId: {
+    commentId: function () {
-        get: function () {
+        return `comment-${this.comment.page_id}-${this.comment.id}`;
-            return `comment-${this.comment.page_id}-${this.comment.id}`;
+    },
-        },
+    commentHref: function () {
-        set: function () {
+        return `#?cm=${this.commentId}`;
-            this.commentHref = `#?cm=${this.commentId}`
-        }
     }
 };
 

resources/assets/js/vues/page-comments.js

@@ -45,7 +45,7 @@ let computed = {
 function mounted() {
     this.pageId = Number(this.$el.getAttribute('page-id'));
     // let linkedCommentId = this.$route.query.cm;
-    let linkedCommentId = null;
+    let linkedCommentId = getUrlParameter('cm');
     this.$http.get(window.baseUrl(`/ajax/page/${this.pageId}/comments/`)).then(resp => {
         if (!isCommentOpSuccess(resp)) {
             // just show that no comments are available.
@@ -60,9 +60,13 @@ function mounted() {
         if (!linkedCommentId) {
             return;
         }
-        focusLinkedComment(linkedCommentId);
+
+        // adding a setTimeout to give comment list some time to render.
+        setTimeout(function() {
+            focusLinkedComment(linkedCommentId);
+        });
     }).catch(err => {
-        this.$events.emit('error', 'errors.comment_list');
+        this.$events.emit('error', trans('errors.comment_list'));
     });
 }
 
@@ -91,6 +95,22 @@ function beforeDestroy() {
     this.$off('new-comment');
 }
 
+function getUrlParameter(name) {
+    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+    var results = regex.exec(location.hash);
+    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+}
+
+function focusLinkedComment(linkedCommentId) {
+    let comment = document.getElementById(linkedCommentId);
+    if (comment && comment.length === 0) {
+        return;
+    }
+
+    window.setupPageShow.goToText(linkedCommentId);
+}
+
 module.exports = {
     data, methods, mounted, computed, components: {
         comment, commentReply