{{#Config settings that will change for different views, e.g. for AT, trail2016, etc. These are stored in the setup_params dictionary
#UI_layer->page        The name of the UI layer view file
#UI_layer->tabs        A name or array of names of tabs to use (names are in OZglobals:tab_definitions and the linkouts() 
#                       function in tree.py as key names in the url dict) or 'default' for the default set or 'all' for all. 
#                       Tabs (if they exist) will be shown in this order when popping up linkouts to other pages.
#UI_layer->vars->links Can be 'none' for no links, 'newtab' for all links (except the OZ logo) in new tab, or 'default' (or unset) to leave.
#UI_layer->vars->no_external_links
#                      If true, hide any links to external pages (e.g. opening wikipedia pages in a new tab)
#popups->vars          Passed to pic_info.load, about.load, how.load, data_sources.load, and the 
#                       internal linkouts urls. You will usually want to define 'popup':1 or 'popup':3 (see popup.html). 
#                       It's also sensible to set 'form_reservation_code' to a UID so that re-opening sponsor tabs remembers who you are
#partner               (Optional): if it matches a partner_identifier in the partners table, we will automatically fill out 
#                       the popups and UI_layer params to make am automatically created sponsorship site
#locations_json        Partners can provide their own json string of locations to use, but if not is provided
#                       or there is no partner, the json here is used. This is an array whose items are strings (headers) or 
#                       dicts (each turned into a clickable items) with at least one key labelled 'OTT', and then any other optional 
#                       names keyed by language, e.g. {"OTT":1012685, "en":"Mushrooms", "":"Always use this instead of default VN"}.
#pre_ui_setup          An array of javascript calls to make before Setup_UI, mostly to override global config, for example:
#                       "onezoom.config.projection.draw_sponsors = false"
setup_params = {
  'UI_layer': {
    'page':'UI_layer.load', 
    'vars':{'tabs':'default', 'links':'newtab'} },
  'popups': {
    'vars':{'popup':1, 'form_reservation_code': form_reservation_code} },
  'partner':page_info.get('partner'),
  'locations_json':('[' 
      '"Popular places",' 
      '{"OTT":244265},'  #Mammals - should get looked up automatically: this also allows the correct language to be used
      '{"OTT":770315},'  #Human - ditto
      '{"OTT":81461},'   #Birds
      '{"OTT":991547},'  #Frogs and toads
      '{"OTT":801601},'  #Vertebrates
      '{"OTT":1062253},' #Insects
      '{"OTT":691846},'  #Animals
      '{"OTT":361838},'  #Green plants
      '{"OTT":99252},'   #Flowering plants
      '{"OTT":1012685, "en":"Mushrooms"},' #the default OZ english name is bad for menus here, so we replace it
      '{"OTT":304358}'   #Complex life (eukaryotes)
      ']'
    )
  }
if str(T.accepted_language or '').lower().split('-')[0] == 'zh':
    import json
    popular_locations = json.loads(setup_params['locations_json'])
    for popular_location in popular_locations:
        if isinstance(popular_location, dict) and popular_location.get('OTT') == 1012685:
            popular_location.pop('en', None)
        pass
    pass
    setup_params['locations_json'] = json.dumps(popular_locations)
pass
}}
{{extend ('treeviewer/layout_popuped_viewer.html' if request.vars.popup else 'treeviewer/layout.html')}}
<!-- could include bespoke css file here using <link rel="stylesheet" /> -->
<!-- could define js variables (specifically: pagetitle_func, tree_config, screensaver_config, tutorial_config) within <script> tags here -->
<style>
/* Iframe'ed OneZoom has no search */
body.within-iframe #searchnav,
body.within-iframe #advanced_search_toggle { display: none; }

/* In iframes, stick to just zoom buttons until too small for that too */
body.within-iframe .ui-controls > #locationButton,
body.within-iframe .ui-controls > #settingsButton { display: none; }
body.within-iframe .ui-controls > #resetButton,
body.within-iframe .ui-controls > #inButton,
body.within-iframe .ui-controls > #outButton { display: block !important; }

/* Disable all dividers */
body.within-iframe .ui-controls > li a {
    border-top: none !important;
    border-bottom: none !important;
}
#UI > .iframe-interact-prompt {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0.5rem 1rem;

    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;

    pointer-events: none;
    transition: opacity 0.5s;
    opacity: 0;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    if (document.body.classList.contains('within-iframe')) {
        document.getElementById('OneZoomCanvasID').addEventListener('wheel', function (e) {
            // If ctrl held down, allow treeviewer to continue
            if (e.ctrlKey) return;

            e.stopImmediatePropagation();
            if (!window.ctrl_prompt) {
                window.ctrl_prompt = $('<div class="iframe-interact-prompt">{{=T("Press control, then scroll to zoom")}}</div>')[0];
                $('#UI').append(window.ctrl_prompt);
            }

            window.ctrl_prompt.style.opacity = 1;

            if (window.ctrl_prompt.cp_timer) clearTimeout(window.ctrl_prompt.cp_timer);
            window.ctrl_prompt.cp_timer = setTimeout(function() {
                window.ctrl_prompt.style.opacity = 0;
            }, 600);
        });
        document.getElementById('OneZoomCanvasID').addEventListener('touchmove', function (e) {
            // If more than 1 finger, allow treeviewer to continue
            if (event.targetTouches.length >= 2) return;

            e.stopImmediatePropagation();
        });
        document.getElementById('OZ-logo').addEventListener('click', function (e) {
            /* In an iframe, open current page in new window */
            e.preventDefault();
            window.open(("" + window.location).replace(/\#.*$/, ''), '_blank');
        });

        /* Linkouts open in a new window */
        globals.UI_callbacks.openLinkouts = function() {
            window.open(("" + window.location).replace(/\#.*$/, ''), '_blank');
        };
        globals.UI_callbacks.populateLinkouts = function(responseJSON, initialSelected) {
            console.log("Not populating linkout tabs, since we'll open in a new window");
        };
    }
});
</script>