Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove jQuery dependency #32

Open
gazpachu opened this issue Sep 2, 2017 · 6 comments
Open

Remove jQuery dependency #32

gazpachu opened this issue Sep 2, 2017 · 6 comments

Comments

@gazpachu
Copy link
Owner

gazpachu commented Sep 2, 2017

No description provided.

@danagle
Copy link

danagle commented Mar 6, 2018

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
Copy link
Owner Author

gazpachu commented Mar 6, 2018

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
Copy link

danagle commented Mar 7, 2018

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

@danagle
Copy link

danagle commented Mar 7, 2018

The beast yet lives - Select2 is dependant on jQuery!

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

@gazpachu
Copy link
Owner Author

gazpachu commented Mar 7, 2018

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
Copy link

danagle commented Mar 7, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants