Параметри

Функція initReadMore дозволяє налаштувати поведінку плагіна «Читати далі» через об'єкт параметрів. Це дає змогу адаптувати відображення контенту, анімацію та взаємодію до потреб вашого сайту.

Завдяки гнучким налаштуванням ви можете створювати зручний та естетично привабливий інтерфейс, що відповідає дизайну та функціональним вимогам вашого проєкту.

Нижче наведено детальний опис усіх доступних параметрів:

Опції

Тип

За замовчуванням

Опис

collapsedHeight

Число

250

Визначає початкову висоту згорнутого контенту в пікселях. Якщо вміст коротший за цю висоту, кнопка «Читати далі» не відображається.

speed

Число

300

Задає тривалість анімації розгортання/згортання в мілісекундах. Для згортання в режимі animationMode: 'js' швидкість зменшується вдвічі.

moreLink

Рядок

HTML-рядок для кнопки «Читати далі», що відображається у згорнутому стані. Вставляється в елемент <button>. Для безпеки HTML очищується від потенційно небезпечних атрибутів.

lessLink

Рядок

<span>Close</span>

HTML-рядок для кнопки «Закрити», що відображається у розгорнутому стані. Вставляється в елемент <button>. Підтримує очищення HTML від небезпечного коду.

hideButtonCollapse

Логічний

false

Якщо true, кнопка ховається після розгортання контенту, дозволяючи уникнути зайвих елементів інтерфейсу.

disableCollapse

Логічний

false

Якщо true, вимикає функцію згортання для елемента або діапазону ширини екрана, відображаючи весь контент.

animationMode

Рядок

Визначає тип анімації:

js: анімація через JavaScript із плавною зміною висоти.
css: анімація через CSS, додається клас cs_readmore-animation для стилізації.

animationType

Рядок

ease-in-out

Задає тип переходу для анімації в режимі animationMode: 'js'. Доступні значення: linear, ease, ease-in, ease-out, ease-in-out.

scrollToTopOnCollapse

Логічний

true

Якщо true, сторінка плавно прокручується до верхньої частини контенту після його згортання, покращуючи зручність перегляду.

breakpoints

Об'єкт

{}

Дозволяє задавати різні значення параметрів залежно від ширини екрана. Ключі — максимальна ширина екрана в пікселях, значення — об'єкт із параметрами.

Приклад:


								breakpoints: {
									768: {
										collapsedHeight: 150,
										moreLink: '<span>Читати далі</span>'
									},
									1200: { collapsedHeight: 200 }
								}

Якщо ширина екрана більша за максимальний ключ, згортання вимикається.

beforeToggle

Функція

null

Колбек, що викликається перед початком розгортання/згортання. Отримує аргументи: button (кнопка), element (елемент контенту), isExpanded (логічне значення стану).

Приклад:


								beforeToggle: (button, element, isExpanded) => {
									console.log('Toggle почнеться, стан:', isExpanded);
								}

afterToggle

Функція

null

Колбек, що викликається після завершення розгортання/згортання. Отримує ті ж аргументи: button, element, isExpanded.

Приклад:


								afterToggle: (button, element, isExpanded) => {
									console.log('Toggle завершено, стан:', isExpanded);
								}

blockProcessed

Функція

null

Колбек, що викликається після обробки елемента плагіном. Отримує аргументи: element (елемент контенту), needsToggle (логічне значення, чи потрібна кнопка).

Приклад:


								blockProcessed: (element, needsToggle) => {
									console.log('Елемент оброблено, потрібна кнопка:', needsToggle);
								}

Приклад налаштувань

Для використання плагіна ініціалізуйте його через функцію initReadMore, передавши селектор і об'єкт параметрів. Це дозволяє адаптувати поведінку до вашого сайту.

Нижче наведено приклад ініціалізації з різними параметрами:


					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200,
							speed: 400,
							moreLink: '<span>Детальніше</span>',
							lessLink: '<span>Згорнути</span>',
							animationMode: 'js',
							animationType: 'ease-in-out',
							scrollToTopOnCollapse: true,
							hideButtonCollapse: true,
							disableCollapse: false,
							breakpoints: {
								576: {
									collapsedHeight: 100,
									speed: 200,
									moreLink: '<span>Показати</span>',
									lessLink: '<span>Приховати</span>'
								},
								768: {
									collapsedHeight: 150,
									speed: 300
								},
								1024: {
									disableCollapse: true
								}
							},
							beforeToggle: (button, element, isExpanded) => {
								console.log('Починається перемикання:', isExpanded);
							},
							afterToggle: (button, element, isExpanded) => {
								console.log('Перемикання завершено:', isExpanded);
							},
							blockProcessed: (element, needsToggle) => {
								console.log('Обробка елемента завершена, кнопка:', needsToggle);
							}
						});
					});

Цей код застосовує плагін до всіх елементів із класом .readmore, налаштовуючи висоту, анімацію, текст кнопок і адаптивну поведінку.

Ви можете змінювати параметри, щоб досягти бажаної функціональності, створюючи зручний та інтерактивний інтерфейс для користувачів.