Плагин Waypoints

[gearmobile]

Пробую подключить поддержку плагина Waypoints.

Установил waypoints через npm:

npm install waypoints -S

Подключил и инициализировал плагин waypoints в файле app.js:

import svg4everybody from 'svg4everybody';
import $ from 'jquery';
import swiper from 'swiper';
import waypoints from 'waypoints';

$(() => {

    const header = $('.header');
    const topheader = $('.topheader');
    const scrollValue = '-15%';

    // svg sprite
    svg4everybody();

    // header slider
    swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        autoplay: 6500,
        effect: 'fade'
    });

    // topheader hide\show
    header.waypoints(function (direction) {
        if ( direction === 'down' ) {
            topheader.addClass('animated fadeOutUp');
        } else if ( direction === 'up' ) {
            topheader.removeClass('fadeOutUp').addClass('fadeOutDown');
        }
    }, {offset: scrollValue});
});

При запуске команды gulp --open появляются ошибки:

/home/zencoder/Projects/studio/brandly/app/scripts/app.js
  4:8  error  "waypoints" is defined but never used
✖ 1 problem (1 error, 0 warnings)

Error: Cannot find module 'waypoints' from '/home/zencoder/Projects/studio/brandly/app/scripts'

И еще вопрос - waypoints будет использоваться совместно с библиотекой Animate.css.

Куда помещать файл этой библиотеки? Подключать через @import в файле app.styl?

У меня в "ванильном" случае - Waypoints-jquery + Animate.css все работает.

[felixexter]

Проблемы плагина waypoints обсуждаются в репе этого же плагина — imakewebthings/waypoints#458

Сторонние стили нужно приводить к стайлусу, помещать можно в блок и импортировать, либо использовать готовое, например, https://github.com/kress95/animate-stylus

[gearmobile]

прочитал обсуждение проблемы плагина waypoints по первой ссылке, которую вы предоставили. общий смысл решения проблемы понял, но самому решить ее не хватает skills.

может быть, вас не затруднит "на пальцах" объяснить, что нужно делать, чтобы пофиксить проблему waypoints в browserify?

[gearmobile]

Как вариант, попробовал решить проблему с waypoints путем обхода - отказаться от waypoints и заменить этот плагин стандартным методом scrollTop() библиотеки jQuery - sliding-header_scrollTop.

Интересно, если так можно поступить, то в чем тогда преимущество использования плагина waypoints?

[dzhiriki]

В ишью, на которое дали ссылку, есть описание того, как можно подключить плагин. И там прямо строчка про это есть (просто учитывайте, что import это тот же require).

У нас в шаблоне обычный browserify. Без каких-либо дополнительных плагинов для него или какой-то магии. Поэтому все проблемы с какими-либо плагинами, можно искать просто поиском по «browserify %pluginName%». И в целом можно почитать о том, как работает browserify, это сразу решит большую часть проблем. Создавать по вопросу для каждого плагина — плохо.
Зачем использовать тот или иной плагин — вы уже сами должны решить для себя. Какие плюсы и минусы у каждого из решений.

Касательно линта. Вы используете констуркцию import waypoints from 'waypoints';. Т.е. импортируете содержимое плагина в переменную, но эту переменную не используете, вот и линтер и ругается. Если вам нужно просто подключить файл, то достаточно простого import 'waypoints'.