Description

// 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 );

        }

    }
}