edit: form length for onInit event.

giraysam · Feb 12, 2022 · b9aa276 · b9aa276
1 parent c768651
commit b9aa276
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,25 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <title>Viiny-Form</title>
+    <style>
+        .step {
+            height: 15px;
+            width: 15px;
+            margin: 0 2px;
+            background-color: #bbbbbb;
+            border: none;  
+            border-radius: 50%;
+            display: inline-block;
+            opacity: 0.4;
+        }
+        .step.active {
+            opacity: 1;
+            background-color: #666;
+        }
+        .step.finish {
+            background-color: red;
+        }
+    </style>
 </head>
 <body>
     <div class="container mt-4">
@@ -67,9 +86,7 @@ <h4>Example-1</h4>
             <div class="col-12 col-md-6">
                 <div id="example-2" class="card">
                     <div class="card-header">
-                        <div class="progress">
-                            <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
-                          </div>
+                        <div class="text-center steps"></div>
                     </div>
                     <div class="card-body">
                         <div class="form-wrapper-2">
@@ -125,24 +142,48 @@ <h4>Example-2</h4>
     <script type="text/javascript">
         const progressBar = document.querySelector(".progress-bar", "#example-1");
         const formResult = document.querySelector("#result", "#example-1");
-        const countOfForm = 2;
+        const steps = document.querySelector(".steps", "#example-2");
 
         ViinyForm('.form-wrapper', {
             'nextButtonClass': 'btn-next',
             'prevButtonClass': 'btn-prev',
-            'onNext': (index) => {
-                progressBar.style.width = `${index * (100 / countOfForm)}%`;
+            'onInit': (formCount) => {
+                this.formCount = formCount;
+            },
+            'onNext': (index) => { 
+                progressBar.style.width = `${index * (100 / this.formCount)}%`;
             },
             'onPrev': (index) => {
-                progressBar.style.width = `${index * (100 / countOfForm)}%`;
+                progressBar.style.width = `${index * (100 / this.formCount)}%`;
             },
             'onComplete': (index) => {
-                progressBar.style.width = `${index * (100 / countOfForm)}%`;
+                progressBar.style.width = `${index * (100 / this.formCount)}%`;
                 formResult.classList.remove('d-none');
             }
         });
 
-        ViinyForm('.form-wrapper-2');
+        ViinyForm('.form-wrapper-2', {
+            'onInit': (stepCount) => {
+                this.stepCount = stepCount;
+                for (let i = 0; i < stepCount; i++) {
+                    steps.innerHTML += `<span class="step ${i === 0 ? 'active' : ''}"></span>`;
+                }
+            },
+            'onNext': (index) => {
+                const steps = document.querySelectorAll(".steps .step", "example-2");
+                steps.forEach(element => {
+                    element.classList.remove('active');
+                });
+                steps[index].classList.add("active");
+            },
+            'onPrev': (index) => {
+                const steps = document.querySelectorAll(".steps .step", "example-2");
+                steps.forEach(element => {
+                    element.classList.remove('active');
+                });
+                steps[index].classList.add("active");
+            }
+        });
     </script>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -41,7 +41,7 @@ var ViinyForm = (() => {
 
         this.formArr = this.formWrapper.querySelectorAll('form');
 
-        this.options['onInit']();
+        this.options['onInit'](this.formArr.length);
     }
 
     ViinyForm.instance.prototype.setForms = function () {