Convert jQuery statements that manipulate CSS to their native equivalents

[Jaifroid]

Sub-issue of #367. This will involve converting jQeury $('.selector') statements to querySelector or querySelectorAll, iterating over all selected nodes where necessary. Also deal with adding, removing or toggling CSS.

[dheerajdlalwani]

Another not so difficult issue. Mind if I take this one up? @Jaifroid

[Jaifroid]

Yes of course, please do.

[Jaifroid]

Note that some of these will involve iterating over the collection of nodes selected by querySelectorAll() (which is what you'll want to use instead of jQuery class selectors). You have to be careful iterating collections of nodes in a way that is compatible with IE11. In many cases you will have to use something like:

       Array.prototype.slice.call(document.querySelectorAll('.selector')).forEach(function (node) {
            ...
        });

[dheerajdlalwani]

Yes of course, please do.

Awesome. I'll get started.

[dheerajdlalwani]

Note that some of these will involve iterating over the collection of nodes selected by querySelectorAll() (which is what you'll want to use instead of jQuery class selectors). You have to be careful iterating collections of nodes in a way that is compatible with IE11. In many cases you will have to use something like:

       Array.prototype.slice.call(document.querySelectorAll('.selector')).forEach(function (node) {
            ...
        });

Alright! Thank you for informing. I'll be careful.

Also if you don't mind me asking, why are we still supporting IE 11? And how long do we plan to do that? Just wanted to understand the thought process behind it.

[Jaifroid]

why are we still supporting IE 11?

Good question. There are a number of old browsers we still try to support, either due to a conservative user base (very old Firefox) or to frameworks that still rely on old browsers or web views, and IE11 is a kind of baseline that ensures very wide compatibility. The medium-term aim is to start using modern code (probably TypeScript too) and compile down to our target browsers -- see #554. We're not there yet, due to lack of human-power to work on these things, hence we try to keep support manually for now till we can implement that issue. Where a feature cannot be done in a compatible way, we bypass that feature for old browsers in the app. An example is Service Worker support, which is now the default. What we still call "JQuery mode" (but hopefully can stop calling it that soon) is the version that is deprecated but still compatible with almost anything.

[dheerajdlalwani]

Okay, I am opening a PR for this, but I am not sure if I've been on the right track. Just take a look, @Jaifroid .
There weren't many jQuery statements which were manipulating CSS, although I did convert a bunch of other jQuery functions to native JS. Take a look at the PR, let me know if I am doing the right thing.