anura-basket

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

Variables

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

Attributes

adapter

required: yes, live: no, default: -

With which adapter to talk to (to load the translations from).

state

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.

terms-of-use

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 it
• force - show the sidebar, without an option to hide it
• hidden - hide the sidebar initially, but provide a button to show it

There is currently no mechanism that forces the user to confirm that they have read the terms. TBD.

default-format

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.

clear-on-download

required: no, live: yes, default: true

Whether the download basket should be cleared after a download has been triggered.

buttons

required: no, live: on-load, default: clear,download

Which buttons to show in the footer (known buttons: clear, order and download)

format-selectors

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

Events

basket-added

{details: {asset: asset}}

When an asset has been added to the basket.

basket-removed

{details: {assetId: id}}

When an asset has been removed from the basket.

basket-cleared

When the basket has been cleared.

basket-download

{details: {assets: assets}}

When assets have been downloaded from the basket - details contain a map of IDs to a set of selected download formats.

basket-counter

{details: {count: count}}

Whenever the basket updates (add/remove/clear), signals the number of assets that are currently in the basket.

Slots

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

• lightbox - add a lightbox inside the basket itself. Not present by default.

<anura-lightbox slot="lightbox" buttons="close"></anura-lightbox>

Parts

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