6 апреля 2019 в 22:08
Приветствую!
Подскажите как подключать любые скрипты с Github и прочих сайтов на Drupal 7 ?
По идее есть статьи и некоторые видео как подключать, но чтобы вот подробно показать процесс подключения такого толком нет.
Для примера возьмём часто встречающийся на сайтах скрипт крутящихся (анимированных) цифор https://github.com/aishek/jquery-animateNumber
Что понятно по подключению скриптов к Drupal 7 из статей и прочих материалов.
1. Качаем файл скрипта в папку "js" в нашей теме. Например вот по этому пути ../sites/all/themes/НАЗВАНИЕ_ТЕМЫ/js/jquery.animateNumber.js
2. Подключаем скрипт в файле info-файле нашей темы:
scripts[] = js/jquery.animateNumber.js
3. Создаём блок на сайте с цифрами, которые будем анимировать. Например, c таким простым содержимым:
<span id="fun-level">100</span>
Вопрос - что дальше делать???
На сколько я понял, создаём новый java script файл (например custom.js ) и подключаем его тоже в info-файле нашей темы. Файл изначально специально для Drupal 7 у нас вот с таким содержимым обёртки для jQuery:
Drupal.behaviors.НАЗВАНИЕ_ТЕМЫ = {
attach: function (context, settings) {
// Наш Javascript code вставляем здесь
}
};
}(jQuery));
И в середину этой обёртки вставляем инициализацию нашего скрипта. Т.е. в итоге получается вот такой код:
Drupal.behaviors.НАЗВАНИЕ_ТЕМЫ = {
attach: function (context, settings) {
// Начало Javascript кода с Github
$('#fun-level').animateNumber(
{
number: 100,
color: 'green', // require jquery.color
'font-size': '50px',
easing: 'easeInQuad', // require jquery.easing
// optional custom step function
// using here to keep '%' sign after number
numberStep: function(now, tween) {
var floored_number = Math.floor(now),
target = $(tween.elem);
target.text(floored_number + ' %');
}
},
1800
);
// Конец Javascript кода с Github
}
};
}(jQuery));
ВОПРОСЫ:
1. Почему анимация у меня работает и что я сделал не так? 
2. Если вставлять, например ещё какой-нибудь один Javascript, то подключать его в новом файле или прямо в этом же custom.js можно ?
Если в этом же файле, то писать ли новую "обёртку" jQuery или можно в этой же скрипт разместить ?
Заранее спасибо за помощь!
Комментарии
"Почему не работает" - смотрите консоль браузера, там все ошибки будут. Может файл не подключился, может кеш не очищали, может еще что-то.
Другие js можно в этом же, обычно нет необходимости плодить десятки js по три строчки.
При быстром осмотре, вроде, все сделали верно. Смотрите консоль браузера, как советовали выше. А еще может быть несовместимость скрипта с вашей версией jQuery. По умолчанию в Drupal 7 используется версия 1.4. Модулем jquery_update её поднимают до 1.10. Ваш же скрипт может требовать ветку 3.*, например.
В документации по скрипту написано что поддерживает вот эти версии jQuery^
Requires jQuery 1.7.0 or higher (tested with 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.0).
У меня стоит 1.10
Но пробовал и другие
План такой:
- проверить наличие скрипта и библиотеки на странице
- проверить наличие целевого тега на странице
- проверить что в консоли браузера F12 нет ошибок, при необходимости "подружить" с требуемыми версиями и библиотеками.
Кэш сайта сбрасывали?))
Кэш чистил
Посмотрел в консоли - была ошибка, которая ругалась на маску ввода номера телефона Mask Input
Удалил скрипт маски телефона и заработало.
Появились новые вопросы:
1. Могут ли быть конфликты между скриптами? Т.е. один мешает другому работать при условии, что работают они с разными полями, блоками, а также классами и ID.
2. Как теперь сделать чтобы скрипт запускался только при просмотре нужного блока (на нужном экране) ?
Почитав в интернете понял, что нужно делать с помощью использования вот такого кода примерно:
$(window).scroll(function() {
if ($(this).scrollTop() > 1000) {
// вызываем какую-то функцию, которая содержит анимацию
}
});
});
Попробовал применить - не работает.
Подскажите какой именно будет полный код в моём случае?
Про "$(document).ready( ..." вообще забудьте, не нужно это, если вы правильно изначально код обернули функциями друпала.
В теории "конфликты" могут быть, на практике, как мне кажется, с большей вероятностью причина будет в том, что вы что-то не так делаете, чем реальные ошибки в коде плагинов.
Чтобы сделать что-то, только тогда, когда человек "долистает" до блока смотрите в сторону - https://github.com/dirkgroenen/jQuery-viewport-checker , а из готовых эффектов, например, https://michalsnik.github.io/aos/ .
Спасибо за ответ!
AOS я использую, но там нет анимации чисел к сожалению.
Что касается запуска скриптов при скроллинге экрана и достижении нужного блока - элементарно не хватает знаний в Javascript, т.к. ещё только изучаю его. Поэтому и прошу помощи.