Repository URL to install this package:
|
Version:
2.0.2 ▾
|
| config |
| src |
| templates |
| tests |
| README.md |
| cohesion_javascript_element.info.yml |
| cohesion_javascript_element.module |
| composer.json |
Cohesion Javascript Element
Adds a custom Custom Javascript Cohesion element that allows component developers to attach javascript to a component without having touch the code base.
Installation
composer require drupal/cohesion_javascript_element
Features include:
- Add custom JS code
- Choose whether you want the script to appear in the
<head>or in the footer below the closing<body>tag - Pass information to front end libraries leveraging the drupalSettings global object
- Attach libraries the script depends on from the
*.libraries.ymlfiles provided by modules and/or themes.
Fields
| Name | Field Type | Description |
|---|---|---|
Javascript |
textarea |
JS code |
Scope |
select |
Determine placement of the <script> tag in the <head> or footer of the page below the closing </body> tag. |
Add jQuery |
toggle |
Add jQuery as a dependency to make sure it's loaded before the script |
Additional Libraries |
textarea |
A list of libraries that will be loaded before the javascript is ran. Enter a library from any *.libraries.yml file. One per line. |
ID |
textfield |
This is a unique id that will be used for the drupalSettings field. If none is provided, then the custom cohesion class will be used. |
drupalSettings |
textarea |
This should be a valid JSON object which will then be passed to the front end on the window.drupalSettings object. |
FAQs
What does drupalSettings do?
If you need to pass data from Drupal to the front end, you'll use the drupalSettings field to do just that. For instance, say we had a component that had a color field and a title field and we wanted to pass that information to a React app. Well we could leverage Cohesion's Field tokens and add them to the JSON object { "color": "[Field 1]", "title": "[Field 2]" } to our drupalSettings field. Then add woop as the ID. If we were to check the page that contained the component we should be able to run the following:
console.log(drupalSettings.woop)
// returns { "color": "blue", "title": "Hello there" }