Svelte-компонент для скролітелінгу в адмінці сайту зі svelte snippet
npm install @textyorgua/scrollerSvelte-компонент для скролітелінгу в адмінці сайту зі svelte snippet
Тут на сторінці вставлено компонент Scroller
Scrollama чи svelte-scroller передбачають розмітку, де вміст блоків знаходиться всередині окремих тегів-секцій, от як у svelte-scroller:
`` Section {index + 1} is currently active.html
This is the background content. It will stay fixed in place while the foreground scrolls over
the top.
Натомість, у адмінці контент йде «потоком», а не ієрархічно. Втім, ми можемо додати межі блоків скролітелінгу використовуючи RawHTMLBlock:
`html
Your svelte snippet scripts are here
Article text from the admin
Article text from the admin
`Цей компонент додає функціонал скролітелінгу для пласкої структури сторінки, отже ви можете писати весь текст в адмінці.
Компонент переносить всі елементи між «перемикачами» скролітелінгу у елемент перемикача, а також витягує сам \
div.scroll-switcher\ за межі \section.block-rawhtmlblock\. Елемент перемикача має бути єдиним в блоці html та має бути його безпосереднім нащадком.
Cтатичний фоновий елемент жодним чином не контролюється. Скролер лише повідомляє, на якій секції ви зараз знаходитесь.
Як користуватись
Потрібно вставити компонент на сторінці, наприклад:
`html
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.
Давайте зупинимо скролітелінг на цій сторінці:
`html
`Як втановити в 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";`.