@evokegroup/js NPM

@evokegroup/js - Version 3

Version 3 is similar to version 2. Major differences include:

Source file origanization
Analytics overhaul
TypeScript definitions generated from JSDoc
Create your own bundle using node custom-bundle

Requires NodeJS v16+ to build and bundle

Use

To support asynchronous loading, it is recommended that you render the source of a few files in the head, load your bundle using async defer, and the wait for the Evoke.ready() Promise to resolve.

<html>
  <head>
    <script>
      (window.Evoke = window.Evoke || {}).Settings = {
        // Override default settings
      };
    </script>
    <script>
      /* If loading scripts asynchronously, render code directly in head for best results
       * /dist/index.min.js - Defines Evoke
       * /dist/ready.min.js - Defines Evoke.ready() asynchronous loading helper
       * /dist/browser/webp.min.js - For WebP support detection; best before the CSS
       * /dist/lazyload/index.min.js - Lazy loading
       * If you use the custom bundler, your scripts will be bundled in the proper order
       */
    </script>
  </head>
  <body>
    <h1>My Awesome Web Site</h1>
    <script>
      // Override default settings after Evoke has partially loaded
      Evoke.Settings.Console = Evoke.Settings.merge({
        enabled: location.hostname === 'production'
      }, Evoke.Settings.Console || {});
    </script>
    <!--
      /core.js - Should always be first in bundle
      * Some modules (i.e. Analytics) require jQuery or Evoke's $query DOM helper library
      * /jquery/evoke.$.js
      * OR
      * /query/index.js
      * /query/evoke.$.js
      Other scripts
      /ready-resolve.js - Always should be last when using Evoke.ready()
      If you use the custom bundler, your scripts will be bundled in the proper order
    -->
    <script src="evoke-v3-bundle.js" async defer></script>
    <script>
      Evoke.ready()
        .then(() => {
          // do something
        });
    </script>
  </body>
</html>

Production Scripts

Minified production scripts can be found in the dist folder.

Documentation

Markdown files are autogenerated from JSDoc comments and can be found in the docs folder.

TypeScript Types

TypeScript type definition files are autogenerated from JSDoc comments and can be found in the dist-types folder.

Custom Bundler

Create custom bundles using a browser-based UI. See the custom bundler readme.

Modules

Core

File	Documentation	Description
`index`	Markdown	Defines the `window.Evoke` namespace and base functionality.
`ready`	Markdown	Defines `Evoke.ready`, useful (but not required) for asynchronous script loading.
`core`	Markdown	Adds code `Evoke` functionality required by most modules.
`scrolling`	Markdown	Adds smooth scrolling functionality.
`utility`	Markdown	Utility functions.
`ready-resolve`		When using `Evoke.ready`, resolves the `Promise`. For be results make sure this is the last script included in your bundle.

Accessibility

File	Documentation	Description
`accessibility/index`	Markdown	Add accessibility support for modal dialogs.

AJAX

File	Documentation	Description
`ajax/index`	Markdown	AJAX helper.

Analytics

File	Documentation	Description
`analytics/index`	Markdown	Core analytics functionality.
`analytics/plugins/timer`	Markdown	Add timer functionality.
`analytics/plugins/legacy-v1`	Markdown	Add support for legacy evoke analytics tracking.
Video
`analytics/plugins/video`	Markdown	Add core video tracking functionality.
`analytics-video/azure`	Markdown	Implements Azure video tracking.
`analytics-video/vimeo`	Markdown	Implements Vimeo video tracking.
`analytics-video/wistia`	Markdown	Implements Wistia video tracking.
`analytics-video/youtube`	Markdown	Implements YouTube video tracking.
Platforms - Google
`analytics-google/index`	Markdown	Core Google Analytics functionality.
`analytics-google/ga4`		Send data to GA4.
`analytics-google/gtm`		Send data to GTM. See `analytics-google/gtm-container/*.json` container files.
`analytics-google/plugins/timer`	Markdown	Send analytics timer data to Google.
`analytics-google/plugins/video`	Markdown	Send analytics video data to Google.

Browser

File	Documentation	Description
`browser/index`	Markdown	Core browser detection functionality.
`browser/api`	Markdown	API for accessing browser detection data.
`browser/fingerprint`	Markdown	Generate a browser fingerprint. Does not require core browser functionality.
`browser/webp`	Markdown	WebP support detection. Standalone. Use in `head` for best results.

Casing

File	Documentation	Description
`casing/index`	Markdown	Manipulate the casing of a string.

Date/Time

File	Documentation	Description
`datetime/index`	Markdown	Date/time string formatting (english).
`datetime/locale-es`	Markdown	Spanish support.
`datetime/locale-fr`	Markdown	French support.

Forms

File	Documentation	Description
`forms/index`	Markdown	Base forms functionality.
`forms/inputs`	Markdown	Specialized form input formatting.
`forms/validation`	Markdown	Form validation.

Geolocation

File	Documentation	Description
`geolocation/index`	Markdown	Core geolocation functionality.
Evoke.Geolocation.geocode
`geolocation/arcgis-geocode`	Markdown	Implement `Evoke.Geolocation.geocode` using ArcGIS. Requires an ArcGIS API key.
`geolocation/census-geocode`	Markdown	Implement `Evoke.Geolocation.geocode` using Census.gov data.
Evoke.Geolocation.reverseGeocode
`geolocation/arcgis-reverse-geocode`	Markdown	Implement `Evoke.Geolocation.reverseGeocode` using ArcGIS.

Google

File	Documentation	Description
`google/recaptcha`	Markdown	Add Google reCAPTCHA support.

jQuery

File	Documentation	Description
`jquery/evoke.$`	Markdown	Define `Evoke.$` for use in various modules.

Lazy Loading

File	Documentation	Description
`lazyload/index`	Markdown	Add lazy loading functionality.

Messages

File	Documentation	Description
`message-listener/index`	Markdown	Listen for messages sent using `window.postMessage`.

Network

File	Documentation	Description
`network/index`	Markdown	Core network functionality.
`network/cloudflare`	Markdown	Get client-side IP information using Cloudflare.
`network/ipify`	Markdown	Get client-side IP information using ipify.

$query

A lighter weight, less robust jQuery alternative.

File	Documentation	Description
`query/index`	Markdown	Define `$query`.
`query/evoke.$`	Markdown	Define `Evoke.$` for use in various modules.

Screenshots

File	Documentation	Description
`screenshots/index`	Markdown	Integrate with the Evoke screenshooter.
`screenshots/ui`	Markdown	Add screenshooter UI elements.

Social

File	Documentation	Description
`social/index`	Markdown	Social network sharing helper.

Storage

File	Documentation	Description
`storage/index`	Markdown	Browser storage access helper.
`storage/cookie`	Markdown	Add browser cookie access.

String Generator

File	Documentation	Description
`string-generator/index`	Markdown	Generate random strings using specified characters and formats.
`string-generator/generate-address`	Markdown Generate random address data for testing.

Templates

File	Documentation	Description
`template/index`	Markdown	Render templated HTML.

UI

File	Documentation	Description
`ui/accordion`	Markdown	Create accordions.
`ui/modal`	Markdown	Create a modal dialog.

USPS

File	Documentation	Description
`usps/index`	Markdown	Validate addressed using the USPS API. Requires an API key.

Video

File	Documentation	Description
`video/index`	Markdown	Video embedding and control core functionality.
`video/azure`	Markdown	Support Azure hosted videos.
`video/vimeo`	Markdown	Support Vimeo hosted videos.
`video/wistia`	Markdown	Support Wistia hosted videos.
`video/youtube`	Markdown	Support YouTube hosted videos.