Patterns Scripts

A set of common utility ES modules to help keep scripting DRY and support accessibility. Used along with @nycopportunity/pttrn-cli projects.

Installation

$ npm install @nycopportunity/pttrn-scripts

Import ES modules from the source.

import '@nycopportunity/pttrn-scripts/src/{{ module }}/{{ module }}'

new {{ Module }}();

In most cases implementation is done by adding a data-js attribute to the appropriate element. Configuration is often handled through other data and aria attributes but advanced customization can also be achieved by setting module properties pre or post instantiation. Where utilities are listening to click events the listeners are added to the body and trigger the script when the click target selector matches the utility settings.

<{{ element }} data-js="{{ script }}"> My script enhanced element </{{ element }}>

Some utilities support scripting only and do not have HTML counterparts. See documentation for more details.

Docs

Copy - A wrapper around the Navigator Clipboard API that creates a click to copy to clipboard button
Dialog - A utility for creating modal or non-modal dialogs
Direction - A utility for setting the reading direction of the document and saves the user preference to local storage
Forms - Form validation and other form utilities
Google Translate Element - Custom Google Translate Selector
Icons - Fetches an svg sprite and adds it to the DOM
Localize - Retrieve localized strings from a global constant
LZW - Compression algorithm for encoding strings of data
Newsletter - Enhances an embedded Mailchimp form with validation
Observe - A wrapper around the Intersection Observer API that creates an scroll watch on a scrollable element
Spinner - Generic process or loading spinner animation
Themes - A CSS theme cycling utility that toggles the document classname and saves the user preference to local storage
Toggle - Multi-purpose element visibility toggle
Tooltips - An accessible tooltip toggle and positioning
Track - Auto click tracking for Google Analytics and Webtrends
Web Share - A wrapper around the Navigator Share API that creates a web sharing button
Window Vh - Sets the CSS Custom Property --100vh to the viewport's true height as a workaround for iOS 100vh value

cityofnewyork / patterns-scripts Goto Github PK