Narcoleptic Pasta Manufacturer

    @adrii_/wizard-js

    1.0.0 • Public • Published

    Badge-glow jsDelivr hits (GitHub) GitHub repo size

    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

    Codepen


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

    Install

    npm i @adrii_/wizard-js

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    64.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • adrii_