Barre de progression

[Canapin (Coin-coin le Canapin)]

	Résumé	Ajouter une barre de progression à votre site
	Aperçu	\[todo\]
	Dépôt	\u003chttps://github.com/Canapin/Discourse-progress-bar\u003e
	Guide d’installation	Comment installer un thème ou un composant de thème
	Nouveau sur les thèmes Discourse ?	Guide du débutant pour utiliser les thèmes Discourse

Installer ce composant de thème

Barre de progression Discourse

Description

Ce composant ajoute une barre de progression à n’importe quelle sortie disponible de votre site.

Il est préférable de l’utiliser avec des scripts qui mettent à jour automatiquement la valeur de la barre de progression en effectuant une requête PUT vers /admin/theme/[theme_component_ID]/setting avec la charge utile {\"name\":\"current_value\",\"value\":\"[yourNewValue]\"}.

La barre de progression est optimisée pour s’intégrer dans les sorties suivantes :

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

Cas d’utilisation

Ce composant a été développé pour afficher publiquement la progression des dons sur un forum financé par la communauté.

Un script personnalisé a utilisé les webhooks de Ko-fi pour mettre à jour dynamiquement la barre de progression pour chaque don.

Avoir une barre de progression est devenu une énorme incitation pour la communauté à faire des dons.
Auparavant, seul un sujet épinglé était utilisé, et l’objectif de don était atteint sur plusieurs mois.
Avec la barre de progression, l’objectif de don a été atteint en quelques jours ces dernières années !

Cette barre de progression peut évidemment être utilisée à d’autres fins. Partagez ce pour quoi vous l’utilisez !

Captures d’écran

Bureau

above-main-container

before-sidebar-sections

above-site-header

before-header-panel (bureau uniquement)

below-site-header

Mobile

above-main-container et below-site-header

before-sidebar-sections

above-site-header

Paramètres

Paramètre	Description
content_before	Texte affiché au-dessus de la barre de progression (HTML autorisé). Par défaut : \u003cstrong\u003eProgression des dons\u003c/strong\u003e
content_after	Texte affiché sous la barre de progression (HTML autorisé). Par défaut : vide
progress_bar_width	Largeur du conteneur de la barre de progression. Par défaut : 50%
progress_bar_height	Hauteur de la barre de progression. Par défaut : 10px
max_value	Valeur maximale pour la barre de progression. Par défaut : 300
current_value	Valeur actuelle de la barre de progression. Par défaut : 150
value_display	Format d’affichage de la valeur à côté de la barre de progression. Espaces réservés disponibles : {current}, {max}, {percentage}. Exemples :\u003cbr\u003e{percentage}% affiche 33%.\u003cbr\u003e{current} de {max} canards en caoutchouc affiche 9 sur 15 canards en caoutchouc. Par défaut : {percentage}%
hide_when_full	Masquer la barre de progression lorsqu’elle est pleine. Par défaut : false
outlet_name	Emplacement sur le site où la barre de progression est affichée. Sorties recommandées : above-main-container, above-site-header, before-header-panel, below-site-header, before-sidebar-sections. Par défaut : above-main-container
display_on_mobile	Afficher la barre de progression sur les appareils mobiles. Par défaut : true
display_on_homepage	Afficher la barre de progression sur la page d’accueil. Par défaut : true
url_must_contain	URL où la barre de progression est affichée. Par défaut : `/latest
progress_bar_color	Valeur CSS background valide. Exemples :\u003cbr\u003e#FC0FC0\u003cbr\u003ergb(252,15,192)\u003cbr\u003evar(--tertiary)\u003cbr\u003elinear-gradient(0deg, white 0%, var(--tertiary) 100%)\u003cbr\u003eNote : si vide, une couleur dynamique est utilisée de rouge (0%) à vert (100%). Par défaut : var(--tertiary)

Remerciements

Merci à @Arkshine, pour l’aide générale avec le code et les conseils