V
V
Victor2017-02-21 17:24:34
JavaScript
Victor, 2017-02-21 17:24:34

Why is the function from the imported library not visible?

I connect the library for filtering elements Isotope .
For some reason, the built-in matchesSelector function is not visible below in the code.
40e3f80c3f4440a49df71b8fd907583e.png
Although in the demos everything works . I used this library before, but did not connect it with a requier, and everything worked.
The code:

const Isotope = require('isotope-layout');

const destinations = new Isotope('.destination-grid', {
  itemSelector: '.destination-grid-element',
  layoutMode: 'fitRows'
});

const destinationFiltersActive = 'destination-controls__filter-button_active';
const destinationFilters = document.querySelector('.destination-controls');
destinationFilters.addEventListener('click', (event) => {
  if(!matchesSelector(event.target, 'button')){
    return console.log('not matches');
  }
  const filterValue = event.target.getAttribute('data-filter');
  destinations.arrange({filter: filterValue});
});
const radioButtonGroup = (buttonGroup) => {
  buttonGroup.addEventListener('click', (event) => {
    if (!matchesSelector(event.target, 'button')) {
      return console.log('not matches');
    }

    buttonGroup.classList.toggle(destinationFiltersActive);
    event.target.classList.add(destinationFiltersActive);
  });
};
const buttonGroups = document.querySelectorAll('.destination-controls__filter-button');
for (let i = 0, len = buttonGroups.length; i < len; i++ ) {
  let buttonGroup = buttonGroups[i];
  radioButtonGroup(buttonGroup);
};

In gulpfile js the task looks like this:
gulp.task('js', () => {
  browserify('./src/js/main.js')
    .transform(babelify)
    .bundle()
    .pipe(source('all.js'))
    .pipe(gulp.dest('./dist/scripts'))
    .pipe(connect.reload())
});

If we replace matchesSelector with native matches , we can see that the library works, but we need matchesSelector to correctly select elements. I suspect that the problem is in how I connect the scripts. What am I doing wrong?
PS - temporarily launched ngrok, if suddenly someone wants to help: https://e8d5d86a.ngrok.io/

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question