<anura-gallery adapter="some-adapter" search="anura-tree" aria-live="polite"></anura-gallery>
The gallery component will show assets in a gri:.
By default, the gallery consists of a number of <anura-asset>
s and an <anura-paginator>
at the bottom.
required: when no node is provided, live: yes, default: -
Which component the gallery should get its instructions from, e.g.:
anura-tree
anura-searchbar
anura-select
You can combine multiple search components, e.g. anura-tree,anura-searchbar
, which will be ANDed together. Depending on where they live, you may use a selector such as aside > *
.
required: when no search is provided, live: yes, default: -
The content of which node that the gallery should display. This will cause the gallery to ask its adapter for the content of said node.
required: no, live: yes, default: -
When displaying a node, whether the content should also include everything that is contained in subnodes beneath a node.
required: no, live: yes, default: -
How the displayed assets should be sorted, ending in either _asc
or _desc
. The exact wording will depend on your adapter, e.g. name_asc
. Known values:
name, dateCreated, dateModified, datePublished
id, name, uploaddate, lastmodified, extension, assettype, score, original(name), (file)size, info_{id}
, default is id
relevance, file_name, system_import_date
, default is relevance
required: no, live: on-load, default: 50
How many assets should be displayed at once on a page.
required: no, live: write-only, default: -
When using the checkbox feature on assets, updates itself with a comma-separated list of assets that currently have the selected state. This value is only written, and not read.
required: no, live: yes, default: false
When using the checkbox feature on assets, persist the selected assets in the local storage, so it "survives" page reloads.
required: no, live: yes, default: true
When a query yields no results, tell the user and offer him an <anura-reset>
to start over (translation key: noAssets
).
required: no, live: yes, default: -
Where an instance of <anura-basket>
can be found to collect assets in, e.g. #my-basket
.
required: no, live: on-load, default: -
Which download format to use for the quick download button, e.g. Original
{details: {node: nodeId, search: search-terms, keepContent: bool, pageRequest: pageRequest}}
When the gallery is loading new assets, either through a node or a search request. A good time to clear counters and such.
{details: {total: totalCount, assets: AnuraAsset[], pageRequest: pageRequest}}
When assets have been loaded (through whatever mechanism), informs other components (such as anura-paginator
) about the total number of assets, the new assets themselves, as well as the pageRequest (contains current paging information).
{details: {asset: assetData, instance: elementInstance}}
When an individual anura-asset
has been added to the gallery. Useful when you want to tweak something about the asset that you couldn't do via the asset slot.
{details: selectedAssets}
When a change to the selected assets occurs and the component updates its selected
attribute.
pageNumber
Instruct anura-gallery to display the provided page number - used by anura-paginator
to tell the gallery to advance to an arbitrary page. Note that the page number is currently not validated, so sending a non-existent page number may lead to undefined behaviour.
header - the header slot will appear before the gallery.
footer - the footer slot will appear at the very end.
asset - configure your own asset. Default is <anura-asset>
<anura-gallery adapter="some-adapter" aria-live="polite">
<anura-asset slot="asset" buttons="download,details"></anura-asset>
</anura-gallery>
paginator - configure your own paginator. Default is <anura-paginator>
<anura-gallery adapter="some-adapter" aria-live="polite">
<anura-paginator slot="paginator" mode="auto" detect-scroll="false"></anura-paginator>
</anura-gallery>
lightbox - configure your own lightbox. Default is <anura-lightbox>
<anura-gallery adapter="some-adapter" aria-live="polite">
<anura-lightbox slot="lightbox" buttons="close"></anura-lightbox>
</anura-gallery>
When using the built-in components, the part selector might be
anura-gallery::part(paginator-button)
, but when you declare your own it changes toanura-paginator::part(paginator-button)
, as it is no longer part of the gallery.
<div part="asset-container">
<!-- many <anura-asset>s -->
</div>
<slot name="asset">
<anura-asset></anura-asset>
</slot>
<slot name="paginator">
<anura-paginator part="paginator"></anura-paginator>
</slot>
<slot name="lightbox">
<anura-lightbox part="lightbox"></anura-lightbox>
</slot>