Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • faproietti/XRF-App
  • chnet/XRF-App
2 results
Show changes
Showing
with 0 additions and 1734 deletions
src/LIB-NOT-USED/jquery.fancytree/demo/skin-custom/key.png

612 B

src/LIB-NOT-USED/jquery.fancytree/demo/skin-custom/new.png

378 B

src/LIB-NOT-USED/jquery.fancytree/demo/skin-custom/note.png

500 B

Copyright 2015 Martin Wendt,
http://wwWendt.de/
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Taxonomy Browser
Created as a demo for [Fancytree](https://github.com/mar10/fancytree/).
Uses
- jQuery
- Bootstrap.js
- Handlebars.js
- Fancytree
# Taxonomy Browser TODOs
## Fancytree
- bootstrap theme 'jumps' just before expand animation ends
- ext-wide: broken selecton bar when depth > 20
- smart expand mode
The tree gets way too large
- Search could be improved.
- restrict search row height to 1 em
- DOWN key in search box should focus first result entry
- After clicking a link, we should jump to the details?
- Result should be collapsibel without dismissing the query?
- concept: 'sparse tree': `node.partload = true`.
only shows the parent paths, but knows that those parents may have more children,
that need to be reloaded later.
-> use to load Path to target species without reqursive loadPath requests.
- Table:
Support re-definition of colum templates (i.e. adding removing columns)
- https://github.com/mar10/fancytree/issues/436
## GUI
- Marine / Extinct / Terrestrial may have multiple values
- Print mode
<div id="tmplDetails">
<div class="row">
<div class="col-md-6">
<dl>
<dt>Scientific Name</dt>
<dd>{{scientificName}}
{{#if synonym}} <span class="label label-info">Synonym</span> {{/if}}
</dd>
{{#if vernacularName}}
<dt>Vernacular Name</dt>
<dd>{{vernacularName}}</dd>
{{/if}}
<dt>Canonical Name</dt>
<dd>{{canonicalName}}</dd>
<dt>Taxonomic Status</dt>
<dd>{{taxonomicStatus}}</dd>
<dt>According to</dt>
<dd>{{accordingTo}}</dd>
<dt>Key</dt>
<dd>{{key}} (Nub: {{nubKey}})</dd>
<dt>Habitat</dt>
<dd>{{#if profile.marine}} Marine {{else}} Not marine {{/if}}</dd>
<dt>Synonym(s)</dt>
<dd>
<ul>
{{#each synonyms}}
<li>
<a href="#{{this.key}}">{{this.scientificName}}</a>
</li>
{{else}}
<li>n.a.</li>
{{/each}}
</ul>
</dd>
</dl>
</div>
<div class="col-md-6">
{{#if media}}
<h4>Media</h4>
<ul class="media-list">
{{#each media}}
<li class="media">
<div class="media-left">
<a href="{{this.identifier}}">
<img class="media-object" src="{{this.identifier}}" alt="{{this.title}}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{this.title}}</h4>
{{this.description}}<br>
<small>
{{#if this.source}}Source: {{this.source}} {{/if}}
{{#if this.publisher}}, Publisher: {{this.publisher}} {{/if}}
{{#if this.license}}, License: {{this.license}} {{/if}}
</small>
</div>
{{/each}}
</li>
</ul>
{{else}}
No media available.
{{/if}}
<!--
{{#if media}}
<div class="row">
{{#each media}}
<div class="col-xs-12 col-md-6 col-lg-3">
<a href="{{this.identifier}}" class="thumbnail" target="_blank">
<img src="{{this.identifier}}" alt="{{this.title}}" />
<div class="caption">
<small> {{this.title}} </small>
</div>
</a>
</div>
{{/each}}
</div>
{{else}}
No media.
{{/if}}
-->
</div>
</div>
<!--
<h4>Media</h4>
{{#if media}}
<div class="media">
{{#each media}}
<div class="media-left">
<a class="pull-left" href="{{this.identifier}}" target="_blank">
<img class="media-object" src="{{this.identifier}}" alt="{{this.title}}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{this.title}}</h4>
{{this.title}}
</div>
{{/each}}
</div>
{{else}}
No media available.
{{/if}}
-->
<h4>Description</h4>
{{#if descriptions}}
<!--
<ul>
{{#each descriptions}}
<li>
<a tabindex="0" role="button"
data-toggle="popover" data-trigger="focus" data-placement="top"
title="{{this.type}} {{this.source}}"
data-content="{{this.description}}">
{{this.type}} {{this.source}}
</a>
</li>
{{/each}}
</ul>
-->
<ul class="nav nav-pills">
{{#each descriptionsByLang}}
<!-- Nav tabs -->
<li role="presentation" {{#if @first}}class="active"{{/if}}>
<a href="#tabDesc{{@key}}" aria-controls="tabDesc{{@key}}" role="tab" data-toggle="tab">
{{@key}}
<span class="badge">{{this.length}}</span>
</a>
</li>
{{/each}}
</ul>
<!-- Tab panes -->
<div class="tab-content">
{{#each descriptionsByLang}}
<div role="tabpanel" class="tab-pane pane panel panel-default {{#if @first}}active{{/if}}"
id="tabDesc{{@key}}">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
{{#each this}}
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading{{@../key}}{{@index}}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion"
href="#collapse{{@../key}}{{@index}}" aria-controls="collapse{{@../key}}{{@index}}"
aria-expanded="{{#if @first}}true{{else}}false{{/if}}" >
{{this.type}} <small>({{this.source}})</small>
</a>
</h4>
</div>
<div id="collapse{{@../key}}{{@index}}"
class="panel-collapse collapse {{#if @first}}in{{/if}}"
role="tabpanel" aria-labelledby="heading{{@../key}}{{@index}}">
<div class="panel-body">
{{this.description}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
<!--
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
{{#each descriptions}}
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading{{@index}}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion"
href="#collapse{{@index}}" aria-controls="collapse{{@index}}"
aria-expanded="{{#if @first}}true{{else}}false{{/if}}" >
<span class="badge">{{this.language}}</span> {{this.type}} <small>({{this.source}})</small>
</a>
</h4>
</div>
<div id="collapse{{@index}}"
class="panel-collapse collapse {{#if @first}}in{{/if}}"
role="tabpanel" aria-labelledby="heading{{@index}}">
<div class="panel-body">
{{this.description}}
</div>
</div>
</div>
{{/each}}
</div>
-->
{{else}}
No description available.
{{/if}}
</div>
<h3>{{scientificName.combinedName}} <small>Taxonomy and Nomenclature</small></h3>
<dl>
<dt>TSN</dt>
<dd>{{tsn}}</dd>
<dt>Kingdom</dt>
<dd>{{kingdom.kingdomName}}</dd>
<dt>Taxonomic Rank</dt>
<dd>{{taxRank.rankName}}</dd>
<dt>Synonym(s)</dt>
<dd>
<ul>
{{#each synonymList.synonyms}}
<li>
{{#if this}} {{this.sciName}} {{else}} n.a. {{/if}}
</li>
{{/each}}
</ul>
</dd>
<dt>Common Name(s)</dt>
<dd>
<ul>
{{#each commonNameList.commonNames}}
<li>
{{#if this}} {{this.commonName}} {{else}} n.a. {{/if}}
</li>
{{/each}}
</ul>
</dd>
<dt>Valid Name</dt>
<dd>todo</dd>
</dl>
Retrieved [month, day, year], from the Integrated Taxonomic Information System on-line database,
<a href="http://www.itis.gov">http://www.itis.gov</a>.
Open <a href="http://www.itis.gov/servlet/SingleRpt/SingleRpt?search_topic=TSN&search_value={{tsn}}&search_kingdom=every&search_span=exactly_for&categories=All&source=html&search_credRating=All"
target="_blank">
Authorative Information on ITIS
</a>.
<div class="body">
{{body}}
</div>
<!--
Taxonomy and Nomenclature
Kingdom: Animalia
Taxonomic Rank: Species
Common Name(s):
Valid Name: Homo sapiens Linnaeus, 1758
Taxonomic Status:
Current Standing: invalid - junior synonym
Data Quality Indicators:
Record Credibility Rating: verified - standards met
References
Expert(s):
Expert:
Notes:
Reference for:
Other Source(s):
Source:
Acquired:
Notes:
Reference for:
Publication(s):
Author(s)/Editor(s): Groves, Colin P.
Publication Date: 2001
Article/Chapter Title:
Journal/Book Name, Vol. No.: Primate Taxonomy
Page(s): viii+350
Publisher: Smithsonian Institution Press
Publication Place: Washington, DC, USA
ISBN/ISSN: 1-56098-872-X
Notes:
Reference for: Homo aethiopicus
Author(s)/Editor(s): Wilson, Don E., and DeeAnn M. Reeder, eds.
Publication Date: 2005
Article/Chapter Title:
Journal/Book Name, Vol. No.: Mammal Species of the World: A Taxonomic and Geographic Reference, 3rd ed., vol. 1
Page(s): xxxv + 743
Publisher: Johns Hopkins University Press
Publication Place: Baltimore, Maryland, USA
ISBN/ISSN: 0-8018-8221-4
Notes:
Reference for: Homo aethiopicus
Geographic Information
Geographic Division:
Jurisdiction/Origin:
Comments
Comment: Comments: see comments under species
other off-site resources
Additional off-site resources may be available for this taxon. ITIS will build search links for all of the following that return results:
Global Biodiversity Information Facility (GBIF) Data Portal
BioOne Journals
National Center for Biotechnology Information (NCBI) Entrez Life Sciences Search
Google Images
Convention on International Trade in Endangered Species (CITES) of Wild Fauna and Flora Search
United Nations Environment Programme (UNEP) World Conservation Monitoring Centre (WCMC) Search
Threatened and Endangered Species (TESS) Search
U.S. Fish and Wildlife Service (FWS) Search
Ocean Biogeographic Information System (OBIS) Search
USDA PLANTS Database Search
NatureServe Explorer Search
Please be patient. The time it takes to return results depends on the speed of the individual sites and may take several minutes.
-->
\ No newline at end of file
{{#if vernacularName}} {{vernacularName}} {{else}} {{canonicalName}} {{/if}}
{{#if profile.extinct}} <span class="label label-danger">Extinct</span> {{/if}}
<small>{{rank}}</small>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Taxonomy Browser</title>
<!--
NOTE: "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3"
-->
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
// Fix BBQ for jQuery >= 1.9 (see https://github.com/cowboy/jquery-bbq/pull/42)
if( !$.browser ) {
console.warn("Monkey-patching jQuery.browser.msie to get BBQ working");
var ua = navigator.userAgent.toLowerCase();
$.browser = { msie: /msie/.test(ua) && !/opera/.test(ua) };
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.ba-bbq/1.2.1/jquery.ba-bbq.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<!--
<link href="//cdn.jsdelivr.net/jquery.truncate/0.1/jquery.truncate.min.js"
rel="stylesheet">
<script src="https://rawgit.com/tbasse/jquery-truncate/master/jquery.truncate.js"
type="text/javascript"></script>
-->
<link href="//cdn.jsdelivr.net/jquery.fancytree/2/skin-bootstrap/ui.fancytree.min.css"
rel="stylesheet">
<!--
<link href="../../src/skin-bootstrap/ui.fancytree.css"
rel="stylesheet">
-->
<script src="//cdn.jsdelivr.net/jquery.fancytree/2/jquery.fancytree-all.min.js"></script>
<!--
<script src="../../src/jquery.fancytree.js"></script>
<script src="../../src/jquery.fancytree.edit.js"></script>
<script src="../../src/jquery.fancytree.filter.js"></script>
<script src="../../src/jquery.fancytree.glyph.js"></script>
<script src="../../src/jquery.fancytree.table.js"></script>
<script src="../../src/jquery.fancytree.wide.js"></script>
-->
<link href="style.css" rel="stylesheet">
<script src="taxonomy-browser.js"></script>
</head>
<body>
<div class="page-header">
<h1>Taxonomy Browser
<!--
<small><a href="http://wwwendt.de/tech/fancytree/demo/taxonomy-browser/">home</a></small>
-->
</h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Search <acronym title="Global Biodiversity Information Facility">GBIF</acronym></h3>
</div>
<div class="panel-body hidden-print">
<input type="text" name="query" id="query"
autocorrect="off" autocomplete="off"
placeholder="Enter Search Phrase">
<button id="btnResetSearch" class="btn btn-default btn-sm">&times;</button>
<button id="btnSearch" class="btn btn-default btn-sm">Search</button>
<div class="collapse" id="searchResultPane">
<table id="searchResultTree"
class="table table-striped table-hover table-condensed table-bordered">
<colgroup>
<col width="10em"></col>
<col width="10em"></col>
<col width="*"></col>
<col width="30em"></col>
<col width="30em"></col>
<col width="30em"></col>
<col width="30em"></col>
<col width="30em"></col>
<col width="10em"></col>
<col width="10em"></col>
<col width="30em"></col>
<col width="30em"></col>
</colgroup>
<thead>
<tr>
<th class="visible-lg">Key</th>
<th class="hidden-xs">Rank</th>
<th>Scientific Name</th>
<th class="hidden-xs hidden-sm">Vernacular Names</th>
<th class="hidden-xs hidden-sm">Canonical Name</th>
<th class="visible-lg">According to</th>
<th class="hidden-xs">Status</th>
<th class="hidden-xs">Name Type</th>
<th class="hidden-xs"># Occur.</th>
<th class="hidden-xs"># Desc.</th>
<th class="visible-lg">Author</th>
<th class="visible-lg">Published in</th>
<!--
canonicalName
accordingTo
extinct
numDescendants
numOccurrences
publishedIn
synonym
-->
</tr>
</thead>
<tbody>
<tr>
<td class="visible-lg"/>
<td class="hidden-xs" />
<td/>
<td class="hidden-xs hidden-sm" />
<td class="hidden-xs hidden-sm" />
<td class="visible-lg" />
<td class="hidden-xs" />
<td class="hidden-xs" />
<td class="hidden-xs" />
<td class="hidden-xs" />
<td class="visible-lg" />
<td class="visible-lg" />
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button id="btnPin" class="btn btn-default btn-xs">Pin</button>
<button id="btnUnpin" class="btn btn-default btn-xs">Unpin</button>
</div>
<div id="taxonTree" class="fancytree-fade-expander">
</div>
</div>
<div class="col-md-8">
<!-- Breadcrumb -->
<ol class="breadcrumb">
<li class="active">Please select an element.</li>
</ol>
<span id="tmplInfoPane">
</span>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
Disclaimer
</div>
<div class="panel-body">
<p>
This site accesses data from external sources, namely the
<a href="http://www.gbif.org/">Global Biodiversity Information Facility (GBIF)</a> database.
There is no guarantee, that the display is correct, complete, or
permanently available. Please refer to those original sources for
authorative information.
</p>
<p>
Copyright &copy; 2015 Martin Wendt. Created as a demo for
<a href="https://github.com/mar10/fancytree">Fancytree</a>.
</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Taxonomy Browser</title>
<!--
NOTE: "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3"
-->
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
// Fix BBQ for jQuery >= 1.9 (see https://github.com/cowboy/jquery-bbq/pull/42)
if( !$.browser ) {
console.warn("Monkey-patching jQuery.browser.msie to get BBQ working");
var ua = navigator.userAgent.toLowerCase();
$.browser = { msie: /msie/.test(ua) && !/opera/.test(ua) };
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.ba-bbq/1.2.1/jquery.ba-bbq.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.fancytree/2/skin-bootstrap/ui.fancytree.min.css"
rel="stylesheet">
<!--
<script src="//cdn.jsdelivr.net/jquery.fancytree/2/jquery.fancytree-all.min.js"
type="text/javascript"></script>
-->
<script src="../../src/jquery.fancytree.js"></script>
<script src="../../src/jquery.fancytree.edit.js"></script>
<script src="../../src/jquery.fancytree.filter.js"></script>
<script src="../../src/jquery.fancytree.glyph.js"></script>
<script src="../../src/jquery.fancytree.table.js"></script>
<script src="../../src/jquery.fancytree.wide.js"></script>
<link href="style.css" rel="stylesheet">
<script src="taxonomy-browser-itis.js"></script>
<!--
<script src="details.tmpl" id="tmplDetails" type="text/x-handlebars-template"></script>
-->
</head>
<body>
<div class="page-header">
<h1>Taxonomy Browser</h1>
</div>
<!--
<div class="panel panel-default">
<div class="panel-body">
Search and browse the <a href="http://www.itis.gov/web_service.html">ITIS</a> database.
</div>
</div>
-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Search <acronym title="Integrated Taxonomic Information System">ITIS</acronym></h3>
</div>
<div class="panel-body">
<input type="text" name="query" id="query" autocorrect="off"
placeholder="Enter Search Phrase">
<button id="btnResetSearch" class="btn btn-default btn-sm">&times;</button>
<button id="btnSearch" class="btn btn-default btn-sm">Search</button>
<div class="collapse" id="searchResultPane">
<table id="searchResultTree"
class="table table-striped table-hover table-condensed table-bordered">
<colgroup>
<col width="10em"></col>
<col width="*"></col>
<col width="10em"></col>
<col width="10em"></col>
<col width="250em"></col>
</colgroup>
<thead>
<tr> <th class="hidden-xs">TSN</th> <th>Scientific Name</th> <th>Common Names</th> <th>Match Type</th> <th>Author</th> </tr>
</thead>
<tbody>
<tr> <td class="hidden-xs"></td> <td></td> <td></td> <td></td> <td></td> </tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button id="btnPin" class="btn btn-default btn-xs">Pin</button>
<button id="btnUnpin" class="btn btn-default btn-xs">Unpin</button>
</div>
<div id="taxonTree">
</div>
</div>
<div class="col-md-8">
<ol class="breadcrumb">
<li class="active">Please select an element.</li>
</ol>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#tabDetails" aria-controls="tabDetails" role="tab" data-toggle="tab">
Details</a></li>
<li role="presentation">
<a href="#tabWikipedia" aria-controls="tabWikipedia" role="tab" data-toggle="tab">
Wikipedia</a></li>
<li role="presentation">
<a href="#tabNCBI" aria-controls="tabNCBI" role="tab" data-toggle="tab">
Other</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active pane panel panel-default" id="tabDetails">
<!--
Details provided by
<acronym title="Integrated Taxonomic Information System">ITIS</acronym>:
-->
<div id="tsnDetails">
No data to display.
</div>
</div>
<div role="tabpanel" class="tab-pane panel panel-default" id="tabWikipedia">
wiki
</div>
<div role="tabpanel" class="tab-pane panel panel-default" id="tabNCBI">
ncbi
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
Disclaimer
</div>
<div class="panel-body">
<p>
This site accesses data from external sources, namely the
<a href="http://www.itis.gov">Integrated Taxonomic Information System (ITIS)</a> database.
There is no guarantee, that the display is correct, complete, or
permanently available. Please refer to those original sources for
authorative information.
</p>
<p>
Copyright &copy; 2015 Martin Wendt. Created as a demo for
<a href="https://github.com/mar10/fancytree">Fancytree</a>.
</p>
</div>
</div>
</body>
</html>
<!-- Header -->
<h3>
{{#if vernacularName}} {{vernacularName}} {{else}} {{canonicalName}} {{/if}}
{{#if profile.extinct}} <span class="label label-danger">Extinct</span> {{/if}}
<small>{{rank}}</small>
</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#tabDetails" aria-controls="tabDetails" role="tab" data-toggle="tab">
Details
</a>
</li>
<li role="presentation">
<a href="#tabMedia" aria-controls="tabMedia" role="tab" data-toggle="tab">
Media
<span id="mediaCounter" class="badge"></span>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active pane panel panel-default" id="tabDetails">
{{> tmplDetails}}
</div>
<div role="tabpanel" class="tab-pane panel panel-default" id="tabMedia">
{{> tmplMedia}}
</div>
</div>
<hr>
<small>
Accessed via <a href="http://www.gbif.org/dataset/{{datasetKey}}">GBIF Secretariat: GBIF Backbone Taxonomy</a> on {{now}}.<br>
Open <a href="http://www.gbif.org/species/{{key}}"target="_blank">Authorative Information on GBIF</a>.
</small>
<div id="tmplMedia">
{{#if media}}
<div id="carousel-media" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
{{#each media}}
<li data-target="#carousel-media" data-slide-to="{{@index}}"></li>
{{/each}}
</ol>
<div class="carousel-inner" role="listbox">
{{#each media}}
<div class="item {{#if @first}}active{{/if}}">
<img src="{{this.identifier}}" alt="{{this.title}}" />
<div class="carousel-caption">
{{this.title}}
</div>
</div>
{{/each}}
</div>
<a class="left carousel-control" href="#carousel-media" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-media" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{{else}}
No media.
{{/if}}
</div>
\ No newline at end of file
body {
padding: 0 1em;
}
/* Style distinct search result columns */
/*
#searchResultTree th:nth-child(1),
#searchResultTree td:nth-child(1) {
}
*/
/* Style tree container */
#taxonTree {
padding-bottom: 20px;
}
#taxonTree .fancytree-container {
border: 1px solid #ccc;
border-radius: 3px;
max-height: 600px;
overflow: auto;
}
#searchResultTree td > div.truncate {
max-height: 3em;
/*max-width: 100%;*/
overflow: hidden;
text-overflow: ellipsis;
/*white-space: nowrap;*/
/*color: red;*/
}
/* Set to different containers while requests are pending:; */
.busy {
color: gray;
background-image: url("busy_bg_fff.png");
background-repeat: repeat;
}
/* Improve connection lines for bootstrap pane tabs */
div.panel[role=tabpanel] {
border-top-width: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
padding: 3px;
}
/* Fix alignment for bootstrap media list */
.media-left {
display: inline-block;
vertical-align: top;
}
.media-body {
display: inline-block;
}
/* Fix bootstrap media thumbnails */
a.thumbnail {
overflow: hidden;
}
a.thumbnail:hover,
a.thumbnail:active {
text-decoration: none;
}
/* Fix bootstrap media carousel */
div.carousel-inner >.item >img {
max-height: 40em;
/*height: 50em;*/
}
img.media-object {
max-height: 64px;
max-width: 64px;
}
/*!
* Fancytree Taxonomy Browser
*
* Copyright (c) 2015, Martin Wendt (http://wwWendt.de)
*
* Released under the MIT license
* https://github.com/mar10/fancytree/wiki/LicenseInfo
*
* @version @VERSION
* @date @DATE
*/
;(function($, window, document, undefined) {
/*globals console, Handlebars */
"use strict";
/*******************************************************************************
* Private functions and variables
*/
var taxonTree, searchResultTree,
timerMap = {},
tmplDetails, // =
USER_AGENT = "Fancytree Taxonomy Browser/1.0",
ITIS_URL = "http://www.itis.gov/ITISWebService/jsonservice/",
glyphOpts = {
map: {
doc: "glyphicon glyphicon-file",
docOpen: "glyphicon glyphicon-file",
checkbox: "glyphicon glyphicon-unchecked",
checkboxSelected: "glyphicon glyphicon-check",
checkboxUnknown: "glyphicon glyphicon-share",
dragHelper: "glyphicon glyphicon-play",
dropMarker: "glyphicon glyphicon-arrow-right",
error: "glyphicon glyphicon-warning-sign",
expanderClosed: "glyphicon glyphicon-plus-sign",
expanderLazy: "glyphicon glyphicon-plus-sign", // glyphicon-expand
expanderOpen: "glyphicon glyphicon-minus-sign", // glyphicon-collapse-down
folder: "glyphicon glyphicon-folder-close",
folderOpen: "glyphicon glyphicon-folder-open",
loading: "glyphicon glyphicon-refresh glyphicon-spin"
}
};
// Load and compile handlebar templates
$.get( "details.tmpl", function( data ) {
tmplDetails = Handlebars.compile(data);
});
/** Update UI elements according to current status
*/
function updateControls() {
var query = $.trim($("input[name=query]").val());
$("#btnPin")
.attr("disabled", !taxonTree.getActiveNode());
$("#btnUnpin")
.attr("disabled", !taxonTree.isFilterActive())
.toggleClass("btn-success", taxonTree.isFilterActive());
$("#btnResetSearch")
.attr("disabled", query.length === 0);
$("#btnSearch")
.attr("disabled", query.length < 2);
}
/**
* Invoke callback after `ms` miliseconds.
* Any pending action of this type is cancelled before.
*/
function _delay(tag, ms, callback) {
/*jshint -W040:true */
var that = this;
tag = "" + (tag || "default");
if( timerMap[tag] != null ) {
clearTimeout(timerMap[tag]);
delete timerMap[tag];
// console.log("Cancel timer '" + tag + "'");
}
if( ms == null || callback == null ) {
return;
}
// console.log("Start timer '" + tag + "'");
timerMap[tag] = setTimeout(function(){
// console.log("Execute timer '" + tag + "'");
callback.call(that);
}, +ms);
}
/**
*/
function _callItis(cmd, data) {
return $.ajax({
url: ITIS_URL + cmd,
data: $.extend({
jsonp: "itis_data"
}, data),
cache: true,
headers: { "Api-User-Agent": USER_AGENT },
jsonpCallback: "itis_data",
dataType: "jsonp"
});
}
/**
*/
// function countMatches(query) {
// $("#tsnDetails").text("Loading TSN " + tsn + "...");
// _callItis("getAnyMatchCount", {
// srchKey: query
// }).done(function(result){
// console.log("updateTsnDetails", result);
// $("#tsnDetails").html(tmplDetails(result));
// updateControls();
// });
// }
/**
*/
function updateTsnDetails(tsn) {
$("#tsnDetails").addClass("busy");
// $("#tsnDetails").text("Loading TSN " + tsn + "...");
$.bbq.pushState({tsn: tsn});
_callItis("getFullRecordFromTSN", {
tsn: tsn
}).done(function(result){
console.log("updateTsnDetails", result);
$("#tsnDetails")
.html(tmplDetails(result))
.removeClass("busy");
updateControls();
});
}
/**
*/
function updateBreadcrumb(tsn, loadTreeNodes) {
// var $ol = $("ol.breadcrumb").text("...");
var $ol = $("ol.breadcrumb").addClass("busy");
_callItis("getFullHierarchyFromTSN", {
tsn: tsn
}).done(function(result){
console.log("updateBreadcrumb", result);
// Convert to simpler format
var list = [];
// Display as <OL> list (for Bootstrap breadcrumbs)
$ol.empty().removeClass("busy");
$.each(result.hierarchyList, function(i, o){
if( o.parentTsn === tsn ) { return; } // skip direct children
list.push(o.tsn);
if( o.tsn === tsn ) {
$ol.append(
$("<li class='active'>").append(
$("<span>", {
text: o.taxonName,
title: o.rankName
})));
} else {
$ol.append(
$("<li>").append(
$("<a>", {
href: "#tsn=" + o.tsn,
text: o.taxonName,
title: o.rankName
})));
}
});
if( loadTreeNodes ) {
console.log("updateBreadcrumb - loadKeyPath", list);
taxonTree.loadKeyPath("/" + list.join("/"), function(node, status){
// console.log("... updateBreadcrumb - loadKeyPath", status, node);
switch( status ) {
case "loaded":
node.makeVisible();
break;
case "ok":
node.setActive();
break;
}
});
}
});
}
/**
*/
function search(query) {
query = $.trim(query);
console.log("searching for '" + query + "'...");
// NOTE:
// It seems that ITIS searches don't work with jsonp (always return valid
// but empty result sets).
// When debugging, make sure cross domain requests are allowed.
searchResultTree.reload({
url: ITIS_URL + "searchForAnyMatchPaged",
data: {
// jsonp: "itis_data",
srchKey: query,
pageSize: 10,
pageNum: 1,
ascend: false
},
cache: true
// jsonpCallback: "itis_data",
// dataType: "jsonp"
}).done(function(result){
// console.log("search returned", result);
// result.anyMatchList
updateControls();
});
}
/*******************************************************************************
* Pageload Handler
*/
$(function(){
$("#taxonTree").fancytree({
extensions: ["filter", "glyph", "wide"],
filter: {
mode: "hide"
},
glyph: glyphOpts,
activeVisible: true,
source: {
// We could use getKingdomNames, but that returns an individual JSON format.
// getHierarchyDownFromTSN?tsn=0 seems to work as well and allows
// unified parsing in postProcess.
// url: ITIS_URL + "getKingdomNames",
url: ITIS_URL + "getHierarchyDownFromTSN",
data: {
jsonp: "itis_data",
tsn: "0"
},
cache: true,
jsonpCallback: "itis_data",
dataType: "jsonp"
},
init: function(event, data) {
updateControls();
$(window).trigger("hashchange"); // trigger on initial page load
},
lazyLoad: function(event, data) {
data.result = {
url: ITIS_URL + "getHierarchyDownFromTSN",
data: {
jsonp: "itis_data",
tsn: data.node.key
},
cache: true,
jsonpCallback: "itis_data",
dataType: "jsonp"
};
},
postProcess: function(event, data) {
var response = data.response;
data.node.info(response);
data.result = $.map(response.hierarchyList, function(o){
return o && {title: o.taxonName, key: o.tsn, folder: true, lazy: true};
});
},
activate: function(event, data) {
$("#tsnDetails").addClass("busy"); //text("...");
updateControls();
_delay("showDetails", 1000, function(){
updateTsnDetails(data.node.key);
updateBreadcrumb(data.node.key);
});
}
});
$("#searchResultTree").fancytree({
extensions: ["table", "wide"],
source: [{title: "No Results."}],
minExpandLevel: 2,
icon: false,
table: {
nodeColumnIdx: 1
},
postProcess: function(event, data) {
var response = data.response;
data.node.info("pp", response);
data.result = $.map(response.anyMatchList, function(o){
if( !o ) { return; }
var res = { title: o.sciName, key: o.tsn, author: o.author,
matchType: o.matchType };
res.commonNames = $.map(o.commonNameList.commonNames, function(o){
return o && o.commonName ? {name: o.commonName, language: o.language} : undefined;
});
return res;
});
// console.log("pp2", data.result)
},
renderColumns: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td"),
cnList = node.data.commonNames ? $.map(node.data.commonNames, function(o){
return o.name;
}) : [];
$tdList.eq(0).text(node.key);
$tdList.eq(2).text(cnList.join(", "));
$tdList.eq(3).text(node.data.matchType);
$tdList.eq(4).text(node.data.author);
},
activate: function(event, data) {
_delay("activateNode", 1000, function(){
updateTsnDetails(data.node.key);
updateBreadcrumb(data.node.key);
});
}
});
taxonTree = $("#taxonTree").fancytree("getTree");
searchResultTree = $.ui.fancytree.getTree("#searchResultTree");
// Bind a callback that executes when document.location.hash changes.
// (This code uses bbq: https://github.com/cowboy/jquery-bbq)
$(window).bind( "hashchange", function(e) {
var tsn = $.bbq.getState( "tsn" );
console.log("bbq tsn", tsn);
if( tsn ) {
updateBreadcrumb(tsn, true);
}
}); // don't trigger now, since we need the the taxonTree root nodes to be loaded first
$("input[name=query]").keyup(function(e){
var query = $.trim($(this).val());
if(e && e.which === $.ui.keyCode.ESCAPE || query === ""){
$("#btnResetSearch").click();
return;
}
if(e && e.which === $.ui.keyCode.ENTER && query.length >= 2){
$("#btnSearch").click();
return;
}
$("#btnResetSearch").attr("disabled", query.length === 0);
$("#btnSearch").attr("disabled", query.length < 2);
}).focus();
$("#btnResetSearch").click(function(e){
$("#searchResultPane").collapse("hide");
$("input[name=query]").val("");
searchResultTree.clear();
// $("#btnSearch").attr("disabled", true);
// $(this).attr("disabled", true);
updateControls();
});
$("#btnSearch").click(function(event){
$("#searchResultPane").collapse("show");
search( $("input[name=query]").val() );
}).attr("disabled", true);
$("#btnPin").click(function(event){
taxonTree.filterBranches(function(n){
return n.isActive();
});
updateControls();
});
$("#btnUnpin").click(function(event){
taxonTree.clearFilter();
updateControls();
});
// -----------------------------------------------------------------------------
}); // end of pageload handler
}(jQuery, window, document));
/*!
* Fancytree Taxonomy Browser
*
* Copyright (c) 2015, Martin Wendt (http://wwWendt.de)
*
* Released under the MIT license
* https://github.com/mar10/fancytree/wiki/LicenseInfo
*
* @version @VERSION
* @date @DATE
*/
;(function($, window, document, undefined) {
/*globals console, Handlebars */
"use strict";
/*******************************************************************************
* Private functions and variables
*/
var taxonTree, searchResultTree, tmplDetails, tmplInfoPane, tmplMedia,
timerMap = {},
USER_AGENT = "Fancytree Taxonomy Browser/1.0",
GBIF_URL = "http://api.gbif.org/v1/",
TAXONOMY_KEY = "d7dddbf4-2cf0-4f39-9b2a-bb099caae36c", // GBIF backbone taxonomy
SEARCH_PAGE_SIZE = 5,
CHILD_NODE_PAGE_SIZE = 200,
glyphOpts = {
map: {
doc: "glyphicon glyphicon-file",
docOpen: "glyphicon glyphicon-file",
checkbox: "glyphicon glyphicon-unchecked",
checkboxSelected: "glyphicon glyphicon-check",
checkboxUnknown: "glyphicon glyphicon-share",
dragHelper: "glyphicon glyphicon-play",
dropMarker: "glyphicon glyphicon-arrow-right",
error: "glyphicon glyphicon-warning-sign",
expanderClosed: "glyphicon glyphicon-menu-right",
expanderLazy: "glyphicon glyphicon-menu-right", // glyphicon-plus-sign
expanderOpen: "glyphicon glyphicon-menu-down", // glyphicon-collapse-down
folder: "glyphicon glyphicon-folder-close",
folderOpen: "glyphicon glyphicon-folder-open",
loading: "glyphicon glyphicon-refresh glyphicon-spin"
}
};
// Load and compile handlebar templates
$.get( "details.tmpl.html", function( data ) {
tmplDetails = Handlebars.compile(data);
Handlebars.registerPartial("tmplDetails", tmplDetails);
});
$.get( "media.tmpl.html", function( data ) {
tmplMedia = Handlebars.compile(data);
Handlebars.registerPartial("tmplMedia", tmplMedia);
});
$.get( "info-pane.tmpl.html", function( data ) {
tmplInfoPane = Handlebars.compile(data);
});
/** Update UI elements according to current status
*/
function updateControls() {
var query = $.trim($("input[name=query]").val());
$("#btnPin")
.attr("disabled", !taxonTree.getActiveNode());
$("#btnUnpin")
.attr("disabled", !taxonTree.isFilterActive())
.toggleClass("btn-success", taxonTree.isFilterActive());
$("#btnResetSearch")
.attr("disabled", query.length === 0);
$("#btnSearch")
.attr("disabled", query.length < 2);
}
/**
* Invoke callback after `ms` miliseconds.
* Any pending action of this type is cancelled before.
*/
function _delay(tag, ms, callback) {
/*jshint -W040:true */
var that = this;
tag = "" + (tag || "default");
if( timerMap[tag] != null ) {
clearTimeout(timerMap[tag]);
delete timerMap[tag];
// console.log("Cancel timer '" + tag + "'");
}
if( ms == null || callback == null ) {
return;
}
// console.log("Start timer '" + tag + "'");
timerMap[tag] = setTimeout(function(){
// console.log("Execute timer '" + tag + "'");
callback.call(that);
}, +ms);
}
/**
*/
function _callWebservice(cmd, data) {
return $.ajax({
url: GBIF_URL + cmd,
data: $.extend({
}, data),
cache: true,
headers: { "Api-User-Agent": USER_AGENT },
dataType: "jsonp"
});
}
/**
*/
function updateItemDetails(key) {
$("#tmplDetails").addClass("busy");
$.bbq.pushState({key: key});
$.when(
_callWebservice("species/" + key),
_callWebservice("species/" + key + "/speciesProfiles"),
_callWebservice("species/" + key + "/synonyms"),
_callWebservice("species/" + key + "/descriptions"),
_callWebservice("species/" + key + "/media")
).done(function(species, profiles, synonyms, descriptions, media){
// Requests are resolved as: [ data, statusText, jqXHR ]
species = species[0];
profiles = profiles[0];
synonyms = synonyms[0];
descriptions = descriptions[0];
media = media[0];
var info = $.extend(species, {
profileList: profiles.results, // marine, extinct
profile: profiles.results.length === 1 ? profiles.results[0] : null, // marine, extinct
synonyms: synonyms.results,
descriptions: descriptions.results,
descriptionsByLang: {},
media: media.results,
now: new Date().toString()
});
$.each(info.descriptions, function(i, o){
if( !info.descriptionsByLang[o.language] ) {
info.descriptionsByLang[o.language] = [];
}
info.descriptionsByLang[o.language].push(o);
});
console.log("updateItemDetails", info);
$("#tmplDetails")
// .html(tmplDetails(info))
.removeClass("busy");
$("#tmplMedia")
// .html(tmplMedia(info))
.removeClass("busy");
$("#tmplInfoPane")
.html(tmplInfoPane(info))
.removeClass("busy");
$("[data-toggle='popover']").popover();
$(".carousel").carousel();
$("#mediaCounter").text("" + (media.results.length || ""));
// $("[data-toggle='collapse']").collapse();
updateControls();
});
}
/**
*/
function updateBreadcrumb(key, loadTreeNodes) {
var $ol = $("ol.breadcrumb").addClass("busy"),
activeNode = taxonTree.getActiveNode();
if( activeNode && activeNode.key !== key ) {
activeNode.setActive(false); // deactivate, in case the new key is not found
}
$.when(
_callWebservice("species/" + key + "/parents"),
_callWebservice("species/" + key)
).done(function(parents, node){
// Both requests resolved (result format: [ data, statusText, jqXHR ])
var nodeList = parents[0],
keyList = [];
nodeList.push(node[0]);
// Display as <OL> list (for Bootstrap breadcrumbs)
$ol.empty().removeClass("busy");
$.each(nodeList, function(i, o){
var name = o.vernacularName || o.canonicalName;
keyList.push(o.key);
if( "" + o.key === "" + key ) {
$ol.append(
$("<li class='active'>").append(
$("<span>", {
text: name,
title: o.rank
})));
} else {
$ol.append(
$("<li>").append(
$("<a>", {
href: "#key=" + o.key,
text: name,
title: o.rank
})));
}
});
if( loadTreeNodes ) {
// console.log("updateBreadcrumb - loadKeyPath", keyList);
taxonTree.loadKeyPath("/" + keyList.join("/"), function(node, status){
// console.log("... updateBreadcrumb - loadKeyPath " + node.title + ": " + status);
switch( status ) {
case "loaded":
node.makeVisible();
break;
case "ok":
node.setActive();
// node.makeVisible();
break;
}
});
}
});
}
/**
*/
function search(query) {
query = $.trim(query);
console.log("searching for '" + query + "'...");
// Store the source options for optional paging
searchResultTree.lastSourceOpts = {
// url: GBIF_URL + "species/match", // Fuzzy matches scientific names against the GBIF Backbone Taxonomy
url: GBIF_URL + "species/search", // Full text search of name usages covering the scientific and vernacular name, the species description, distribution and the entire classification across all name usages of all or some checklists
data: {
q: query,
datasetKey: TAXONOMY_KEY,
// name: query,
// strict: "true",
// hl: true,
limit: SEARCH_PAGE_SIZE,
offset: 0
},
cache: true
// headers: { "Api-User-Agent": USER_AGENT }
// dataType: "jsonp"
};
$("#searchResultTree").addClass("busy");
searchResultTree.reload(searchResultTree.lastSourceOpts).done(function(result){
// console.log("search returned", result);
if( result.length < 1) {
searchResultTree.getRootNode().setStatus("nodata");
}
$("#searchResultTree").removeClass("busy");
// https://github.com/tbasse/jquery-truncate
// SLOW!
// $("div.truncate").truncate({
// multiline: true
// });
updateControls();
});
}
/*******************************************************************************
* Pageload Handler
*/
$(function(){
$("#taxonTree").fancytree({
extensions: ["filter", "glyph", "wide"],
filter: {
mode: "hide"
},
glyph: glyphOpts,
autoCollapse: true,
activeVisible: true,
autoScroll: true,
source: {
url: GBIF_URL + "species/root/" + TAXONOMY_KEY,
data: {},
cache: true
// dataType: "jsonp"
},
init: function(event, data) {
updateControls();
$(window).trigger("hashchange"); // trigger on initial page load
},
lazyLoad: function(event, data) {
data.result = {
url: GBIF_URL + "species/" + data.node.key + "/children",
data: {
limit: CHILD_NODE_PAGE_SIZE
},
cache: true
// dataType: "jsonp"
};
// store this request options for later paging
data.node.lastSourceOpts = data.result;
},
postProcess: function(event, data) {
var response = data.response;
data.node.info("taxonTree postProcess", response);
data.result = $.map(response.results, function(o){
return o && {title: o.vernacularName || o.canonicalName, key: o.key, nubKey: o.nubKey, folder: true, lazy: true};
});
if( response.endOfRecords === false ) {
// Allow paging
data.result.push({
title: "(more)",
statusNodeType: "paging"
});
} else {
// No need to store the extra data
delete data.node.lastSourceOpts;
}
},
activate: function(event, data) {
$("#tmplDetails").addClass("busy");
$("ol.breadcrumb").addClass("busy");
updateControls();
_delay("showDetails", 500, function(){
updateItemDetails(data.node.key);
updateBreadcrumb(data.node.key);
});
},
clickPaging: function(event, data) {
// Load the next page of results
var source = $.extend(true, {}, data.node.parent.lastSourceOpts);
source.data.offset = data.node.parent.countChildren() - 1;
data.node.replaceWith(source);
}
});
$("#searchResultTree").fancytree({
extensions: ["table", "wide"],
source: [{title: "No Results."}],
minExpandLevel: 2,
icon: false,
table: {
nodeColumnIdx: 2
},
postProcess: function(event, data) {
var response = data.response;
data.node.info("search postProcess", response);
data.result = $.map(response.results, function(o){
var res = $.extend({
title: o.scientificName,
key: o.key
}, o);
return res;
});
// Append paging link
if( response.count != null && response.offset + response.limit < response.count ) {
data.result.push({
title: "(" + (response.count - response.offset - response.limit) + " more)",
statusNodeType: "paging"
});
}
data.node.info("search postProcess 2", data.result);
},
// loadChildren: function(event, data) {
// $("#searchResultTree td div.cell").truncate({
// multiline: true
// });
// },
renderColumns: function(event, data) {
var i,
node = data.node,
$tdList = $(node.tr).find(">td"),
cnList = node.data.vernacularNames ? $.map(node.data.vernacularNames, function(o){
return o.vernacularName;
}) : [];
i = 0;
function _setCell($cell, text){
$("<div class='truncate'>").attr("title", text).text(text).appendTo($cell);
}
$tdList.eq(i++).text(node.key);
$tdList.eq(i++).text(node.data.rank);
i++; // #1: node.title = scientificName
// $tdList.eq(i++).text(cnList.join(", "));
_setCell($tdList.eq(i++), cnList.join(", "));
$tdList.eq(i++).text(node.data.canonicalName);
// $tdList.eq(i++).text(node.data.accordingTo);
_setCell($tdList.eq(i++), node.data.accordingTo);
$tdList.eq(i++).text(node.data.taxonomicStatus);
$tdList.eq(i++).text(node.data.nameType);
$tdList.eq(i++).text(node.data.numOccurrences);
$tdList.eq(i++).text(node.data.numDescendants);
// $tdList.eq(i++).text(node.data.authorship);
_setCell($tdList.eq(i++), node.data.authorship);
// $tdList.eq(i++).text(node.data.publishedIn);
_setCell($tdList.eq(i++), node.data.publishedIn);
},
activate: function(event, data) {
if( data.node.isStatusNode() ) { return; }
_delay("activateNode", 500, function(){
updateItemDetails(data.node.key);
updateBreadcrumb(data.node.key);
});
},
clickPaging: function(event, data) {
// Load the next page of results
var source = $.extend(true, {}, searchResultTree.lastSourceOpts);
source.data.offset = data.node.parent.countChildren() - 1;
data.node.replaceWith(source);
}
});
taxonTree = $("#taxonTree").fancytree("getTree");
searchResultTree = $.ui.fancytree.getTree("#searchResultTree");
// Bind a callback that executes when document.location.hash changes.
// (This code uses bbq: https://github.com/cowboy/jquery-bbq)
$(window).bind( "hashchange", function(e) {
var key = $.bbq.getState( "key" );
console.log("bbq key", key);
if( key ) {
updateBreadcrumb(key, true);
}
}); // don't trigger now, since we need the the taxonTree root nodes to be loaded first
$("input[name=query]").keyup(function(e){
var query = $.trim($(this).val()),
lastQuery = $(this).data("lastQuery");
if(e && e.which === $.ui.keyCode.ESCAPE || query === ""){
$("#btnResetSearch").click();
return;
}
if(e && e.which === $.ui.keyCode.ENTER && query.length >= 2){
$("#btnSearch").click();
return;
}
if( query === lastQuery || query.length < 2) {
console.log("Ignored query '" + query + "'");
return;
}
$(this).data("lastQuery", query);
_delay("search", 1, function(){
$("#btnSearch").click();
});
$("#btnResetSearch").attr("disabled", query.length === 0);
$("#btnSearch").attr("disabled", query.length < 2);
}).focus();
$("#btnResetSearch").click(function(e){
$("#searchResultPane").collapse("hide");
$("input[name=query]").val("");
searchResultTree.clear();
updateControls();
});
$("#btnSearch").click(function(event){
$("#searchResultPane").collapse("show");
search( $("input[name=query]").val() );
}).attr("disabled", true);
$("#btnPin").click(function(event){
taxonTree.filterBranches(function(n){
return n.isActive();
});
updateControls();
});
$("#btnUnpin").click(function(event){
taxonTree.clearFilter();
updateControls();
});
// -----------------------------------------------------------------------------
}); // end of pageload handler
}(jQuery, window, document));