Події

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

Cпрацьовує до перемикання стану елемента. Він дозволяє виконати дії перед зміною стану.

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

afterToggle

Cпрацьовує після перемикання стану елемента. Він дозволяє повернути елемент у початковий стан після зміни.

					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');
							}
						}
					});