DIY
Do It Yourself
You can also use our generalized adapters to write your own web components, if you prefer.
This section assumes some basic JavaScript know-how
1. Write your own web component
simple-example.js
const simpleTemplate = document.createElement('template'); // define your template:
simpleTemplate.innerHTML = `
<figure>
<img>
<figcaption></figcaption>
</figure>
`
export class SimpleExample extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({'mode': 'open'});
this._shadowRoot.appendChild(simpleTemplate.content.cloneNode(true)); // clone your template
this._img = this._shadowRoot.querySelector('img'); // find elements to talk to later
this._caption = this._shadowRoot.querySelector('figcaption');
}
connectedCallback() {
// let's ignore live updates via observedAttributes/attributeChangedCallback for brevity
this._adapter = document.querySelector(this.getAttribute('adapter'));
if (this.hasAttribute('asset-id')) this.#showAssetById(this.getAttribute('asset-id')); // show an asset
}
#showAssetById(assetId) {
this._adapter.loadAsset(assetId).then(asset => { // ask the adapter about said assetId
if (asset) {
this._img.src = asset.thumbnail;
this._caption.innerText = asset.name;
} else {
this._img.src = '';
this._caption.innerText = this._adapter.translate('resultCount0');
}
});
}
}
window.customElements.define('simple-example', SimpleExample);All public methods of the adapters are documented in anura-adapters.js
2. Use your new component
<head>
<script type="module" src="./anura/src/adapters/some-adapter.js"></script>
<script type="module" src="./my/components/simple-example.js"></script>
</head>
<body>
<some-adapter url="https://some.server.com"></some-adapter>
<h1>Admire your work</h1>
<simple-example adapter="some-adapter" asset-id="1234"></simple-example>
</body>3. Admire your work
