События

Readmore.js генерирует два основных события: readmore:beforeToggle и readmore:afterToggle. Эти события можно слушать и использовать для добавления кастомной логики в процессе переключения состояния элемента.

readmore:beforeToggle

Это событие вызывается перед изменением состояния элемента. Оно предоставляет возможность настроить поведение до того, как состояние элемента будет изменено.

					element.addEventListener('readmore:beforeToggle', function(event) {
						// Пример: изменяем стиль кнопки перед переключением состояния
						event.target.style.backgroundColor = 'gray';
					});
				

readmore:afterToggle

Это событие вызывается после изменения состояния элемента. Оно позволяет выполнить действия, как только состояние элемента изменится.

					element.addEventListener('readmore:afterToggle', function(event) {
						// Пример: изменяем текст кнопки после переключения состояния
						const button = event.target;
						button.textContent = button.textContent === 'Читать далее' ? 'Скрыть' : 'Читать далее';
					});
				

Обратные вызовы (Callbacks)

Readmore.js поддерживает использование callback-функций, которые можно передать в параметрах конфигурации. Это позволяет выполнять определенные действия на различных этапах работы плагина.

Обратные вызовы beforeToggle и afterToggle получают следующие аргументы: trigger, element и isExpanded.

• trigger — элемент, который инициирует действие (например, кнопка «Читать далее» или «Закрыть»).
• element — элемент, содержащий контент, который сворачивается или раскрывается.
• isExpanded — значение, указывающее на состояние контента: (true — развернут, false — свернут).

beforeToggle

Срабатывает до переключения состояния элемента. Он позволяет выполнить действия перед изменением состояния.

					beforeToggle: function(trigger, element, isExpanded) {
						// Пример: делаем элемент полупрозрачным перед переключением состояния
						element.style.opacity = 0.5;
					}
				

afterToggle

Срабатывает после переключения состояния элемента. Он позволяет вернуть элемент в исходное состояние после изменения.

					afterToggle: function(trigger, element, isExpanded) {
						// Пример: восстанавливаем непрозрачность элемента после изменения состояния
						element.style.opacity = 1;
					}
				

blockProcessed

Вызывается после завершения обработки элемента, но до его отображения. Это полезно для выполнения первоначальных настроек или анализа.

Обратный вызов blockProcessed получает следующие аргументы: element и isExpandable

• element — текущий элемент, который обрабатывается.
• isExpandable — логическое значение, указывающее, нужно ли сворачивание.

					blockProcessed: function(element, isExpandable) {
						// Пример: если элемент можно развернуть, скрываем кнопку «Читать далее»
						if (isExpandable) {
							const button = element.querySelector('.cs_readmore-btn');
							if (button) {
								button.style.display = 'block';
							}
						} else {
							// Если элемент нельзя развернуть, скрываем кнопку
							const button = element.querySelector('.cs_readmore-btn');
							if (button) {
								button.style.display = 'none';
							}
						}
					}
				

Пример комплексного использования

Этот пример демонстрирует использование callback-функций для изменения внешнего вида и текста кнопки в зависимости от состояния элемента. В данном примере показано, как можно изменить стиль кнопки до и после переключения состояния:

					initReadMore('.content', {
						beforeToggle: function(trigger, element, isExpanded) {
							// Пример: изменяем цвет фона кнопки до переключения состояния
							trigger.style.backgroundColor = isExpanded ? '#90EE90' : '#FF7F7F';
						},
						afterToggle: function(trigger, element, isExpanded) {
							// Пример: обновляем текст кнопки после переключения состояния
							trigger.textContent = isExpanded ? 'Скрыть' : 'Читать далее';
						},
						blockProcessed: function(element, isExpandable) {
							// Пример: добавляем класс, если элемент можно развернуть
							if (isExpandable) {
								element.classList.add('expandable');
							}
						}
					});