Beta Opened: Multi-State Box

Be in the know
, ,
13

@wingcc Thanks for asking. Here’s the code for this form.

import { local } from ‘wix-storage’ ;
let multi = $w ( “#multiStateBox1” );
let toPlusBar ;
let toMinusBar ;
$w . onReady ( function () {
let data = JSON . parse ( local . getItem ( “listingRental” )); // “value”
data ?. title != undefined && data.title != null ? $w ( “#listingTitle” ). text = data.title : $w ( “#dropdown14” ). expand () && $w ( “#listingTitle” ). collapse ();
console . log ( ‘data’ , data );
let states = multi.states ;
console . log ( ‘states’ , states );
setPlus ( states.length );
//next
$w ( “#btnNext1” ). onClick (() => {
if ( $w ( “#dropdown13” ). value != “I’m a real estate agent submitting an offer” ) {
loadNextPlus ( states , 2 );
} else {
loadNext ( states );
}

}) 
$w ( "#btnNext2" ). onClick (() => { 
    loadNext ( states ); 
}) 
$w ( "#btnNext3" ). onClick (() => { 
    loadNext ( states ); 
}) 
$w ( "#btnNext4" ). onClick (() => { 
    loadNext ( states ); 
}) 
$w ( "#btnNext5" ). onClick (() => { 
    loadNext ( states ); 
}) 
$w ( "#btnNext6" ). onClick (() => { 
    loadNext ( states ); 
}) 
$w ( "#btnNext7" ). onClick (() => { 
    loadNext ( states ); 
}) 
$w ( "#btnNext8" ). onClick (() => { 
    loadNext ( states ); 
}) 
$w ( "#btnNext9" ). onClick (() => { 
    loadNext ( states ); 
}) 
$w ( "#btnNext10" ). onClick (() => { 
    loadNext ( states ); 
}) 
$w ( "#btnNext11" ). onClick (() => { 
    loadNext ( states ); 
}) 
$w ( "#btnNext12" ). onClick (() => { 
    loadNext ( states ); 
}) 
$w ( "#btnNext13" ). onClick (() => { 
    $w ( "#dataset2" ). setFieldValue ( "listing" ,  data._id ); 
}) 

//back 
$w ( "#btnBack2" ). onClick (() => { 
    loadBack ( states ); 
}) 
$w ( "#btnBack3" ). onClick (() => { 
    loadBack ( states ); 
}) 
$w ( "#btnBack4" ). onClick (() => { 
    loadBack ( states ); 
}) 
$w ( "#btnBack5" ). onClick (() => { 
    loadBack ( states ); 
}) 
$w ( "#btnBack6" ). onClick (() => { 
    loadBack ( states ); 
}) 
$w ( "#btnBack7" ). onClick (() => { 
    loadBack ( states ); 
}) 
$w ( "#btnBack8" ). onClick (() => { 
    loadBack ( states ); 
}) 
$w ( "#btnBack9" ). onClick (() => { 
    loadBack ( states ); 
}) 
$w ( "#btnBack10" ). onClick (() => { 
    loadBack ( states ); 
}) 
$w ( "#btnBack11" ). onClick (() => { 
    loadBack ( states ); 
}) 
$w ( "#btnBack12" ). onClick (() => { 
    loadBack ( states ); 
}) 
$w ( "#btnBack13" ). onClick (() => { 
    loadBack ( states ); 
})

});

function setPlus ( size ) {
toPlusBar = parseFloat ( 100 / size );
toMinusBar = parseFloat (- 100 / size );
}

function updateBar ( toSum ) {
let progressValue = $w ( “#progressBar1” ). value ; // 42
let newvalue = progressValue + toSum ;
$w ( “#progressBar1” ). value = newvalue ;
}

function goToState ( id ) {
if ( id != ‘’ ) {
multi . changeState ( id );
}
}

function loadNext ( states ) {
let current = multi.currentState ;
const indexCurrent = states . findIndex ( state =>
state.id == current.id
);
let indexNext = indexCurrent + 1 ;
let next = indexNext < states.length ? states[indexNext ]. id : ‘’ ; //next id

goToState ( next ); 
updateBar ( toPlusBar );

}

function loadNextPlus ( states , number ) {
let current = multi.currentState ;
const indexCurrent = states . findIndex ( state =>
state.id == current.id
);
let indexNext = indexCurrent + number ;
let next = indexNext < states.length ? states[indexNext ]. id : ‘’ ; //next id

goToState ( next ); 
updateBar ( toPlusBar  +  toPlusBar );

}

function loadBack ( states ) {
let current = multi.currentState ;
let indexCurrent = states . findIndex ( state =>
state.id === current.id
);
let indexBack = indexCurrent - 1 ;
let back = indexBack >= 0 ? states[indexBack ]. id : ‘’ ; //next id

goToState ( back ); 
updateBar ( toMinusBar );

}