События
Плагин Readmore.js генерирует два специальных события: readmore:beforeToggle
и readmore:afterToggle
. Они позволяют разработчикам отслеживать изменение состояния элемента (раскрытие или сворачивание) и добавлять собственную логику для кастомизации поведения.
readmore:beforeToggle
Это событие срабатывает до изменения состояния элемента (раскрытие или сворачивание). Оно полезно для выполнения подготовительных действий, например, изменения стилей или запуска анимаций перед переключением.
element.addEventListener('readmore:beforeToggle', function(event) {
// Пример: изменяем цвет фона элемента перед переключением
event.target.style.backgroundColor = '#f0f0f0';
});
readmore:afterToggle
Это событие срабатывает после завершения изменения состояния элемента. Оно позволяет выполнять действия, связанные с новым состоянием, например, обновление текста кнопки или стилей.
element.addEventListener('readmore:afterToggle', function(event) {
// Пример: выводим сообщение в консоль после переключения
console.log('Элемент изменен. Новое состояние:', event.target.getAttribute('aria-expanded'));
});
Примечание
События привязываются к элементам, которые обрабатываются плагином (те, что соответствуют селектору). Используйте event.target
, чтобы получить доступ к элементу, вызвавшему событие.
Обратные вызовы (Callbacks)
Readmore.js поддерживает три обратных вызова, которые можно передать в объекте конфигурации: beforeToggle
, afterToggle
и blockProcessed
. Они позволяют выполнять собственный код на разных этапах работы плагина, обеспечивая гибкость в настройке поведения.
beforeToggle
Вызывается до переключения состояния элемента (раскрытие или сворачивание). Этот вызов полезен для подготовки элементов или изменения их внешнего вида перед анимацией.
Аргументы:
trigger
— кнопка, которая инициирует переключение (например, «Читать далее» или «Скрыть»).
element
— элемент с контентом, который раскрывается или сворачивается.
isExpanded
— логическое значение: true
, если элемент будет раскрыт, false
— если свернут.
beforeToggle: function(trigger, element, isExpanded) {
// Пример: добавляем анимацию затемнения перед переключением
element.style.transition = 'opacity 0.2s';
element.style.opacity = 0.7;
}
afterToggle
Вызывается после завершения переключения состояния элемента. Позволяет выполнить действия, связанные с новым состоянием, например, обновить стили или запустить дополнительные эффекты.
Аргументы: такие же, как у beforeToggle
(trigger, element, isExpanded).
afterToggle: function(trigger, element, isExpanded) {
// Пример: восстанавливаем прозрачность после переключения
element.style.opacity = 1;
console.log('Контент', isExpanded ? 'раскрыт' : 'свернут');
}
blockProcessed
Вызывается после обработки каждого элемента плагином, независимо от того, применяется ли сворачивание. Этот вызов полезен для начальной настройки элементов или анализа их состояния.
Аргументы:
element
— элемент, который был обработан.
isExpandable
— логическое значение: true
, если контент длиннее collapsedHeight
и требует кнопки, false
— если сворачивание не требуется.
blockProcessed: function(element, isExpandable) {
// Пример: добавляем класс для стилизации, если элемент можно раскрыть
if (isExpandable) {
element.classList.add('has-readmore');
} else {
element.classList.remove('has-readmore');
}
}
Примечание
Обратные вызовы не возвращают значений, но могут изменять элементы или вызывать сторонние функции. Они вызываются для каждого элемента, соответствующего селектору.
Пример комплексного использования
Этот пример демонстрирует, как комбинировать события и обратные вызовы для создания интерактивного опыта. Мы изменяем стили кнопки, обновляем текст в зависимости от состояния и добавляем кастомный класс для элементов, которые можно раскрыть.
initReadMore('.content', {
collapsedHeight: 200,
speed: 400,
moreLink: '<span>Читать далее</span>',
lessLink: '<span>Скрыть</span>',
beforeToggle: function(trigger, element, isExpanded) {
// Изменяем цвет кнопки перед переключением
trigger.style.backgroundColor = isExpanded ? '#d4edda' : '#f8d7da';
},
afterToggle: function(trigger, element, isExpanded) {
// Обновляем текст кнопки и добавляем лог
trigger.textContent = isExpanded ? 'Скрыть' : 'Читать далее';
console.log('Состояние изменено:', isExpanded ? 'раскрыт' : 'свернут');
},
blockProcessed: function(element, isExpandable) {
// Добавляем или удаляем класс в зависимости от возможности раскрытия
element.classList.toggle('expandable-content', isExpandable);
}
});
// Добавляем слушателя события для дополнительной логики
document.querySelectorAll('.content').forEach(element => {
element.addEventListener('readmore:afterToggle', function(event) {
// Пример: добавляем анимацию после раскрытия
if (event.target.getAttribute('aria-expanded') === 'true') {
event.target.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
} else {
event.target.style.boxShadow = 'none';
}
});
});
Примечание
В этом примере кнопка изменяет цвет и текст в зависимости от состояния, элемент получает класс expandable-content
, если его можно раскрыть, а после раскрытия добавляется тень для визуального эффекта.