Open a card from the credit

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

The code for what is on screen

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.

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.

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

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());

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.

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 shows the cards open.

Next, set a credit in layers.