InsalesCutList

jQuery-плагин, который переносит не помещающиеся в строку пункты списка в меню «Ещё». В виджетах InSales используется с jQuery 3.5.1.

Подключение

Подключите jQuery, dist/jquery.cut-list.css и dist/jquery.cut-list.min.js.

<ul class="js-cut-list">
  <li><a href="/">Главная</a></li>
  <li><a href="/collection/all">Каталог</a></li>
  <li><a href="/page/contacts">Контакты</a></li>
</ul>

const list = new InsalesCutList($('.js-cut-list'), {
  moreBtnTitle: 'Ещё',
  alwaysVisibleElem: '.is-current',
  minWidth: 767,
});

Конструктор new InsalesCutList(elements, options) принимает селектор, DOM-элемент, массив элементов или jQuery-объект. Один экземпляр может управлять несколькими списками.

Инициализация через jQuery возвращает jQuery-объект; экземпляр доступен через data:

const $list = $('.js-cut-list').cutList({ minWidth: 767 });
const instance = $list.first().data('InsalesCutList');

Параметры

Все параметры необязательны и передаются вторым аргументом конструктора или в .cutList(options).

Параметр	Тип	По умолчанию	Описание
moreBtnTitle	string	'Еще'	Текст или HTML кнопки раскрытия меню.
showMoreOnHover	boolean	false	Открывать меню при наведении на устройствах с поддержкой hover. Клик, тап и клавиатура также работают.
alwaysVisibleElem	string	undefined	Селектор приоритетного пункта или элемента внутри него. Учитывается первое совпадение. Если пункт не помещается вместе с кнопкой, он тоже переносится в меню.
minWidth	number, null	null	Плагин работает при ширине окна больше указанного значения. При меньшей или равной ширине пункты возвращаются в список. null и 0 отключают ограничение.
resizeDelay	number	50	Задержка пересчёта в мс после изменения ширины контейнера, события .resize() списка, загрузки изображения или шрифта. Для resize и поворота окна используется отдельная задержка 300 мс.

Для включения с 768 px передайте minWidth: 767. Создавайте экземпляр на любой начальной ширине: он сам обработает переход через порог и поворот устройства.

Колбеки

Колбеки задаются в том же объекте параметров. Каждый получает jQuery-объект текущего списка: callback($list). По умолчанию все колбеки — пустые функции; возвращаемое значение не используется.

Колбек	Когда вызывается
onBeforeCalc	Перед измерением и расчётом положения открываемого меню. Это не колбек пересчёта видимых пунктов.
onBeforeOpen	После расчёта положения, перед показом меню.
onOpen	После показа меню.
onBeforeClose	Перед закрытием открытого меню.
onClose	После закрытия меню.

Порядок открытия: onBeforeCalc → onBeforeOpen → onOpen. Закрытие при пересчёте, destroy() или отключении по minWidth также вызывает колбеки закрытия. Для уже закрытого меню они не вызываются.

new InsalesCutList($('.js-cut-list'), {
  onOpen: ($list) => $list.find('.cut-list__more-content').scrollTop(0),
});

Методы

Методы экземпляра действуют на все принадлежащие ему списки и возвращают undefined.

Метод	Действие
list.redrawList()	Сразу пересчитывает пункты активных списков, например после изменения текста или состава меню. Закрывает открытое меню.
list.setup()	Запускает или пересчитывает списки с учётом minWidth. Подходит для повторного запуска после destroy().
list.init()	Полностью пересоздаёт списки без начальной проверки minWidth. Последующие события resize снова учитывают порог.
list.destroy()	Возвращает пункты в список, восстанавливает исходные классы и атрибуты, удаляет меню, обработчики и наблюдатели. Вызывайте перед удалением корня из DOM.

После явного destroy() изменение ширины окна не запускает экземпляр заново. Повторный .cutList() также не перезапускает его; используйте setup().

list.redrawList();
list.destroy();
list.setup();

Методы jQuery

Вызов	Действие
$.fn.cutList.setup(elements, options)	Создаёт недостающие экземпляры, перезапускает или пересчитывает выбранные списки с учётом minWidth. options применяется только при создании нового экземпляра.
$.fn.cutList.destroy(elements)	Уничтожает только выбранные списки, в том числе внутри группового экземпляра.

Оба метода принимают селектор, DOM-элементы или jQuery-объект и возвращают jQuery-объект выбранных элементов. Существующие экземпляры сохраняют свои настройки.

Для отложенного пересчёта также поддерживается сигнал $('.js-cut-list').resize(): он использует resizeDelay и учитывает minWidth.

Вёрстка

Вложенной обёртке в grid/flex может потребоваться min-width: 0. Перенос длинных названий в выпадающем меню включается отдельно классом cut-list--wrap-dropdown на корне списка; по умолчанию сохраняется прежнее оформление.

Разработка

Нужен Node.js 22.22.2+ в ветке 22, 24.15.0+ в ветке 24 или 26+.

npm ci
npm run dev          # плейграунд
npm run format       # Prettier
npm test             # форматирование, сборка и Vitest
npm run build        # обычная и минифицированная сборки через Vite
npx playwright install --with-deps chromium firefox webkit
npm run test:browser

Изменяйте файлы в src/, затем пересобирайте браузерные файлы. Сборка сохраняет jquery.cut-list.js и jquery.cut-list.min.js в папку dist/. Стили находятся в dist/jquery.cut-list.css.