// a list of different FlexView API types
var frontendtypes = [
"tour",
"poi",
"lodging",
"hut",
"offer",
"skiresort",
"story",
"event"
];
// reference to the FlexView API instance
var fvp;
// create a simple menu to choose between the FlexView API types
createMenu( frontendtypes );
// create a FlexView API on page load
// with the first type out of the last
createOrReplaceFlexView( frontendtypes[0] );
// this function is called after page load or on menu changes
function createOrReplaceFlexView( t ) {
// small configuration object including the chosen type
var conf = {
frontendtype: t,
zoom: 11,
center: [ 10.292, 47.546 ]
};
// destroy FlexView API instance if one exists
if (fvp) {
fvp.destroy();
}
// create new FlexView API instance based on configuration object
fvp = oa.api.flexviewpage( conf );
}
function createMenu( frontendtypes ) {
// put the menu in a form
var form = document.createElement("form");
// create an unordered list for all menu items
var ul = document.createElement("ul");
// the menu will be places just before the div container of the FlexView API
// find the FlexView API div container to be able to insert before this dom node later
var oa_div = document.getElementsByClassName("oax-top-cont")[0];
// do some simple list styling (no bullets, no margin/padding)
ul.setAttribute( "style", "list-style-type: none;margin: 0;padding: 0;" );
// append unordered list to form
form.appendChild( ul );
// create a list item for each array element of FlexView API types
frontendtypes.forEach( createMenuItem );
// insert form (including menu) just before the FlexView API container
oa_div.parentElement.insertBefore( form, oa_div );
// push first radio button as it is chosen on page load
ul.firstChild.firstChild.checked = true;
function createMenuItem( name ) {
// create a list item for each menu item
var li = document.createElement("li");
// create a radio button
var radioButton = document.createElement("input");
// and a label for the button
var label = document.createElement("label");
// a DOM id for the radio button
var id = "rbtn_" + name;
// let the first character of the menu item's title be upper case
var title = name.charAt(0).toUpperCase() + name.slice(1);
// render all list items in one line
li.setAttribute( "style", "display: inline;" );
// add radio button to the list item
li.appendChild( radioButton );
// add button label
li.appendChild( label );
// set attributes of radio button element
radioButton.setAttribute("type", "radio");
radioButton.setAttribute("id", id);
radioButton.setAttribute("name", "frontendtype");
radioButton.setAttribute("value", name);
radioButton.setAttribute("style", "margin:8px;");
// listen to change event
radioButton.addEventListener("change", radioButtonChangeListener );
// attach label to radio button
label.setAttribute("for", id);
// add title to label
label.appendChild( document.createTextNode( title ) );
// append list item to unordered list
ul.appendChild( li );
// listener called when radio button state changed
function radioButtonChangeListener( event ) {
// replace FlexView API instance with new one
createOrReplaceFlexView( event.target.value );
}
}
}