Модуль «Показать еще» «Чертоги Фрилансера» v3.0.0

Модуль «Показать еще» позволяет сначала скрыть часть текста или элементов списка, показывая только указанную высоту или количество элементов. Есть возможность включать функционал на определенной ширине экрана (брейкпоинте).

Подключение функционала

[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>

[JS] В файле js/app.js раскомментировать строку flsFunctions.showMore();

[SCSS] Комментировать строку @import “base/showmore”; в файле src/scss/base.scss – это подключит базовые стили, отредактирует под свои нужды

Использование функционала

К элементу с атрибутом data-showmore-content добавляем текст и другой контент или если это список (UL/OL) элементы списка (LI).

В зависимости от того, какой контент используется (текст или элементы списка), указываем значение для атрибута data-showmore :

• size – ограничение по высоте блока (по умолчанию)
• items – ограничение количества выводимых элементов списка

<div data-showmore="items" class="block">
	<ul data-showmore-content 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>

В зависимости от того, какой тип выбран, указываем значение для атрибута data-showmore-content :

• Высота блока в пикселях (число без px, по умолчанию 150)
• Количество выведенных элементов списка (число по умолчанию 3 )

<div data-showmore class="block">
	<div data-showmore-content="200" class="block__content">
		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?
	</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 class="block">
	<div data-showmore-content="200" class="block__content">
		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?
	</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="768,min" class="block">
	<div data-showmore-content="200" class="block__content">
		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?
	</div>
	<button hidden data-showmore-button="1000" type="button" class="block__more">
		<span>Показать еще</span>
		<span>Скрыть</span>
	</button>
</div>

Расположение и дополнительные данные

Функционал находится в js/files/functions.js . Название функции showMore()