Navigation

Tree

Options

Name Example Default Comment
node {kind: 101, id: 1234} - kind specifies the type of celum container (101 = folder, 102 = object collection 103 = keyword), id the celum ID of the object, or an array of celum IDs to construct a virtual root node, e.g. {kind: 103, id: [10909, 12246]} (in this case you probably want to set _showroot to true as well)
locale 'de' - Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
show 4123 - Activate the node show immediately after initialization (celum-id) or "first"/"last" to select the first/last leaf in the tree.
anchor true false Show the id of the activated node as an #anchor in the URL. Enables users to link/bookmark a specific node directly. Overrides the show parameter if an anchor is found on load.
asset_count true false display how many assets are in this container (slow in 1.x! use on small trees or in combination with lazy loading) - since 1.6
show_root true false display the root node you requested as well - probably only useful for virtual root nodes
show_tags true false show node icons (e.g. colored folders) in the tree - since 1.9
depth 2 0 Depth to which the tree should be loaded (lazy loading). Using a depth < 1 loads the entire tree (requires backend version 1.2 or higher)
callback function(server, kind, id) {/*do something*/} - Function defining the action to be triggered when clicking on a node. If no function has been specified the plugin will look for an existing [gallery](../01.frontend ##Gallery) to show the contents of the node
sort function(a, b) {return a.id - b.id;} null custom sorting function - see MDN
hide_empty true false hide nodes that don't contain any assets (implies asset_count) - sice 2.1
noderef true false consider node referencing information field usages as directly assigned assets (like the navigation context in the CELUM UI) - since 2.0
list_style false true show list style icons in the tree - since 2.2
li_expander true false enable folding of the tree (regardless of the current selection) when clicking on the list style icons - since 2.3

Notes:

  • The node.id parameter supports arrays, i.e. you can construct a virtual node (to aggregate multiple nodes from different locations) by using {kind: ..., id: [1, 2, 3]}. Set to -1 to get all root nodes (enforces show_root=true; since 1.7).
  • Also available 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

Box Model

<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

Name Example Default Comment
locale 'de' -
widgets [{name: 'text', scope: $('#navigation')}] - Which search components to show and in what order. See widget options.
folder 42 - Restrict search to this folder - widget.scope overrides this if enabled
keyword 7 - Restrict search to this keyword - widget.scope or keywords override this if enabled
custom &search_infofield=628,1 - Arbitrary arguments sent along with the request
resettable false true Adds a reset search link to the bottom
show_empty true false Whether to tell the attached view about the lack of search results (otherwise just show a message in search, 1.x only)
extended true false Request extended asset properties (size, modified) etc. - has no effect other than that you could use them for sorting
Widget Options
{name: 'text', scope: null}, // scope needs an anuraTree of folders or keywords, e.g. $('#navigation')
{name: 'type', style: optional string}, // document type (images, documents, audio, video, others), style: checkbox/dropdown/select 
{name: 'keywords', root: keyword id, multiple: bool, show: optional keyword id} // requires jquery.anura.tree 
{name: 'keyword_filter', ids: [x, y, z], depth: 2, multiple: bool, join_string: ', '} // keywords as dropdowns (jquery.chosen.js recommended) 
{name: 'infofield', id: infofield id, style: optional string} // style: dropdown/select/checkbox/radio/tree (availability depends on infofield type)
  • 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"}
  • tree-containing widgets (keyword, noderef infofield) support a tree_settings-parameter where you can specify additional anuraTree-options that will be applied to the inner tree.

Events

  • anura-init (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

Box model

<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])

Name Example Default Comment
tree myTree null the anuraTree to listen on (from the $.anuraTree call)
callback function(server, kind, id, name) {...} null called when a node/leaf is clicked

Events

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

Box model

<ul class="anura-breadcrumbs-container">
   <li class="anura-breadcrumb level-0"><a>World</a></li>
   <li class="anura-breadcrumb level-1"><a>Europe</a></li>
   <li class="anura-breadcrumb level-2"><a>Switzerland</a></li>
</ul>