Javascript Libraries

Included Libraries (toolshed.libraries.yml):

Below is a quick list of the Javascript libraries included with Toolshed. This list only includes the libraries that a developer is expected to use when building new functionality or other modules, and does not include all the libraries.

• toolshed/screen-events - Registers a common onResize, onScroll and on breakpoint events.
• toolshed/dock - Library for docking of toolbars to the window.
• toolshed/pager - Interactive pager for controlling navigation of items.
• toolshed/behavior.accordions - Behavior and library for creating simple accordions.

General Configuration:

General Javascript library settings can be configured at Administer > Configuration > User Interface > Toolshed JS and allows you to set the library assets to be included as minimized (the default) or as development assets (non-minimized version of the Javascript). This form also allows the controlling the debounce when listening for screen events and control of the Drupal behaviors for widgets such as the toolshed/behavior.accordions library. More details about the specific Javascript libraries are provided on their respective documentation pages.

Updating Libraries and Builds:

The libraries are written to the ESLint standard as of Drupal 8.4, and has a .eslintrc file at the base of the project. The Javascript is written with ES6 standards (original source files in ./es6 folder) and is transpiled to the ./js folder using Gulp tasks. Any updates should be written to relative source files in the ./es6 folder and continue to pass the ESLint standards defined by the project.

You may use the included Gulp build tasks. The builds have been created and tested with the Yarn package manager and the following step assume this (NPM would also work similarly).

yarn install
yarn start build

The project already includes a yarn.lock and the packages.json files.

The package.json file defines four Gulp build script commands:

• start - Lints and builds the library assets with developer settings (sourcemaps).
• lint - Only runs the lint checks on the source files.
• build - Transpiles the assets only with production settings.
• watch - Uses Gulp watch to monitor the source folders and lints, and rebuilds them with developer settings (sourcemaps).

All builds product a minimized and non-minimized version of the assets, so that the Toolshed module can reference either version depending on the configured asset settings.

Using these builds is not required, however, the output should be the same. Any updates or builds should included a minimized and non-minimized version of the assets, and have checked the source files for any linting errors with the included rules.