Skip to content

Commit

Permalink
Update with dark mode, accessiblity, bug fixes, umd support
Browse files Browse the repository at this point in the history
  • Loading branch information
@techlab
techlab committed Jul 10, 2020
1 parent a343f39 commit 14806a7
Show file tree
Hide file tree
Showing 36 changed files with 1,394 additions and 800 deletions.
21 changes: 10 additions & 11 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
126 changes: 74 additions & 52 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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*).
Expand Down Expand Up @@ -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
Expand All @@ -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
});
```

Expand Down
36 changes: 13 additions & 23 deletions dist/css/smart_wizard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@
}

.sw > .nav {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
list-style: none;
Expand All @@ -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;
}
}
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
}

Expand All @@ -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);
}
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -248,4 +237,5 @@

.sw-theme-default > .nav .nav-link.danger::after {
background: #d9534f;
width: 100%;
}
Loading

0 comments on commit 14806a7

Please sign in to comment.