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