Enhance comment time formatting with localized time ago display

modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/ar.json

@@ -237,6 +237,19 @@
     "CssClass": "فئة CSS",
     "TagsHelpText": "يجب أن تكون العلامات مفصولة بفواصل (على سبيل المثال: tag1، tag2، tag3)",
     "ThisPartOfContentCouldntBeLoaded": "لا يمكن تحميل هذا الجزء من المحتوى.",
+    "JustNow": "الآن",
+    "MinuteAgo": "دقيقة واحدة مضت",
+    "MinutesAgo": "{0} دقائق مضت",
+    "HourAgo": "ساعة واحدة مضت",
+    "HoursAgo": "{0} ساعات مضت",
+    "YesterdayAt": "أمس في {0}",
+    "DayAt": "{0} في {1}",
+    "MonthDayAt": "{0} {1} في {2}",
+    "FullDate": "{0} {1} {2}",
+    "Minute": "د",
+    "Hour": "س",
+    "Day": "ي",
+    "Week": "أ",    
     "DuplicateCommentAttemptMessage": "تم اكتشاف محاولة نشر تعليق مكررة. لقد تم بالفعل تقديم تعليقك.",
     "ChooseAnActionForBlog": "اختر إجراءً للمدونة",
     "AssignBlogPostsToOtherBlog": "تعيين مشاركات المدونة إلى مدونة أخرى",

modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json

@@ -255,6 +255,19 @@
     "CommentAlertMessage": "There are {0} comments waiting for approval",
     "Settings:Menu:CmsKit": "CMS",
     "CommentsAwaitingApproval": "Comments Awaiting Approval",
+    "JustNow": "Just now",
+    "MinuteAgo": "1 minute ago",
+    "MinutesAgo": "{0} minutes ago",
+    "HourAgo": "1 hour ago",
+    "HoursAgo": "{0} hours ago",
+    "YesterdayAt": "Yesterday at {0}",
+    "DayAt": "{0} at {1}",
+    "MonthDayAt": "{0} {1} at {2}",
+    "FullDate": "{0} {1} {2}",
+    "Minute": "m",
+    "Hour": "h",
+    "Day": "d",
+    "Week": "w",
     "CommentSubmittedForApproval": "Your comment has been submitted for approval.",
     "ChooseAnActionForBlog": "Choose an action for the blog",
     "AssignBlogPostsToOtherBlog": "Assign blog posts to another blog",

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml

@@ -22,7 +22,7 @@
         @((string.IsNullOrWhiteSpace(author.Name)
     ? author.UserName
     : author.Name + " " + author.Surname).Trim())
-        <small class="text-muted float-end" style="opacity: .5; font-size: 14px">@creationTime.ToString()</small>
+        <small class="text-muted float-end" style="opacity: .5; font-size: 14px" comment-time="@creationTime.ToUniversalTime().ToString("o")"></small>
     </span>;
 }
 @{

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/default.js

@@ -13,6 +13,79 @@
             };
         }
 
+        function isDoubleClicked(element) {
+            if (element.data("isclicked")) return true;
+
+            element.data("isclicked", true);
+            setTimeout(function () {
+                element.removeData("isclicked");
+            }, 2000);
+        }
+
+        function registerCommentTime($container) {
+            $container.find('[comment-time]').each(function () {
+                const $timeElement = $(this);
+
+                const creationTime = moment.utc($timeElement.attr('comment-time'));
+                var timeAgo = formatTime(creationTime);
+                var readableTime = formatReadableTimestamp(creationTime);
+
+                $timeElement.text(timeAgo);
+                $timeElement.on('click', function () {
+                    if (isDoubleClicked($timeElement)) return;
+
+                    $timeElement.text(readableTime);
+                    setTimeout(function () {
+                        $timeElement.trigger('focusout');
+                    }, 2000);
+
+                });
+
+                $timeElement.on('focusout', function () {
+                    $timeElement.text(timeAgo);
+                });
+            });
+        }
+
+        function formatTime(creationTime) {
+            let now = moment();
+            let duration = moment.duration(now.diff(creationTime));
+            if (duration.asMinutes() < 1) {
+                return l('JustNow');
+            } else if (duration.asMinutes() < 60) {
+                return `${Math.floor(duration.asMinutes())} ${l('Minute')}`;
+            } else if (duration.asHours() < 24) {
+                return `${Math.floor(duration.asHours())} ${l('Hour')}`;
+            } else if (duration.asDays() < 7) {
+                return `${Math.floor(duration.asDays())} ${l('Day')}`;
+            } else {
+                return `${Math.floor(duration.asWeeks())} ${l('Week')}`;
+            }
+        }
+
+        function formatReadableTimestamp(creationTime) {
+            const now = moment();
+            const diffInMinutes = now.diff(creationTime, 'minutes');
+            const diffInHours = now.diff(creationTime, 'hours');
+            const diffInDays = now.diff(creationTime, 'days');
+
+            if (diffInMinutes < 1) {
+                return l('JustNow');
+            } else if (diffInMinutes < 60) {
+                return l('MinutesAgo', diffInMinutes);
+            } else if (diffInHours < 24) {
+                return diffInHours === 1 ? l('HourAgo') : l('HoursAgo', diffInHours);
+            } else if (diffInDays === 1) {
+                return l('YesterdayAt', creationTime.local().format('h:mm a'));
+            } else if (diffInDays < 7) {
+                return l('DayAt', creationTime.local().format('dddd'), creationTime.local().format('h:mm a'));
+            } else if (now.isSame(creationTime, 'year')) {
+                return l('MonthDayAt', creationTime.local().format('D'), creationTime.local().format('MMMM'), creationTime.local().format('h:mm a') );
+            } else {
+                return l('FullDate', creationTime.local().format('D'), creationTime.local().format('MMMM'), creationTime.local().format('YYYY'));
+            }
+        }
+
         function registerEditLinks($container) {
             $container.find('.comment-edit-link').each(function () {
                 let $link = $(this);
@@ -216,6 +289,8 @@
             registerUpdateOfNewComment($widget);
             registerSubmissionOfNewComment($widget);
 
+            registerCommentTime($widget);
+
             focusOnHash($widget);
         }