PLANET-5760 Remove jQuery code from load_more.js

greenpeace / planet4

Built on top of Wordpress tech, Greenpeace Planet 4 powers digital platforms to engage with millions and win campaigns around the world.

https://planet4.greenpeace.org

Creative Commons Attribution Share Alike 4.0 International

66 stars 27 forks source link

PLANET-5760 Remove jQuery code from load_more.js #134

Closed planet-4 closed 3 years ago

planet-4 commented 3 years ago

Rewrite all jquery code in assets/src/js/load_more.js with vanilla JS.

Components

setupLoadMore() runs an ajax request based on button dataset. Used in author and taxonomy templates.
fadeOut() could be done in CSS ? The rest has to be in vanilla JS.

Reporter: fhernand
Sections: Performance

Potentially affected repositories: planet4-master-theme

aeisenberg commented 3 years ago

I'll take a look at this. Please assign to me.

There is a small issue here. This line:

load_more.off('mousedown touchstart').on('mousedown touchstart', function (e) {

The call to off will remove relevant jquery event handlers. If we try to remove jquery from this file, jquery event handlers will not be removed from the load_more dom elements. It's likely a low chance of anything bad happening, but thought I'd bring it up.

aeisenberg commented 3 years ago

The solution I am working on uses fetch. Are we able to use this, or do we need to support older browsers?

lithrel commented 3 years ago

Hi @aeisenberg, no problem for fetch :+1: