XF 2.0 Double click forum icons to mark forum as read

Idhae

Active member
Hello, I've been working on it for a while, but I think it's done now.
For those who are interested and for those who hopefully have some suggestions for improvements.


Create the JS file:
JavaScript:
var PREFIX = window.PREFIX || {};

!function($, window, document, _undefined)
{
    PREFIX.MarkForumRead = XF.Element.newHandler({
        eventNameSpace: 'MarkForumRead',    
     
        init: function() {
            this.$target.on('dblclick', function() {
                var $this = $(this);
             
                $this.removeClass('node--unread');
                $this.addClass('node--read');
                     
                XF.ajax(
                    'POST',
                    $this.data('markreadlink')
                );
            });
        }
     
    });
    XF.Element.register('mark-forum-read', 'PREFIX.MarkForumRead');
}
(jQuery, window, document);

TMS the "node_list_forum" template

Search:
PHP:
<div class="node node--id{$node.node_id} node--depth{$depth} node--forum {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">

Replace:
PHP:
<xf:js src="prefix/markforumread.js" addon="ADDON/DIR"/>
<div <xf:if is="$extras.hasNew && $xf.visitor.user_id">
           data-xf-init="mark-forum-read" data-markreadlink="{{ link('forums/mark-read', $node, {'date': $date}) }}"
          </xf:if>
           class="node node--id{$node.node_id} node--depth{$depth} node--forum {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">


Inspired by:
https://xenforo.com/community/resources/double-click-forum-icons-to-mark-forum-as-read.2298/
 
Last edited:
This is very useful. However, it would probably be better posted as a resource. I'd recommend either posting it as a guide so people can follow your instructions, or even just release it as a proper add-on so manual steps don't need to be followed. Either way, good work :)
 
TMS Update:
- add condition -> <xf:if is="$extras.hasNew && $xf.visitor.user_id" => double click function only for forum has new stuff and visitor is a member
 
Thank you for this code!

In order to visualize that this automatically also marks subforums as read, you can add:
JavaScript:
$this.find('.subNodeLink').removeClass('subNodeLink--unread');

(I vote for making this a native XenForo feature. :))

Edit: And maybe use this.$target.one instead of this.$target.on to only handle the first double click.

Edit 2: In the template, the variable $date doesn't exist. You probably want to use $xf.time instead.
 
Last edited:
Did you ever make this into a addon by any chance? I am new to this stuff and all this template editing scares me lol
 
I would have done this so many times, but lot of other things to do.
And now my son is born and a lot things more to do. :LOL:
 
LOL I hear ya!! Children will take all your free time! Any chance you can send me a message with exactly how I can do this without completely screwing up my forum? lol
 
Can anyone explain how to do this better? I have never created js files or anything and dont want to screw this up. lol
 
I would really love to be able to use this but I need it explained to me, step by step. lol Can anyone help?
 
I would really love to be able to use this but I need it explained to me, step by step. lol Can anyone help?
Hello,

Step 1 :
  • Create the JS file. (FTP)
Step 2 :
  • Search the code in the node_list_forum template.
Step 3 :
  • Replace the code in the node_list_forum template.
Regards, SyTry
 
Thanks but the issue is that i have never done this before. So i created a js file by copying the code above into notepad and saving as .js file correct? I can name it anything as long as it ends with .js? And then it would go into my js/xf folder on my server? The template editing i can do no problem.
 
Last edited:
And where would I add this? At the end of the js file i just made? Would that work or does it have to be in a certain part of the js file?

Code:
$this.find('.subNodeLink').removeClass('subNodeLink--unread');
 
Thanks but the issue is that i have never done this before. So i created a js file by copying the code above into notepad and saving as .js file correct? I can name it anything as long as it ends with .js? And then it would go into my js/xf folder on my server? The template editing i can do no problem.
<xf:js src="prefix/markforumread.js" addon="ADDON/DIR"/>
markforumread.js
And where would I add this? At the end of the js file i just made? Would that work or does it have to be in a certain part of the js file?

Code:
$this.find('.subNodeLink').removeClass('subNodeLink--unread');
For this code I don't know, you should ask the creator of the tutorial ! ;) @Steffen @Idhae
 
OK thanks I made the name of the js file markforumread.js. Does it go into my js folder or js/xf folder? I would assume the later....
 
OK thanks I made the name of the js file markforumread.js. Does it go into my js folder or js/xf folder? I would assume the later....
You need to use this code <xf:js src="prefix/markforumread.js" addon="ADDON/DIR"/>, this "prefix/markforumread.js" is your directory (js/ect.) ! ;)
 
Oh boy. LOL Now Im kind of lost. So I would put my url to the js file there in place of "prefix/markforumread.js" For example for me it would be js/xf/markforumread.js?? and do I need to do anything with the addon="ADDON/DIR"/>?

Sorry but I had NO CLUE at all had to do this. Thats why I was hoping he made it into a resource. lol
 
Oh boy. LOL Now Im kind of lost. So I would put my url to the js file there in place of "prefix/markforumread.js" For example for me it would be js/xf/markforumread.js?? and do I need to do anything with the addon="ADDON/DIR"/>?

Sorry but I had NO CLUE at all had to do this. Thats why I was hoping he made it into a resource. lol
<xf:js src="js/xf/markforumread.js" />
 
yes gotcha. And the addon stuff is fine to leave as is? Didnt know if I had to change that to anything.
 
Top Bottom