Remove jquery.inview JavaScript library
#1803
Conversation
The `jquery.inview` library was being used to trigger an animation when an icon in a feature list element is fully visible on screen. This patch replaces `jquery.inview` with an implementation based on `IntersectionObserver`, which is widely supported: https://caniuse.com/intersectionobserver. This patch also simplifies the structure of `list-feature.js`.
There was a problem hiding this comment.
Let me know if anything should change here style-wise.
There was a problem hiding this comment.
No comment on the style, other than I think we should use an autoformatter so we don't have to think about it (I thought the project had prettier configured in pre-commit, but maybe it's not run on js files? 🤔 )
That's out of scope for this PR though.
|
To verify that this works, you'll want to check that the icons on the homepage and the overview page animate as before: 
|
There was a problem hiding this comment.
Another really nice cleanup 🚀
It's pretty amazing to see how far the web has come in the 10 years since this design was made. All these jquery plugins are now either not needed or can be replaced by native APIs.
I just had two very minor comments. The functionality is indeed working. 👍🏻
|
|
||
| // Export a single instance of our module: | ||
| return new FeatureList('.list-features'); | ||
| }, { threshold: 1.0 }); |
There was a problem hiding this comment.
A comment similar to the previous // element completely visible would be welcome here (had to look up the specs to understand what threshold meant)
| return new FeatureList('.list-features'); | ||
| }, { threshold: 1.0 }); | ||
|
|
||
| $('.list-features').find('i').each(function () { |
There was a problem hiding this comment.
Isn't this equivalent to:
| $('.list-features').find('i').each(function () { | |
| $('.list-features i').each(function () { |
?
There was a problem hiding this comment.
No comment on the style, other than I think we should use an autoformatter so we don't have to think about it (I thought the project had prettier configured in pre-commit, but maybe it's not run on js files? 🤔 )
That's out of scope for this PR though.
The
jquery.inviewlibrary was being used to trigger an animation when an icon in a feature list element is fully visible on screen. This patch replacesjquery.inviewwith an implementation based onIntersectionObserver, which is widely supported: https://caniuse.com/intersectionobserver.This patch also simplifies the structure of
list-feature.js.