Adapters

Adapters connect the Anura front-end components to an upstream source, usually a DAM. At least one is required.

bynder celum sharedien

anura-adapter

All adapters have to extend the anura-adapter in order to inherit some utility functions, namely:

  • Translations
    • translate(key, args) - labels translated into the current locale. Supports arbitrary arguments, e.g. the key pageX is translated as Page {page}, expecting {page: 5} in the args. So translate('pageX', {page: 5}) results in Page 5
    • setTranslation(multiMap) - overload the built-in translations, e.g. setTranslation({en: {myKey: 'new value'}, de: {myKey: 'neuer Wert'}})
  • States - stored in the URL as query parameters inside window.location.hash (so you can copy-paste stateful links). Prefix is an arbitrary prefix to your key in order to support multiple instances of the same component on one page.
    • hasState(prefix, key) - test if a given key is present
    • getState(prefix, key, fallback) - get the value of a given key, or your fallback value if not present
    • getStates() - get all states
    • setState(prefix, key, value) - set a value for a given key
    • setStates(array) - set multiple states at once. Note that you must deal with prefix yourself.
    • removeState(prefix, key) - removes the value for a given key (including the key itself)
    • removeStates(prefix, fragment) - remove multiple values whose key starts with fragment

When implementing your own adapter, be sure to inform super() in attributeChangedCallback and connectedCallback.

Attributes

license

required: yes (except on localhost), default: -

The license (delivered by brix) enabling you to use the adapter (yeah... gotta eat..). This is based either on the hostname presenting the content, or the source thereof.

for ease of development, localhost is enabled without a license.

locale

required: no, default: the page's language (or en)

ISO 639-1 code for the language you'd like to use. Defaults to <html lang=...> if present or en otherwise. May default to the instance's default locale when not specified.

theme

required: no, live: yes, default: the browser's prefers-color-scheme setting

Default theming of fullscreen components (light or dark), defaults to the users prefers-color-scheme setting. Set this to light in order to suppress dark mode despite users requesting it.

Events

load

A regular load-event, can be used to set translations, e.g.

<some-adapter locale="de" onload="this.setTranslation({en: {loadMore: 'gimme more'}})"></celum-adapter>

adapter-reload

{detail: {name: name, oldValue: oldValue, newValue: newValue}}

Fired when any attribute has been changed, indicating that components hooked up to this adapter may want to reload themselves, e.g. because the locale has changed.

bynder-adapter

Connects to any Bynder server using their v4-API.

<bynder-adapter url="https://some-instance.bynder.com" token="xxx"></bynder-adapter>

Attributes

url

required: yes, default: -

The URL where the back-end endpoint is located, e.g. https://some-sandbox.bynder.com

token

required: yes, default: -

API-Token to use, see Advanced Settings > Portal Settings > Permanent Tokens. We'd recommend creating a separate user for it, as this will basically be public information for anyone looking at the source.

video-previews

required: no, default: false

Whether to display video previews instead of showing a large thumbnail.

Note that public video URLs are not available by default -> ask Bynder about "video CDN" first.

zip-service

required: no, default: zippy.brix.ch

Because Bynder's API provides no mechanism for downloading more than one file at once (as of 2023-04), an external service is used to assemble a ZIP file for basket downloads. By default our own zippy service is used - ask as about zippy if you want to host your own.

celum-adapter

Connects Anura to a CELUM DAM, provided that the instance has the backend-plugin installed.

<celum-adapter url="https://my.celum.server/anura/example" locale="en"></celum-adapter>

Attributes

url

required: yes, default: -

The URL where the back-end endpoint is located, e.g. https://my.celum.server/anura/example

token

required: maybe, default: -

  • API-Token to use, only required when the back-end is protected by one.
  • Alternatively, when CELUM Authentication should be triggered, set this to login to trigger a redirect (required backend >= 2.9.31)

document-previews

required: no, default: true

Whether to display PDF previews instead of showing a large thumbnail (depending on availability/file format).

video-previews

required: no, default: true

Whether to display video previews instead of showing a large thumbnail.

extended

required: no, default: false

Whether to fetch more asset attributes in list requests (such as file size, see API)

infofields

required: no, default: -

A comma-separated list of information field IDs that should be loaded in list requests (see API)

alt-name

required: no, default: -

An information field ID to use instead of the asset's name (because that can't be localized). The asset's name will be used as a fallback if the information field is empty.

sharedien-adapter

Connects to any Sharedien server using their v6-API.

<sharedien-adapter url="https://some-instance.sharedien.com" token="xxx"></sharedien-adapter>

Sharedien does not support arbitrary pagination, you must operate the paginator in auto-mode

Attributes

url

required: yes, default: -

The URL where the back-end endpoint is located, e.g. https://some-instance.sharedien.com

token

required: yes, default: -

Go to "Admin > Security > Access Token" and create a token (that lasts long enough ^^)

browser

required: no, default: -

Set the browser identifier to use, which is basically an additional search filter defined in the backend of Sharedien (see Administration > Browsers).

load-properties

required: no, default: -

Which additional metadata properties should be loaded in list requests, useful for additional information or bullets.