Progressive enhancement, one component at a time

Install

npm install @parallelogram-js/core

Start the framework

Register the components your pages use, and the framework loads each one the first time a page contains it.

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create({
  pageManager: { containerSelector: '[data-view="main"]' },
});

app.components
  .add('p-modal', () => import('@parallelogram-js/core/components/PModal'))
  .add('[data-toggle]', () => import('@parallelogram-js/core/components/Toggle'));

app.run();

The router is optional, and off unless you ask for it. Add router: {} and links swap the element marked data-view="main" in place instead of reloading the page, with the components inside it mounting and unmounting as it changes. Leave it out and every link is an ordinary link.

Enhancement components that need styles use the package stylesheet, @import '@parallelogram-js/core/styles';, or one file per component.

Components

An enhancement is behaviour added to markup you already have, through a data attribute: the element works without it and does more with it. A web component is an element of its own, which the browser upgrades when its module arrives. Each page below says which it is, and what its markup does before the module loads.

• Enhancement Accordion Animate native details elements as they open and close
• Enhancement CopyToClipboard Copy text to the clipboard from a button
• Enhancement DataTable Sorting, filtering and pagination for an existing table
• Enhancement DeferTracker Load third-party trackers after the first interaction, described by inert JSON
• Enhancement Dropdown A menu that opens beside its button, from markup on the page or from a template filled in per button
• Enhancement FormEnhancer Accessible error messages for the browser's own form validation
• Enhancement Lazysrc Lazy image loading built on the browser's own loading="lazy"
• Enhancement Lightbox Image gallery viewer shown in a native modal dialog
• Enhancement Modal Buttons that open a <p-modal>
• Web component <p-datetime> Date, time and date range picker with a calendar dialog
• Web component <p-modal> Modal dialog built on the native <dialog> element
• Web component <p-select> A select that can be searched, built as an editable combobox
• Web component <p-toasts> A stack of toast notifications
• Web component <p-uploader> Upload, order and describe a set of files
• Enhancement Scrollhide Hide an element while the page scrolls down and show it again on scrolling up
• Enhancement Scrollreveal Reveal elements as they scroll into view, one after another
• Enhancement SelectLoader Load an HTML fragment into a target when a select's choice changes
• Enhancement Tabs Tabbed panels built from a list of tab buttons or in-page links
• Enhancement Toast Show a toast when a trigger is clicked
• Enhancement Toggle Show and hide a target element from one or more trigger buttons
• Enhancement Tooltip A short description of a control, shown beside it while the pointer rests on it or it has focus
• Enhancement Videoplay Play videos as they scroll into view and pause them as they leave

About these pages

Each component page is generated from the contract that sits beside the component's source, and a test checks every contract against the code. The examples are live: change their attributes, watch the events they send and copy the markup. This site runs on Parallelogram too, so following a link here uses the framework's own router.