Tie in select tags to SPA page switching

[bob2517-whiteline]

Got a project at the moment where the dropdown switches pages. Not the first time I've had to do that, but it's the first time for an SPA. Using an ACSS location command on the {@@value} when using an input event doesn't fire off the SPA handling. It does switch the page ok, but it doesn't stay in the SPA, which just doesn't cut the cheese for me.

As page switchers are a common scenario, there could be a method of triggering the SPA page switch automatically without additional ACSS coding, by putting the page name in a custom attribute in the option tag, like data-page. Would be better to do this than to use the value attribute, which has to remain primarily a form control. Usually doing stuff like this, I would put the page route into the value attribute and use a onchange location switch on that value, but 1) it wouldn't be a performant choice to analyse the option value for SPA page existence on every change, and 2) that value actually may be needed for form submittance and not a page switch and default behaviour shouldn't be overridden. Better off having a dedicated attribute for it.

So for example:

<select id="branchChooser">
<option>Choose a branch</option>
<option data-page="/aylesford">Aylesford</option>
<option data-page="/brighton">Brighton</option>
<option data-page="/eastbourne">Eastbourne</option>
<option data-page="/hastings">Hastings</option>
<option data-page="/orpington">Orpington</option>
<option data-page="/tunbridge-wells">Tunbridge Wells</option>
</select>

Selecting an option with a data-page attribute that matches a route from @pages would act like an "a" tag without any ACSS coding needed. That's the theory anyway - need to work on it to see if it will work.

[bob2517]

The working syntax is as above. When the dropdown option is selected, the SPA rules for grabbing the page href from @pages kicks in and that data comes from the data-pages attribute in the option tag. The matching route attributes from @pages are then placed by the core directly into the select tag, which can then be used as a reference later, and for determining what to do with the dropdown change event. The select tag then gets that change event fired on itself by the core which then triggers the change in the config if it is present. The change event, therefore, needs to be set up in the config alongside the click event that is normally used for SPA page switching.

eg.:

.ajaxLink:click, .ajaxLink:change {
    ... do the ajax loading, rendering, etc.
}

or you could write this if it's easier to read (makes no difference other than potentially makes it more understandable):

.ajaxLink:click, select.ajaxLink:change {
    ... do the ajax loading, rendering, etc.
}

So in summary, all that is needed to get a dropdown triggering a route change is to use a data-page attribute pointing to the route in the option tags, and then set up a change event to determine what happens when the option is selected. The @pages declaration needs to contain the approved routes, classes and/or attributes too, but that hasn't changed in behaviour. No other setups are needed. This is a backward compatible enhancement.

This is now on the branch. It works in both Firefox and chromium.

It was a bit messy to get this working in the core at first, because Firefox and chromium handle select/option events differently, which was a bit of a surprise, but we did end up getting the best solution.

[bob2517]

Closing pending release.