client/comments: add global comment list

client/css/comments.styl

@@ -2,7 +2,7 @@
 
 .comments>ul
     list-style-type: none
-    margin: 1em 0
+    margin: 0 0 2em 0
     padding: 0
 
 .comment
@@ -16,6 +16,8 @@
             display: none
         .tabs .edit.tab
             display: none
+        .content
+            margin-left: 0.5em
     &.editing
         .tab:not(.active)
             display: none
@@ -134,3 +136,27 @@
 
         blockquote :last-child
             margin-bottom: 0
+
+.global-comment-list
+    text-align: left
+
+    &>ul
+        list-style-type: none
+        margin: 1em 0
+        padding: 0
+
+        &>li
+            display: flex
+            margin-bottom: 2em
+
+            .post-thumbnail
+                float: left
+                vertical-align: top
+                margin-right: 1em
+                .thumbnail
+                    width: 12em
+                    height: 8em
+                    margin: 0
+
+            .comments-container
+                width: 100%

client/css/main.styl

@@ -196,7 +196,7 @@ a .access-key
             height: 0
     .page
         position: relative
-        p
+        .page-header
             margin: 0.5em 0.5em 0.5em 0
             position: relative
             &:before

client/css/posts.styl

@@ -94,8 +94,11 @@ $safety-unsafe = #F3985F
     >.content
         width: 100%
 
-    .post-container .post-content
-        margin: 0
+    .post-container
+        margin-bottom: 2em
+
+        .post-content
+            margin: 0
 
 .post-list
     ul

client/html/comments_page.tpl

@@ -0,0 +1,18 @@
+<div class='global-comment-list'>
+    <ul><!--
+        --><% for (let post of ctx.results) { %><!--
+            --><li><!--
+                --><div class='post-thumbnail'><!--
+                    --><% if (ctx.canViewPosts) { %><!--
+                        --><a href='/post/<%= post.id %>'><!--
+                    --><% } %><!--
+                        --><%= ctx.makeThumbnail(post.thumbnailUrl) %><!--
+                    --><% if (ctx.canViewPosts) { %><!--
+                        --></a><!--
+                    --><% } %><!--
+                --></div><!--
+                --><div class='comments-container' data-for='<%= post.id %>'></div><!--
+            --></li><!--
+        --><% } %><!--
+    --></ul>
+</div>

client/html/endless_pager_page.tpl

@@ -1,4 +1,4 @@
 <div class='page'>
-    <p><span>Page <%= ctx.page %> of <%= ctx.totalPages %></span></p>
+    <p class='page-header'><span>Page <%= ctx.page %> of <%= ctx.totalPages %></span></p>
     <div class='page-content-holder'></div>
 </div>

client/js/controllers/comments_controller.js

@@ -1,18 +1,39 @@
 'use strict';
 
+const api = require('../api.js');
 const page = require('page');
+const misc = require('../util/misc.js');
 const topNavController = require('../controllers/top_nav_controller.js');
+const pageController = require('../controllers/page_controller.js');
+const CommentsPageView = require('../views/comments_page_view.js');
 const EmptyView = require('../views/empty_view.js');
 
 class CommentsController {
     registerRoutes() {
-        page('/comments', (ctx, next) => { this._listCommentsRoute(); });
+        page('/comments/:query?',
+            (ctx, next) => { misc.parseSearchQueryRoute(ctx, next); },
+            (ctx, next) => { this._listCommentsRoute(ctx); });
+        this._commentsPageView = new CommentsPageView();
         this._emptyView = new EmptyView();
     }
 
-    _listCommentsRoute() {
+    _listCommentsRoute(ctx) {
         topNavController.activate('comments');
-        this._emptyView.render();
+
+        pageController.run({
+            searchQuery: ctx.searchQuery,
+            clientUrl: '/comments/' + misc.formatSearchQuery({page: '{page}'}),
+            requestPage: page => {
+                return api.get(
+                    '/posts/?query=sort:comment-date+comment-count-min:1' +
+                    `&page=${page}&pageSize=10&fields=` +
+                    'id,comments,commentCount,thumbnailUrl');
+            },
+            pageRenderer: this._commentsPageView,
+            pageContext: {
+                canViewPosts: api.hasPrivilege('posts:view'),
+            }
+        });
     }
 }
 

client/js/views/comments_page_view.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const views = require('../util/views.js');
+const CommentListControl = require('../controls/comment_list_control.js');
+
+class CommentsPageView {
+    constructor() {
+        this._template = views.getTemplate('comments-page');
+    }
+
+    render(ctx) {
+        const target = ctx.target;
+        const source = this._template(ctx);
+
+        for (let post of ctx.results) {
+            post.comments.reverse();
+            new CommentListControl(
+                source.querySelector(
+                    `.comments-container[data-for="${post.id}"]`),
+                post.comments);
+        }
+
+        views.showView(target, source);
+    }
+}
+
+module.exports = CommentsPageView;

client/js/views/endless_page_view.js

@@ -25,7 +25,9 @@ class EndlessPageView {
         this._working = 0;
 
         ctx.headerContext.target = pageHeaderHolder;
-        ctx.headerRenderer.render(ctx.headerContext);
+        if (ctx.headerRenderer) {
+            ctx.headerRenderer.render(ctx.headerContext);
+        }
 
         const threshold = window.innerHeight / 3;
 

client/js/views/manual_page_view.js

@@ -70,7 +70,9 @@ class ManualPageView {
         const currentPage = ctx.searchQuery.page;
 
         ctx.headerContext.target = pageHeaderHolder;
-        ctx.headerRenderer.render(ctx.headerContext);
+        if (ctx.headerRenderer) {
+            ctx.headerRenderer.render(ctx.headerContext);
+        }
 
         ctx.requestPage(currentPage).then(response => {
             Object.assign(ctx.pageContext, response);