gazpachu / hypatia

A JavaScript open source LMS (eLearning platform) for MOOCs and online courses
https://joanmira.com/hypatia
Other
628 stars 273 forks source link

Remove jQuery dependency #32

Open gazpachu opened 6 years ago

danagle commented 6 years ago

I started on this and have made some progress.

I've replaced $.ajax() calls with axios.

$.hide() and $.show() have been replaced by helper functions which can accept a selector string or an Element object.

`elemHide: (selector) => { const elem = (typeof (selector) === 'string' || selector instanceof String) ? document.querySelector(selector) : selector; elem.style.display = 'none'; return elem; },

elemShow: (selector) => { const elem = (typeof (selector) === 'string' || selector instanceof String) ? document.querySelector(selector) : selector; elem.style.display = ''; return elem; }`

The class manipulation has been done using the classList methods. e.g. $('.user-form').removeClass('active')

has been changed to:

document.querySelector('.user-form').classList.remove('active')

This will require a polyfill for Internet Explorer compatibility. How backwards compatible do you want the project to be? IE 9?

I think I only have to fix up the $.AnimateCss() implementation and I'll be ready to submit a pull request unless of course I've broken something.

gazpachu commented 6 years ago

many thanks @danagle !!

I have other projects with the same tech-stack without any jQuery dependency. This is how I fixed the animateCSS:

animate: (el, animationName, callback) => {
    el.classList.add('animated', animationName);
    el.addEventListener('animationend', function handler() {
      el.classList.remove('animated', animationName);
      el.removeEventListener('animationend', handler);
      if (callback) {
        callback();
      }
    });
  },

I think anything below IE11 should be dropped.

danagle commented 6 years ago

I just remembered that I didn't add a classList polyfill.

danagle commented 6 years ago

The beast yet lives - Select2 is dependant on jQuery!

YouMightNotNeedJqueryPlugins.com has kindly suggested Choices.js as a vanilla JS alternative.

gazpachu commented 6 years ago

That's a good option. We also have https://github.com/JedWatson/react-select.

Also might be worth also considering implementing a few components from a Material Design library like https://material-ui-next.com/demos/selection-controls/

danagle commented 6 years ago

I've just been looking at the react-select project and v2 which is in alpha has react 16.x as a dependency.