Модуль «Спойлеры»
Спойлер — это заголовок, при клике на который под ним разворачивается некий контент.
Основные возможности
- Использование множества блоков со спойлерами
- Отключение/включение функционала на определенной ширине экрана
- Функция «аккордеон», когда в блоке может быть открыт только один спойлер
- Возможность анимированного открытия
- Семантика
Подключение функционала
[HTML] В нужном месте вызвать сниппет spoilers (классы можно заменить на нужные). Либо вручную создать структуру с соответствующими дата-атрибутами. Обратите внимание, что добавление класса _spoiler-active для элемента с атрибутом data-spoiler сделает спойлер активным (открытым).
Пример блока с двумя спойлерами:
<div data-spoilers="spoilers" class="spoilers">
<div class="spoilers__item">
<button type="button" data-spoiler class="spoilers__title">Заголовок спойлера №1</button>
<div class="spoilers__body">Контент спойлера №1</div>
</div>
<div class="spoilers__item">
<button type="button" data-spoiler class="spoilers__title">Заголовок спойлера №2</button>
<div class="spoilers__body">Контент спойлера №2</div>
</div>
</div>[JS] В файле app.ts раскомментировать строку new Spoilers()
В момент инициализации (включения) функционала спойлера, контент будет скрыт, а к элементу с атрибутом data-spoilers будет добавлен класс _spoiler-init
Использование функционала
Отключение/включение функционала на определенной ширине экрана
Для того, чтобы отключить/включить функционал спойлера на определенной ширине экрана, необходимо для атрибута data-spoilers через запятую указать нужную ширину экрана а также тип:
- max (по умолчанию) — функционал включится на ширине меньшей чем указанная;
- min — функционал включится на ширине большей чем указанная.
<div class="spoilers" data-spoilers="768,min">...</div>Включение режима «аккордеон»
Для того, чтобы включить режим «аккордеон», необходимо для элемента с атрибутом data-spoilers добавить атрибут data-one-spoiler
<div data-spoilers data-one-spoiler class="spoilers">...</div>Теперь, при открытии спойлера, другой открытый спойлер в блоке будет закрываться
Управление скоростью анимации
Для того, чтобы управлять временем анимации открытия/закрытия спойлера, необходимо для элемента с атрибутом data-spoilers добавить атрибут data-spoilers-speed, а в качестве значения указать время анимации в миллисекундах (по умолчанию 500).
<div data-spoilers data-spoilers-speed="1000" class="spoilers">...</div>Закрытие при клике вне спойлера
Если необходимо закрывать спойлер(ы) при клике вне блока («на пустом месте»), то следует добавить нужному заголовку(кам) атрибут data-spoiler-close
<div data-spoilers="spoilers" class="spoilers">
<div class="spoilers__item">
<button type="button" data-spoiler data-spoiler-close class="spoilers__title">Заголовок спойлера №1</button>
<div class="spoilers__body">Контент спойлера №1</div>
</div>
</div>Модуль «Табы»
Табы — это заголовки и соответствующие им блоки. Как правило, по умолчанию открыт только один блок остальные скрыты. При клике на заголовок показывается соответствующий ему блок.
Основные возможности
- Использование множества блоков с табами
- Открытие нужного таба по хешу
- Превращение табов в спойлеры на указанной ширине экрана (удобно для адаптива)
- Возможность анимированного открытия табов
- Семантика
Подключение функционала
[HTML] В нужном месте вызвать сниппет tabs (классы можно заменить на нужные). Либо вручную создать структуру с соответствующими дата-атрибутами. Обратите внимание, что добавление класса _tab-active для заголовка таба сделает таб активным (открытым).
Пример блока с тремя табами:
<div data-tabs class="tabs">
<nav data-tabs-titles class="tabs__navigation">
<button type="button" class="tabs__title _tab-active">Таб №1</button>
<button type="button" class="tabs__title">Таб №2</button>
<button type="button" class="tabs__title">Таб №3</button>
</nav>
<div data-tabs-body class="tabs__content">
<div class="tabs__body">Содержимое первого таба</div>
<div class="tabs__body">Содержимое второго таба</div>
<div class="tabs__body">Содержимое третьего таба</div>
</div>
</div>[JS] В файле app.js раскомментировать строку new Tabs()
Использование функционала
Превращение табов в спойлеры
Для того, чтобы табы превращались в спойлеры, необходимо для элемента с атрибутом data-tabs указать значение ширины экрана ниже которой произойдет превращение:
<div data-tabs="768" class="tabs">...</div>В момент превращения, к объекту с атрибутом data-tabs добавится класс _tab-spoller, по которому можно изменить стили для нового представления табов-спойлеров.
Открытие нужного таба по хешу
Если есть необходимость открывать конкретный таб в конкретном блоке табов при открытии страницы по хешу, необходимо, для элемента с атрибутом data-tabs, добавить атрибут data-tabs-hash:
<div data-tabs data-tabs-hash class="tabs">...</div>Теперь, при клике на заголовки табов, к адресу страницы будет добавляться хеш вида: #tab-0-1, где 0 — это идентификатор блока с табами, а 1 — идентификатор таба в этом блоке.
Соответсвенно, перейдя на страницу с хешем #tab-0-1 откроется второй таб в первом блоке с табами. При #tab-2-0 откроется первый таб в третьем блоке с табами и т.д.
Анимация при открытии таба
Для того, чтобы табы открывались плавно, необходимо объекту с атрибутом data-tabs, добавить атрибут data-tabs-animate, а в качестве значения указать количество миллисекунд за которые откроется таб (по умолчанию 500).
<div data-tabs data-tabs-animate="1000" class="tabs">...</div>Переключение табов по ховеру
Для того, чтобы табы открывались по ховеру, необходимо атрибуту data-tabs добавить значение hover.
<div data-tabs="hover" class="tabs">...</div>Модуль «Прокрутка к нужному блоку». Плавная навигация по странице.
В данном модуле реализован плавный скролл после клика по ссылке (кнопке) до нужного блока на странице. Если в адресе страницы будет передан хеш и блок с таким селектором будет найден на странице, прокрутка к блоку произойдет автоматически. Также, модуль позволяет построить навигацию по странице с добавлением класса текущему пункту навигации (пункту меню) при скролле к определенному блоку.
Подключение функционала
[JS] В файле js/app.js раскомментировать строку scroll.pageNavigation()
Использование функционала
[HTML] К элементам навигации (пунктам меню), либо к произвольному объекту, добавляем HTML-атрибут data-goto а в качестве значения указываем CSS селектор блока до которого нужно прокрутить:
<a href="#" data-goto=".имя класса блока" class="link">Пункт навигации</a>
<a href="#" data-goto="#id блока" class="link">Пункт навигации</a>Если нужно чтобы скролл учитывал шапку (не докручивал на высоту шапки, используется при фиксированных шапках) нужно добавить к объекту навигации атрибут data-goto-header:
<a href="#" data-goto-header data-goto=".имя класса блока" class="link">Пункт навигации</a>Если нужно чтобы скролл не докручивал до блока на указанную высоту необходимо добавить к объекту навигации атрибут data-goto-top а в качестве значения указать число — необходимую высоту:
<a href="#" data-goto-top="30" data-goto="#id блока" class="link">Пункт навигации</a>data-goto-top можно совмещать с data-goto-header, тогда значение data-goto-top добавится к высоте шапки.
Добавление класса к текущему пункту навигации
Для включения функционала добавления класса подключаем модуль наблюдатель:
[JS] В файле app.js раскомментировать строку new ScrollWatcher({})
[HTML] Для блоков к которым прокручивается страница добавляем атрибут data-watch со значением navigator:
<a href="#" data-goto=".some-section" class="link">Пункт навигации</a>
<section data-watch="navigator" class="some-section">...</section>После этого, при прокрутке к облоку (объекту) навигации, к соответствующему пункту навигации будет добавлен класс _navigator-active
Прокрутка к нужному блоку по хешу (при открытии страницы)
Для того чтобы прокрутить страницу к нужному блоке при открытии страницы необходимо добавить к адресу хеш содержащий имя класса нужного блока.
Пример адресной строки и нужного блока:
https://tresksites.ru/index.html#some-section
<section class="some-section">...</section>Модуль «Наблюдатель» за появлением элементов при прокрутке страницы (скролле)
Модуль «Наблюдатель» можно использовать для решения самых разных задач: анимация элементов при скролле, подсветка активного пункта меню (используется в модуле «Прокрутка к нужному блоку») и многих других.
Суть работы наблюдателя заключается в добавлении класса _watcher-view элементу в момент его появлении в вьюпорте (экране) при скролле а также при открытии страницы. И, соответственно, убирании при уходе объекта из вьюпорта.
Подключение модуля
[HTML] Для объекта, за которым нужно установить наблюдение, следует добавить атрибут data-watch
<div data-watch class="block">...</div>[JS] В файле app.js раскомментировать строку new ScrollWatcher({})
Дополнительные настройки:
- data-watch-root=’селектор’ — селектор родителя внутри которого наблюдать за объектом. По умолчанию <body>;
- data-watch-margin=’значение’ — отступ от родителя. Указываем значение в px или в %;
- data-watch-threshold=’значение’ — процент показа объекта для срабатывания. Где 1 = 100% показ объекта. Указываем только целые или десятичные числа, по умолчанию 0. Может содержать массив значений через запятую;
- data-watch-once — наблюдать только один раз. То есть класс к объекту добавится только один раз и не будет убран при уходе объекта из вьюпорта.
Пример — класс добавится только один раз, при появлении объекта на 50% его высоты:
<div data-watch data-watch-threshold="0.5" data-watch-once class="block">...</div>События
После каждом срабатывании наблюдателя, возникает событие watcherCallback, его можно отловить в любой части кода:
document.addEventListener('watcherCallback', function (e) {
// Полная информация от наблюдателя
const entry = e.detail.entry
// Наблюдаемый объект
const targetElement = entry.target
})Модуль «Popup». Всплывающие (модальные) окна
Данный функционал добавляет возможность использовать всплывающие окна. Работа модуля заключается в следующем: пользователь нажимает на указанный элемент (по умолчанию это атрибут с указанным селектором data-popup=‘selector‘). При этом к тегу body добавляется класс popup-show. Также блокируется прокрутка страницы (можно отключить). Закрытие popup происходит при клике на кнопку закрытия (по умолчанию элемент с атрибутом data-close), по клику на «пустом месте» (не на popup), по нажатию кнопки ESC.
Подключение функционала
- [HTML] Подключить файл после оболочки wrapper;
- [SCSS] Подключить файл scss/base/popup.scss;
- [JS] Раскомментировать new Popup({}) в файле app.js.
Использование функционала
Для того, чтобы вызвать попап, необходимо на странице ввести объект с дата-атрибутом, в котором указан селектор (класс или id) всплывающего окна, на которое ссылаемся:
<button data-popup="#popup" class="button">Я открываю попап</button>В примере попап вызывается по id popup:
<div id="popup" aria-hidden="true" class="popup">
<div class="popup__wrapper">
<div class="popup__content">
<button data-close type="button" class="popup__close">Закрыть</button>
<div class="popup__text">Text</div>
</div>
</div>
</div>Открытие VK видео в попапе
Для того чтобы открыть видеоролик в попапе, следует добавить к кнопке, которая вызывает попап, атрибут data-popup-vk, а в качестве значения указать код ролика. Также следует указать атрибут data-popup-vk-place для объекта в котором хотим вывести ролик:
<button data-popup="#popup-video" data-popup-vk="31038184&id=456243271" type="button" class="button">Видео</button><div id="popup-video" aria-hidden="true" class="popup popup--video">
<div class="popup__wrapper">
<div class="popup__content">
<button data-close type="button" class="popup__close">Закрыть</button>
<div data-popup-vk-place class="popup__body responsive-video"></div>
</div>
</div>
</div>.responsive-video {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
video,
iframe,
object,
embed {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
}События
В классе попапов существуют ряд событий:
- beforePopupOpen — сработает перед открытием попапа
- afterPopupOpen — сработает после открытия попапа
- beforePopupClose — сработает перед закрытием попапа
- afterPopupClose — сработает после закрытия попапа
Чтобы работать с событием вешаем прослушку на document:
document.addEventListener('afterPopupOpen', function (e) {
// Попап
const currentPopup = e.detail.popup
// Производим нужные действия и, например, закрывем попап
currentPopup.close()
})Модуль «Динамический адаптив»
Во время работы над адаптивом сайта, нам то и дело приходится изменять внешний вид объекта. В некоторых случаях нам необходимо изменить порядок элементов, когда при определенном разрешении экрана некоторый блок должен находится в совершенно другом месте структуры. Особенно часто это требуется при адаптации шапки сайта когда необходимо перенести блок с контактами в меню-бургер.
Функционал динамического адаптива перемещает необходимый блок (на определенном разрешении) в другой блок. Перемещение отображается в разметке HTML.
Подключение функционала
[JS] В файле app.ts раскомментировать строку new ResponsiveAdapter('max')'»
Использование функционала
[HTML] В блок который нужно переместить добавляем атрибут data-da со значениями атрибута указанными ниже:
<div data-da=".other-block,767,2" class="block">...</div>- .other-block — класс блока, куда перемещаем;
- 767 — ширина экрана, на которой произойдет перемещение;
- 2 — на какую позицию внутри блока перемещаем (в разметке HTML). Если не указать, то будет перемещено в конец.
У модуля есть ограничения, например, если перекидывать несколько объектов одновременно в один и тот же блок, может возникнуть путаница с порядком блоков.
Модуль «Показать ещё»
Модуль «Показать ещё» позволяет изначально скрыть часть текста или элементов списка показывая только указанную высоту либо количество элементов. Есть возможность включать функционал на определенной ширине экрана (брейкпоинте).
Подключение функционала
[JS] Раскомментировать new ShowMore() в файле app.js. [HTML] В нужном месте вызвать сниппет showmore (классы заменить на нужные). Либо вручную создать структуру где для оболочки добавлен атрибут data-showmore, для дочернего элемента data-showmore-content и для кнопки data-showmore-button. Кнопку изначально нужно скрыть добавив атрибут hidden и добавить два тега <span> с текстом показа и скрытия контента:
<div data-showmore class="block">
<div data-showmore-content class="block__content"></div>
<button hidden data-showmore-button type="button" class="block__more">
<span>Показать еще</span><span>Скрыть</span>
</button>
</div>[data-showmore-button] {
span {
&:last-child {
display: none;
}
._showmore-active & {
display: none;
&:last-child {
display: block;
}
}
}
}Использование функционала
В элемент с атрибутом data-showmore-content добавляем текст и прочий контент, либо, если это список (ul/ol) и элементы списка (li).
В зависимости от того, какой контент используется (текст или элементы списка) указываем значение для атрибута data-showmore:
- size — ограничение по высоте блока (по умолчанию)
- items — ограничение количества выводимых элементов списка
В зависимости от того, какой тип выбран, указываем значение для атрибута data-showmore-content:
<div data-showmore="items" class="block">
<ul data-showmore-content="2" class="block__content">
<li>Пункт №1</li>
<li>Пункт №2</li>
<li>Пункт №3</li>
<li>Пункт №4</li>
<li>Пункт №5</li>
</ul>
<button hidden data-showmore-button type="button" class="block__more">
<span>Показать еще</span><span>Скрыть</span>
</button>
</div><div data-showmore="size" class="block">
<div data-showmore-content="200" class="block__content">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis explicabo voluptates magni culpa, perferendis
vel quam consequuntur possimus, vero placeat quo enim obcaecati quas, veritatis magnam non. Architecto, porro
voluptatum?
</p>
</div>
<button hidden data-showmore-button type="button" class="block__more">
<span>Показать еще</span><span>Скрыть</span>
</button>
</div>Если контента будет меньше чем указанное ограничение, кнопка «Показать ещё» не будет показана. В противном случае, контент ограничится по высоте либо по количеству элементов и при клике на кнопку будет показан полностью, также, к элементу с атрибутом data-showmore добавится класс _showmore-active (первый спан в кнопке будет скрыт а второй показан). Повторный клик вернет ограничение.
Есть возможность управлять скоростью разворачивания контента, для этого следует указать значение атрибуту data-showmore-button в миллисекундах (по умолчанию 500):
<div data-showmore="size" class="block">
<div data-showmore-content="200" class="block__content">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis explicabo voluptates magni culpa, perferendis
vel quam consequuntur possimus, vero placeat quo enim obcaecati quas, veritatis magnam non. Architecto, porro
voluptatum?
</p>
</div>
<button hidden data-showmore-button="1000" type="button" class="block__more">
<span>Показать еще</span><span>Скрыть</span>
</button>
</div>Включение функционала на определенной ширине экрана
Для того чтобы использовать функционал на определенной ширине экрана, к объекту с атрибутом data-showmore добавляем атрибут data-showmore-media где, через запятую, указываем нужную ширину, а также тип:
- max (по умолчанию) — функционал включится на ширине меньшей чем указанная
- min — функционал включится на ширине большей чем указанная
<div data-showmore data-showmore-media="767,max" class="block">
<div data-showmore-content="200" class="block__content">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis explicabo voluptates magni culpa, perferendis
vel quam consequuntur possimus, vero placeat quo enim obcaecati quas, veritatis magnam non. Architecto, porro
voluptatum?
</p>
</div>
<button hidden data-showmore-button="1000" type="button" class="block__more">
<span>Показать еще</span><span>Скрыть</span>
</button>
</div>