# Open a card from the credit

*nods · The package*

A click on the credit opens a card. The package handles focus and placement, and you choose what the card looks like.

```js
import { ROLES } from '@nodsto/record';
import { attachPanel } from '@nodsto/credit/panel';
import '@nodsto/credit/panel.css';
import { panelDrafting } from './nods/panel-drafting/panel-drafting.js';
import './nods/panel-record/panel-record.css';
import './nods/panel-drafting/panel-drafting.css';
import { record } from './record.js';

const root = document.querySelector('.nods');
const panel = document.createElement('div');
panel.className = 'nods-panel';
panel.innerHTML = panelDrafting(record, { party: 'Marigold', page: 'https://nods.to/demo/marigold' }, { ROLES });

const card = attachPanel(root, { panel, label: 'Kiln credits', disclosure: 'Credits' });
```

## Copy a card into your project.

A card is one of the templates: a function that returns markup, and a stylesheet. The makers’ cards are drawn over the plain card’s sheet, so copy `panel-record` with the card you choose.

Terminal

```
npm install @nodsto/templates
mkdir -p src/nods
cp -R node_modules/@nodsto/templates/panel-record src/nods/
cp -R node_modules/@nodsto/templates/panel-poster src/nods/
```

## Attach the card to the credit.

`attachPanel` makes the button that opens the card, so a page whose script never runs has a credit and no dead control. It handles focus, Escape, a click outside and where the card is placed. The template draws the card and leaves all of that alone.

It returns a controller with `open()`, `close()`, `toggle()`, `destroy()` and `state`.

## Pass a card what it is to say.

A maker’s card takes `party`, the name of the maker it is for on a site several people made, and `page`, the address of that maker’s page. `panel-cast` is for everybody at once: each maker has a card of their own, laid one on the next under a band that names the project. Its `tints` give a maker’s card its colour, its `marks` keep the line style a maker’s name has, and every card carries `data-maker` for a rule of yours to hold on to.

| Card | Options |
|---|---|
| `panel-record` | None |
| `panel-poster` | `party, line, ticker, page, seal, id` |
| `panel-groove` | `party, page, rim, side, id` |
| `panel-listing` | `party, page, file` |
| `panel-foil` | `party, page, line` |
| `panel-swatches` | `party, page, swatches` |
| `panel-drafting` | `party, label, page` |
| `panel-loop` | `party, page` |
| `panel-cast` | `tints, marks, hosts, page` |

## Pick the surface a click opens.

A configuration names one of six reveals. The first two attach no panel and need no script. The others are the `reveal` option of `attachPanel`. A click always opens the card, and `hover: true` lets a pointer open it too.

| Reveal | A click opens | Script |
|---|---|---|
| `none` | Nothing. The names link out. | None |
| `page` | The record page. The control is a link. | None |
| `card` | A card placed against the control, flipped and kept inside the window. | The panel script |
| `strip` | A band across one edge of the window, as tall as its content. | The panel script |
| `sheet` | A panel from one edge, up to a maximum height, scrolling inside. | The panel script |
| `dialog` | The whole window, over a backdrop. | The panel script |

## Stage the entrance and the exit in CSS.

The script writes the card’s state as attributes, and your stylesheet hangs an animation on them. Declare how long the exit takes in `--nods-exit` and the script keeps the card painted for that long. A visitor who asks for reduced motion sees the card leave at once.

site.css

```
.nods-panel[data-nods-open] .mine { animation: arrive 500ms both; }
.nods-panel[data-nods-closing] .mine { animation: leave 240ms both; }
.nods-panel:has(.mine) { --nods-exit: 240ms; }
```

| Attribute | On | When |
|---|---|---|
| `data-nods-open` | The panel | While it is open. An entrance keyed to it plays once. |
| `data-nods-closing` | The panel | While it leaves. An exit keyed to it plays for the length of --nods-exit. |
| `data-nods-state` | The panel | Always, as closed, open or closing. |
| `data-nods-flip` | The panel | On a card, as above or below, for the side of the control it was placed on. |
| `data-nods-active` | The credit | While its card is open. The line styles answer it. |

## Listen for the card opening.

Five events are dispatched on the credit. They bubble, so a footer or `document` hears them. Each carries the panel, the button and a reason, which is one of `click, hover, escape, outside, focus, api`.

site.js

```
document.addEventListener('nods:open', (event) => {
  const { panel, trigger, reason } = event.detail;
});

document.addEventListener('nods:beforeopen', (event) => event.preventDefault());
```

| Event | When | preventDefault() |
|---|---|---|
| `nods:beforeopen` | The card is about to open. | Stops it |
| `nods:open` | The card is open and its entrance starts. | Has no effect |
| `nods:beforeclose` | The card is about to close. | Stops it |
| `nods:close` | The card is leaving and its exit starts. | Has no effect |
| `nods:closed` | The exit is over and the card is out of the way. | Has no effect |

## Colour a card with its own tokens.

Each card’s colours are tokens of its own, so recolouring a card leaves the line in the footer as it was.

| Card | What it is | Background, text, accent |
|---|---|---|
| `panel-record` | The plain card, with the project, its credits and two actions. | --nods-panel-bg #ffffff--nods-panel-fg #14171a |
| `panel-poster` | The name as wide as the sheet, a ticker along the foot and a seal on the edge. | --po-bg #111315--po-ink #f4f1ea |
| `panel-groove` | A sleeve in the maker’s colour with the record half out, turning. | --gv-sleeve #e8401c--gv-fg #190d09--gv-label-bg #efe8d9 |
| `panel-listing` | The credit’s own markup on green-bar listing paper. | --lp-paper #f9f9f2--lp-ink #111a12--lp-accent #17663a |
| `panel-foil` | A tall dark card with foil across it, which tilts towards the pointer. | --fo-bg #0e0e12--fo-ink #f5f3ee |
| `panel-swatches` | The project’s palette as a fan of chips, with the maker’s cover in front. | --sw-cover-bg #fbf9f3--sw-cover-ink #14171a |
| `panel-drafting` | The name constructed on ruled lines, under a dimension that says what the maker is. | --df-bg #103a8c--df-ink #eaf2ff |
| `panel-loop` | A capsule with the name in it and a wave going through the name. | --lo-bg #3b1ee0--lo-ink #ffffff |
| `panel-cast` | Everybody on a site, each on a card of their own, held by one band. | --ct-bg #0b0b0c--ct-ink #f6f4ee |

These nine are the cards nods.to serves. The package holds 11 templates in all, and `manifest.json` lists the tokens of each. The [home page](https://nods.to/) shows the cards open.

Next, [set a credit in layers](https://docs.nods.to/config/).

---
https://docs.nods.to/cards/ · nods 0.1.0 · MIT