temp

client/css/pool-navigator-control.styl

@@ -0,0 +1,9 @@
+@import colors
+$pool-navigator-header-background-color = $top-navigation-color
+$pool-navigator-header-background-color-darktheme = $top-navigation-color-darktheme
+
+.pool-navigator-container
+    padding: 0 0 0 60px
+
+.darktheme .pool-navigator-container
+    background: $pool-navigator-header-background-color-darktheme

client/css/pool-navigator-list-control.styl

@@ -0,0 +1,9 @@
+.pool-navigators>ul
+    list-style-type: none
+    margin: 0
+    padding: 0
+
+    >li
+        margin-bottom: 1em
+        &:last-child
+            margin-bottom: 0

client/html/pool_navigator.tpl

@@ -0,0 +1,2 @@
+<div class='pool-navigator-container'>
+</div>

client/html/pool_navigator_list.tpl

@@ -0,0 +1,4 @@
+<div class='pool-navigators'>
+    <ul>
+    </ul>
+</div>

client/html/post_main.tpl

@@ -54,6 +54,10 @@
     <div class='content'>
         <div class='post-container'></div>
 
+        <% if (ctx.canListPools && ctx.canViewPools) { %>
+            <div class='pool-navigators-container'></div>
+        <% } %>
+
         <% if (ctx.canListComments) { %>
             <div class='comments-container'></div>
         <% } %>

client/js/controllers/post_main_controller.js

@@ -56,6 +56,8 @@ class PostMainController extends BasePostController {
                     canFeaturePosts: api.hasPrivilege("posts:feature"),
                     canListComments: api.hasPrivilege("comments:list"),
                     canCreateComments: api.hasPrivilege("comments:create"),
+                    canListPools: api.hasPrivilege("pools:list"),
+                    canViewPools: api.hasPrivilege("pools:view"),
                     parameters: parameters,
                 });
 

client/js/controls/pool_navigator_control.js

@@ -0,0 +1,26 @@
+"use strict";
+
+const api = require("../api.js");
+const misc = require("../util/misc.js");
+const events = require("../events.js");
+const views = require("../util/views.js");
+
+const template = views.getTemplate("pool-navigator");
+
+class PoolNavigatorControl extends events.EventTarget {
+    constructor(hostNode, pool) {
+        super();
+        this._hostNode = hostNode;
+        this._pool = pool;
+    }
+
+    // get _formNode() {
+    //     return this._hostNode.querySelector("form");
+    // }
+
+    // get _scoreContainerNode() {
+    //     return this._hostNode.querySelector(".score-container");
+    // }
+}
+
+module.exports = PoolNavigatorControl;

client/js/controls/pool_navigator_list_control.js

@@ -0,0 +1,50 @@
+"use strict";
+
+const events = require("../events.js");
+const views = require("../util/views.js");
+const PoolNavigatorControl = require("../controls/pool_navigator_control.js");
+
+const template = views.getTemplate("pool-navigator-list");
+
+class PoolNavigatorListControl extends events.EventTarget {
+    constructor(hostNode, a) {
+        super();
+        this._hostNode = hostNode;
+
+        const poolList = [];
+        for (let pool of poolList) {
+            this._installPoolNavigatorNode(pool);
+        }
+    }
+
+    get _poolNavigatorListNode() {
+        return this._hostNode.querySelector("ul");
+    }
+
+    _installPoolNavigatorNode(pool) {
+        const poolListItemNode = document.createElement("li");
+        const poolControl = new PoolNavigatorControl(
+            pool
+        );
+        // events.proxyEvent(commentControl, this, "submit");
+        // events.proxyEvent(commentControl, this, "score");
+        // events.proxyEvent(commentControl, this, "delete");
+        // this._commentIdToNode[comment.id] = commentListItemNode;
+        this._poolNavigatorListNode.appendChild(poolListItemNode);
+    }
+
+    _uninstallCommentNode(pool) {
+        const poolListItemNode = this._commentIdToNode[pool.id];
+        poolListItemNode.parentNode.removeChild(poolListItemNode);
+    }
+
+    // _evtAdd(e) {
+    //     this._installPoolNode(e.detail.comment);
+    // }
+
+    // _evtRemove(e) {
+    //     this._uninstallPoolNode(e.detail.comment);
+    // }
+}
+
+module.exports = PoolNavigatorListControl;

client/js/views/post_main_view.js

@@ -12,6 +12,7 @@ const PostReadonlySidebarControl = require("../controls/post_readonly_sidebar_co
 const PostEditSidebarControl = require("../controls/post_edit_sidebar_control.js");
 const CommentControl = require("../controls/comment_control.js");
 const CommentListControl = require("../controls/comment_list_control.js");
+const PoolNavigatorListControl = require("../controls/pool_navigator_list_control.js");
 
 const template = views.getTemplate("post-main");
 
@@ -58,6 +59,7 @@ class PostMainView {
         this._installSidebar(ctx);
         this._installCommentForm();
         this._installComments(ctx.post.comments);
+        this._installPoolNavigators(ctx);
 
         const showPreviousImage = () => {
             if (ctx.prevPostId) {
@@ -138,6 +140,20 @@ class PostMainView {
         }
     }
 
+    _installPoolNavigators(ctx) {
+        const poolNavigatorsContainerNode = document.querySelector(
+            "#content-holder .poolnavigators-container"
+        );
+        if (!poolNavigatorsContainerNode) {
+            return;
+        }
+
+        this.poolNavigatorsControl = new PoolNavigatorListControl(
+            poolNavigatorsContainerNode,
+            null
+        );
+    }
+
     _installCommentForm() {
         const commentFormContainer = document.querySelector(
             "#content-holder .comment-form-container"