[MINITOC] ## 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: only when node.id = -1, 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](#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](/anura/frontend/mainview)). 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](/anura/frontend/mainview#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](#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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Parameters) ##### 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: ```js 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: ```js var mainView = $('#your-main-view').anuraGallery({...}); 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 useful 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 ```html
``` ## Search #### 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. ##### callback > type: function, required: probably, default: auto-detect a gallery What to do with the assembled search request, most likely to tell a main view to load that content. ```js var main = $('#main').anuraGallery(/*...*/); var search = $('#search').anuraSearch({/*...*/, callback: function (server, search_query) { main.anuraGallery({server: server, search: {custom: search_query}, locale: lang}); } }); ``` ##### widgets > type: array of objects, required: yes, default: text and filetype What search widgets to offer to the user. **General options**: * *title*, String or map like `{de: 'German Title', en: 'English Title'}` to override the widget's default title * *autosubmit (boolean)*, whether to immediately trigger a search when the widget's value changes * *container_class (String)*, override the global container_class setting for this specific widget > > > > > > load [chosen.js](https://harvesthq.github.io/chosen) for pretty dropdowns, it's supported out-of-the-box **Available widgets**: ###### **text** ```js {name: 'text'} ``` * *scope (optional)*, consumes a reference to an external anuraTree (preferably use an internal `tree` widget instead) * *checked (boolean)*, boolean, state of the checkbox toggling the limitation to said tree * *button (optional boolean)*, adds an extra 🔍-button next to the input field to trigger a search (instead of just listening for _enter_) * *resettable (optional boolean)*, adds an extra X-button to delete the content of the input field ###### **filetype** ```js {name: 'filetype', style: 'checkbox'} ``` * *style (`checkbox` (default), `radio`, `select`, `dropdown`)*, how to present the input for the file types ###### **assettype** ```js {name: 'assettype', style: 'checkbox'} ``` * *style (`checkbox` (default), `radio`, `select`, `dropdown`)*, how to present the input for the asset types ###### **properties** ```js {name: 'properties', uploaded: true, modified: true, size: false} ``` * Query fields for additional properties, currently booleans for `uploaded`, `modified` and `size` ###### **tree (or keywords)** ```js {name: 'tree', root: 1337} ``` * *root (**required** long)*, the root node of the tree you want to show - requires [anuraTree](#tree) * *kind (optional long)*, the node type ID, only necessary then using `root: -1` * *collapsible (optional boolean)*, whether the widget is collapsible * *collapsed (optional boolean)*, whether it's initially collapsed * *unselectable (optional boolean)*, whether a selected node can be un-selected again (pass `false` to suppress) * *tree_settings (optional object)*, any additional tree settings offered by [anuraTree](#tree) ###### **infofield** ```js {name: 'infofield', id: 123} ``` * *id (**required** long*), the ID of the information field you want to show * *style*, how to display the input - availability depends on the type of the infofield * **Checkbox** and **Dropdown** support `checkbox`, `radio`, `select ` and `dropdown` * **NodeRefs** support `checkbox`, `radio`, `select`, `dropdown`, `tree` and `text` * additional widget option: `root_node` (long) to set a different root node than the NodeRef's (needs to be a sub-node of that) * additional widget options when using `tree`: `recursive_toggle` (`recursive` for default), `unselectable` and `tree_settings` (see [tree](#tree) above) * additional widget options when using `dropdown` or `select`: `depth` (int) how many levels to load, `sort` ('asc', 'desc', or function) to sort the values, `indent` (String) how to indent the levels inside the dropdown (default is ' ') * **Numbers** and **Date** use their respective inputs, but support the style `range` for "from-to" searches * additional widget option: `placeholder` to set a placeholder text * **Text** always uses a text input * additional widget options: `placeholder` to set a placeholder text, `datalist` (boolean) to suppress [facet](#facets) auto-complete * *collapsible (optional boolean)*, whether the widget is collapsible * *collapsed (optional boolean)*, whether it's initially collapsed * *default (optional)*, the default selection of this widget, type depends on the type of the infofield > > > > > > when configuring a bunch of infofields, make use of `$.extend` to not repeat identical setting ```js var info_template = {name: 'infofield', autosubmit: true, collapsible: false, style: 'select'}; var search = $('#anura-search').anuraSearch({ /*...*/, widgets: [ {name: 'text'}, $.extend({}, info_template, {id: 102}), // brand $.extend({}, info_template, {id: 116, root_node: 10909}), // product $.extend({}, info_template, {id: 114}), // model year $.extend({}, info_template, {id: 128}), // perspective $.extend({}, info_template, {id: 108, style: 'radio'}), // copyright ] } ``` ###### **submit** ```js {name: 'submit', show: true, resettable: false} ``` * *show (boolean)*, whether to show an explicit "search" button (pass `false` when using `autosubmit`) * *resettable (boolean)*, whether to add a _reset_ link to the bottom of the search widgets so reset them to a "blank" search. ##### 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) ##### custom > type: String, required: no, default: '' Add additional search restrictions (using the [API syntax](/anura/api#search)) that are not visible to the user, e.g. `search_node=123` ##### container_class > type: String, required: no, default: '' An additional class to add to each widget container (may be overridden by the widget's settings) ##### button_class > type: String, required: no, default: '' An additional class to add to buttons, e.g. `btn btn-default` when using bootstrap ##### initial_search > type: boolean, required: no, default: true Triggers an "empty" search when anuraSearch is done loading to show "all" assets in the attached main view (in which case ) ##### fallback_search > type: String, required: no, default: null What to search for when no search was entered by the user (initially or after reset) - leave blank to search for everything ##### facets > Type: boolean, required: no, default: false Request faceted response when searching (needs [anuraSolr](/anura/backend/faceted-search) to be set up). This hides irrelevant values from all search filters ##### facet_count > Type: boolean, required: no, default: true When using `facets`, also display now many results each value would provide if it were selected #### Examples ##### NodeRef-Infofield with style=tree and collapsible ![search-tree-collapse](search-tree-collapse.gif) ##### NodeRef-Infofields with style=select and chosen ![search-select-multi](search-select-multi.gif) ##### NodeRef-Infofield with style=text ![search-typeahead](search-typeahead.gif) #### 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-facet-update (facet-data) - triggered when the faceted search receives new data * anura-reset (options) - triggered when the user clicks on the "reset search" button #### Triggers * reset(boolean doSearch) - resets the search form, optionally also performs an "empty" search, _since 2.9_ * set-search-text(String term) - sets the full text search to _term_ and triggers a search, _since 2.9_ #### DOM ```html
Type
Keywords
Usage rights
Clear
``` ## 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) | | multiMode | ```'global'``` | 'local' | when to switch to multi-mode (tags instead of hierarchy),
one of: "local" (per tree), "global" (over all trees) or "always" | | 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 #### DOM Classic: ```html ``` Multi-Mode: ```html ```