Navigation

Tree

Options

server

type: URL, required: yes, default: -

The endpoint to use, e.g. http://your.celum.server/anura/first

locale

type: String, required: no, default: CELUM's default language

The locale (ISO 639-1) to use, i.e. en. The availability of these depend on your CELUM configuration, usually en, de or fr. When left empty, CELUM's default language will be used.

node

type: Object, required: yes, default: {kind: 101, id: 0}

The root node of your tree, i.e. {kind: 103, id: 1337}. Note that since CELUM 5, the kind-parameter is no longer required unless you set the ID to -1.

node.kind

type: long, required: seldom, default: 101

The NodeTypeId of the desired node. Traditionally folder = 101, collection = 102 and keywords = 103, but check your tabconfiguration.xml to be sure. Since CELUM 5 this is only required when you set the node.id to -1.

node.id

type: long or array of longs, required: if node is specified, default: 0

The NodeId of the root node(s). Also supports arrays, i.e. you can construct a "virtual root node" (to aggregate multiple nodes from different locations) by using {kind: ..., id: [1, 2, 3]}. Can also be set to -1 to get all root nodes as long as a kind is provided (enforces show_root=true; since 1.7).

show_root

type: boolean, required: no, default: false

Also show the root node(s) themselves (usually only the child nodes are shown). Probably only useful for virtual root nodes.

show

type: mixed, required: no, default: false

What to show after the tree has been loaded (triggers an attached main view). One of:

• 'first' or true - show the first leaf node in the tree
• 'last' - show the last leaf node in the tree
• 4123 - an arbitrary ID of a node in the tree

depth

type: int, required no, default: 0

Depth to which the tree should be loaded (lazy loading). A depth smaller than one loads the entire tree.

state

type: String, required: no, default: ''

Prefix for the state fragment in the URL (only needed for multi-instance). Set to false to completely disable state (deep linking through updating the URL fragment)

asset_count

type: boolean, required: no, default: false

If the number of assets in each node should be shown. Has some persormance implications for large trees, as every subnode has to be queried individually. Note that if you're using noderef in your main view, you need to also configure noderef: true here for consistent results.

hide_empty

type: boolean, required: no, default: false

Whether to hide nodes that have an asset_count of 0. Setting this to true automatically sets asset_count: true.

sort

type: function or String, required: no, default: null

How the tree should be sorted (per level). Can be either one of id_asc, name_asc, info_asc (or ..._desc) of a custom comparison function, see MDN

callback

type: function, required: I'd recommend it, default: see below

What should happen when a user clicks on a node in the tree. By default it tries to find the next best gallery component:

callback: function(server, kind, id, name) {
    $('.anura-gallery-container').first().parent().anuraGallery({server: server, assets: null, node: {kind: kind, id: id}});
}

If you don't use the gallery or want to be more efficient about it, your code will look something like:

var mainView = $('#your-main-view').anuraMasonry({...});
var tree = $('#your-tree').anuraTree({
    /*... other settings ... */
    callback: function(server, kind, id, name) {
        mainView.anuraMasonry({server: server, assets: null, node: {kind: kind, id: id}});
    }
});

list_style

type: boolean, required: no, default: true

Whether to show the node state (● has subnodes, ○ has no subnodes, ■ lazy loaded) through list styles (since 2.2)

li_expander

type: boolean, required: no, default: false

Enable folding of the tree (regardless of the current selection) when clicking on the list style icons since 2.3

a_href_attr

type: String, required: no, default: null

Adds a custom href attribute to each item in the tree. This is an alternative to the callback, but it's not compatible with the _state_option. since 2.6

multiselect

type: boolean, required: no, default: false

Enables multi-select on the tree (through CTRL). This is probably only usefull then used inside anuraSearch. since 2.7

Notes

• anuraTree can also be used as a horizontal navigation bar (with folding). Simply use jquery.anura.navbar.css instead of jquery.anura.tree.css (suitable for trees up to a depth of 3)
• Do not initialize the tree before the gallery component when using the show parameter or the URL-state, as this may lead to a race condition

Events

• anura-loaded (options, data) - triggered when the plugin has loaded all nodes
• anura-clicked (server, kind, id, name) - triggered when a user clicks on a node/leaf
• anura-reset - triggered when reset via anuraSearch

DOM

<div class="anura-tree-container">
   <ul>
      <li class="anura-node anura-active">
         <a><span class="anura-node-name">Parent Node</span></a>
         <ul class="anura-tree-unfolded">
            <li class="anura-node">
               <a><span class="anura-node-name">Child Node</span></a>
               <ul class="anura-tree-folded">
                  <li><!--etc--></li>
               </ul>
            </li>
            <li class="anura-leaf">
               <a><span class="anura-node-name">Child Leaf</span></a>
            </li>
         </ul>
      </li>
      <li class="anura-node"><!--etc--></li>
      <li class="anura-leaf"><!--etc--></li>
      <!--etc-->
   </ul>
</div>

Search

Options

requires backend version 1.5 or higher

Widget Options

{name: 'text', scope: null, resettable: false}, // scope needs an anuraTree of folders or keywords, e.g. $('#navigation'); resettable adds an 'x' to clear the text
{name: 'filetype', style: optional string}, // document type (images, documents, audio, video, others), style: checkbox/dropdown/select
{name: 'assettype', style: optional string}, // asset type (as defined by your infofields.xml), style: checkbox/dropdown/select 
{name: 'keywords', root: keyword id, multiple: bool, show: optional keyword id} // requires jquery.anura.tree (works for any node type in 2.0+)
{name: 'infofield', id: infofield id, style: optional string} // style: dropdown/select/checkbox/radio/tree (availability depends on infofield type)
{name: 'submit', show: true, resettable: true}

• autosubmit is available on all widgets, set this to true in order to trigger the search immediately (instead of waiting for the "search"-button to be clicked)
• title may be specified on every widget in order to override the default, either title: "Foo" or title: {de: "Foo", en: "Bar"}
• _containerclass to override the global _containerclass-setting on this widget
• tree-containing widgets (keyword, noderef infofield) support a _treesettings-parameter where you can specify additional anuraTree-options that will be applied to the inner tree.
• node-referencing infofields can enable and_mode: true to search with AND within the same field (instead of the default OR), and recursive: false to disable node recursion (i.e. only accept this exact node). The dropdown-variants also support sort (false, 'asc' (default), 'desc' or a custom sort function).

If you include chosen, all dropdown and multi-select fields will automatically use it.

Notes:

• The default callback tries to find the next best gallery: $('.anura-gallery-container').first().parent().anuraGallery({server: server, search: {custom: search_query}});

Examples

NodeRef-Infofield with style=tree and collapsible

NodeRef-Infofields with style=select and chosen

NodeRef-Infofield with style=text

Events

• anura-init-search (options) - triggered after the plugin is done loading the user interface
• anura-init-infofield-id (options) - triggered after an informationfield widget is done loading (independent of anura-init)
• anura-loaded (options, assets) - triggered after a search has been executed
• anura-reset (options) - triggered when the user clicks on the "reset search" button

DOM

<div class="anura-search-container anura-locale-en">
   <input type="text" class="anura-search-text">
   <fieldset class="anura-search-type">
      <legend>Type</legend>
      <input type="checkbox"><label>Images</label><br>
      <input type="checkbox"><label><!--etc--></label>
   </fieldset>
   <fieldset class="anura-search-keywords">
      <legend>Keywords</legend>
      <div class="anura-search-keyword-tree">
         <!-- anura-tree-container -->
      </div>
   </fieldset>
   <fieldset class="anura-search-infofield">
      <legend>Usage rights</legend>
      <input type="radio"><label>freely available</label><br>
      <input type="radio"><!--etc--></label>
   </fieldset>
   <input type="button" value="Search" class="anura-search-button">
   <a class="anura-search-reset">Clear</a>
</div>

Breadcrumbs

Options

Provides breadcrumbs based on an anuraTree's selection (e.g. [Earth > Europe > Switzerland])

Events

• anura-clicked (server, kind, id, name) - triggered when a user clicks on a breadcrumb link

DOM

Classic:

<ul class="anura-breadcrumbs-container">
   <li class="anura-breadcrumb anura-breadcrumb-levels anura-breadcrumb-level-0"><a data-id="3">World</a></li>
   <li class="anura-breadcrumb anura-breadcrumb-levels anura-breadcrumb-level-1"><a data-id="32">Europe</a></li>
   <li class="anura-breadcrumb anura-breadcrumb-levels anura-breadcrumb-level-2"><a data-id="42">Switzerland</a></li>
</ul>

Multi-Mode:

<ul class="anura-breadcrumbs-container">
   <li class="anura-breadcrumb anura-breadcrumb-multi"><a data-id="42">Switzerland</a></li>
   <li class="anura-breadcrumb anura-breadcrumb-multi"><a data-id="1337">Cheese</a></li>
   <li class="anura-breadcrumb anura-breadcrumb-multi"><a data-id="4123">AOC</a></li>
</ul>

© brix cross media