События

Плагин 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'));
					});
				

Обратные вызовы (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';
							}
						});
					});