@pitaj
I use https://github.com/nodebb/nodebb-theme-quickstart to create a child theme and added the following based on your changes.
plugin.json:
{
"id": "nodebb-theme-mytheme",
"main": "./lib/theme.js",
"hooks": [
{ "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" },
{ "hook": "filter:category.topics.get", "method": "getTopics" }
],
"scripts": [
"./lib/client.js",
"../nodebb-theme-persona/public/persona.js",
"../nodebb-theme-persona/public/modules/autohidingnavbar.js",
"../nodebb-theme-persona/public/modules/quickreply.js"
],
"modules": {
"pulling.js": "node_modules/pulling/build/pulling-drawer.js"
}
}
theme.js
(function(module) {
"use strict";
var Posts = require.main.require('./src/posts');
var Theme = {};
Theme.defineWidgetAreas = function(areas, callback) {
areas = areas.concat([
{
'name': 'MOTD',
'template': 'home.tpl',
'location': 'motd'
},
{
'name': 'Homepage Footer',
'template': 'home.tpl',
'location': 'footer'
},
{
'name': 'Category Sidebar',
'template': 'category.tpl',
'location': 'sidebar'
},
{
'name': 'Topic Footer',
'template': 'topic.tpl',
'location': 'footer'
}
]);
callback(null, areas);
};
Theme.getTopics = async (data) => {
const pids = data.topics.map(x => x.mainPid);
const [{ upvotes, downvotes }, bookmarked, bookmarks, sharing] = await Promise.all([
Posts.getVoteStatusByPostIDs(pids, data.uid),
Posts.hasBookmarked(pids, data.uid),
Posts.getPostsFields(pids, ['bookmarks']),
Social.getActivePostSharing(pids)
]);
data.topics.forEach((topic, i) => {
topic.upvoted = upvotes[i];
topic.downvoted = downvotes[i];
topic.bookmarked = bookmarked[i];
topic.bookmarks = bookmarks[i];
topic.sharing = sharing[i];
});
console.log(data);
return data;
};
module.exports = Theme;
}(module));
client.js
$(document).ready(function() {
require(['forum/topic/votes', 'api'], function (votes, api) {
function bookmarkPost(button) {
var method = button.attr('data-bookmarked') === 'false' ? 'put' : 'del';
var pid = button.closest('[data-pid]').attr('data-pid');
api[method](`/posts/${pid}/bookmark`, undefined, function (err) {
if (err) {
return app.alertError(err);
}
var type = method === 'put' ? 'bookmark' : 'unbookmark';
$(window).trigger('action:post.' + type, { pid: pid });
});
return false;
}
$(document).on('click', '[component="category/topic"] [component="post/upvote"]', function () {
console.log('upvote');
return votes.toggleVote($(this), '.upvoted', 1);
});
$(document).on('click', '[component="category/topic"] [component="post/downvote"]', function () {
console.log('downvote');
return votes.toggleVote($(this), '.downvoted', -1);
});
$(document).on('click', '[component="category/topic"] [component="post/bookmark"]', function () {
console.log('bookmark');
return bookmarkPost($(this));
});
});
$(document).on('click', '[component="category/topic"] [component="post/flag"]', function () {
var pid = getData($(this), 'data-pid');
require(['flags'], function (flags) {
flags.showFlagModal({
type: 'post',
id: pid,
});
});
});
$(document).on('click', '[component="category/topic"] [component="post/flagUser"]', function () {
var uid = getData($(this), 'data-uid');
require(['flags'], function (flags) {
flags.showFlagModal({
type: 'user',
id: uid,
});
});
});
function getData(button, data) {
return button.parents('[data-pid]').attr(data);
}
function togglePostVote(data) {
var post = $('[component="category/topic"] [data-pid="' + data.post.pid + '"]');
post.find('[component="post/upvote"]').toggleClass('upvoted', data.upvote);
post.find('[component="post/downvote"]').toggleClass('downvoted', data.downvote);
post.find('[component="post/vote-count"]').html(data.post.votes).attr('data-votes', data.post.votes);
}
socket.on('posts.upvote', togglePostVote);
socket.on('posts.downvote', togglePostVote);
socket.on('posts.unvote', togglePostVote);
function togglePostBookmark(data) {
var el = $('[data-pid="' + data.post.pid + '"] [component="post/bookmark"]');
if (!el.length) {
return;
}
el.attr('data-bookmarked', data.isBookmarked);
el.find('[component="post/bookmark/on"]').toggleClass('hidden', !data.isBookmarked);
el.find('[component="post/bookmark/off"]').toggleClass('hidden', data.isBookmarked);
el.find('[component="post/bookmarks"]').html(data.bookmarks).attr('data-bookmarks', data.bookmarks);
}
socket.on('posts.bookmark', togglePostBookmark);
socket.on('posts.unbookmark', togglePostBookmark);
});
Note: console.log
in getTopics
isn't triggered.
Originally, I tried to add the changes straight to 'nodebb-theme-persona', but the result is still the same (and console.log
in getTopics
doesn't seem to be executed).