Added additional buttons support

Bumped version to 2.0.0
JunaidQadirB · Mar 24, 2018 · b401b83 · b401b83
1 parent aba7a6b
commit b401b83
Show file tree

Hide file tree

Showing 4 changed files with 174 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -9,47 +9,61 @@ Install
 
 Usage
 ---
-include the script after `jquery` and `bootstrap` script tags.
+include the `bootstrap-tab-wizard` script tag after `jquery` and `bootstrap` script tags.
 
 ````html
-    <div id="myWizard">
-        <ul class="nav nav-tabs" id="myTab" role="tablist">
-            <li class="nav-item">
-                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
-                   aria-selected="true">Home</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
-                   aria-controls="profile" aria-selected="false">Profile</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
-                   aria-controls="contact" aria-selected="false">Contact</a>
-            </li>
-        </ul>
-        <div class="tab-content" id="myTabContent">
-            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
-            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
-            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
-        </div>
-        <div class="row">
-            <button class="btn btnPrev btn-primary mr-1">Previous</button>
-            <button class="btn btnNext btn-primary">Next</button>
+    <div class="container">
+        <div id="myWizard">
+            <ul class="nav nav-tabs" id="myTab" role="tablist">
+                <li class="nav-item">
+                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
+                       aria-selected="true">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
+                       aria-controls="profile" aria-selected="false">Profile</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
+                       aria-controls="contact" aria-selected="false">Contact</a>
+                </li>
+            </ul>
+            <div class="tab-content" id="myTabContent">
+                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
+                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
+                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
+            </div>
+            <hr/>
+            <div class="row">
+                <button class="btn btnTab1 btn-primary mr-1 d-none">Tab1</button>
+                <button class="btn btnTab2 btn-secondary mr-1 d-none">Tab2</button>
+                <button class="btn btnPrev btn-primary mr-1 ml-auto">Previous</button>
+                <button class="btn btnNext btn-primary">Next</button>
+            </div>
         </div>
     </div>
-</div>
-<script src="node_modules/jquery/dist/jquery.min.js"></script>
-<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
-<script src="bootstrap-tab-wizard/index.js"></script>
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="bootstrap-tab-wizard.min.js"></script>
 ````
 **Then add the activation script like so**
 ````javascript
-    $('#myWizard').TabWizard({
+$('#myWizard').TabWizard({
+        additionalButtons: [
+            {
+                tab: '#home',
+                buttons: ['.btnTab1']
+            },
+            {
+                tab: '#profile',
+                buttons: ['.btnTab2', '.btnTab1']
+            },
+        ],
         nextButtonClass: '.btnNext',
         previousButtonClass: '.btnPrev',
         onFinish: function () {
             alert('Complete!');
-        }
+        },
     });
 ````
 

diff --git a/index.js b/index.js
@@ -8,8 +8,10 @@
             return false;
         }
         let self = this;
+        var visibleButtons = [];
         let settings = $.extend({
             showTabs: true,
+            additionalButtons: [],
             nextButtonClass: '.btnNext',
             previousButtonClass: '.btnPrevious',
             finishButtonText: 'Finish',
@@ -29,9 +31,55 @@
                 }
             }
         }, options);
+
+        function hideAdditionalButtons() {
+            let buttons = settings.additionalButtons;
+            for (let index in buttons) {
+                for (let btn in buttons[index].buttons) {
+                    $(self).find(buttons[index].buttons[btn]).addClass('d-none');
+                    $(self).find(buttons[index].buttons[btn]).removeClass('d-block');
+                }
+            }
+        }
+
+        function updateNextButtonState(e) {
+            let btn = $(self).find(settings.nextButtonClass);
+            let tab = $(e.target).attr('href');
+            $(self).find('.tab-content').find($(e.target));
+            if ($(self).find(tab).is(':last-child')) {
+                btn.addClass('btnFinish').text(settings.finishButtonText);
+            } else {
+                $(btn).removeClass('btnFinish').text('Next');
+            }
+        }
+
+        function updateAdditionalButtonsState(btn) {
+            let tab = $(btn).attr('href');
+
+            let visible = settings.additionalButtons.filter(function (group) {
+                if (group.tab === tab) {
+                    if (group.buttons) {
+                        return group.buttons;
+                    }
+                }
+            })[0];
+            hideAdditionalButtons();
+            if (visible) {
+                let btns = visible.buttons.join(', ');
+                console.log(btns);
+                $(self).find(btns).removeClass('d-none');
+                $(self).find(btns).addClass('d-block');
+            }
+        }
+
         if (!settings.showTabs) {
             $(self).find('.nav-tabs').hide();
         }
+        hideAdditionalButtons();
+        let activeTab = $(self).find('.nav-tabs a.active');
+        console.log(activeTab);
+        updateAdditionalButtonsState(activeTab);
+
         $(self).find(settings.nextButtonClass).click(function () {
             let btn = this;
             if ($(btn).hasClass('btnFinish')) {
@@ -48,14 +96,8 @@
             }
         });
         $(self).find('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-            let btn = $(self).find(settings.nextButtonClass);
-            var tab = $(e.target).attr('href');
-            $(self).find('.tab-content').find($(e.target));
-            if ($(self).find(tab).is(':last-child')) {
-                btn.addClass('btnFinish').text(settings.finishButtonText);
-            } else {
-                $(btn).removeClass('btnFinish').text('Next');
-            }
+            updateNextButtonState(e);
+            updateAdditionalButtonsState(this);
         });
 
         $(self).find(settings.previousButtonClass).click(function () {

diff --git a/jquery-bootstrap-tab-wizard.min.js b/jquery-bootstrap-tab-wizard.min.js
@@ -9,8 +9,10 @@
             return false;
         }
         let self = this;
+        var visibleButtons = [];
         let settings = $.extend({
             showTabs: true,
+            additionalButtons: [],
             nextButtonClass: '.btnNext',
             previousButtonClass: '.btnPrevious',
             finishButtonText: 'Finish',
@@ -30,9 +32,55 @@
                 }
             }
         }, options);
+
+        function hideAdditionalButtons() {
+            let buttons = settings.additionalButtons;
+            for (let index in buttons) {
+                for (let btn in buttons[index].buttons) {
+                    $(self).find(buttons[index].buttons[btn]).addClass('d-none');
+                    $(self).find(buttons[index].buttons[btn]).removeClass('d-block');
+                }
+            }
+        }
+
+        function updateNextButtonState(e) {
+            let btn = $(self).find(settings.nextButtonClass);
+            let tab = $(e.target).attr('href');
+            $(self).find('.tab-content').find($(e.target));
+            if ($(self).find(tab).is(':last-child')) {
+                btn.addClass('btnFinish').text(settings.finishButtonText);
+            } else {
+                $(btn).removeClass('btnFinish').text('Next');
+            }
+        }
+
+        function updateAdditionalButtonsState(btn) {
+            let tab = $(btn).attr('href');
+
+            let visible = settings.additionalButtons.filter(function (group) {
+                if (group.tab === tab) {
+                    if (group.buttons) {
+                        return group.buttons;
+                    }
+                }
+            })[0];
+            hideAdditionalButtons();
+            if (visible) {
+                let btns = visible.buttons.join(', ');
+                console.log(btns);
+                $(self).find(btns).removeClass('d-none');
+                $(self).find(btns).addClass('d-block');
+            }
+        }
+
         if (!settings.showTabs) {
             $(self).find('.nav-tabs').hide();
         }
+        hideAdditionalButtons();
+        let activeTab = $(self).find('.nav-tabs a.active');
+        console.log(activeTab);
+        updateAdditionalButtonsState(activeTab);
+
         $(self).find(settings.nextButtonClass).click(function () {
             let btn = this;
             if ($(btn).hasClass('btnFinish')) {
@@ -49,14 +97,8 @@
             }
         });
         $(self).find('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-            let btn = $(self).find(settings.nextButtonClass);
-            var tab = $(e.target).attr('href');
-            $(self).find('.tab-content').find($(e.target));
-            if ($(self).find(tab).is(':last-child')) {
-                btn.addClass('btnFinish').text(settings.finishButtonText);
-            } else {
-                $(btn).removeClass('btnFinish').text('Next');
-            }
+            updateNextButtonState(e);
+            updateAdditionalButtonsState(this);
         });
 
         $(self).find(settings.previousButtonClass).click(function () {

diff --git a/package.json b/package.json
@@ -1,31 +1,32 @@
 {
-    "name": "bootstrap-tab-wizard",
-    "version": "1.0.2",
-    "description": "A jQuery plugin to enhance a Bootstrap Tab component to a wizard",
-    "main": "index.js",
-    "keywords": [
-        "jquery-plugin",
-        "ecosystem:jquery",
-        "jquery",
-        "bootstrap",
-        "wizard",
-        "tab"
-    ],
-    "author": "Junaid Qadir Shekhanzai <shekhanzai.baloch@gmail.com>",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/JeyKeu/bootstrap-tab-wizard.git"
-    },
-    "devDependencies": {
-        "jshint": "latest",
-        "browserify": "latest",
-        "mocha": "latest"
-    },
-    "scripts": {
-        "lint": "jshint index.js",
-        "build": "browserify index.js > jquery-bootstrap-tab-wizard.min.js",
-        "prepublish": "npm run build",
-        "prebuild": "npm run lint"
-    }
+  "name": "bootstrap-tab-wizard",
+  "version": "2.0.0",
+  "description": "A jQuery plugin to enhance a Bootstrap Tab component to a wizard",
+  "main": "index.js",
+  "keywords": [
+    "jquery-plugin",
+    "ecosystem:jquery",
+    "jquery",
+    "bootstrap",
+    "wizard",
+    "tab"
+  ],
+  "author": "Junaid Qadir Shekhanzai <shekhanzai.baloch@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JeyKeu/bootstrap-tab-wizard.git"
+  },
+  "devDependencies": {
+    "jshint": "latest",
+    "browserify": "latest",
+    "mocha": "latest"
+  },
+  "scripts": {
+    "lint": "jshint index.js",
+    "build": "browserify index.js > jquery-bootstrap-tab-wizard.min.js",
+    "prepublish": "npm run build",
+    "prebuild": "npm run lint"
+  },
+  "dependencies": {}
 }