An effort to rewrite Anura from the ground up using webcomponents. Not jQuery, no Angular, just plain ECMAScript.
Internet Explorer is NOT supported. If you need that, use the jQuery one (and may god have mercy on your soul)
This is still very alpha, no guarantees of any kind are given - do NOT use this in production yet.
Technical input is welcome, but bug reports are not (yet).
WIP-demo currently over at https://anura.brix.ch/webcomponents.
Webcomponents are declarative, so where before you needed custom Javascript, you now just:
<anura-gallery node="123"></anura-gallery>
In order to abstract away the source of your assets, the concept of adapters exists. These hold common settings (such as the locale) and know how to talk to a source (usually a DAM). They are hooked up as follows:
<some-adapter url="https://my.server.com/anura/example" locale="de"></some-adapter>
<anura-gallery adapter="some-adapter" node="123"></anura-gallery>
Note that you can update locale at runtime, and the gallery will reload itself to reflect that change.
To use multiple adapters at the same time: give them an ID like id=my-id, and refer to them as adapter="#my-id".
The same applies to hooking up different components to one another. Here's an example with a navigation tree:
<some-adapter url="https://my.server.com/anura/example" locale="de"></some-adapter>
<div style="display: flex">
<anura-tree adapter="some-adapter" root="1337" style="width: 15%;"></anura-tree>
<anura-gallery adapter="some-adapter" source="anura-tree" style="width: 85%;"></anura-gallery>
</div>
The tree is configured as the source for the gallery, so it will now listen to navigation events and update itself.
Every component usually has:
locale="de"
that can be updated "live" at any time. These can either be configured, or they appear as a result of an interaction, e.g. anura-tree will update its selected attribute when a node has been selected.<anura-tree><h3 slot="title">my custom title</h3></anura-tree>
.anura-gallery::part(asset-title) { color: #f00 }
to make an assets title red. Note that unnamed shadow DOM objects are not styleable!part
.In the Introduction we said that we can change the locale
at runtime (or any other attribute marked live: yes
). Let's do that:
Example: change the locale
attribute using an regular dropdown:
<some-adapter locale="de"></some-adapter>
<label for="demo">Language</label>
<select id="demo" onchange="document.querySelector('some-adapter').setAttribute('locale', event.target.value)">
<option value="de" selected>Deutsch</option>
<option value="en">English</option>
</select>
Example: change the locale
attribute using an external dropdown (mat-select
in this case):
<some-adapter [attr.locale]="selectedLanguage"></some-adapter>
<mat-form-field appearance="fill">
<mat-label>Language</mat-label>
<mat-select [(value)]="selectedLanguage">
<mat-option value="de">Deutsch</mat-option>
<mat-option value="en">English</mat-option>
</mat-select>
</mat-form-field>