Initial implementation of pool navigation inside posts

client/css/colors.styl

@@ -18,6 +18,8 @@ $message-error-border-color = #FCC
 $message-error-background-color = #FFF5F5
 $message-success-border-color = #D3E3D3
 $message-success-background-color = #F5FFF5
+$pool-navigator-border-color = #888
+$pool-navigator-background-color = #EEE
 $input-bad-border-color = #FCC
 $input-bad-background-color = #FFF5F5
 $input-good-border-color = #D3E3D3

client/css/pool-navigator-control.styl

@@ -1,9 +1,34 @@
 @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
+    padding: 0 0.50em 0 0.50em
+    margin: 0 auto
+
+    .pool-info-wrapper
+        box-sizing: border-box
+        width: 100%
+        max-width: 40em
+        margin: 0 0 1em 0
+        display: flex
+        padding: 0.5em 1em
+        border: 1px solid $pool-navigator-border-color
+        background: $pool-navigator-background-color
+        &.active
+            font-weight: bold
+
+        .pool-name
+            flex: 1 1;
+            text-align: center;
+            overflow: hidden;
+            white-space: nowrap;
+            -o-text-overflow: ellipsis;
+            text-overflow: ellipsis;
+
+        .prev, .next
+            flex: 0 1;
+            margin: 0 .25em;
+            white-space: nowrap;
+
 
 .darktheme .pool-navigator-container
     background: $pool-navigator-header-background-color-darktheme

client/html/pool_navigator.tpl

@@ -1,2 +1,31 @@
 <div class='pool-navigator-container'>
+  <div class='pool-info-wrapper <%= ctx.isActivePool ? "active" : "" %>'>
+    <span class='prev'>
+      <% if (ctx.canViewPosts && ctx.prevPost) { %>
+        <a class='<%- ctx.linkClass %>' href='<%= ctx.getPostUrl(ctx.prevPost.id, ctx.parameters) %>'>
+      <% } %>
+        ‹ prev
+      <% if (ctx.canViewPosts && ctx.prevPost) { %>
+        </a>
+      <% } %>
+    </span>
+    <span class='pool-name'>
+      <% if (ctx.canViewPools) { %>
+        <a class='<%- ctx.linkClass %>' href='<%= ctx.formatClientLink("pool", ctx.pool.id) %>'>
+      <% } %>
+        <%- ctx.pool.names[0] %>
+      <% if (ctx.canViewPools) { %>
+        </a>
+      <% } %>
+    </span>
+    <span class='next'>
+      <% if (ctx.canViewPosts && ctx.nextPost) { %>
+        <a class='<%- ctx.linkClass %>' href='<%= ctx.getPostUrl(ctx.nextPost.id, ctx.parameters) %>'>
+      <% } %>
+        next ›
+      <% if (ctx.canViewPosts && ctx.nextPost) { %>
+        </a>
+      <% } %>
+    </span>
+  </div>
 </div>

client/js/controllers/post_main_controller.js

@@ -16,10 +16,10 @@ class PostMainController extends BasePostController {
     constructor(ctx, editMode) {
         super(ctx);
 
-        let poolPostsAround = Promise.resolve({results: [], activePool: null})
-        if (api.hasPrivilege("pools.list") && api.hasPrivilege("pools.view")) {
+        let poolPostsAround = Promise.resolve({results: [], activePool: null});
+        if (api.hasPrivilege("pools:list") && api.hasPrivilege("pools:view")) {
             poolPostsAround = PostList.getPoolPostsAround(
-                ctxt.parameters.id,
+                ctx.parameters.id,
                 parameters ? parameters.query : null
             );
         }
@@ -35,6 +35,7 @@ class PostMainController extends BasePostController {
         ]).then(
             (responses) => {
                 const [post, aroundResponse, poolPostsAroundResponse] = responses;
+                let activePool = null;
 
                 // remove junk from query, but save it into history so that it can
                 // be still accessed after history navigation / page refresh
@@ -48,13 +49,20 @@ class PostMainController extends BasePostController {
                           )
                         : uri.formatClientLink("post", ctx.parameters.id);
                     router.replace(url, ctx.state, false);
+                    console.log(parameters.query);
+                    parameters.query.split(" ").forEach((item) => {
+                        const found = item.match(/^pool:([0-9]+)/i);
+                        if (found) {
+                            activePool = parseInt(found[1]);
+                        }
+                    });
                 }
 
                 this._post = post;
                 this._view = new PostMainView({
                     post: post,
-                    poolPostsAround: poolPostsAroundResponse.results,
-                    activePool: poolPostsAroundResponse.activePool,
+                    poolPostsAround: poolPostsAroundResponse,
+                    activePool: activePool,
                     editMode: editMode,
                     prevPostId: aroundResponse.prev
                         ? aroundResponse.prev.id

client/js/controls/pool_navigator_control.js

@@ -8,19 +8,26 @@ const views = require("../util/views.js");
 const template = views.getTemplate("pool-navigator");
 
 class PoolNavigatorControl extends events.EventTarget {
-    constructor(hostNode, pool) {
+    constructor(hostNode, poolPostAround, isActivePool) {
         super();
         this._hostNode = hostNode;
-        this._pool = pool;
+        this._poolPostAround = poolPostAround;
+        this._isActivePool = isActivePool;
+
+        views.replaceContent(
+            this._hostNode,
+            template({
+                pool: poolPostAround.pool,
+                parameters: { query: `pool:${poolPostAround.pool.id}` },
+                linkClass: misc.makeCssName(poolPostAround.pool.category, "pool"),
+                canViewPosts: api.hasPrivilege("posts:view"),
+                canViewPools: api.hasPrivilege("pools:view"),
+                prevPost: poolPostAround.prevPost,
+                nextPost: poolPostAround.nextPost,
+                isActivePool: isActivePool
+            })
+        );
     }
-
-    // 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

@@ -7,44 +7,53 @@ const PoolNavigatorControl = require("../controls/pool_navigator_control.js");
 const template = views.getTemplate("pool-navigator-list");
 
 class PoolNavigatorListControl extends events.EventTarget {
-    constructor(hostNode, pools) {
+    constructor(hostNode, poolPostsAround, activePool) {
         super();
         this._hostNode = hostNode;
+        this._poolPostsAround = poolPostsAround;
+        this._activePool = activePool;
+        this._indexToNode = {};
 
-        const poolList = [];
-        for (let pool of poolList) {
-            this._installPoolNavigatorNode(pool);
+        for (let [i, entry] of this._poolPostsAround.entries()) {
+            this._installPoolNavigatorNode(entry, i);
         }
     }
 
     get _poolNavigatorListNode() {
-        return this._hostNode.querySelector("ul");
+        return this._hostNode;
     }
 
-    _installPoolNavigatorNode(pool) {
-        const poolListItemNode = document.createElement("li");
+    _installPoolNavigatorNode(poolPostAround, i) {
+        const isActivePool = poolPostAround.pool.id == this._activePool
+        const poolListItemNode = document.createElement("div");
         const poolControl = new PoolNavigatorControl(
-            pool
+            poolListItemNode,
+            poolPostAround,
+            isActivePool
         );
         // events.proxyEvent(commentControl, this, "submit");
         // events.proxyEvent(commentControl, this, "score");
         // events.proxyEvent(commentControl, this, "delete");
-        // this._commentIdToNode[comment.id] = commentListItemNode;
-        this._poolNavigatorListNode.appendChild(poolListItemNode);
+        this._indexToNode[poolPostAround.id] = poolListItemNode;
+        if (isActivePool) {
+            this._poolNavigatorListNode.insertBefore(poolListItemNode, this._poolNavigatorListNode.firstChild);
+        } else {
+            this._poolNavigatorListNode.appendChild(poolListItemNode);
+        }
     }
 
-    _uninstallCommentNode(pool) {
-        const poolListItemNode = this._commentIdToNode[pool.id];
+    _uninstallPoolNavigatorNode(index) {
+        const poolListItemNode = this._indexToNode[index];
         poolListItemNode.parentNode.removeChild(poolListItemNode);
     }
 
-    // _evtAdd(e) {
-    //     this._installPoolNode(e.detail.comment);
-    // }
+    _evtAdd(e) {
+        this._installPoolNavigatorNode(e.detail.index);
+    }
 
-    // _evtRemove(e) {
-    //     this._uninstallPoolNode(e.detail.comment);
-    // }
+    _evtRemove(e) {
+        this._uninstallPoolNavigatorNode(e.detail.index);
+    }
 }
 
 module.exports = PoolNavigatorListControl;

client/js/views/post_main_view.js

@@ -59,7 +59,7 @@ class PostMainView {
         this._installSidebar(ctx);
         this._installCommentForm();
         this._installComments(ctx.post.comments);
-        this._installPoolNavigators(ctx);
+        this._installPoolNavigators(ctx.poolPostsAround, ctx.activePool);
 
         const showPreviousImage = () => {
             if (ctx.prevPostId) {
@@ -140,9 +140,9 @@ class PostMainView {
         }
     }
 
-    _installPoolNavigators(ctx) {
+    _installPoolNavigators(poolPostsAround, activePool) {
         const poolNavigatorsContainerNode = document.querySelector(
-            "#content-holder .poolnavigators-container"
+            "#content-holder .pool-navigators-container"
         );
         if (!poolNavigatorsContainerNode) {
             return;
@@ -150,7 +150,8 @@ class PostMainView {
 
         this.poolNavigatorsControl = new PoolNavigatorListControl(
             poolNavigatorsContainerNode,
-            null
+            poolPostsAround,
+            activePool
         );
     }
 

server/szurubooru/func/posts.py

@@ -1033,8 +1033,8 @@ def serialize_pool_posts_around(around: List[PoolPostsAround]) -> Optional[rest.
     return [
         {
             "pool": pools.serialize_micro_pool(entry.pool),
-            "prev_post": entry.prev_post,
-            "next_post": entry.next_post
+            "prevPost": entry.prev_post,
+            "nextPost": entry.next_post
         }
         for entry in sort_pool_posts_around(around)
     ]