[SOLVED] FuelUX Wizard - Allow direct selection of steps further down the process

FuelUX Wizard - Allow direct selection of steps further down the process

I've used the FuelUX Wizard on a form where people submit some data and we wanted to break it up into logical steps. It works really well.

Now I'm working on the edit version of the same form which is working fine, but as the steps already have the data loaded, I want the user to be able to jump straight to step X to tweak the bit they need to edit, rather than having to click next X times to get there.

I'm going to carry on working on this myself, but wondered if anyone else has already done this and can clue me into how to approach it?

Solution

OK, the first step when the page loads is simply to apply the class "complete" to each of the li elements and the class "badge-success" to each of the badges.

Then you need to stop it removing those classes for steps 4 to 6 when you click on step 3.

I hooked into the "changed" event and things were happening in the right order when I logged stuff to the console, but the "stepclicked" method seems to be being called twice, the second time after my "changed" stuff thereby undoing my good work.

Well I don't want to stack hacking the FuelUX Wizard code itself or we'll never be able to upgrade it so I came up with this nasty hack which will suffice until such time as the FuelUX code may be modified to allow this to be done more elegantly.

//KEEP ALL THE STEPS MARKED AS COMPLETE
$("#JetWizard").on("changed", function() {
    window["tid_wizard_steps_all_complete_count"] = 0;
    window["tid_wizard_steps_all_complete"] = setInterval(function() { jetKeepAllStepsMarkedComplete(); }, 25);';
}
function jetKeepAllStepsMarkedComplete() {
    $("#JetWizard ul.steps").find("li").addClass("complete");
    $("#JetWizard ul.steps").find("span.badge").addClass("badge-success");
    window["tid_wizard_steps_all_complete_count"]++;
    if(window["tid_wizard_steps_all_complete_count"] >= 20) {
        clearInterval(window["tid_wizard_steps_all_complete"]);
    }
}

It basically repeats itself twenty times in the first half a second after the step is clicked to ensure we keep things the way we want. Obviously you could use a longer interval and less repeats, but then you get an obvious "flash" in the steps.

Then I wanted to stop it actually navigating iof the fields on the current step have errors. So...

//HANDLE CLICKING ON STEPS TO GO BACK & FORTH
$("#JetWizard ul.steps li.complete").on("click", function() {
    if(jetDoLiveValidationOnVisibleFields() === false) {
        alert ("The form has errors");
        return false;
    }
});