Взаємодії

Взаємодії, доступні з Esl 1.6, дозволяють вам прив’язувати певні події користувача або браузера (наприклад, клік, наведення миші, завантаження контенту тощо) для ініціювання специфічних дій, таких як показ/приховування елемента або спливаючого вікна, додавання/видалення/перемикання CSS класів або HTML атрибутів, запуск анімацій, завантаження додаткових результатів запиту тощо.

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

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

Доступ до взаємодій

При редагуванні елемента натисніть значок “Взаємодії” (перемикання) у верхній частині панелі, щоб відкрити/закрити інтерфейс взаємодій для елемента.

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

Додавання взаємодій

Для додавання взаємодії до елемента натисніть значок “+” поруч із заголовком “Взаємодії”. Ви можете додавати стільки взаємодій до елемента, скільки вам потрібно. Натискання на заголовок певної взаємодії дозволяє вам перейменувати її.

Кожна взаємодія визначається тригером, цільовим, і дією.

Тригер – це подія, яка ініціює цю взаємодію. Подія може бути прив’язана до самого елемента (клік, наведення миші, фокус, розфокусування, входження миші, вихід миші, входження/вихід з області видимості) або до вікна браузера (прокрутка, завантаження контенту, вихід миші з вікна). Доступні тригери наведені нижче:

• Клік
• Навести
• Фокус
• Розфокусування
• Вхід миші
• Вихід миші
• Вхід в область видимості
• Вихід з області видимості
• Кінець анімації
• Запит AJAX завантажувача (Початок / Кінець)
• Відправка форми, Успіх форми, Помилка форми
• Прокрутка
• Завантаження контенту
• Вихід миші з вікна

Дія – це логіка, що виконується, коли подія ініціюється. Ось доступні дії в Esl:

• Показати елемент
• Сховати елемент
• Встановити атрибут
• Видалити атрибут
• Перемикнути атрибут
• Завантажити більше (Запит Циклу)
• Запустити анімацію
• Прокрутити до
• JavaScript (Функція)
• Сховище браузера (Додати, Видалити або Порахувати)

Ціль (на Target) — це елемент на сторінці, на який впливає дія. Ціллю може бути сам елемент (за замовчуванням), CSS селектор або спливаюче вікно.

За замовчуванням взаємодія запускається щоразу, коли відбувається подія (наприклад, при кожному клацанні на елементі). Увімкніть прапорець “Запустити лише один раз”, якщо хочете, щоб взаємодія відбувалася лише один раз при кожному завантаженні сторінки.

Дія: Прокрутка до

Налаштуйте генератор прокрутки до певного елемента при виникненні певних подій на вашій сторінці. Додатково у вас є можливість точно налаштувати поведінку, використовуючи налаштування “Прокрутка до: Зміщення (пікселі)” та “Прокрутка до: Затримка (мс)”, щоб відповідати вашим точним вимогам.

Ось приклад, щоб проілюструвати, як це працює:

У цьому сценарії, після завершення виклику AJAX “Запит постів”, сторінка плавно прокрутиться до елемента з CSS селектором #my-grid-wrapper, очікуючи 500 мілісекунд перед початком прокрутки.

Дія: JavaScript (Функція)

З виходом Esl 1.9.5, у вас є можливість виконувати власні JavaScript функції безпосередньо з панелі взаємодій.

Можуть виконуватися лише JavaScript функції в глобальній області видимості.

Щоб проілюструвати це, розгляньмо кілька прикладів власних функцій JavaScript:

<script>window.myHelperFunctions = {}myHelperFunctions.myCall = () => {console.log('myCall викликано')}myHelperFunctions.nestedFn = {fn1: () => {console.log('fn1 викликано')},fn2: () => {console.log('fn2 викликано')}}// toggleMiniCart — це функція глобальної області видимостіfunction toggleMiniCart() {// run() не є функцією глобальної області видимостіconst run = () => {document.querySelector('.esl-woo-toggle').dispatchEvent( new Event('click') )}setTimeout( run, 100 )}</script>

Щоб виконати вищезазначені функції, просто введіть ім’я функції у полі Ім'я функції (JavaScript). Без дужок або об’єкта вікна!

• Щоб виконати myHelperFunctions.myCall(): myHelperFunctions.myCall
• Щоб виконати myHelperFunctions.nestedFn.fn1(): myHelperFunctions.nestedFn.fn1
• Щоб виконати myHelperFunctions.nestedFn.fn2(): myHelperFunctions.nestedFn.fn2
• Щоб виконати toggleMiniCart(): toggleMiniCart
• Ви не можете виконати run() всередині toggleMiniCart, оскільки це не є функцією глобальної області видимості

ВАЖЛИВО: Якщо ви націлюєтеся на кілька елементів через “CSS Selector”, Esl перебирає кожен цільовий елемент та виконує повʼязану функцію.

Аргументи функцій JavaScript

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

Плейсхолдер %eslcms% слугує аргументом для ваших користувацьких функцій. Встановивши %eslcms% як значення аргументу, ви отримуєте доступ до цінної інформації щодо взаємодії:

• param.source (джерело елемента): Джерело взаємодії є елементом, який спровокував взаємодію в першу чергу.
• param.targets (цільові елементи): Масив цільових елементів, оснований на ваших налаштуваннях.
• param.target (цільовий елемент): Вузол цільового елемента.

Ось приклад отримання цієї інформації у функції:

// Відтворити або призупинити елемент відео// Взаємодія кліку, що виконує цю користувацьку функцію JavaScript function playOrPauseVideo( eslcmsParam, postId ) {const target = eslcmsParam?.target || false// Ви також можете отримати доступ до цілей (масив) та джерела елемента// const targets = eslcmsParam?.targets || false// const source = eslcmsParam?.source || falseif ( target ) {// Знайти перший тег відео з мого цільового вузлаconst video = target.querySelector('video')if ( video && video.play && video.pause ) {// Призупинити або Відтворитиif ( !video.paused ){video.pause()} else {video.play()}}}}

Умови взаємодії

Умови взаємодії є необовʼязковою, більш розвинутою функцією, що дозволяє вам запускати взаємодію лише тоді, коли певні умови, повʼязані зі сховищем браузера (window, sessionStorage, localStorage), виконуються.

Ви можете встановити “Умови взаємодії”, редагуючи взаємодію таким чином:

Приклад взаємодії вище виконується, коли значення window.some_key є some_value.

Налаштування “Відношення” дозволяє вам визначити, чи повинні бути виконані одна (АБО) або всі (І) умови взаємодії, щоб взаємодія відбулася.

Приклад: Відкриття вікна підписки на розсилку при натисканні

У цьому прикладі ми хочемо додати кнопку “підписатися на розсилку” до нижнього колонтитулу сайту. Натискання на цю кнопку повинно відкрити спливаюче вікно, що містить нашу форму підписки на розсилку.

Щоб створити модальне/спливаюче вікно, спочатку потрібно створити шаблон спливаючого вікна. Назвемо його «Спливаюче вікно підписки на новини».

Переконайтеся, що ви налаштували умови шаблону вашого спливаючого вікна підписки на новини на «Увесь вебсайт».

У шаблоні підвалу додайте кнопку та налаштуйте наступну взаємодію:

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

Приклад: Показати спеціальну підказку при наведенні

Давайте створимо спеціальну підказку поряд з текстовим елементом. Наступний приклад використовує елементи «Основний текст» та «Іконка»:

Щоб показати спеціальну підказку поруч з іконкою «?», ми матимемо прихований елемент (наприклад, Div + Текст), де Div має спеціальний клас .my-tooltip, і він буде показаний, коли миша знаходиться над іконкою.

Для цього нам потрібно створити дві взаємодії для елемента Іконки. Одна для показу підказки та інша для приховування підказки, як це:

Кінцевий результат, з деяким додатковим стилюванням, може виглядати так:

Приклад: Створити перемикач (наприклад, кнопка для відкриття/закриття аккордеона)

Ми можемо створити перемикач, як перемикач мобільного меню, використовуючи взаємодії елементів.

Ідея в цьому прикладі полягає в тому, щоб додати два елементи Іконки всередину Div.

Одна з іконок показується, коли кнопка не активна, а інша іконка показується, коли кнопка активна.

Ми також додамо спеціальний CSS та спеціальні класи до Div і іконок. Div повинен мати спеціальний клас .toggle-button з наступним спеціальним CSS:

%root% .toggle-close-icon {display: none;}%root%.is-open .toggle-open-icon {display: none;}%root%.is-open .toggle-close-icon {display: block;}

Клас за замовчуванням повинен мати клас .toggle-open-icon, а активна іконка – клас .toggle-close-icon.

Нарешті, нам потрібно налаштувати взаємодії елементів.

Ідея полягає в тому, щоб додати та видалити клас .is-open у Div. Тож, коли ми натискаємо на класичну іконку, клас .is-open додається, а коли ми натискаємо на активну іконку, клас .is-open видаляється.

Для цього у класичній іконці ми встановлюємо наступну взаємодію:

Для активної іконки ми налаштовуємо протилежну взаємодію:

Анімації

Ви можете анімувати елементи в Esl через Взаємодії.

Esl використовує популярну Animate.css бібліотеку для надання різних чистих CSS анімацій.

Дія: Почати анімацію

Додавши наступну взаємодію до елемента, запускається анімація “jello”, коли хтось клацає на елемент.

Тригер: Завершення анімації

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

Поле Ідентифікатор цільової взаємодії дозволяє вам вказати певну взаємодію з дією “Почати анімацію”, за якою потрібно стежити.

Якщо вказана взаємодія не має дії “Почати анімацію” або не задана, ці налаштування взаємодії будуть проігноровані і не будуть активовані.

Щоб стежити за будь-якою попередньою взаємодією в тій же групі взаємодій (встановленій на рівні елемента або класу), ви можете залишити поле пустим.

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

В наведеному вище прикладі, взаємодія uzfgcm виконає свою дію, як тільки закінчиться анімація xyyyeh.

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

Ви також можете стежити за цією подією, щоб виконати складнішу логіку JavaScript.

// Слухати анімацію xyyyehconst element = event.detail.el || false// Зробіть ваше чудо тут})

Особливі міркування для спливаючих вікон

Спливаючі вікна в Esl мають особливу поведінку, коли йдеться про анімації.

Щоб відкрити або закрити спливаюче вікно загалом після завершення анімації, вам потрібно лише визначити дію “Почати анімацію” з будь-якою анімацією *In або *Out. Це усуває необхідність створення окремої взаємодії для закриття або відкриття спливаючого вікна на основі тригера завершення анімації.

Тригер: Запит AJAX завантажувача (Початок/Завершення)

Відмінне доповнення, представлене в Esl 1.9. Ці два нові тригери призначені для просунутих користувачів, щоб створити власний AJAX завантажувач, якщо вбудований AJAX завантажувач у налаштуванні циклу запитів не здатний задовольнити їхні дизайнерські потреби. Це допомагає виконувати дії, коли Esl AJAX ініціює або завершує роботу.

Esl AJAX = Безкінечний прокрутка, Завантажити більше, AJAX пагінація або Фільтр запитів

Приклад: Застосувати непрозорість 0.5 до блоку запиту, коли AJAX починається, і повернутися, коли AJAX закінчується

1. Створіть сітковий макет для свого циклу запитів, потім задайте власний клас для сітки з непрозорістю 0.5.
2. Додайте взаємодію до вашої сітки, щоб ми могли додавати та видаляти цей клас, коли AJAX починається і закінчується.

Ви можете виконати свою власну функцію JavaScript, коли Esl AJAX починається або закінчується через esl/ajax/start або esl/ajax/end події. (@з 1.9)

document.addEventListener('esl/ajax/start', (event) => {// Отримати queryId з подіїconst queryId = event.detail.queryId || falseif (!queryId) {return}// Виконуйте свої дії тут})

Форма

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

Тригер: Надсилання форми

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

Приклад JavaScript:

document.addEventListener( 'esl/form/submit', function ( event ) {// Доступ до ID елементаconst elementId = event.detail.elementId;// Доступ до даних формиconst formData = event.detail.formData;// Виконуйте дії, використовуючи elementId і formDataconsole.log('ID елемента:', elementId);console.log('Дані форми:', formData);// Тепер ви можете працювати з elementId та formData у вашому обробнику подій});

Тригер: Успіх форми

Відбувається, коли надсилання форми було успішним.

Приклад JavaScript:

document.addEventListener( 'esl/form/success', function ( event ) {// Доступ до ID елементаconst elementId = event.detail.elementId;// Доступ до даних формиconst formData = event.detail.formData;// Доступ до сирцевої відповіді з AJAXconst res = event.detail.res;// Зробіть вашу магію тут});

Тригер: Помилка форми

Тригериться, коли відправка форми була неуспішною. Використовуйте цей тригер для управління сценаріями помилок.

Приклад на JavaScript:

document.addEventListener( 'esl/form/error', function ( event ) {// Доступ до ID елементаconst elementId = event.detail.elementId;// Доступ до даних формиconst formData = event.detail.formData;// Доступ до сирцевої відповіді з AJAXconst res = event.detail.res;// Зробіть вашу магію тут});