{{response.title=T('Embedding') + ' ' + base_title}}
{{response.files.append(URL('static', 'css/content_pages.css'))}}
{{extend 'uikit_layout.html'}}

{{block masthead}}
<div class="home-heading uk-text-center uk-padding-small">
    <h1>{{=T('Embed OneZoom in your website')}}</h1>
    <p>{{=T('Configure a OneZoom embeddable widget for your website')}}</p>
</div>
{{end block}}

<div class="uk-text-small uk-padding-small">

<h2>{{=T('Embed a customised OneZoom tree in your website')}}</h2>

<p>{{=T("Without downloading or installing any software you can still use our embed and link tool if you want to embed custom versions of a tree that's already on OneZoom. After selecting the settings you want the page will e-mail you a short piece of code that you can copy any paste into your website to give you a OneZoom visualisation.")}}</p>

<p>{{=XML(T('The <a href="%(slot0)s">embed editor can be accessed here</a>.') % {'slot0': (xmlescape(URL('embed_edit')))})}}</p>

<h2>{{=T('Bulk-embedding OneZoom in many pages')}}</h2>

<p>{{=XML(T('If embedding in many pages, it may be useful to check that a species / node exists before importing the entirety of OneZoom. To do this you can use the <a href="%(slot0)s#API/getOTT">getOTT</a> API that finds a matching OTT identifier if available. Once you have an OTT you can load OneZoom using the an embed URL as generated using the <a href="%(slot1)s">embed editor</a>.') % {'slot0': (xmlescape(URL('API', 'index'))), 'slot1': (xmlescape(URL('embed_edit')))})}}</p>

<p>{{=XML(T('<a href="%(slot0)s#API/getOTT">getOTT</a> can search by several different identifiers. For example, the code below will search based on a GBIF ID and, if available in OneZoom, update the iframe to load the OneZoom tree.') % {'slot0': (xmlescape(URL('API', 'index')))})}}</p>

<pre>
const oz_origin = 'https://onezoom.org';
const oz_embed_url = ott => `${oz_origin}/life/@${ott}?otthome=${ott}&embedkey=...`;

// Fetch a GBIF ID from the URL
let gbif_code = parseInt(window.location.search.match(/gbif=([0-9]+)/)[1]);

window.fetch(`${oz_origin}/API/getOTT.json?gbif=${gbif_code}`).then(x=>x.json()).then(function (data) {
    let ott = data.gbif[gbif_code];

    document.getElementById('oz_iframe').src = ott ? oz_embed_url(ott) : '';
});
</pre>

<h2>{{=T('OneZoom treeviewer variants')}}</h2>

{{=T('There are several variations on the main OneZoom')}} <code>/life/</code> {{=T('page:')}}

<ul>
  <li>{{=XML(T('<a href="%(slot0)s"><code>/life/</code></a>: The default interactive view') % {'slot0': (xmlescape(URL('default', 'life')))})}}</li>
  <li>{{=XML(T('<a href="%(slot0)s"><code>/life_noninteractive/</code></a>: Non-interactive view, all OneZoom UI is hidden') % {'slot0': (xmlescape(URL('default', 'life_noninteractive')))})}}</li>
</ul>

<h2>{{=T('Remote-control of OneZoom')}}</h2>

<p>{{=T('Many aspects of OneZoom treeviewer can be configured by URL. There are 2 relevant bits of documentation:')}}</p>

<ul>
  <li>{{=XML(T('<a href="https://github.com/OneZoom/OZtree/blob/HEAD/OZprivate/rawJS/OZTreeModule/src/navigation/state.js">The URL parsing documentation, describing the query string options available</a>'))}}</li>
  <li>{{=XML(T('<a href="https://github.com/OneZoom/OZtree/blob/HEAD/OZprivate/rawJS/OZTreeModule/src/navigation/pinpoint.js">The Pinpoint documentation, describing the pinpoint strings used to direct OneZoom to a species</a>'))}}</li>
</ul>

<p>{{=XML(T('Anything that can be set via. the URL can be changed at run time by giving a querystring to <code>onezoom.controller.set_treestate()</code>. For example:'))}}</p>

<pre>
onezoom.controller.set_treestate('?lang=fr')
onezoom.controller.set_treestate('?lang=fr&amp;cols=AT')
// NB: An empty URL section resets to default
onezoom.controller.set_treestate('?lang=&amp;cols=')
</pre>

<h4>{{=T('Zooming around')}}</h4>

{{=T('This can also be done with')}} <code>set_treestate()</code>:

<pre>
onezoom.controller.set_treestate('@Aves')
// Instant jump to Elephants
onezoom.controller.set_treestate('@Loxodonta_africana?anim=jump')
// Slow direct flight to Rodents
onezoom.controller.set_treestate('@RODENTIA?anim=straight-0.2')
// Quick Flight to blackbird
onezoom.controller.set_treestate('@Turdus_merula?anim=flight-4')
// Reset flights back to normal
onezoom.controller.set_treestate('?anim=')
</pre>

<h4>{{=T('Highlighting')}}</h4>

{{=T('Highlights can be enabled by providing a highlight string to')}} <code>set_treestate()</code>:

<pre>
onezoom.controller.set_treestate('?highlight=path:@tetrapoda@aves&amp;highlight=fan:@aves@GALLOANSERAE')
// Turn highlights off again
onezoom.controller.set_treestate('?highlight=')
</pre>

<p>{{=XML(T('See the <a href="https://github.com/OneZoom/OZtree/blob/main/OZprivate/rawJS/OZTreeModule/src/projection/highlight/highlight.js">the highlight documentation</a> for more information on syntax.'))}}</p>

<h4>{{=T('Playing a tour')}}</h4>

{{=T('Tours can be played using the')}} <code>tour</code> {{=T('querystring option:')}}

<pre>
onezoom.controller.set_treestate('?tour=/tour/data.html/superpowers');
</pre>

</div><!-- uk-text-small uk-padding-small -->