Update with dark mode, accessiblity, bug fixes, umd support

Author: techlab

CONTRIBUTING.md

@@ -12,23 +12,22 @@
 ## How to contribute code?
 Here are the basic steps to get started contributing code:
 
-1. Fork the [repo](https://github.com/techlab/jquery-smartwizard/) and get development running on your computer.
-2. Install gulp and karma `npm install gulp-cli karma-cli -g` 
-3. Install the npm development dependencies by the command `npm install` on the project folder (Should have NodeJS installed).
+1. Fork the [repo](https://github.com/techlab/jquery-smartwizard/).
+2. Install the dependencies, run `npm install`.
+3. Start the project, run `npm start`.
 4. Replicate the issue you're trying to fix or spec out the feature you're trying to add.
-5. Run `gulp watch` before start changing code. It will auto build and bundle the `.js` and `.css` files when you change.
-6. Change the code to fix the bug or add the feature. All changes should happen in the relevant `src/js/*.js` and `src/css/*.css` files.
-7. Build the code by running `npm run build` or `gulp build`.
-8. Run the test cases by running `npm test` or `gulp test`, you can also add more test cases based on your new change.
-9. Verify that your fix or feature works.
-10. Commit your changes with an informative description.
-11. Open a pull request to the [dev](https://github.com/techlab/jquery-smartwizard/tree/dev) branch of the [repo](https://github.com/techlab/jquery-smartwizard/) with your new commit and a descriptive message about what the PR does.
+5. Modify the code to fix the bug or to add the feature. All changes should happen in the relevant `src/js/*.js` and `src/scss/*.scss` files.
+6. Verify that your fix or feature works.
+7. Run the test cases by running `npm test`, you can also add more test cases based on your new change.
+8. Build the code by running `npm run build`.
+9. Commit your changes with an informative description.
+10. Open a pull request to the [dev](https://github.com/techlab/jquery-smartwizard/tree/dev) branch of the [repo](https://github.com/techlab/jquery-smartwizard/) with your new commit and a descriptive message about what the PR does.
 
 Thank you for your contribution!
 
 ##### Notes for pull request
 - Follow the same code style as the library.
-- Run the test suites in the `test` directory first by running `npm test` or `gulp test`.
+- Run the test suites in the `test` directory first by running `npm test`.
 - Don't modify any files in the `dist` directory.
 - Don't alter the licence headers.  
 

README.md

@@ -2,17 +2,19 @@
 #### The awesome jQuery step wizard plugin.
 
 [![Build Status](https://travis-ci.org/techlab/jquery-smartwizard.svg?branch=master)](https://travis-ci.org/techlab/jquery-smartwizard)
-[![npm version](https://badge.fury.io/js/smartwizard.svg)](https://badge.fury.io/js/smartwizard)
-[![Latest Stable Version](https://poser.pugx.org/techlab/smartwizard/v/stable)](https://packagist.org/packages/techlab/smartwizard)
+[![npm version](https://badge.fury.io/js/smartwizard.svg)](https://www.npmjs.com/package/smartwizard)
+[![Packagist Version](https://badgen.net/packagist/v/techlab/smartwizard)](https://packagist.org/packages/techlab/smartwizard)
+[![Npm Downloadsl](https://badgen.net/npm/dm/smartwizard?icon=npm)](https://www.npmjs.com/package/smartwizard)
+[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/smartwizard/badge?style=rounded)](https://www.jsdelivr.com/package/npm/smartwizard)
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/techlab/jquery-smartwizard/master/LICENSE)
+[![GitHub Repo](https://badgen.net/badge/icon/jquery-smartwizard?icon=github&label=&color=0da4d3)](https://github.com/techlab/jquery-smartwizard)
 [![Donate on Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj)
 
 
-**jQuery Smart Wizard** is a step wizard plugin for jQuery.
+**jQuery Smart Wizard** is an accessible step wizard plugin for jQuery.
 Provides a neat and stylish interface for your forms, checkout screen, registration steps, etc.
 Easy implementation,  Bootstrap compatiblity, customizable toolbars, themes, events and Ajax support are few of the features.
 
-
 + [Homepage](http://techlaboratory.net/jquery-smartwizard)
 + [Documentation](http://techlaboratory.net/jquery-smartwizard#documentation)
 + [Demos](http://techlaboratory.net/jquery-smartwizard#demo)
@@ -52,37 +54,56 @@ Installation
 ### [Composer](https://packagist.org/packages/techlab/smartwizard)
     composer require techlab/smartwizard
 
+### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/smartwizard)
+```html
+<!-- CSS -->
+<link href="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
+
+<!-- JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
+```    
+### [CDN - UNPKG](https://unpkg.com/browse/smartwizard/)
+```html
+<!-- CSS -->
+<link href="https://unpkg.com/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
+
+<!-- JavaScript -->
+<script src="https://unpkg.com/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
+```
+
 ### Download
 #### [Download from GitHub](https://github.com/techlab/jquery-smartwizard/archive/master.zip)
 
 Features
 -----
 
 - Standalone CSS
+- Accessible controls
 - Bootstrap compatible
-- Various themes included
-- Customizable CSS
+- Cool themes included
+- Dark mode
 - URL navigation and selection
 - Event support
-- Ajax content loading support
+- Ajax content support
 - Keyboard navigation
-- Auto content height adjustment
+- Auto height adjustment
 - Cool transition animations (fade/slide-horizontal/slide-vertical/slide-swing)
 - External anchor support
 - Easy to implement and minimal HTML required
 - Customizable toolbar, option to add extra buttons
-- Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
-- Supports all modern browsers
 - Responsive design
-- In-built reset method
+- reset option
 - Easy navigation with step anchors and navigation buttons
+- Easy to implement and minimal HTML required
+- Supports all modern browsers
+- Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
 
 Usage
 -----
 
 Include SmartWizard CSS
 ```html
-<link href="../dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
 ```
 
 Include HTML (*This is the basic HTML markup for the Smart Wizard. You can customize it by adding your on steps content*).
@@ -136,7 +157,7 @@ Include jQuery (*ignore this if you have already included on the page*).
 
 Include SmartWizard plugin
 ```html
-<script src="../dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
 ```
 Initialize the SmartWizard
 ```html
@@ -156,45 +177,46 @@ Please see the [documentation](http://techlaboratory.net/jquery-smartwizard#docu
 
 ```JavaScript
 $('#smartwizard').smartWizard({
-    selected: 0, // Initial selected step, 0 = first step
-    theme: 'default', // theme for the wizard, related css need to include for other than default theme
-    justified: true, // Nav menu justification. true/false
-    autoAdjustHeight: true, // Automatically adjust content height
-    cycleSteps: false, // Allows to cycle the navigation of steps
-    backButtonSupport: true, // Enable the back button support
-    enableURLhash: true, // Enable selection of the step based on url hash
-    transition: {
-        animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
-        speed: '400', // Transion animation speed
-        easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
-    },
-    toolbarSettings: {
-        toolbarPosition: 'bottom', // none, top, bottom, both
-        toolbarButtonPosition: 'right', // left, right, center
-        showNextButton: true, // show/hide a Next button
-        showPreviousButton: true, // show/hide a Previous button
-        toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
-    },
-    anchorSettings: {
-        anchorClickable: true, // Enable/Disable anchor navigation
-        enableAllAnchors: false, // Activates all anchors clickable all times
-        markDoneStep: true, // Add done state on navigation
-        markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
-        removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
-        enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
-    },
-    keyboardSettings: {
-        keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
-        keyLeft: [37], // Left key code
-        keyRight: [39] // Right key code
-    },
-    lang: { // Language variables for button
-        next: 'Next',
-        previous: 'Previous'
-    },
-    disabledSteps: [], // Array Steps disabled
-    errorSteps: [], // Highlight step with errors
-    hiddenSteps: [] // Hidden steps
+  selected: 0, // Initial selected step, 0 = first step
+  theme: 'default', // theme for the wizard, related css need to include for other than default theme
+  justified: true, // Nav menu justification. true/false
+  darkMode:false, // Enable/disable Dark Mode if the theme supports. true/false
+  autoAdjustHeight: true, // Automatically adjust content height
+  cycleSteps: false, // Allows to cycle the navigation of steps
+  backButtonSupport: true, // Enable the back button support
+  enableURLhash: true, // Enable selection of the step based on url hash
+  transition: {
+      animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
+      speed: '400', // Transion animation speed
+      easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
+  },
+  toolbarSettings: {
+      toolbarPosition: 'bottom', // none, top, bottom, both
+      toolbarButtonPosition: 'right', // left, right, center
+      showNextButton: true, // show/hide a Next button
+      showPreviousButton: true, // show/hide a Previous button
+      toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
+  },
+  anchorSettings: {
+      anchorClickable: true, // Enable/Disable anchor navigation
+      enableAllAnchors: false, // Activates all anchors clickable all times
+      markDoneStep: true, // Add done state on navigation
+      markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
+      removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
+      enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
+  },
+  keyboardSettings: {
+      keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
+      keyLeft: [37], // Left key code
+      keyRight: [39] // Right key code
+  },
+  lang: { // Language variables for button
+      next: 'Next',
+      previous: 'Previous'
+  },
+  disabledSteps: [], // Array Steps disabled
+  errorSteps: [], // Highlight step with errors
+  hiddenSteps: [] // Hidden steps
 });
 ```
 

dist/css/smart_wizard.css

@@ -49,7 +49,6 @@
 }
 
 .sw > .nav {
-    display: -webkit-box;
     display: flex;
     flex-wrap: wrap;
     list-style: none;
@@ -60,10 +59,7 @@
 
 @media screen and (max-width: 640px) {
     .sw > .nav {
-        -webkit-box-orient: vertical !important;
-        -webkit-box-direction: normal !important;
         flex-direction: column !important;
-        -webkit-box-flex: 1;
         flex: 1 auto;
     }
 }
@@ -72,12 +68,10 @@
     display: block;
     padding: .5rem 1rem;
     text-decoration: none;
-    outline: 0 !important;
 }
 
 .sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
     text-decoration: none;
-    outline: 0 !important;
 }
 
 .sw > .nav .nav-link::-moz-focus-inner {
@@ -96,11 +90,15 @@
 
 .sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
     flex-basis: 0;
-    -webkit-box-flex: 1;
     flex-grow: 1;
     text-align: center;
 }
 
+.sw.sw-dark {
+    color: rgba(255, 255, 255, 0.95);
+    background: #000;
+}
+
 .sw.sw-loading {
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -119,7 +117,6 @@
     width: 100%;
     background: rgba(255, 255, 255, 0.7);
     z-index: 2;
-    -webkit-transition: all .2s ease;
     transition: all .2s ease;
 }
 
@@ -141,24 +138,20 @@
 
 @-webkit-keyframes spin {
     0% {
-        -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
 
     100% {
-        -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
 
 @keyframes spin {
     0% {
-        -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
 
     100% {
-        -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
@@ -195,14 +188,11 @@
     content: "";
     position: absolute;
     height: 2px;
-    width: 100%;
+    width: 0;
     left: 0px;
     bottom: -1px;
     background: #999999;
-    -webkit-transition: all 250ms ease 0s;
-    transition: all 250ms ease 0s;
-    -webkit-transform: scale(0);
-    transform: scale(0);
+    transition: all .35s ease .15s;
 }
 
 .sw-theme-default > .nav .nav-link.inactive {
@@ -217,8 +207,7 @@
 
 .sw-theme-default > .nav .nav-link.active::after {
     background: #17a2b8 !important;
-    -webkit-transform: scale(1);
-    transform: scale(1);
+    width: 100%;
 }
 
 .sw-theme-default > .nav .nav-link.done {
@@ -228,17 +217,17 @@
 
 .sw-theme-default > .nav .nav-link.done::after {
     background: #5cb85c;
-    -webkit-transform: scale(1);
-    transform: scale(1);
+    width: 100%;
 }
 
 .sw-theme-default > .nav .nav-link.disabled {
-    color: #f9f9f9 !important;
+    color: #dddddd !important;
     cursor: not-allowed;
 }
 
 .sw-theme-default > .nav .nav-link.disabled::after {
-    background: #f9f9f9;
+    background: #dddddd;
+    width: 100%;
 }
 
 .sw-theme-default > .nav .nav-link.danger {
@@ -248,4 +237,5 @@
 
 .sw-theme-default > .nav .nav-link.danger::after {
     background: #d9534f;
+    width: 100%;
 }