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/[email protected]/styles/css/main.css">

<script src="https://cdn.jsdelivr.net/gh/AdrianVillamayor/[email protected]/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

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