README

Erstellt ein Inhaltselement für das CMS Contao mit einem ToTop Link.
Der Scroll-Fortschritt wird grafisch über einen Fortschrittsbalken und des prozentuellen Wertes dargestellt.
Ab einem bestimmten prozentuellen Schwellenwertes kann statt der angezeigten Prozentzahl auf einen anderen definierten Inhalt umgeschalten werden – z.B. ein Icon.

Darstellung

Der ToTop Link wird als Kreis mit einer Pixelgrösse von 60 x 60px dargestellt.
Der äussere Rahmen stellt den prozentuellen Fortschrittsrahmen dar. Die radiale Befüllmenge (in Form einer anderen Farbe) entsteht alonge der Scrollposition im Verhältnis zur Gesamthöhe der Seite.
Mittig stellt sich, als geschriebener Wert, die Scrollhöhe in Prozent dar.

Eingabewert	Darstellung
0	Es wird der Inhalt aus dem Feld Inhalt Icon angezeigt.
100	Es wird am Ende der gescrollten Seite der Inhalt aus dem Feld Inhalt Icon angezeigt.
1 - 99	Es wird ab Erreichen des eingetragenen Wertes der Inhalt aus dem Feld Inhalt Icon angezeigt.

Backend

Im Backend stehen mehrere Felder zur Gestaltung bereit:

Feldbezeichnung	Möglichkeit	Vermerk	Beispiele
Farbe verbrauchter Wert	Farbeingabe	HTML erlaubt	`#c6c6c6`, `red`, `var(--color-white)`
Farbe offener Wert	Farbeingabe	HTML erlaubt	`#ccc`, `rgb(181,22,15)`
Schwellenwert in Prozent. Für die Umschaltung Prozentanzeige zu Icon	max. 3 Stellen	default 92
Hintergrund Farbe	Farbeingabe	HTML erlaubt	`rgba(52, 242, 12, 0.5)`, `var(--bg-green)`
Schriftfarbe	Farbeingabe	HTML erlaubt	`rgba(52, 242, 12, 0.5)`, `var(--bg-green)`
Inhalt Icon	Freie Eingabe	HTML erlaubt	`scroll`, `<i class="bi bi-chevron-top></i>`, `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/></svg>`

CSS

percentage-scroll.css Im Bundle wird ein vorgefertigtes allgemeines CSS stylesheet mitgeliefert, welches sich im Frontend in den <head> einfügt.

JS

percentage-scroll.js
Im Bundle wird ein vorgefertigtes Javascript file mitgeliefert, welches sich im Frontend am Ende des <body> einfügt.

Voraussetzungen

PHP 8.3 oder 8.4
Contao 5.3 oder 5.7

Installation

Installation über Composer:

composer require berecont/contao-percentage-scroll-bundle

Anschliessend die Contao-Migration ausführen:

php vendor/bin/contao-console contao:migrate

Falls erforderlich, den Contao-Cache leeren:

php vendor/bin/contao-console cache:clear

Nach der Installation steht unter Verschiedenes der Elementtyp ToTop mit prozentueller Fortschrittsanzeige bereit.

Template

Im Twig Template stehen folgende Variablen bereit:

pc_progress_color
pc_remain_color
pc_scroll_value
pc_background_color
pc_font_color
pc_totop

Lizenz

Dieses Bundle steht unter der MIT-Lizenz.

Autor

Bernhard Renner
beRecont https://berecont.at

berecont / contao-percentage-scroll-bundle

Package info

Security

Statistics