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.9.9/styles/css/main.css">

<script src="https://cdn.jsdelivr.net/gh/AdrianVillamayor/Wizard-JS@1.9.9/src/wizard.min.js"></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_class": ".wizard",
	"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();

Allows to update the wizard, deleting or adding steps

wizard.update();

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 target
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
wz_highlight	String	.highlight	Class for highlights
current_step	int	0	Active wizard step
steps	int	0	Number of wizard steps
highlight_time	int	1000	display time for highlight
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
nav	Bool	true	Allows you to show or hide the header navigation
highlight	Bool	true	Allows you to show or hide the highlight
next	String	Next	Next button text
prev	String	Prev	Prev button text
finish	String	Submit	Finish button text
highlight_type	Object	{ error: "error", warning: "warning", success: "success", info: "info" }	Allows to identify the different highlight effects and to define a class for them

Events Management

To identify when the wizard is fully generated and loaded.

This event is a CustomEvent and has as custom parameters inside details:

• target: wz_class
• elem: DOM element

document.addEventListener("wz.ready", function (e) {
    console.log(`↓ Target ↓`)
    console.log(e.detail.target) // .wizard

    console.log(`↓ DOM Elem ↓`)
    console.log(e.detail.elem) // DOM form#wizard.wizard.horizontal
});

Events that are part of the wizard

let wz_class = ".wizard";
let $wz_doc = document.querySelector(wz_class)

When the wizard is locked in a step

$wz_doc.addEventListener("wz.lock", function (e) {
	alert("Wizard is locked");
});

When the wizard is unlocked in one step

$wz_doc.addEventListener("wz.unlock", function (e) {
	alert("Wizard is unlocked");
});

Moving on to the prev step

$wz_doc.addEventListener("wz.btn.prev", function (e) {
	alert("Prev Step");
});

Moving on to the next step

$wz_doc.addEventListener("wz.btn.next", function (e) {
	alert("Next Step");
});

Moving steps forward with the navbar

$wz_doc.addEventListener("wz.nav.forward", function (e) {
	alert("Forward Nav");
});

Moving steps backward with the navbar

$wz_doc.addEventListener("wz.nav.backward", function (e) {
	alert("Backward Nav");
});

Error validating the data of the active form step (CustomEvent)

• id: Error ID
• msg: i18n message
• target: Contains all the elements that have given error

$wz_doc.addEventListener("wz.error", function (e) {
    console.log(`↓ ID ↓`)
    console.log(e.detail.id) // form_validaton

    console.log(`↓ Message ↓`)
    console.log(e.detail.msg) //options.i18n.form_validation

    console.log(`↓ Target ↓`)
    console.log(e.detail.target) // [input.form-control.required.highlight-error]
});

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

$wz_doc.addEventListener("wz.form.submit", function (e) {
	alert("Form Submit");
});

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

$wz_doc.addEventListener("wz.end", function (e) {
	alert("Wizard is finished");
});

When it is restarted it generates the following event

$wz_doc.addEventListener("wz.reset", function (e) {
	alert("Wizard has restarted");
});

To identify when the wizard is updated. (CustomEvent)

• target: wz_class
• elem: DOM element

$wz_doc.addEventListener("wz.update", function (e) {
    console.log(`↓ Target ↓`)
    console.log(e.detail.target) // .wizard

    console.log(`↓ DOM Elem ↓`)
    console.log(e.detail.elem) // DOM form#wizard.wizard.horizontal
});

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! 🎉