Topic Color



  • NodeBB Topic Color

    A NodeBB Plugin to add some colors to the topics titles.

    Installation

    As simple as that :

    npm install nodebb-plugin-topic-color
    

    Usage

    1. After installation go to the ACP and enable the plugin.
    2. Choose the groups that will be able to colorify their topics. Or create the Bucket group and put some users in it.
    3. The magic happens with this simple instructions :

    If you want some red you have the choice to use :

    • Hexadecimal colors code like #ff0000 or even #f00
    • RGB values rgb(255,0,0)
    • And finaly css color codes red

    To use it it's pretty simple :

    %(color)[Text]
    

    Screenshots

    Create your groups. Add the bucket one if you want to manage exactly who is able to colorify their topics or if the users are in a group system :

    Groups

    Choose the groups you want to be able to use the colorify topics title feature :

    Plugin settings

    This :

    Titles code

    Will become this (note that Test tried to fool the plugin but unlucky for him there's groups permissions) :

    Titles colorified

    And if there's no group selected don't worry the titles will be as clean as before (this could be a way to disable the feature but you must keep the plugin activated) :

    No groups, no colors on topics titles



  • New version.
    Fixed the ugly url and the title of the page.

    I need some help to improve the plugin, bring it further.

    I have searched how to execute my function when the topic title is changed (In the topic)
    Tested both action:topic.edit & action:post.edit no results.

    As for the group system I guess it's possible. My logic is the following :

    • Get the username it's possible with the data-original-title on the user pic.
    • Then use User.getUidByUsername and Groups.isMember
    • If is in group classic function, if not a cleaner to avoid colored titles for non permitted groups.

    My problem is that I don't know how to call these two functions, I have added the modules in my library.js but I don't figured out how to actually use them.

    I don't want to release it on NPM without this feature cause it could be Armagedon really quickly when you give such power to the user.
    I would also know if the current syntax #hexcodeTitle is clear enough, on my rainbow one the title looks like this :
    #ff000fR#ff0064a#ff00e5i#b100ffn#1b00ffb#009dffo#00d6ffw #00ff8cM#06ff00o#dbff00d#ff8c00e
    Which is hard to get...

    Anyway looking forward for your help, thanks in advace.
    esiao.


  • Admin

    https://github.com/NodeBB/NodeBB/commit/c29dcc0ec9efaae65e4669dd08e639c4a05352f7 should fix the action:topic.edit the hook will be called after the topic data is updated so you can retrieve the new title with topics.getTopicField(tid, 'title')



  • Thanks for your kind help @baris
    I've managed to create the hook and get the topic title and then change it but I've failed my goal I'll show you cause it's funny (I guess)

    fun

    So yeah basically what I need to do is not to change the title data but trigger my function in main.js

    https://github.com/esiao/nodebb-plugin-topic-color/blob/master/public/js/main.js#L29-L36

    Is there a way to do so ?

    Also I think that I'll be able to test User and Groups now that I've understood how the methods seems to work.


  • Admin

    You can try listening for the socket event that gets fired when a post is edited.

    socket.on('event:post_edited', function(data) {
        console.log(data);
    });
    

    Check out https://github.com/NodeBB/NodeBB/blob/master/public/src/forum/topic/events.js#L88 it updates the title.



  • @baris You rocks :)
    Okay so now I have a properly working plugin for all the basics which is colorify the titles. I need to clean my code a bit, update the regex (a big one but the content is a lot more easy to read).
    Basically this is the teasing for v1.0.0 of the plugin expect it to come this week-end.
    If I have the time I'll start to check the permissions part.

    Anyway see you later hope you'll love it ;)



  • And so version 0.0.1 of the plugin is officially out.
    Updated the first post in consequence.

    I finally decided to use the same markup as @toolito in nodebb-plugin-color
    For a ease of reading and also to make it standard.
    By the way, I've read that there's some issues with this plugin, I've figured out that the regex used is not optimized and I allow @toolito to freely abuse of mine (which solves the problem and test the content).

    Thanks for your help, I will work on the permissions part in the future :)



  • Published v0.0.2 :

    • The topic title in the header bar updates without the color codes.

    I've also added a dev branch on my git repo to work on the permission feature.
    I have two issues and need some help :

    • The action:ajaxify.end seems to not fire my method. So I'm using action:topic.edit to run my tests

    • My logic is the following :

    • Get topic ID (Topics)

    • Get Username from the topic data (uid is undefined for some reasons) (Users)

    • Test if username is in Group (Groups)

    If I test only one group it works, I haven't managed to get the multiple groups working. It returns [false,false] but both are true.
    https://github.com/esiao/nodebb-plugin-topic-color/blob/dev/library.js#L21-L23
    I think it's because my arguments are false but I don't know why, this array seems totally nice to me.

    • Is there a way to use my allowed variable after in my main script ? My idea is to do the colorify if it's true and if it's false only do the prettify one in order to have some permissions.

    • The final objective would be to have a Checkbox list with all groups in admin to allow a list of groups to colorify their titles and if some smart guys want to try out without being permitted just don't colorify the title but remove the code to keep it readable.

    Thanks in advance for the future help.



  • Published v0.0.3DEV (only on github) :

    • Some cleaning
    • Group testing logic is working
    • ACP integration

    I need your help on several things :

    My final goal is to say if colorify is true do my colorifyTopics function. If not do a new one which will prettify the title for non permitted groups of users. Basically it would be https://github.com/esiao/nodebb-plugin-topic-color/blob/dev/public/js/main.js#L44-L50 for any item.

    I really hope you can help me for this new version.



  • And so after a lot of time and tries I have finally done what I was expecting.

    Upgrade to the latest version 1.0.1 (major update) which fixes some bugs and adds the groups permissions and settings from ACP.
    I have updated the first post there's a lot of information and a fancy presentation check it out :)

    For the tech part,
    After trying every single hook and not retrieving the data I needed, I was going to abandon the plugin to the 0.0.2 version. But I've read somewhere on the forum (don't recall where) that there were actually an API for NodeBB by adding /api/ after the location origin. And I have to say amazing job on this guys it rocks. I was able to do what I had in mind after a lot of testing but this seems very promising for the future and I'm sure that I'll use it for my forum and maybe future plugins.
    Anyway thanks a lot for the support and enjoy my plugin ;)



  • New update 1.0.2 fixing a front-end bug that was preventing the plugin to work on Vanilla theme.
    Sorry for that feel free to use it on Vanilla based theme and Lavender now ;)



  • Well I have a problem. It seems that when a user without admin privileges is logged the plugin don't work as expected.
    The reason is simple, I have to call /api/admin/plugins/topic-color to retrieve the configuration which is stored here. I do it from front so if the user is not admin there's a 403 and only the admin users have their topics name correctly displayed.
    So is there a way to counter this ? I have thought of doing this in the plugin back but I haven't managed to send the config variable to my main.js after.



  • This is now fixed.
    Please update to the 1.1.0 version :

    • Fixed non admin users not able to see colorified topics of non admin users.
    • Notifications are cleaned from the ugly code

    I've just added a new renderer on the front pointing to /api/plugins/topic-color.

    Edit :
    Version 1.1.1 is out:

    • Topics in user profile are now colorified.

    Version 1.1.2 too :

    • Topics in widget last topics are colorified.


  • Version 1.1.3 :

    • Added preview on Home (Lavender theme and derivations)
    • Added Notifications

    Both in clean mode because there's no API information on home.


  • Global Moderator

    @esiao You sure?

    https://community.nodebb.org/api/home/

    Or did you mean something else.



  • @a_5mith Oh thanks didn't figured out it was /api/home. I was doing /api/ and getting a 404.
    I will color the subject on home I'll edit this message if there's no reply when it's done ;)

    And now it's done :
    Version 1.1.4 :

    • Preview on home are colored :)

  • Admin

    Hahhha... uh-oh.

    @esiao, an hour and a half ago, I removed the /api/home route, and now it's /api 😆

    I hope I didn't inadvertently break your plugin!



  • @julian Ahah okay I'll pull the changes and fix that, no problem just a new patch to come :D
    edit : Version 1.1.5 out fixing that ;)


  • Global Moderator

    @julian tut... :p



  • I've a question. There seems to be a change to the hook action:app.load becoming static:app.load. I've not updated the plugin tho because I have a bug when I change this in plugin.json.
    Whenever I try to acces a page on the forum I have a :
    Cannot GET /[route]

    Going back to action app.load resolve this. Any clues of what is happening ? Or do I need to wait for next version to update my plugin ?
    One more thing I've seen that I've forgotten the search results so there will be an update to expect and if I could include this aswell it could be nice.


Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.