Прогресс-бар

[Canapin (Coin-coin le Canapin)]

	Краткое описание	Добавьте индикатор прогресса на ваш сайт
	Предпросмотр	[todo]
	Репозиторий	https://github.com/Canapin/Discourse-progress-bar
	Руководство по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Индикатор прогресса Discourse

Описание

Этот компонент добавляет индикатор прогресса в любую доступную зону вашего сайта.

Лучше всего он работает со скриптами, которые автоматически обновляют значение индикатора прогресса, отправляя PUT-запрос к /admin/theme/[theme_component_ID]/setting с полезной нагрузкой {"name":"current_value","value":"[yourNewValue]"}.

Индикатор прогресса оптимизирован для следующих зон:

• above-main-container
• above-site-header
• before-header-panel
• below-site-header
• before-sidebar-sections

Сценарий использования

Этот компонент был разработан для публичного отображения прогресса сбора пожертвований на форуме, финансируемом сообществом.

Собственный скрипт использовал веб-хуки Ko-fi для динамического обновления индикатора прогресса при каждом пожертвовании.

Наличие индикатора прогресса стало огромным стимулом для сообщества делать пожертвования.
Ранее использовалась только закрепленная тема, и цель по сбору средств достигалась в течение нескольких месяцев.
С индикатором прогресса цель по сбору средств достигалась за пару дней в последние несколько лет!

Этот индикатор прогресса, конечно же, можно использовать и для других целей. Поделитесь, как вы его используете!

Скриншоты

Десктоп

above-main-container

before-sidebar-sections

above-site-header

before-header-panel (только для десктопа)

below-site-header

Мобильные устройства

above-main-container и below-site-header

before-sidebar-sections

above-site-header

Настройки

Настройка	Описание
content_before	Текст, отображаемый над индикатором прогресса (допускается HTML). По умолчанию: <strong>Прогресс пожертвований</strong>
content_after	Текст, отображаемый под индикатором прогресса (допускается HTML). По умолчанию: пусто
progress_bar_width	Ширина контейнера индикатора прогресса. По умолчанию: 50%
progress_bar_height	Высота индикатора прогресса. По умолчанию: 10px
max_value	Максимальное значение для индикатора прогресса. По умолчанию: 300
current_value	Текущее значение индикатора прогресса. По умолчанию: 150
value_display	Формат отображения значения рядом с индикатором прогресса. Доступные плейсхолдеры: {current}, {max}, {percentage}. Примеры: {percentage}% отображает 33%. {current} из {max} резиновых уток отображает 9 из 15 резиновых уток. По умолчанию: {percentage}%
hide_when_full	Скрывать индикатор прогресса, когда он заполнен. По умолчанию: false
outlet_name	Расположение на сайте, где отображается индикатор прогресса. Рекомендуемые зоны: above-main-container, above-site-header, before-header-panel, below-site-header, before-sidebar-sections. По умолчанию: above-main-container
display_on_mobile	Показывать индикатор прогресса на мобильных устройствах. По умолчанию: true
display_on_homepage	Показывать индикатор прогресса на главной странице. По умолчанию: true
url_must_contain	URL-адреса, на которых отображается индикатор прогресса. По умолчанию: /latest|/categories|/new|/unread|/top*|/tag/*|/tags/*|/c/*|/t/*
progress_bar_color	Допустимое CSS-значение для фона. Примеры: #FC0FC0 rgb(252,15,192) var(--tertiary) linear-gradient(0deg, white 0%, var(--tertiary) 100%) Примечание: если поле пустое, используется динамический цвет от красного (0%) до зеленого (100%). По умолчанию: var(--tertiary)

Благодарности

Спасибо @Arkshine за общую помощь с кодом и советы }

[Stephen]

Отлично! Планируется ли возможность использовать более одной панели одновременно?

[Canapin (Coin-coin le Canapin)]

Не совсем. Я создал этот плагин для собственных нужд и мне точно не нужно больше одной полосы прогресса, но я открыт к pull request’ам (в этом случае добавление нескольких боковых панелей не должно ломать существующие настройки)