Adapters

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

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

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.

dummy-adapter

For testing purposes, serves up a static set of nodes and assets. Has no attributes or events.

<dummy-adapter></dummy-adapter>

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.

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.

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.

sharedien-adapter (WIP)

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: -

Under construction by Sharedien, currently slated for August 2023. Currently you need do fish your bearer token out of a request in the UI.

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