An effort to rewrite Anura from the ground up using webcomponents. Not jQuery, no npm, just plain ES6. Goals:
Internet Explorer is NOT supported anymore. If you need that, use the jQuery one (and may god have mercy on your soul)
This is still in beta and subject to change, no guarantees are given - deploy at your own risk.
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"></anura-tree>
<anura-gallery adapter="some-adapter" source="anura-tree"></anura-gallery>
</div>
The tree is configured as the source for the gallery, so it will now listen to navigation events and update itself.
When composing your own anura page, you will use a variety of different anura components, which you can mix-and-match alongside regular HTML as you see fit. For example:
Using just 4 different anura-components, we can simply create an easy-to-use media browsing experience - anywhere in the web!
In order for this to work, we need to hook them up to one another like so (note the adapter
and source
attributes):
<html lang="en">
<head>
<script type="module" src="adapters/some-adapter.js"></script>
<script type="module" src="components/anura-*.js"></script><!-- more imports here -->
<!-- style omitted for brevity -->
</head>
<body>
<header>
<h1>Media Database</h1>
<anura-basket adapter="some-adapter"></anura-basket>
</header>
<some-adapter url="https://some.place"></some-adapter>
<aside>
<anura-searchbar adapter="some-adapter"></anura-searchbar>
<anura-select adapter="some-adapter" source="Season"></anura-select>
<anura-select adapter="some-adapter" source="Location"></anura-select>
<anura-select adapter="some-adapter" source="Copyright"></anura-select>
</aside>
<main>
<anura-gallery adapter="some-adapter" source="anura-searchbar,anura-select" basket="anura-basket"></anura-gallery>
</main>
</body>
</html>
Also note how components can contain other components, such as <anura-asset>
inside the gallery (done automatically, unless you specify something else in that slot).
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 value
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 (by design).part
, e.g. --button-color: blue
.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>