Miscellaneous

For the most up-to-date documentation, please visit docs.brix.ch

Details

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.

asset

type: long, required: yes

The ID of the asset you wish to see the details of.

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.

show

type: List of String , required: no, default: ['general','infofields','pages','downloads','links']

What sections to show, and in what order. Any of:

  • general - general information about the asset, such as name, type and size (unordered)
  • infofields - information fields of the asset (no field-sets, unordered)
  • keywords, keyword_links, keyword_paths, keyword_path_links - DEPRECATED
  • share - add a button to share the current detail view as a deep link
  • downloads - links to all available download formats (and "add to basket" when you configure one)
  • pages - adds a page navigator for documents
  • links - show related assets (through one definable relation type)
  • similar - show similar assets (does a search on the nodes that the current asset is assigned to)
  • metadata - shows a fully configurable mix of the fields that are available in general and infofields (see metadata)
  • versions - shows a list of previous versions of this asset, with the ability to open it in the lightbox or to download it (via downloadFormat)
  • get_reviews - shows a list of all existing asset reviews (requires a review provider)
  • post_reviews - add a component to create new asset reviews (requires a review provider)
  • function (asset_id, metadata, table, options) {} - custom section (.append to the table you get)
alternative_name

type: long, required: no, default: 0

An information field ID to display instead of the asset name in the related assets (links).

send

type: long, required: no, default: false

The download format ID to use in the "Send hyperlink" link or false to disable that feature.

split

type: boolean, required: no, default: false

Whether to use separate tables for the different sections.

callback

type: function, required: no, default: null

Callback when anuraDetails has finished loading: function(options, data) {...}

download_directly

type: boolean, required: no, default: true

Whether to show the individual download formats as links. Turning this off will only leave the basket.

download_relations

type: boolean, required: no, default: false, since: 2.9

Offers a link to download all related files of an asset (e.g. images used in a layout file) as a ZIP.

show_dlf_description

type: boolean, required: no, default: true

Whether to show the description of the download formats on an extra line instead of just as a tooltip.

icon_transform

type: boolean, required: no, default: function(icon) {return icon.replace('/big/', '/small/')}

Transforms the download format icon URLs, useful for dark themes to transform light into dark.

paginator_target

type: Object, required: no, default: '#cboxContent .cboxPhoto'

Where to update th page previews pages is enabled.

paginator_nav

type: Object, required: no, default: {prev: '←', next: '→'}

Customize the buttons used on the pages paginator, e.g. {prev: '<', next: '>'}

infofield_transform

type: map of functions, required: no, default: {}

Enables you to manipulate the values of an information field (per infofield ID), e.g. {3: function(info) {return 'Hello '+info.value+'!'}}

infofield_sort

type: function, required: no, default: function(a, b) {return a.name.localeCompare(b.name, undefined, {numeric: true, sensitivity: 'base'})}

DEPRECATED - custom sorting function for the infofields section. You'll probably want to use metadata instead.

metadata

type: List of String, required: no, default: true

What metadata fields to show when show contains metadata. This is a replacement for general and infofields where you can determine what shows up and in what order. The keys are identical to the classes given to the rows in the general/infofields sections, e.g. ['id', 'created', 'info_102']. (since 2.8)

Events

  • anura-loaded (options, data) - triggered when the plugin has loaded all the detail information

DOM

<div class="anura-details-container">
   <table class="anura-table-0">
      <tbody>
         <tr class="title general">
            <td colspan="2">Object Details</td>
         </tr>
         <tr class="general">
            <td class="anura-name">Name</td>
            <td class="anura-value">Athene Cunicularia</td>
         </tr>
         <tr class="general"><!--etc--></tr>
         <!--etc-->
         <tr class="title infofields">
            <td colspan="2">Information Fields</td>
         </tr>
         <tr class="infofield">
            <td class="anura-name">Description</td>
            <td class="anura-value">A Burrowing Owl near Goiânia, Goiás, Brazil. It is standing on one leg</td>
         </tr>
         <tr class="infofield"><!--etc--></tr>
         <!--etc-->
         <tr class="title download">
            <td colspan="2">Download Formats</td>
         </tr>
         <tr class="basket">
            <td colspan="2">
               <a class="anura-details-download">
                  <div class="basket-img"></div>
                  <div class="anura-details-download-name">Add to basket</div>
               </a>
            </td>
         </tr>
         <tr class="dlf">
            <td colspan="2">
               <a class="anura-details-download">
                  <img src="...">
                  <div class="anura-details-download-name" title="Original Format">Original Format</div>
               </a>
            </td>
         </tr>
         <tr class="dlf"><!--etc--></tr>
         <!--etc-->
      </tbody>
   </table>
</div>

Basket

Options

The basket functionality is available in all main views and the detail view. Use this object for their basket-parameter.

If your basket target element contains a span (preferably with the class counter), the number of assets in the basket will be updated there,
i.e. <div id="anura-basket">Basket (<span class="counter">7</span>)</div>

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.

add

type: array of long, required: no, default: -

A list of asset IDs to be added to the basket

remove

type: array of long, required: no, default: -

A list of asset IDs to be removed from the basket

action

type: String, required: no, default: -

Action to perform, one of show, hide, toggle, clear

force_zip

type: boolean, required: no, default: false

Whether to always produce a ZIP file, even for single file downloads

cookies

type: boolean, required: no, default: true

When jquery.cookies.js is available, persist the basket's content through the use of cookies

send

type: boolean, required: no, default: false

Whether to enable the "send" option - this generates a link for others to download the content of your basket

pin

type: String, required: false, default: -, since: 2.9

What PIN functionality to offer, one of link (opens the PIN in the browser) or send (opens your mail client)

share

type: boolean, required: false, default: false

Whether to enable the "share" option - this generates a link that will fill the recipient's basket with the assets in your basket

terms_and_conditions

type: object, required: false, default: -

When defined, show these terms and conditions before proceeding with the download.

{title: 'Terms and Conditions', text: 'Lorem ipsum ....', confirm: 'I agree'}
  • you can omit the confirm text in order to suppress the confirmation checkbox
  • you can just pass true instead of the object, this will then query CELUM's downloadFormatInterceptor texts.
  • you can localize the texts by passing a map locale->string instead, e.g. title: {en: 'Terms of use', de: 'Nutzungsbedingungen'}

You can also pass two callbacks in the object:

  • show: function() {return true; /*optional callback if terms should be shown, e.g. based on infofields*/}
  • confirmed: function() {/*callback when user has confirmed terms*/}
icon_transform

type: function, required: no, default: function(icon) {return icon.replace('/big/', '/small/')}

A function to manipulate the download format icon paths, e.g.

```function(icon) {return icon.replace('/dark/', '/light/')}```
clear_after_download

type: boolean, required: no, default: true

Whether to clear the basket after initiating a download

require_email

type: boolean, required: no, default: false

Require the user to enter his email address before downloading. Only useful in combination with a downloadHandler.

show_description

type: boolean, required: no, default: true

Whether to show the download format description

max_assets

type: int, required: no, default: -, since: 2.8

Limit the number of assets that can be placed in this basket (FIFO). 0 disables this feature.

show_failed

type: boolean, required: no, default: false

Whether to show placeholders for assets that can't be downloaded

default_format

type: long, required: no, default: -, since: 2.8

The download format that should be selected by default (when available).

DOM

<div id="anura-basket-overlay">
   <div class="anura-basket-popup anura-locale-">
      <div class="anura-basket-popup-titlebar"><span>×</span></div>
      <div class="anura-basket-thumbs">
         <div class="anura-basket-thumb"><img src="...">
            <div class="anura-basket-thumb-delete hover"></div>
         </div>
         <div class="anura-basket-thumb"><!--etc--></div>
         <!--etc-->
      </div>
      <div class="anura-basket-download">
         <h3 class="anura-basket-download-title">Download:</h3>
            <div class="anura-basket-download-holder">Download Format X</div>
            <div class="anura-basket-download-holder"><!--etc--></div>
            <!--etc-->
         <h3 class="anura-basket-download-send">Send:</h3>
            <div class="anura-basket-download-holder mailto">Send Hyperlink</div>
         <span class="anura-basket-reset">clear</span>
      </div>
   </div>
</div>

Events

  • anura-loaded (options) - triggered when the plugin has loaded all the detail information
  • anura-asset-added (options, asset, metadata) - triggered when an asset is added to the basket
  • anura-asset-removed (options, asset) - triggered when an asset is removed to the basket
  • anura-asset-failed (options, asset) - triggered when an asset could not be added to the basket
  • anura-cleared (options) - triggered when the basket is cleared (i.e. all assets got removed)
  • anura-toggled - triggered when the basket popup is toggled (i.e. shown or hidden)
  • anura-download (asset, download format) - triggered (on the entire window) for each downloaded asset

Since 2.9, anura ships with its own lightbox, as all the other ones have their own quirks. Other lightboxes are still supported for now, but we'd encourage you to use this one :-)

Dark Light Mobile
lightbox-dark lightbox-light lightbox-mobile

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.

trigger

type: String, required: no, default: 'a[rel^=anura-lightbox]'

The elements that when clicked open the lightbox.

Note that it expects the attributes data-asset-id, src and title to be set on the trigger elements (this is taken care of by all main views that we ship).

toolbar

type: object, required: no, default: {available: true, visible: true, layout: ['title', 'counter', 'download', 'basket', 'sidebar', 'close']}

Whether to show a toolbar, if said toolbar is visible by default, and what buttons are present on the toolbar.

Known sub-options:

  • available (bool) - whether the toolbar is provided at all, default is true
  • visible (bool) - whether the toolbar is visible by default, default is true
  • layout (Array) - which buttons to show, and in what order, default is ['title', 'counter', 'download', 'basket', 'sidebar', 'close']. Known buttons:
    • title - the title of the asset, as defined by the title attribute of the trigger
    • counter - which asset you're on, e.g. "7 / 50"
    • share - copies a deep link to your clipboard
    • download - download the asset directly from the lightbox
    • fullscreen - makes the preview image go fullscreen
    • theme - makes the preview image go fullscreen
    • basket - offers the usual "add to basket" functionality. Requires basket to be set.
    • sidebar - let's you toggle the visibility of the sidebar
    • theme - let's you toggle the visibility of the sidebar
    • prev - adds a 'previous'-button, usefull if you have navigation.buttons disabled
    • next - adds a 'next'-button, usefull if you have navigation.buttons disabled
    • slideshow - adds a 'slideshow' button to show the next asset in x seconds (default: 5s)
    • close - closes the lightbox. Note that the close button will be auto-added when you specified none.
    • function - pass an arbitrary function for custom features - function(options, toolbar)

type: object, required: no, default: {available: true, visible: true, settings: {}, callback: function, width: '30%'}

Whether to show the sidebar, if the sidebar is visible by default, what happens inside the sidebar, and how wide it should be.

Known sub-options:

  • available (bool) - whether the sidebar is provided at all, default is true
  • visible (bool) - whether the sidebar is visible by default, default is true
  • settings (object) - settings to pass on to the sidebar, usually anuraDetails
  • callback (function(options, sidebar, asset)) - called whenever the sidebar opens or the next asset is displayed. Responsible for filling the sidebar with content. Default is sidebar.anuraDetails($.extend({}, options.sidebar.settings, {server: options.server, locale: options.locale, basket: options.basket, asset: asset}))
  • width (CSS) - how wide the sidebar should be, default is 30%. Note that in the mobile view it will change to 100%.
basket

type: jQuery object, required: only when using 'basket' in toolbar, default: null

The download basket to use where the user can collect assets to download, as returned by your $.anuraBasket()-call. This enables the corresponding basket buttons in the download_menu and detail_view. Required when you used basket in the toolbar layout.

downloadFormat

type: long, required: only when using 'download' in toolbar, default: 0

Which download format to use for the "download" button. Temporary option until a dropdown with available formats is implemented.

type: object, required: no, default: {buttons: true, click: true, keyboard: true}

Which navigation types to enable. Known sub-options:

  • buttons (bool) - adds floating prev/next arrows over the preview
  • click (bool) - go to the next/previous asset when clicking on the preview (swipe left/right on mobile is always on)
  • keyboard (bool) - whether to enable keyboard shortcuts. Known shortcuts:
    • esc, q - close the lightbox
    • left arrow, h - go to the previous asset
    • right arrow, l - go to the next aasset
    • b - add the asset to the basket (or remove it)
    • s - toggle the sidebar
    • t - toggle the toolbar
    • i - inverts the theme (dark or light)
theme

type: String, required: no, default: dark

Which theme to use, currently eighter dark or light. You can provide your own theme and declare CSS rules using .anura-lightbox-theme-{your theme} ...

action

type: String, required: no, default: -

Used to trigger an action from outside, one of

  • show - show the lightbox
  • hide - hide the lightbox
  • toggle - toggle the lightbox visibility
  • sidebar - toggle the sidebar visibility
  • toolbar - toggle the toolbar visibility
  • theme - toggle the theme
  • remove - removes (unloads) the lightbox
  • {object} - your own data, {title: 'your title', url: 'https://some.jpg', mime: 'image/jpeg'}
  • [ID] - an asset ID to load & display (this only works when a trigger object from a main view is present for that ID)
pdfPreviews

type: boolean, required: no, default: true

Whether to enable inline PDF previews for documents. Note that this relies on the built-in PDF-viewer of the browser. Requires back-end v2.9 or later.

When using full text search, the words you searched for will be highlighted (currently only works in Firefox, see Chromium Issue #792647) lightbox highlighting the word

nativePlayer

type: boolean, required: no, default: true, since: 2.9

Whether to use the native browser player to play videos (otherwise CELUM's is used)

highres

type: boolean, required: no, default: true for screens larger than 1024x1024px, false otherwise

Whether to use the high resolution preview format (up to 3000x3000px instead of up to 1024x1024px)

slideshowMillis

type: long, required: no, default: 5000, since: 2.9

How long to pause between each asset then in slideshow-mode (see toolbar)

preview3D

type: array of String, required: no, default: -, since: 2.9

For which file extensions to use the <model-viewer>-component, known to work are ['glb', 'gltf'] Note: This implicitly allows original file access (through the matching anura.global.preview3dExtensionWhitelist backend setting), and it will load an external component from unpkg.com/@google, which is why it's disabled by default

Events

  • anura-loaded (options) - triggered when the plugin has loaded
  • anura-lightbox-show (options) - triggered when the lightbox opens
  • anura-lightbox-hide (options) - triggered when the lightbox closes
  • anura-lightbox-sidebar-toggled (options, isVisible) - triggered when the sidebar is toggled
  • anura-lightbox-toolbar-toggled (options, isVisible) - triggered when the toolbar is toggled
  • anura-lightbox-show-asset (options, assetId, url, title) - triggered when an asset is shown (through open/next/prev)

Example

Since this is a plugin-inside-a-plugin kinda situation, here's a labeled example:

$('#anura-gallery').anuraGallery({ // <-- anuraGallery settings (or other main view)
    server: server,
    locale: lang,
    /* snip ,*/
    detail_view: 'anura',
    detail_settings: { // <-- anuraLightbox settings
        toolbar: {
            available: true, visible: true,
            layout: ['title', 'counter', /* snip ,*/ 'close']
        },
        sidebar: {
            available: true, visible: true,
            settings: { // <-- anuraDetails settings
                show: ['metadata', 'downloads'],
                metadata: [/* snip */],
            }
        },
        theme: 'light'
    }
});

Cropper

anuraCropper offers image cropping functionalities, while respecting existing download format configurations. This means that it tries to be intelligent about it, i.e. if the download format has an image size pre-configured, the cropper applies the aspect ration automatically and prevents selections smaller than that. Based on cropperjs, since: 2.9

anuraCropper

Supported out-of-the-box by:

  • anuraBasket
  • anuraDetails

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.

assetId

type: long, required: yes, default: -

The ID of the asset you want to crop.

downloadFormat

type: long, required: yes, default: -

The ID of the download format you ant to use for cropping. Needs to be one where cropping is enabled (editable-flag in Anura, in CMA the setting is Download Format Interceptors: imageEditorDownloadFormatInterceptor).

mode

type: enum (download or apply), required: no, default: download

Which mode the cropper runs in. download offers a button to directly download the resulting file, while apply only relays the cropping information to the callback function (see below), e.g. for use in the basket.

callback

type: function, required: when mode: 'apply', default: console.log

A callback to relay the cropping information to.

callback: function(options, geometry, parameter) {
    // ... do something
}

Parameters:

  • options: the options that anuraCropper was opened with
  • geometry: an object containing width and height, as well as the offset (top-left) as x and y
  • parameter: pre-assembled crop value you can use in the download call
aspectRatios

type: array of String, required: no, default: ['-','1:1','1.91:1','3:2','4:3','16:9','16:10']

When present, offer a dropdown with aspect ratios the user can choose from (delimiter is :, free choice is -).

If the downloadFormat has a pre-defined width and height, the dropdown will be locked to fit that aspect ration.

presetSizes

type: array of String, required: no, default: -

When present, offer a dropdown with sizes the user can choose from (delimiter is x, free choice is -).

E.g. ['-','728x90','336x280','300x250','300x600','320x100']

If the downloadFormat has a pre-defined width or height, the dropdown is hidden.

cropperjs

type: object, required: no, default: {viewMode: 2, rotatable: false, responsive: true, autoCropArea: 1, scalable: false}

cropperjs defaults you can override. A viewMode < 1 is not suported, as download formats can't crop outside the image into empty space.

Util

anuraUtil exposes a variety of utility functions used by every plugin. You can also use them for customizings. The prefix parameter is used for multi-instance, you can simply pass en empty string if you don't need that.

  • hasState(prefix, key) - check if a state parameter (#some-state=foo) is present

  • getState(prefix, key) - get a particular state

  • getStates() - get all state parameters

  • setState(prefix, key value) - set a particular state

  • setStates(states) - set an array of states

  • removeState(prefix, key) - removes a particular state

  • removeStates(prefix, fragment) - remove all states like fragment

  • tokenProvider() - provider of tokens, used for authentication

  • onRequestFailure() - global request failure handler

  • icons{} - defines the icons to be used as a map of SVGs. Known icons: left, right, download, share, basket, sidebar, close, fullscreen, check, sun, play, crop, ok, plus, down, mail

    # e.g. override the existing basket icon 
    $.anuraUtil.icons.basket = '<svg ...>...</svg>'

Translations

All strings used by the front-end are retrieved from CELUM's message bundle. You can override any of these be prepending anura. to the key, so the changes only affect Anura, but not CELUM's UI. E.g. anura.paging.page=P.. The keys that already start with anura are provided by the back-end.

key value (EN)
actionmenu.sidebar.enable Show Sidebar
anura.addToBasket Add to basket
anura.download.mailinput.mail E-Mail Address
anura.download.mailinput.text Please enter your contact information, so we can inform you about changes to the assets (such as copyright expiration).
anura.loadMore load more
anura.relations Relations
anura.removeFromBasket Remove from basket
anura.similarAssets Similar Assets
anura.slideshow Slideshow
anura.versions.date Version date
anura.versions.nr Version number
assetlist.header.image Preview
assetlist.header.mediaType Asset Type
assetlist.header.name Name
assetlist.header.originalFileName File Name
assetlist.viewsettings View
AssetProperties.fileExtension File extension
assetReview.view.asset.headerNewReview Add New Review
assetReview.view.asset.headerReviewList Review List
assetReview.view.asset.label.checkReviewError Enter a rating and/or a comment.
assetReview.view.asset.label.comment Comment
assetReview.view.asset.label.rating Rating
assetReview.view.asset.label.ratingAverage Average Rating
assetReview.view.asset.title Reviews
common.actions.clear Clear
common.actions.save Save
common.copyToClipboard Copy link to clipboard
common.form.inactive Not available
common.object.creationDate Created
common.object.lastModifiedDate Modified
common.object.originalFileSize File size
common.object.technicaltype File type
detailview.generalinfo.title General Information
detailview.keywords.title Keywords
detailview.technicaltype.size Size
DocDocumentProperties.pages Pages
downloadformatgroup.all.downloadFormat All Download Formats
downloadFormatInterceptor.messageBox.message The author intended not to use any copyrighted material ...
downloadFormatInterceptor.messageBox.title Disclaimer
downloadformatmanagement.downloadformat.name Download Format
externallinks.error.nopermission.asset You have no permission for asset with id: {0}!
fileproperties.* (dynamic, see local fileProperties-fields.xml, name=...)
general.close Close
general.download Download
general.infofields Information Fields
general.links Links
general.next Next
general.previous Previous
general.units.px Pixel
interceptor.disclaimerconfirmation Accept
loading.general Loading...
MediaAssetProperties.filesize File size
MENUITEMID_DOWNLOAD Download
MENUITEMID_MAILTO Send Hyperlink
MENUITEMID_METADATA Metadata
MENUITEMID_SEND Send
MENUITEMID_SHARE Share
MENUITEMID_SHOW_FULLSCREEN_PREVIEW Fullscreen Preview
object.originalFileName Filename
paging.page Page
PdfDocumentProperties.modifiedDate Modified date
PdfDocumentProperties.pages Pages
pinaccess.name.fallback PIN-Link
search.cleanUp Clear
search.documentProperties Properties
search.ignoreSelected No restriction
search.notSelected Not selected
search.modified Modified
search.searchItem Search term
search.searchOtherObjects Unknown
search.selectAll Select all
search.selected Selected
search.startSearch Search
search.uploaded Uploaded
share.newPin New PIN-Link
TgaImageProperties.creationDate Creation Date