#47 - Adds direct linking to comments.

resources/assets/js/controllers.js

@@ -776,7 +776,7 @@ module.exports = function (ngApp, events) {
     }]);
 
     // Controller used to fetch all comments for a page
-    ngApp.controller('CommentListController', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
+    ngApp.controller('CommentListController', ['$scope', '$http', '$timeout', '$location', function ($scope, $http, $timeout, $location) {
         let vm = this;
         $scope.errors = {};
         // keep track of comment levels
@@ -808,7 +808,7 @@ module.exports = function (ngApp, events) {
             if (vm.permissions[propOwn] && comment.created_by.id === vm.current_user_id) {
                 return true;
             }
-            
+
             return false;
         };
 
@@ -816,6 +816,9 @@ module.exports = function (ngApp, events) {
             return vm.permissions.comment_create;
         };
 
+        // check if there are is any direct linking
+        let linkedCommentId = $location.search().cm;
+
         $timeout(function() {
             $http.get(window.baseUrl(`/ajax/page/${$scope.pageId}/comments/`)).then(resp => {
                 if (!isCommentOpSuccess(resp)) {
@@ -829,6 +832,13 @@ module.exports = function (ngApp, events) {
                 vm.permissions = resp.data.permissions;
                 vm.current_user_id = resp.data.user_id;
                 setTotalCommentMsg();
+                if (!linkedCommentId) {
+                    return;
+                }
+                $timeout(function() {
+                    // wait for the UI to render.
+                    focusLinkedComment(linkedCommentId);
+                });
             }, checkError);
         });
 
@@ -844,6 +854,15 @@ module.exports = function (ngApp, events) {
             }
         }
 
+        function focusLinkedComment(linkedCommentId) {
+            let comment = angular.element('#' + linkedCommentId);
+            if (comment.length === 0) {
+                return;
+            }
+
+            window.setupPageShow.goToText(linkedCommentId);
+        }
+
         function checkError(response) {
             let msg = null;
             if (isCommentOpSuccess(response)) {

resources/assets/js/directives.js

@@ -889,7 +889,8 @@ module.exports = function (ngApp, events) {
                     scope.$destroy();
                 });
 
-                element.on('click', function () {
+                element.on('click', function (e) {
+                    e.preventDefault();
                     var $container = element.parents('.comment-actions').first();
                     if (!$container.length) {
                         console.error('commentReplyLink directive should be placed inside a container with class comment-box!');
@@ -933,13 +934,14 @@ module.exports = function (ngApp, events) {
             },
             link: function (scope, element, attr, ctrl) {
 
-                element.on('click', function() {
+                element.on('click', function(e) {
-                   var resp = $window.confirm('This will remove the content of the comment, are you sure you want to continue?');
+                    e.preventDefault();
-                   if (!resp) {
+                    var resp = $window.confirm('This will remove the content of the comment, are you sure you want to continue?');
-                       return;
+                    if (!resp) {
-                   }
+                        return;
+                    }
 
-                   ctrl.delete(scope.comment);
+                    ctrl.delete(scope.comment);
                 });
             }
         };

resources/assets/js/pages/page-show.js

@@ -161,6 +161,8 @@ let setupPageShow = window.setupPageShow = function (pageId) {
         }
     });
 
+    // in order to call from other places.
+    window.setupPageShow.goToText = goToText;
 };
 
 module.exports = setupPageShow;

resources/views/comments/list-item.blade.php

@@ -17,7 +17,7 @@
                 <li ng-if="::(level < 3 && vm.canComment())"><a href="#" comment-reply-link no-comment-reply-dupe="true" comment="comment" is-reply="true">{{ trans('entities.comment_reply') }}</a></li>
                 <li ng-if="::vm.canEditDelete(comment, 'comment_update')"><a href="#" comment-reply-link no-comment-reply-dupe="true" comment="comment" >{{ trans('entities.comment_edit') }}</a></li>
                 <li ng-if="::vm.canEditDelete(comment, 'comment_delete')"><a href="#" comment-delete-link comment="comment" >{{ trans('entities.comment_delete') }}</a></li>
-                <li>Created <a title="@{{::comment.created.day_time_str}}" href="#comment-@{{::comment.id}}-@{{::pageId}}">@{{::comment.created.diff}}</a></li>
+                <li>Created <a title="@{{::comment.created.day_time_str}}" href="#?cm=comment-@{{::pageId}}-@{{::comment.id}}">@{{::comment.created.diff}}</a></li>
                 <li ng-if="::comment.updated"><span title="@{{::comment.updated.day_time_str}}">@{{ ::vm.trans('entities.comment_updated_text', { updateDiff: comment.updated.diff }) }}
                         <a href="@{{::comment.updated_by.profile_url}}">@{{::comment.updated_by.name}}</a></span></li>
             </ul>