@adrii_/wizard-js

Wizard-JS - Wizard Vanilla JavaScript

A lightweight wizard UI component that supports accessibility and HTML5 in JavaScript Vanilla.

Installation

Add this code. cdn

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AdrianVillamayor/Wizard-JS@1.7.6/styles/css/main.css" integrity="sha256-btHibfSEWQ4O0dUO3Jo22dZVkFr4T75RU7+EU5SGS0A=" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/gh/AdrianVillamayor/Wizard-JS@1.7.6/src/wizard.min.js" integrity="sha256-QzrpKWIcD392XcPfvfPPGT6kTt3nGem3edBeJ1qIowE=" crossorigin="anonymous"></script>

Usage

To display content without field control

<div class="wizard">
    <aside class="wizard-content container">
        <div class="wizard-step">
            <!-- Step content -->
        </div>
    </aside>
</div>

For wizards with form purpose, it manages the required fields and validates them.

<form class="wizard" method="POST">
    <aside class="wizard-content container">
        <div class="wizard-step">
	   <input type="text" name="name" class="required" placeholder="Enter a short campaign name">
        </div>
    </aside>
</form>

To launch the wizard

let args = {
	"wz_nav_style": "dots",
	"wz_button_style": ".btn .btn-sm .mx-3",
	"wz_ori": "vertical",
	"buttons": true,
	"navigation": 'buttons',
	"finish": "Save!"
};

const wizard = new Wizard(args);

wizard.init();

To restart the wizard

wizard.reset();

To lock the wizard in one step

wizard.lock();

To unlock the wizard

wizard.unlock();

HTML Tags

[data-title] => Set the step title for the nav, if left blank the system will automatically add Step + step number as the title.

<div class="wizard-step" data-title="Configuration"> 

If not defined, it is treated as default.

Config Wizard

Options allowing to modify the behavior and actions

Parameter	Type	Default	Definition / Value
wz_class	String	.wizard	Wizard main container class
wz_ori	String	.horizontal	Wizard orientation
wz_nav	String	.wizard-nav	Nav container class
wz_nav_style	String	dots	Style of navigation steps / dots, tabs, progress
wz_content	String	.wizard-content	Body container class
wz_buttons	String	.wizard-buttons	Action button container class
wz_button	String	.wizard-btn	Class of Prev, Next and Finish action buttons
wz_button_style	String	.btn	Basic button style
wz_step	String	.wizard-step	Class for both nav and body steps
wz_form	String	.wizard-form	Class of the form that contains the wizard
wz_next	String	.next	Class of Next action button
wz_prev	String	.prev	Class of Prev action button
wz_finish	String	.finish	Class of Finish action button
current_step	int	0	Active wizard step
steps	int	0	Number of wizard steps
navigation	String	all	Allows you to change the navigation mode / buttons, nav, all
buttons	Bool	true	Allows you to show or hide the action buttons
next	String	Next	Next button text
prev	String	Prev	Prev button text
finish	String	Submit	Finish button text

Events Management

When the wizard is locked in a step

document.addEventListener("lockWizard", function (e) {
	alert("Wizard is locked");
});

When the wizard is unlocked in one step

document.addEventListener("unlockWizard", function (e) {
	alert("Wizard is unlocked");
});

Moving on to the prev step

document.addEventListener("prevWizard", function (e) {
	alert("Prev Step");
});

Moving on to the next step

document.addEventListener("nextWizard", function (e) {
	alert("Next Step");
});

If it is a form, at the end it will fire the following event

document.addEventListener("submitWizard", function (e) {
	alert("Form Submit");
});

If it is not a form, at the end it will fire the following event

document.addEventListener("endWizard", function (e) {
	alert("Wizard is finished");
});

When it is restarted it generates the following event

document.addEventListener("resetWizard", function (e) {
	alert("Wizard has restarted");
});

Demo

Try it

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

Thanks for your help! 🎉