@adrii_/wizard-js v1.0.0

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