Події

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