Texty scroller

Svelte-компонент для скролітелінгу в адмінці сайту зі svelte snippet

Тут на сторінці вставлено компонент Scroller

Навіщо нам окреме рішення для скролітелінгу?

Scrollama чи svelte-scroller передбачають розмітку, де вміст блоків знаходиться всередині окремих тегів-секцій, от як у svelte-scroller:

<Scroller top="{0.2}" bottom="{0.8}" bind:index bind:offset bind:progress>
	<div slot="background">
		<p>
			This is the background content. It will stay fixed in place while the foreground scrolls over
			the top.
		</p>

		<p>Section {index + 1} is currently active.</p>
	</div>

	<div slot="foreground">
		<section>This is the first section.</section>
		<section>This is the second section.</section>
		<section>This is the third section.</section>
	</div>
</Scroller>

Натомість, у адмінці контент йде «потоком», а не ієрархічно. Втім, ми можемо додати межі блоків скролітелінгу використовуючи RawHTMLBlock:

<div class="svelte-snippet">Your svelte snippet scripts are here</div>
<section class="block-rawhtmlblock">
	<div class="scroll-switcher" data-step="motivation"></div>
</section>
<p data-block-key="e2rks">Article text from the admin</p>
<p data-block-key="e2rks">Article text from the admin</p>

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

Компонент переносить всі елементи між «перемикачами» скролітелінгу у елемент перемикача, а також витягує сам `div.scroll-switcher` за межі `section.block-rawhtmlblock`. Елемент перемикача має бути єдиним в блоці html та має бути його безпосереднім нащадком.

Cтатичний фоновий елемент жодним чином не контролюється. Скролер лише повідомляє, на якій секції ви зараз знаходитесь.

Як користуватись

Потрібно вставити компонент на сторінці, наприклад:

<script lang="ts">
	let step: string | undefined;
	let i: number | undefined;

	$: console.log(step, i);
</script>

<Scroller
	switchSelector=".scroll-switcher"
	stopSelector=".scroll-stopper"
	thr="{0.5}"
	addToContainer="{null}"
	bind:step
/>

• switchSelector – css-селектор для перемикачів, які розставлені в тексті статті всередині Raw HTML Block. Як правило, це пустий тег, що має клас та атрибут data-step (про нього далі). Тег має бути прямим та єдиним нащадком блока HTML.
• stopSelector – css-селектор для зупинки скролітелінгу, межа останнього блоку. Теж вставляється в статті в адмінці за допомогою RawHtmlBlock.
• thr – поріг, з якого вважається що скролітелінг має перемкнути крок. Наприклад, 0.5 це посередині екрану, 0.3 — у верхній третині екрану
• step – кожен елемент з switchSelector повинен мати атрибут data-step, який позначає крок скролітелінгу. Компонент повертає поточний крок, який можна використовувати в своєму проєкті
• addToContainer – опційно, можна вставити отримані блоки скролітелінга до іншого елемента. Значення має бути селектором (string) або елементом (Element).

Прогрес всередині блоків не імплементовано, але вітається доповнення. Для плавних переходів між блоками можна використати tweened.

Давайте зупинимо скролітелінг на цій сторінці:

<div class="scroll-stopper"></div>

Як втановити в npm

Зараз пакет є в публічному доступі на npm: https://www.npmjs.com/package/@textyorgua/scroller. Просто npm i @textyorgua/scroller.

Альетрнативно, пакет лежить в реєстрі на нашому гітлабі.

Далі покрокова інструкція:

1. Отримайте ключ доступу в https://gitlab.com/-/user_settings/personal_access_tokens з єдиним дозволом «read_api». Збережіть його в якесь надійне місце (свій home чи робочу папку, але НЕ в папку проєкту).
2. Авторизуйтесь в текстівському реєстрі пакунків з npm: npm config set -- //gitlab.com/:_authToken=$(cat ~/texty/npm_token), за потреби поміняйте назву й шлях файла.
3. Зареєструйте реєстр Текстів у своєму проєкті, куди ви встановлюєте пакет: echo @texty:registry=https://gitlab.com/api/v4/packages/npm/ >> .npmrc.
4. npm i @texty/scroller, і можна використовувати як import { Scroller } from "@texty/scroller";.