1.24.1 Procedures

Procedure: disclosure-controls KEY: #:selector #:expand-label #:collapse-label #:classes ¶

Create the pair of buttons that open or close every disclosure of a tray.

selector is any CSS selector, so the pair works for a grid of expandable-cards, for a stack of accordions, or for the plain details elements of a page. Each disclosure is still an ordinary disclosure that opens and closes on its own; these two buttons only save a reader the clicking.

selector

A CSS selector matching the elements to open or close.

expand-label

The label of the button that opens them all.

collapse-label

The label of the button that closes them all.

classes

List of CSS classes for the pair.

(disclosure-controls #:selector "details.hg-expandable-card")

Procedure: sort-control KEY: #:target #:modes #:label #:aria-label #:classes #:label-classes ¶

Create a group of buttons that puts a tray in one of several orders.

The tray is the container whose identifier is target; its items are ordered by the data-* attribute each of them carries under the name of the mode asked for. The ordering is done in the browser by tray.js, which every build already ships, and it is the sort of a handful of rendered cards rather than of a data set: a page that has a real question to ask a server asks it with sortable-table and a URL instead.

A mode no item carries is the tray’s own order – the items return to the order the page wrote them in – so the button that restores it needs no attribute anywhere:

(sort-control #:target "cards"
              #:modes '((page . "Page order")
                        (title . "A to Z")))

target

The identifier of the container to reorder.

modes

A list of (mode . label) pairs, in the order the buttons should appear. Each mode names the data-* attribute to order by, and the first pair is the order the tray opens in.

label

The word shown before the buttons.

aria-label

The accessible name of the group of buttons.

classes

List of CSS classes for the group.

label-classes

List of CSS classes for the label.