ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial implementation of pool navigation inside posts

Browse source
This commit is contained in:
Ruin0x11 2021-05-08 23:15:19 -07:00
parent 8e8b15a1d8
commit 7750e43714
8 changed files with 123 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/css/colors.styl
View file

@ -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

31
client/css/pool-navigator-control.styl
View file

@ -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

29
client/html/pool_navigator.tpl
View file

@ -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>

18
client/js/controllers/post_main_controller.js
View file

@ -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

27
client/js/controls/pool_navigator_control.js
View file

@ -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;

45
client/js/controls/pool_navigator_list_control.js
View file

@ -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;

9
client/js/views/post_main_view.js
View file

@ -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
);
}

4
server/szurubooru/func/posts.py
View file

@ -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)
]