anura-gallery

<anura-gallery adapter="some-adapter" source="anura-tree" aria-live="polite"></anura-gallery>

The gallery component will show assets in a gri:.

Screenshot of <anura-gallery>

By default, the gallery consists of a number of <anura-asset>s and an <anura-paginator> at the bottom.

Attributes

node

required: when no source or 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.

recursive

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: when no source or node is provided, live: yes, default: -

NEEDS IMPLEMENTATION. The search query that the gallery should perform and display. This will cause the gallery to query its adapter for content.

source

required: when no node or search is provided, live: yes, default: -

Which component the gallery should get its instructions from, e.g.:

  • anura-tree
  • anura-searchbar

You can combine multiple sources, e.g. anura-tree,anura-searchbar, which will (usually) be ANDed by the adapter.

sort

required: no, live: yes, default: -

How the displayed assets should be sorted. The exact wording will depend on your adapter, e.g. name_asc.

page-size

required: no, live: on-load, default: 50

How many assets should be displayed at once on a page.

value

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.

persist-selected

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.

Events

assets-loading

{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.

assets-loaded

{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).

asset-added

{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.

change

standard change event

When a change to the selected assets occurs and the component updates its value attribute.

paginate (inbound)

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.

Slots

  • header - the header slot will appear before the title and tree content.

  • footer - the footer slot will appear at the very end, after the tree content.

  • 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 to anura-paginator::part(paginator-button), as it is no longer part of the gallery.

Parts

<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>