Drupal 9 и скрипты jQuery

Главные вкладки

Аватар пользователя xSPiRiTx xSPiRiTx 26 декабря 2022 в 17:41

Не могу заставить работать скрипт jQuery marquee для бегущей строки.

1) Сохраняю файл https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js и помещаю в hope_zymphonies_theme/includes/marquee
2) в файле темы .libraries.yml создаю вот такую запись:

# Marquee
marquee:
  version: 1.x
  js:
    includes/marquee/jquery.marquee.min.js: {}
  dependencies:
    - core/jquery

3) в hope_zymphonies_theme/js/custom.js добавляю:

$(function() {
  $('.marquee').marquee({
    duration: 7000,
    startVisible: true,
    duplicated: true
  });
});

и оборачиваю этот фрагмент кода вот так:

(function ($) {
  Drupal.behaviors.hope_zymphonies_theme = {
    attach: function (context, settings) {
                        $(function() {
                          $('.marquee').marquee({
                            duration: 7000,
                            startVisible: true,
                            duplicated: true
                          });
                        });
   }
  };
})(jQuery);

...этот custom.js прописан в .libraries.yml вот так:

# Global components
global-components:
  Version: 1.x
  css:
    theme:
      css/global.css: {}
      css/media.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

4) в шаблон добавляю html
<div class='marquee' style='overflow:hidden'>bla bla bla</div>

5) Чистка кэша

Не работает! Что делаю не так? Уже второй день не могу сделать простую бегущую строчку. В семёрке с этим таких проблем не было.
В консоли пишет:
Uncaught TypeError: $(...).marquee is not a function

Комментарии

Аватар пользователя ivnish ivnish 26 декабря 2022 в 17:44

xSPiRiTx wrote: Uncaught TypeError: $(...).marquee is not a function

Говорит о том, что он скорее всего не видит jquery.marquee.min.js. Что показывает отладчик в браузере, этот файл подключен на странице?

Аватар пользователя xSPiRiTx xSPiRiTx 26 декабря 2022 в 18:08

после {{ attach_library('themename/marquee') }} в шаблоне заработало. Но происходит какое-то безумие. Скрипт почему-то выводит столбцом огромное множество строк с текстов внутри тэга.

Аватар пользователя xSPiRiTx xSPiRiTx 26 декабря 2022 в 19:32

да. уже понял. но как использовать не понял. смотрю примеры использования и не могу вкурить как в моём случае once использовать

(function ($) {
  Drupal.behaviors.hope_zymphonies_theme = {
    attach: function (context, settings) {
      $(context).find('.marquee').once('marquee').click(function () {
                        $(function() {
                          $('.marquee').marquee({
                            duration: 7000,
                            startVisible: true,
                            duplicated: true
                          });
                        });
      });
    }
  };
})(jQuery);

что здесь неправильно?

Аватар пользователя xSPiRiTx xSPiRiTx 26 декабря 2022 в 19:53
(function ($) {
  Drupal.behaviors.hope_zymphonies_theme = {
    attach: function (context, settings) {
                        $(function() {
                          $(context).find('.marquee').once('hope_zymphonies_theme').marquee({
                            duration: 7000,
                            startVisible: true,
                            duplicated: true
                          });
                        });
   }
  };
})(jQuery);

Вот такая конструкция заработала!
Правильно сделал?