Freshrss: Add an event when loading more articles

[lapineige]

It would be useful for my extension #1260 (and maybe others) to create an event raised when user clicks on "Load more" (in order to adapt a client script execution to the new list of feeds).

Thank you :)

[Alkarex]

I have added a custom event freshrss:load-more https://github.com/FreshRSS/FreshRSS/pull/1287
You can register to it via e.g.:

document.body.addEventListener('freshrss:load-more', function (e) {
        console.log('freshrss:load-more');
    });

It is fired the first time articles are loaded, and then again after additional articles are loaded.
Please give it a try.

[lapineige]

Thank you :)
Ok, but first I need to wait for 1.6 update, right ?

[Alkarex]

You can give it a try by replacing your main.js by https://github.com/Alkarex/FreshRSS/blob/7adcc0d29d54461222d57924d5d2875d639ca698/p/scripts/main.js
I will soon merge in /dev, best after your feedback.

[lapineige]

I will do it, thanks

I will soon merge in /dev, best after your feedback.

I'm using FreshRSS on Yunohost, so I can't use it from the dev branch. But I could setup a VM for that purpose.

[lapineige]

First test: seem to be working :)
(I'll edit with the modification of my extension)
_edit:_ Ok it's working for the extension :)
Thanks a lot !

[Alkarex]

Ok, merged :-)

[lapineige]

Hum, did I missed something in the usage ?
When running my script in Firefox console, it's working fine.
When putting it on my server, on load it tells me that document doesn't exist... should I first use window.load, and use it to link my function to this event ?
(actually, I'm currently trying to do that)

[Alkarex]

Yes, document.body might not yet be available otherwise.

[Frenzie]

Very nice! I needed this too. :)

[lapineige]

I'm happy to see this will helps other people :)
(Free Software power ;) )

[Frenzie]

Hm, I just had a look at it and I couldn't figure out how to use it sensibly. This is the script for which I created my CustomJS extension:

// all the lame browsers, namely those other than Opera/Presto and Prince, don't
// do CSS generated content on images...

function show_img_titles(img) {
    img.after('<div class="show-img-title">Mouseover title: ' + img.attr('title') + '</div>');
}

function init_show_img_titles() {
    if (window.$) {
        $('img[title]').each(function(){
            show_img_titles($(this));
        });

        var observer = new MutationObserver(function(mutations) {  
            mutations.forEach(function(mutation) {
                for (var i = 0; i < mutation.addedNodes.length; i++) {
                    //console.log(mutation.addedNodes[i])
                    $(mutation.addedNodes[i]).find('img[title]').each(function(){
                        show_img_titles($(this));
                    });
                }
            });
        });
        observer.observe(document.querySelector('#stream'), { subtree: true, childList: true });
    }
    else {
        window.setTimeout(init_show_img_titles, 50);
    }
}

init_show_img_titles();

I figured I'd investigate whether this could be done more cleverly later on (i.e., by integrating some kind of event into FreshRSS), but unless I'm missing something I'd have to inefficiently add a data attribute or className to already processed entries?

[Alkarex]

Yes, the freshrss:load-more event lets you know that new articles have arrived, but you still need to keep track of which ones you have processed or not. Something along the lines of (not tested):

document.body.addEventListener('freshrss:load-more', function (e) {
        $('img:not(.show_titles)').each(function () {
            var $this = $(this);
            $this.addClass('show_titles');
            show_img_titles($this);
        });
    });

[Frenzie]

Sure, but it just feels hackish that way. I was thinking something more like, instead of

document.body.dispatchEvent(freshrssLoadMoreEvent);

using this newer jQuery event stuff

$(document.body).trigger('freshrss:load-more', box_load_more);

And then you could probably do something like

$(document.body).on('freshrss:load-more', function(e, box) {
  console.log(arg1) ;//box?
});

Just thinking aloud, all untested of course, but in any case it's the new elements you want to act on somehow. But I don't really have time to investigate atm, so I'm just dropping this here in case it might inspire someone.

[Alkarex]

Yes @Frenzie , the event could pass additional information. Let's come back to that after the release of 1.6. Could you open another ticket so that it does not get forgotten?

[Alkarex]

P.S. When I quickly tested the current version of the event, triggering it via jQuery seemed to make it difficult to listen to without jQuery, while the native event could be listened to both with and without jQuery

[Frenzie]

Oh, I'm always for making things as jQuery-less as possible. _grins_ Still, if you've already got jQuery, I'll admit it occasionally offers some useful stuff. ;)