An effort to rewrite Anura from the ground up using webcomponents. No jQuery, no npm, just plain ES6. Goals:
* framework-agnostic
* source-agnostic
* furthermore, it should be
* easy to integrate
* accessible
* responsive
> > > > > Internet Explorer is NOT supported anymore. If you need that, use the [jQuery](/anura/frontend) one (and may god have mercy on your soul)
[MINITOC]
> > > > > > now also available via [NPM](https://www.npmjs.com/package/anura-webcomponents)
## WORK IN PROGESS
> > > > 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](https://anura.brix.ch/webcomponents).
## Introduction
[Webcomponents](https://www.webcomponents.org/introduction) are declarative, so where before you needed custom Javascript, you now just:
```html
```
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:
```html
```
> > > > > > 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:
```html
```
The tree is configured as the _search_ component for the gallery, so it will now listen to navigation events and update itself.
## Page Anatomy
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
Media Database
```
Also note how components can contain other components, such as `` inside the gallery (done automatically, unless you specify something else in that [slot](gallery#slots)).
## Component Anatomy
Every component usually has:
* **Attributes**: HTML attributes on component-level, such as `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.
* **Events**: Emitted (or consumed) when something interactive happens, e.g. clicking on a node *anura-tree* yields a _node-selected_-event.
* **Slots**: Places to add you own HTML into the component, e.g. *anura-tree* has a slot for a title, so you can `
my custom title
`.
* **Parts**: Named parts of components that are available for styling, e.g. `anura-gallery::part(asset-title) { color: #f00 }` to make an assets title red. Note that unnamed shadow DOM objects are not styleable (by design).
* **Variables**: CSS-variables allow you to specify some global default, without having to touch each `part`, e.g. `--button-color: blue`.
## Integration
In the [Introduction](#introduction) we said that we can change the `locale` at runtime (or any other attribute marked `live: yes`). Let's do that:
### JavaScript
Example: change the `locale` attribute using an regular dropdown:
```html
```
### Angular
Example: change the `locale` attribute using an external dropdown (`mat-select` in this case):
```html
LanguageDeutschEnglish
```
## Further reading
* [Adapters](./adapters)
* [Components](./components)
## Breaking Changes
During the BETA phase, breaking changes will be noted here.
* 2024-01-10 - the `lightbox` slots have been removed in favor of the lightbox attribute (so you can simply reference one in all components). If you've customized your lightbox, move it outside of the slot (and reference it when you have more than one)