|
|
# A17 JS Helpers
|
|
|
|
|
|
## What?
|
|
|
A collection of documented vanilla JS widgets. |
|
|
\ No newline at end of file |
|
|
|
|
|
A collection of documented vanilla JS widgets.
|
|
|
|
|
|
In the A17 Boilerplate, we use these as a dependency and install via [NPM](https://www.npmjs.com/package/@area17/a17-helpers). Alternatively you can copy the `src` folder and the `index.js` into a folder of your project and compile.
|
|
|
|
|
|
If installed via NPM, you'll want to import into your JavaScript by:
|
|
|
|
|
|
import helpers from '@area17/a17-helpers'
|
|
|
|
|
|
or, cherry pick individual helpers:
|
|
|
|
|
|
import { getCurrentMediaQuery, resized } from '@area17/a17-helpers'
|
|
|
|
|
|
## Tests
|
|
|
|
|
|
Writ tests in `test/test.js` file then run:
|
|
|
|
|
|
$ npm run compile
|
|
|
$ npm run test
|
|
|
|
|
|
## Available helpers
|
|
|
|
|
|
* [ajaxRequest](ajaxRequest) - Performs ajax requests
|
|
|
* [jsonpRequest](jsonpRequest) - Performs JSONP requests
|
|
|
* [cookieCreate](cookieCreate) - Creates a cookie with optional expiration date
|
|
|
* [cookieDelete](cookieDelete) - Deletes a named cookie
|
|
|
* [cookieRead](cookieRead) - Returns the value of a named cookie
|
|
|
* [copyTextToClipboard](copyTextToClipboard) - Copies text to clipboard
|
|
|
* [escapeString](escapeString) - Escapes and URL encodes a string
|
|
|
* [extend](extend) - Merges the contents of two objects together
|
|
|
* [fontObservers](fontObservers) - Adds a class and to the document and writes a cookie when fonts have loaded
|
|
|
* [getIndex](getIndex) - Returns the index of a node in a nodeList
|
|
|
* [getCurrentMediaQuery](getCurrentMediaQuery) - Returns the current media query in use by looking at the font-family of the head of the document and text in some pseudo content
|
|
|
* [getMetaContentByName](getMetaContentByName) - Returns a metatag content by name
|
|
|
* [getOffset](getOffset) - Get the current coordinates of a node, relative to the document
|
|
|
* [getUrlParameterByName](getUrlParameterByName) - Returns value of a parameter from a query string
|
|
|
* [keyCodes](keyCodes) - Abstraction of commonly used keycodes **NB: object not a function**
|
|
|
* [messages](messages) - Tracks site wide requests for messaging and displays a message on screen for a short amount of time
|
|
|
* [manageBehaviors](manageBehaviors) - inits and manages page data-behaviors on initial load and on page update
|
|
|
* [objectifyForm](objectifyForm) - Generates a JS Object out of a form
|
|
|
* [oritentationChangeFix](oritentationChangeFix) - Stopping iOS devices scaling up when rotating from portrait to landscape
|
|
|
* [resized](resized) - What to do on document resize, also checks if current media query has changed
|
|
|
* [setFocusOnTarget](setFocusOnTarget) - Sets focus on target node
|
|
|
* [scrollToY](scrollToY) - Animated scroll to position
|
|
|
* [sentEventToSegmentio](sentEventToSegmentio) - Tracks site wide requests for analytics events. Catches events before segment.io is ready, stores them and tries them again when it is ready. Follows conventions from segment.io: https://segment.com/docs/libraries/analytics.js/#selecting-integrations Checks a meta tag on init for identifying the user
|
|
|
* [triggerCustomEvent](triggerCustomEvent) - Triggers a custom event *NB: if using a library you might not need this*
|
|
|
* [turnObjectToQueryString](turnObjectToQueryString) - Takes an object and turns it into a query string
|
|
|
* [turnQueryStringToObject](turnQueryStringToObject) - Takes the passed url, or the current browser url and returns an object of query string parameters
|
|
|
* [updateParameter](updateParameter) - Updates a specified url parameter to a new value
|
|
|
|
|
|
## Developing
|
|
|
|
|
|
Feel free to add any vanilla JS helpers that will be common to many projects and save someone some time working them out in the future. The main aims are no dependencies, small elegant code and high potential sharing across sites.
|
|
|
|
|
|
### To add/update a helper
|
|
|
|
|
|
* Make your changes
|
|
|
* Bump the version number
|
|
|
* Test it, you may need to update the tests in /test/
|
|
|
* Update the [wiki](https://code.area17.com/a17/a17-helpers/wikis/home) document for it if required
|
|
|
* Tell @fe in the developers Hipchat room
|
|
|
* Have an 🍦 |