Using JavaScript API in Drupal 8 + Tutorial

Image on Sprout Social

Drupal 8’s JavaScript handling is a conceptual extension of D7’s hook_library()and the D7 Libraries API Module.

Libraries are defined in YAML format. You can define one or more libraries in each file.

Define a Library

Create or edit the <some-file-name>.libraries.yml file that goes in the root of your theme or module:

this-lib-name:
 js:
 js-path/my-theme.js: {}

some-file-name can be any name really, but should be the name of your theme or module.

Library Options

You can optionally provide a version number per library, but Drupal doesn’t use it for anything:

this-lib-name:
  version: "1.0.1"

You can also define dependencies per library, which are followed:

this-lib-name:
  dependencies:
    - core/jquery

D8 by default loads JS into the footer; to load to the header:

this-lib-name:
  header: true

Tutorial

I will be assuming you already have a working Drupal 8 website.

CREATING THE MODULE DIRECTORY

Defining Parameters

MODULE INFORMATION

First, parameters such as title and description need to be set. These keys will be defined in the file hello_world.info.yml. Drupal 8 uses YAML (YAML Ain’t Markup Language) for these types of files. Create this file and enter these definitions:

name: Hello World
type: module
description: Say Hello World
package: Custom
core: 8.x

You will now be able to see the module listed under the Custom package category:

Let’s enable this module:

MODULE ROUTES

Next, we will need to tell Drupal where the module can be accessed. This is done by creating a route for our module. Create the file hello_world.routing.yml and enter the following parameters:

hello_world:
    path: /hello/world
defaults:
    _controller:     Drupal\hello_world\Controller\HelloWorldController::hello
    requirements:
        _permission: ‘access content’

Your current directory structure should now look like this.

Using JavaScript API

Add the following code to your <some-file-name>.libraries.yml :

example:
  version: 1.x
  js:    
      js/example.js: {}                                                      dependencies:
    - core/jquery
    - core/drupalSettings

Now add the following code to js/example.js

Get Anonymous Hackers’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

<script src=”https://gist.github.com/anonymousxthexgreat/da20fa4bedc3e487bf5fcc2cd864f5b7.js"></script>

You can change the values accordingly. The calculator which I made with the above JS code is shown here →

Loading External JavaScript

External “libraries” still have to be defined inside Drupal libraries*.

this-lib-name:
  js:
    https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/
      angular.js: { type: external }

Since Drupal will minify, if it already is, let D know:

{ type: external, minified: true }

If attributes are needed in the resulting <script> line:

{ type: external , attributes: { defer: true, async: true } }

*I “broke” the code lines for readability, but it’s not legal.

JavaScript Settings

To add “computed” settings or configuration, first you have to define a dependency on core/drupalSettings.

this-lib:
  dependencies:
    - core/drupalSettings

Then…

function mytheme_preprocess_page(&$vars) {
  $vars['#attached']['library'][] = 'mytheme/this-lib';
  $vars['#attached']['drupalSettings']['mytheme']
    ['this-lib']['some-prop'] = $some_var;
}

Then access the some-prop setting in JS with:

console.log(drupalSettings.mytheme.this-lib.some-prop);