<anura-basket adapter="some-adapter"></anura-basket>
The basket is a temporary collection of assets to be downloaded at once. It is persistent during page reloads, and even across different pages - provided you give it the same ID.
Once opened, the user may select different download formats for each asset, or set them globally through the select at the top. Also supports showing Terms of Use (optional).
--basket-sidebar-width
overriding --sidebar-width
(or --basket-sidebar-height
respectively when in portrait mode)--basket-color
overriding --button-color
--basket-font-color
overriding --button-font-color
--basket-background
overriding white
required: yes, live: no, default: -
With which adapter to talk to (to load the translations from).
required: no, live: on-load, default: true
Whether the basket should maintain its state. Set it to false to not keep any state at all.
required: no, live: yes, default: false
Display terms of use as a sidebar (right above the download button). The translation keys are termsOfUse
for the title and termsOfUseContent
for the content (the latter accepts HTML).
Possible values
false
- don't show anything (no sidebar, no button)true
- show the sidebar, but provide a button to hide itforce
- show the sidebar, without an option to hide ithidden
- hide the sidebar initially, but provide a button to show itThere is currently no mechanism that forces the user to confirm that they have read the terms. TBD.
required: no, live: on-change, default: -
The default download format that should be selected when an asset is added to the basket, e.g. Original
. Note that when an asset does not offer that format, nothing will be selected.
required: no, live: yes, default: true
Whether the download basket should be cleared after a download has been triggered.
required: no, live: on-load, default: clear,download
Which buttons to show in the footer (known buttons: clear
, order
and download
)
required: no, live: on-load, default: true
Whether to show the download format selects - you may want to turn these off when not actually offering a real download (e.g. you are using assetOrder
).
{details: {asset: asset}}
When an asset has been added to the basket.
{details: {assetId: id}}
When an asset has been removed from the basket.
When the basket has been cleared.
{details: {assets: assets}}
When assets have been downloaded from the basket - details contain a map of IDs to a set of selected download formats.
{details: {count: count}}
Whenever the basket updates (add/remove/clear), signals the number of assets that are currently in the basket.
asset - configure your own asset. Default is <anura-asset>
with an <anura-select>
in the content slot (for selecting the desired formats) - this is required should you override this:
<anura-asset buttons="basket">
<anura-select slot="content" filter="false" hide-title="true"></anura-select>
</anura-asset>
terms-of-use - override the default sidebar with your own content, default is:
<h3 part="basket-sidebar-title"></h3>
<span part="basket-sidebar-content"></span>
<anura-lightbox slot="lightbox" buttons="close"></anura-lightbox>
<button part="basket-button basket-button-main">
<anura-icon part="basket-icon"></anura-icon>
<span part="basket-counter"></span>
</button>
<div part="basket-overlay">
<div part="basket-container">
<nav part="basket-header">
<span part="basket-title"></span>
<anura-select part="basket-global-select"></anura-select>
<div part="basket-buttons">
<button part="basket-button basket-button-close">
<anura-icon part="basket-icon basket-icon-close"></anura-icon>
</button>
<!-- more buttons -->
</div>
</nav>
<div part="basket-body">
<main part="basket-content">
<!-- <anura-assets part="basket-asset"> in here -->
</main>
<aside part="basket-sidebar"></aside>
</div>
<nav part="basket-footer">
<button part="basket-button basket-button-download">
<anura-icon part="basket-icon basket-icon-download"></anura-icon>
<span part="basket-label basket-label-download"></span>
</button>
<!-- more buttons -->
</nav>
</div>
</div>