Skip to content
This repository has been archived by the owner on Sep 12, 2023. It is now read-only.

Плагин Waypoints #54

Closed
gearmobile opened this issue Nov 8, 2015 · 4 comments
Closed

Плагин Waypoints #54

gearmobile opened this issue Nov 8, 2015 · 4 comments
Labels

Comments

@gearmobile
Copy link
Contributor

Пробую подключить поддержку плагина 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
Copy link
Contributor

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

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

@gearmobile
Copy link
Contributor Author

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

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

@gearmobile
Copy link
Contributor Author

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

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

@dzhiriki
Copy link
Contributor

dzhiriki commented Nov 9, 2015

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

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

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

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

No branches or pull requests

3 participants