Mickola

Mickola

Hi,

I wonder if NodeBB allows users to reply, upvote, bookmark, etc. the post from category list page.

alt text

Do I need a plugin or can I just modify the theme to do that?

Thanks in advance.

Mickola

When using Redactor as composer, clicking 'New Topic' or 'Reply' button will create multiple GIF button. See screenshot below:

The GIF button multiplies every time I close the composer and reopen it. It doesn't happen if I'm using the default Composer.

Anybody face the same issue?

Mickola

Hi,

I am using nodebb-plugin-composer-redactor 3.4.8 on Nodebb 1.16.1.

I just notice that the 'upload an image' function isn't working on Redactor. From the log, it shows that the image is uploaded to the server (/nodebb/public/uploads/files folder) successfully, but the editor doesn't show the image being inserted to the post at all. There's an empty <img> tag inserted to the post though.

When I tried using different composers (Quill and NodeBB default composer), the image upload function works as it should.

Redactor is no longer supported, but I wonder if I can have this fixed. Otherwise, what is the recommendation? Switching to Quill?

Re: Quill
What is the best way to modify the toolbar on Quill editor? I want to hide some icons from the toolbar and currently use CSS to hide them.

Do I have to fork the plugin and edito /static/lib/quill-nbb.js to my liking (ie:

var toolbarOptions = {
container: [
	[{ header: [1, 2, 3, 4, 5, 6, false] }], // h1..h6
	[{ font: [] }],
	['bold', 'italic', 'underline', 'strike'], // toggled buttons
	['link', 'blockquote', 'code-block'],
	[{ list: 'ordered' }, { list: 'bullet' }],
	[{ script: 'sub' }, { script: 'super' }], // superscript/subscript
	[{ color: [] }, { background: [] }], // dropdown with defaults from theme
	[{ align: [] }],
	['clean'],
],
handlers: {},
};

Or is there a way similar to 'creating a child theme' - where I don't need to build everything from the scratch, but some add new template/css/js to extend the theme?

Thank you!

Mickola

@pitaj , I found the issue. It's the hook! I change it from:

{ "hook": "filter:category.topics.get", "method": "getTopics" }

to

{ "hook": "filter:topics.get", "method": "getTopics" }

Mickola

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

Mickola

@pitaj , I implemented the changed by creating a child theme and added the scripts there. I have NodeBB 1.16.0.

If a post hasn't been bookmarked yet, I am able to toggle it back & forth. However, if it's already bookmarked, the bookmark icon shows the off-state and when I click it, it shows an error. This is the error I got:

Error: [[error:already-bookmarked]]
    at toggleBookmark (E:\Projects\my.forum.test\src\posts\bookmarks.js:28:10)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Posts.bookmark (E:\Projects\my.forum.test\src\posts\bookmarks.js:8:10)
    at async executeCommand (E:\Projects\my.forum.test\src\api\helpers.js:120:17)
    at async Object.exports.postCommand (E:\Projects\my.forum.test\src\api\helpers.js:116:9)
    at async Object.postsAPI.bookmark (E:\Projects\my.forum.test\src\api\posts.js:210:9)
    at async Posts.bookmark (E:\Projects\my.forum.test\src\controllers\write\posts.js:67:2)
    at async E:\Projects\my.forum.test\src\routes\helpers.js:34:5

Mickola

@pitaj , thanks. It works!

However the bookmark function doesn't work the same as the one on the post (post-menu-list.tpl). When I clicked the bookmark button, it doesn't retain the status 'bookmarked=true'. So, when I get back to the category or refresh the page, the bookmark button is going back to the defautl OFF state. However, if I click the 'bookmark' button again, it shows an error 'You have already bookmarked this post'.

Secondly, I'd like to show the number of bookmarks next to the button, similar to the one inside the post. I added:

<span class="human-readable-number" component="post/bookmark-count" data-bookmarks="{./bookmarks}">{./bookmarks}</span>

Also tried this one:

<span class="human-readable-number" component="post/bookmark-count" data-bookmarks="{./posts.bookmarks}">{./posts.bookmarks}</span>

Both doesn't update the bookmark count at all.

Lastly, I'd like to add a sharing function (from post-menu-list.tpl) to category. This is what I added to topics_list.tpl

                <!-- Share -->
                <span class="share-tools">
                    <a href="#" data-toggle="dropdown" title="[[topic:share_this_post]]"><i class="fa fa-16px fa-fw fa-share"></i></a>
                    <ul class="dropdown-menu" role="menu">
                    
                        <!-- IF postSharing.length -->
                        <li class="dropdown-header">[[topic:share_this_post]]</li>
                        <!-- ENDIF postSharing.length -->
                        {{{each post.index.postSharing}}}
                            <li>
                                <a role="menuitem" component="share/{postSharing.id}" tabindex="-1" href="#"><span class="menu-icon"><i class="fa fa-fw {postSharing.class}"></i></span> {postSharing.name}</a>
                            </li>
                        {{{end}}}        
                    </ul>
                </span>
                <!-- /Share -->

It seems 'postSharing' doesn't return anything. Can you point me to the right direction?

Thanks!

Mickola

@pitaj , Happy New Year.

I wonder if you can share your tips regarding this. Basically I want to be able to Upvote, Share, Bookmark the first/main post from the Category/Topic page.

Thanks!

Mickola

Hi,

Let say, I have a site (not a NodeBB site) and it has a newsletter form where users can subscribe by filling in their names & email addresses. After they hit submit, I'd like to redirect to the the forum site (Registration page).

Is it possible to pass variables (eg: email address/username) to Registration page via query string?
For example, https://community.nodebb.org/register?username=jack&email=jack@joe.com

What I want to achieve is to since users have filled their information earlier, albeit on a different site, the Registration form should have a prefilled form (ie: name and email address).

Thanks

Mickola

@PitaJ , reply, upvote/downvote, etc. should apply to the main post. Is it possible?

Mickola

Hi,