TailwindCSS und VanillaJS – Step Progress Bar

Ich persönlich finde bei Bestellvorgängen oder Behördenformularen es extrem hilfreich eine sogenannte Prozessverfolgung auf dem Bildschirm zu haben. Damit weiß man stets Bescheid, wo man gerade ist und wie lange das noch in etwa dauern kann.

Ich dachte mir, es ist Samstagabend und die Kinder sind im Bett und die bessere Hälfte macht noch Steuern, dann baue ich mir doch mal eine „Step Progress Bar“ selber. Allein nur mit den Zutaten TailwindCSS und VanillaJS. Viel besser als Katzenvideos auf Youtube oder Netflix.

Meine Vorüberlegung:

– ich setze flexibel mit der Klasseninitialisierung die einzelnen Schritte mit ihren Namen

– die „Step Progress Bar“ Klasse hat eine Funktion mit der ich zwischen den einzelnen Schritten springen kann. Somit kann man sie in anderen Projekten mit einer Callback Funktion aufrufen

– die „Step Progress Bar“ Klasse rendert nach jeder Aktualisierung die View automatisch

Als erstes brauchen wir TailwindCSS. Das besorge ich mir der Einfachheit über CDN. Dann benötige ich ein HTML Gerüst in dem ich die Steps / Schritte anzeigt.

<section><!-- Q: https://tailwindcomponents.com/component/steps-bar -->
    <!-- component -->
    <div class="container mx-auto py-6" >
      <div class="flex" id="ProgressStepper">
      </div>
    </div>
 </section>

Dann gehen wir zum JS Teil über. Ich baue eine Klasse ProgressStepper.

<script>
  // Progress Stepper Class
   class ProgressStepper {
        constructor(paras) {
            this.step_names = paras.step_names;            
            this.reached_step = 1;
            this.paras = paras;
            this.build_progress_bar();
        }

        setPointerToStep(step) {
            if (step > this.step_names.length) {
                console.log("step>length")
                return ;
            }
            this.reached_step = step;
            this.build_progress_bar();
        }

        build_progress_bar() {

            let _html_start_part = function(data, index, reached = 0) {
                return `<!-- progress item -->
                <div class="w-1/4">
                  <div class="relative mb-2">
                    <div class="w-10 h-10 mx-auto bg-green-500 rounded-full text-lg text-white flex items-center">
                      <span class="text-center text-white w-full">
                        ${index} 
                      </span>
                    </div>
                  </div>

                  <div class="text-xs text-center 2xl:text-base">${data}</div>
                </div>
                <!-- /progress item -->`};

            let _html_start_part1 = function(data, index, reached = 0, procentBar = 0, compleated_icon = '') {
                return `<!-- progress item middle -->
                <div class="w-1/4">
                  <div class="relative mb-2">
                    <div class="absolute flex align-center items-center align-middle content-center" style="width: calc(100% - 2.5rem - 1rem); top: 50%; transform: translate(-50%, -50%)">
                      <div class="w-full bg-gray-200 rounded items-center align-middle align-center flex-1">
                        <div class="w-0 bg-green-300 py-1 rounded" style="width: ${procentBar}%;"></div><!-- middle part 100 full & 50 half progressstatus-->
                      </div>
                    </div>

                    <div class="w-10 h-10 mx-auto ${reached == 0 ? 'bg-white border-2 border-gray-200': 'bg-green-500' } rounded-full text-lg text-white flex items-center">
                      <span class="text-center ${reached == 0 ? 'text-gray-600': 'text-white' } w-full">                        
                        ${index}
                      </span>
                    </div>
                  </div>

                  <div class="text-xs text-center 2xl:text-base">${data}</div>
                </div>`;}
            
            var output = '';
            for (let i=0; i<this.step_names.length;i++)
            {                
                if (i==0) 
                {                    
                    output += _html_start_part(this.step_names[i], i+1);
                    continue;
                }
                let reached = this.reached_step >= (i+1) ? 1:0;
                let procentBar, compleated_icon;
                if (this.reached_step >= (i+1)) {
                    procentBar = 100;
                    compleated_icon = this.paras.compleated_icon;
                } else if (this.reached_step > (i+1)) {
                    procentBar = 0;
                } else if(this.reached_step == (i)) {
                    procentBar = 50;
                }
                output += _html_start_part1(this.step_names[i], i+1, reached, procentBar, compleated_icon);
            }

            document.getElementById('ProgressStepper').innerHTML = output;
            return ('build')
        }
   }
</script>

Nun benötige ich noch die einzelnen Schritte. Ziel war es ja ein Shop Checkout zu bauen. Dann nehme ich mal Adressem Zahlungsart, Bestätigen und Completed bzw. Fertig.

<script>
   let paras = {
    step_names: ['Adresse', 'Zahlungsart', 'Bestätigen', 'Fertig'],  
    }

    let p = new ProgressStepper(paras);
</script>

Nun kann man mit der Methode setPointerToStep() auf den Step springen wo man gerade hin möchte. Scotty step me up …

p. setPointerToStep(2);
p. setPointerToStep(0);
p. setPointerToStep(99);
Demo Step Progress Bar

Man kann jetzt hier ordentlich noch was machen:
– Setze einen grünen Hacken sobald der Prozess über den Schritt hinaus ist
– Gebe mit dem Namen auch die Links mit um Sprungmarken zu haben
und noch vieles Mehr …


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Javascript – Das doppelte Ausrufezeichen

April 8, 2021

Der ein oder andere hat es vielleicht schon gesehen. In Javascript gibt es das doppelte Ausrufezeichen und nicht jeder kann damit auf anhieb etwas anfangen. Mein erster Gedanke war. Doppelte Verneinung. Ein häufiges Stilelement aus der russischen Sprache. Manche denken das ist ein Operator. Wieder andere denken, dass ist ein Tippfehler. The double exclamation mark […]

Javascript Prototype mal kurz erklärt

February 19, 2021

JavaScript ist eine prototypenbasierte Sprache. Was soll das eigentlich sein? Heute werde ich euch erklären, was Prototypen sind. Was sind Prototype? Zunächst einmal sollten wir uns nicht von dem Wort “Prototyp” verunsichern lassen. Um ehrlich zu sein klingt es abstrakt und irgendwie fancy. “Prototyp” ist ein System. Dieses System erlaubt dir, Eigenschaften von Objekten zu […]

Javascript – Die geschweifte Klammer in der Funktions Parameterliste

January 27, 2021

Vielleicht habt ihr das schon mal gesehen. Eine geschweifte Klammer in der Funktionsparameterliste. Was ist das und wozu ist das gut? Um hier Licht ins dunkel zu bringen, bediene ich mich eines kleine Fallbeispiels. Im folgendem Beispiel möchte ich aus einem Objekt den Namen der Person mit der id = 8 finden. Vielleicht erkennt der […]

Wie merge ich zwei Javascript Objekte

January 15, 2021

Der Ein oder Andere wird im Laufe seiner Javascript Entwicklung an einen Punkt gekommen sein zwei JavaScript Objekte zusammenzuführen. Quasi „mergen“. Ein Fallbeispiel könnte sein, ihr habt eine JS Klasse mit einer Membervariablen vom Typ „Object“ die Texte im key-value beinhaltet. Nun wollt ihr statt „Tschüßi Kowski“ doch lieber Auf Wiedersehen ausgeben. Eine Möglichkeit ihr […]

Tailwind und VanillaJS – Toast Hawaii bzw. Notification

January 12, 2021

Stellt euch vor ihr wollt für ein Shop eine Notification oder auch bekannt als Toast ausgeben. Zum Beispiel Produkt in Warenkorb gelegt. Oder „ups, leider ist das Produkt in ihrer Größe nicht mehr vorhaben. Es gibt hier echt viele und gute Bibliotheken. Aber ich will selber eine Toaster Klasse bauen, weil mir der Overhead gerade […]

Object Orientierte Programmierung in Javascript

January 6, 2021

Vor 10 Jahren hielt ich immer Abstand von Javascript. Nur wenn es sein musste habe ich mich mit JS beschäftigt. Das waren mir zu viel geschweifte Klammern und Callbacks und es haftete an Javascript ein schlechtes Image, was die Sicherheit anging, an. Um auch ganz ehrlich zu sein, ich hatte Probleme Javascript Code richtig zu […]