drupal javascript for developers
TRANSCRIPT
Drupal Javascript for developers
Whoami?
• Călin Marian
• Lead developer @ Dream Production
• d.o: mariancalinro
• @mariancalinro
• github.com/calin-marian
What will we cover?• Adding JS to the page, both at module and theme level
• Writing Drupal aware JS code
• Libraries management
• Ajax framework
• Drupal JS functions
• Drupal JS theme functions
• If we have enough time … some Drupal 8 changes
Adding JS to page• declare it in the .info file of your module
scripts[] = path/to/component.js
• Using drupal_add_js()drupal_add_js(drupal_get_path(‘module’, ‘mymodule’) . ‘/path/to/component.js’);
• attach it to a render array$build[‘myelement’] = array( ‘#theme’ => ‘my_theme’, ‘#myvar’ => $myvar, ‘#attached’ => array( ‘js’ => drupal_get_path(‘module’, ‘mymodule') . ‘/path/to/component.js’ ),);
Adding JS to page• declare it in the .info file of your module
scripts[] = path/to/component.js
• Using drupal_add_js()drupal_add_js(drupal_get_path(‘module’, ‘mymodule') . ‘/path/to/component.js’);
• attach it to a render array$build[‘myelement’] = array( ‘#theme’ => ‘my_theme’, ‘#myvar’ => $myvar, ‘#attached’ => array( ‘js’ => drupal_get_path(‘module’, ‘mymodule') . ‘/path/to/component.js’ ),);
Adding JS to page• declare it in the .info file of your module
scripts[] = path/to/component.js
• Using drupal_add_js()drupal_add_js(drupal_get_path(‘module’, ‘mymodule') . ‘/path/to/component.js’);
• attach it to a render array$build[‘myelement’] = array( ‘#theme’ => ‘my_theme’, ‘#myvar’ => $myvar, ‘#attached’ => array( ‘js’ => drupal_get_path(‘module’, ‘mymodule') . ‘/path/to/component.js’ ),);
Adding JS to page• declare it in the .info file of your module
scripts[] = path/to/component.js
• Using drupal_add_js()drupal_add_js(drupal_get_path(‘module’, ‘mymodule') . ‘/path/to/component.js’);
• attach it to a render array$build[‘myelement’] = array( ‘#theme’ => ‘my_theme’, ‘#myvar’ => $myvar, ‘#attached’ => array( ‘js’ => drupal_get_path(‘module’, ‘mymodule') . ‘/path/to/component.js’ ),);
Adding JS to page
• for a theme, there are 2 ways to add a JS file to the page:
• declare it in the .info file of your theme, same as modulescripts[] = path/to/component.js
• Using drupal_add_js() from template.php, in the hook_preprocess_html() function
Adding JS to page
• for a theme, there are 2 ways to add a JS file to the page:
• declare it in the .info file of your theme, same as modulescripts[] = path/to/component.js
• Using drupal_add_js() from template.php, in the hook_preprocess_html() function
Adding JS to page
• for a theme, there are 2 ways to add a JS file to the page:
• declare it in the .info file of your theme, same as modulescripts[] = path/to/component.js
• Using drupal_add_js() from template.php, in the hook_preprocess_html() function
Closures
(function ($) {
// Code that uses jQuery's $ can follow here.
$(‘a’).on(‘click’, function(event){
event.preventDefault();
alert(‘Links are disabled, you are trapped on this
page. Hahahaha!!!’);
});
var window = "Whoops, at least I only broke my code.";
}(jQuery));
Closures
(function ($) {
// Code that uses jQuery's $ can follow here.
$(‘a’).on(‘click’, function(event){
event.preventDefault();
alert(‘Links are disabled, you are trapped on this
page. Hahahaha!!!’);
});
var window = "Whoops, at least I only broke my code.";
}(jQuery));
Closures
(function ($) {
// Code that uses jQuery's $ can follow here.
$(‘a’).on(‘click’, function(event){
event.preventDefault();
alert(‘Links are disabled, you are trapped on this
page. Hahahaha!!!’);
});
var window = "Whoops, at least I only broke my code.";
}(jQuery));
Settings<?php
drupal_add_js(array(
'myModule' => array(
'key' => 'value'
)
), 'setting');
==================================
(function($){
console.log(Drupal.settings.myModule.key); // logs 'value'
})(jQuery)
Settings<?php
drupal_add_js(array(
'myModule' => array(
'key' => 'value'
)
), 'setting');
==================================
(function($){
console.log(Drupal.settings.myModule.key); // logs 'value'
})(jQuery)
Settings<?php
drupal_add_js(array(
'myModule' => array(
'key' => 'value'
)
), 'setting');
==================================
(function($){
console.log(Drupal.settings.myModule.key); // logs 'value'
})(jQuery)
Behaviors
• Drupal’s way of dealing with attaching and detaching functionalities to dynamic content.
• Invoked by Drupal automatically when content is added or removed to the page by the Ajax framework
• Objects in the namespace Drupal.behaviors that have the methods attach and detach - detach is optional if you do not need to run some code when content is removed from page.
Behaviors(function($){
Drupal.behaviors.myComponent = {
attach: function(context, settings) {
// Make your DOM manipulations and attach your
// event handlers for your component.
},
detach: function(context, settings) {
// This is optional, use it if your component needs to destroy
// variables to free memory, or do other tasks when the content
// your component is attached to is removed from the DOM.
}
}
})(jQuery)
Behaviors(function($){
Drupal.behaviors.myComponent = {
attach: function(context, settings) {
// Make your DOM manipulations and attach your
// event handlers for your component.
},
detach: function(context, settings) {
// This is optional, use it if your component needs to destroy
// variables to free memory, or do other tasks when the content
// your component is attached to is removed from the DOM.
}
}
})(jQuery)
Behaviors(function($){
Drupal.behaviors.myComponent = {
attach: function(context, settings) {
// Make your DOM manipulations and attach your
// event handlers for your component.
},
detach: function(context, settings) {
// This is optional, use it if your component needs to destroy
// variables to free memory, or do other tasks when the content
// your component is attached to is removed from the DOM.
}
}
})(jQuery)
Behaviors(function($){
Drupal.behaviors.myBxSlider = {
attach: function(context, settings) {
var options = settings.myBxSlider,
Drupal.myBxSlider = $(options.sliderSelector, context)
.bxSlider(options.sliderOptions);
},
detach: function(context, settings) {
delete Drupal.myBxSlider;
}
}
})(jQuery)
Behaviors(function($){
Drupal.behaviors.myBxSlider = {
attach: function(context, settings) {
var options = settings.myBxSlider,
Drupal.myBxSlider = $(options.sliderSelector, context)
.bxSlider(options.sliderOptions);
},
detach: function(context, settings) {
delete Drupal.myBxSlider;
}
}
})(jQuery)
Behaviors• When adding content to the page, call Drupal.attachBehaviors on
the content. This allows other components to attach themselves to the content. The Ajax framework does this for you automatically.
• Example:Drupal.attachBehaviors(insertedContent);
• Bad example:Drupal.attachBehaviors();
• When run without context, the full page is the context. This means behaviors’ attach methods will run more than once, on the same content.
Behaviors• When adding content to the page, call Drupal.attachBehaviors on
the content. This allows other components to attach themselves to the content. The Ajax framework does this for you automatically.
• Example:Drupal.attachBehaviors(insertedContent);
• Bad example:Drupal.attachBehaviors();
• When run without context, the full page is the context. This means behaviors’ attach methods will run more than once, on the same content.
Drupal once• To protect yourself against having your code run twice on the same
content, Drupal implements a jQuery method, called once:$(selector).once(stringKey, handler)
• The handler is only called once, no mater how many times the method is invoked on the same content.
• It works by adding a class on the content, and checking for that class when it’s invoked.
• Alternative usage:$(selector).once(‘myComponent’).wrap(‘<div class=“myWrapper”></div>’);
Drupal once(function($){
Drupal.behaviors.myExample = {
attach: function(context, settings) {
$(‘a’, context)
.once(‘notification’)
.click(function(event){
event.preventDefault();
alert(‘Links are disabled, you are trapped on this
page. Hahahaha!!!’);
});
}
}
})(jQuery);
Drupal once(function($){
Drupal.behaviors.myExample = {
attach: function(context, settings) {
$(‘a’, context)
.once(‘notification’)
.click(function(event){
event.preventDefault();
alert(‘Links are disabled, you are trapped on this
page. Hahahaha!!!’);
});
}
}
})(jQuery);
Drupal once(function($){
Drupal.behaviors.myExample = {
attach: function(context, settings) {
$(‘a’, context).once(‘notification’, function(){
$(this).click(function(event){
event.preventDefault();
alert(‘Links are disabled, you are trapped on this
page. Hahahaha!!!’);
});
});
}
}
})(jQuery);
Libraries
• Allows you to add all the JavaScript and CSS of one component at once
• Example:drupal_add_library('system', 'ui.accordion');$build['#attached']['library'][] = array('system', ‘ui.accordion');
• hook_library - to define your library
• hook_library_alter - to modify libraries provided by other modules
Libraries
• Allows you to add all the JavaScript and CSS of one component at once
• Example:drupal_add_library('system', 'ui.accordion');$build['#attached']['library'][] = array('system', ‘ui.accordion');
• hook_library - to define your library
• hook_library_alter - to modify libraries provided by other modules
Libraries
• Allows you to add all the JavaScript and CSS of one component at once
• Example:drupal_add_library('system', 'ui.accordion');$build['#attached']['library'][] = array('system', ‘ui.accordion');
• hook_library - to define your library
• hook_library_alter - to modify libraries provided by other modules
function system_library() {
// ...
$libraries['ui.accordion'] = array(
'title' => 'jQuery UI: Accordion',
'website' => 'http://jqueryui.com/demos/accordion/',
'version' => '1.7.2',
'js' => array(
'misc/ui/ui.accordion.js' => array(),
),
'css' => array(
'misc/ui/ui.accordion.css' => array(),
),
'dependencies' => array(
array('system', 'ui'),
),
);
return $libraries;
}
function system_library() {
// ...
$libraries['ui.accordion'] = array(
'title' => 'jQuery UI: Accordion',
'website' => 'http://jqueryui.com/demos/accordion/',
'version' => '1.7.2',
'js' => array(
'misc/ui/ui.accordion.js' => array(),
),
'css' => array(
'misc/ui/ui.accordion.css' => array(),
),
'dependencies' => array(
array('system', 'ui'),
),
);
return $libraries;
}
function system_library() {
// ...
$libraries['ui.accordion'] = array(
'title' => 'jQuery UI: Accordion',
'website' => 'http://jqueryui.com/demos/accordion/',
'version' => '1.7.2',
'js' => array(
'misc/ui/ui.accordion.js' => array(),
),
'css' => array(
'misc/ui/ui.accordion.css' => array(),
),
'dependencies' => array(
array('system', 'ui'),
),
);
return $libraries;
}
function system_library() {
// ...
$libraries['ui.accordion'] = array(
'title' => 'jQuery UI: Accordion',
'website' => 'http://jqueryui.com/demos/accordion/',
'version' => '1.7.2',
'js' => array(
'misc/ui/ui.accordion.js' => array(),
),
'css' => array(
'misc/ui/ui.accordion.css' => array(),
),
'dependencies' => array(
array('system', 'ui'),
),
);
return $libraries;
}
Ajax Framework
• Ajax is a technique that updates content on the page from the server without page refresh.
• Drupal’s Ajax framework helps you with this task.
• It implements more than a few commands that you can trigger from the response of the Ajax call.
• Does some boilerplate code.
Ajax Framework• ajax_command_insert()
• ajax_command_before()
• ajax_command_after()
• ajax_command_replace()
• ajax_command_invoke()
• ajax_command_settings()
• For the full list, google “Drupal Ajax framework commands”
Ajax Framework• A php array such as...
array( 'command' => 'insert', 'method' => 'append', 'selector' => '#my-div', 'data' => '<div>Some new content</div>',)
• ... will turn into this object received on the js side: { command: insert, method: append, selector:#my-div, data: '<div>Some new content</div>' }
• ... a clear instruction for ajax.js to follow
Ajax Framework• To implement new command in js:
Drupal.ajax.prototype.commands.myCommand = function (ajax, response, status) { // in response you have an object with the properties // sent from php, such as myvar, selector, data.}
• Then in php, you can return the following array from an Ajax call:array( 'command' => 'myCommand', 'myvar' => 'myvalue', 'selector' => '#my-div', 'data' => '<div>Some new content</div>',)
Ajax FrameworkExample
Ajax Framework
• You print somewhere in the page this link:array( '#type' => 'link', '#title' => t('Ajax Link'), '#href' => 'my-ajax-test/nojs', '#suffix' => '<div id="ajax-display"></div>', '#ajax' => array( 'effect' => 'fade', ), );
Ajax Framework
• You print somewhere in the page this link:array( '#type' => 'link', '#title' => t('Ajax Link'), '#href' => 'my-ajax-test/nojs', '#suffix' => '<div id="ajax-display"></div>', '#ajax' => array( 'effect' => 'fade', ), );
Ajax Framework
• You print somewhere in the page this link:array( '#type' => 'link', '#title' => t('Ajax Link'), '#href' => 'my-ajax-test/nojs', '#suffix' => '<div id="ajax-display"></div>', '#ajax' => array( 'effect' => 'fade', ), );
Ajax Framework
• Alternative way:array( '#type' => 'link', '#title' => t('Ajax Link'), '#href' => 'my-ajax-test/nojs', '#suffix' => '</div><div id="ajax-display"></div>', '#attributes' => array( 'class' => array(‘use-ajax’), ), );
Ajax Framework
• You need to define a new menu item:$items['my-ajax-test/%'] = array( 'title' => 'Ajax test callback', 'type' => MENU_CALLBACK, 'page callback' => 'ajax_link_callback', 'page arguments' => array(1), 'access arguments' => array('access content'), );
Ajax Framework
• You need to define a new menu item:$items['my-ajax-test/%'] = array( 'title' => 'Ajax test callback', 'type' => MENU_CALLBACK, 'page callback' => 'ajax_link_callback', 'page arguments' => array(1), 'access arguments' => array('access content'), );
Ajax Framework• Then, define the callback for that menu item:
function ajax_link_callback($ajax) { $time = t('The current time is: !time', array('!time' => date('Y-m-d H:i:s')));
if ($ajax == 'ajax') { $commands = array(); $commands[] = ajax_command_replace( '#ajax-display', "<div id='ajax-display'>" . $time . "</div>"); ajax_deliver(array( '#type' => ‘ajax', '#commands' => $commands)); } else { return array('#markup' => $time); }}
Ajax Framework• Then, define the callback for that menu item:
function ajax_link_callback($ajax) { $time = t('The current time is: !time', array('!time' => date('Y-m-d H:i:s')));
if ($ajax == 'ajax') { $commands = array(); $commands[] = ajax_command_replace( '#ajax-display', "<div id='ajax-display'>" . $time . "</div>"); ajax_deliver(array( '#type' => ‘ajax', '#commands' => $commands)); } else { return array('#markup' => $time); }}
Ajax Framework• Then, define the callback for that menu item:
function ajax_link_callback($ajax) { $time = t('The current time is: !time', array('!time' => date('Y-m-d H:i:s')));
if ($ajax == 'ajax') { $commands = array(); $commands[] = ajax_command_replace( '#ajax-display', "<div id='ajax-display'>" . $time . "</div>"); ajax_deliver(array( '#type' => ‘ajax', '#commands' => $commands)); } else { return array('#markup' => $time); }}
Ajax Framework• Then, define the callback for that menu item:
function ajax_link_callback($ajax) { $time = t('The current time is: !time', array('!time' => date('Y-m-d H:i:s')));
if ($ajax == 'ajax') { $commands = array(); $commands[] = ajax_command_replace( '#ajax-display', "<div id='ajax-display'>" . $time . "</div>"); ajax_deliver(array( '#type' => ‘ajax', '#commands' => $commands)); } else { return array('#markup' => $time); }}
Ajax Framework• Then, define the callback for that menu item:
function ajax_link_callback($ajax) { $time = t('The current time is: !time', array('!time' => date('Y-m-d H:i:s')));
if ($ajax == 'ajax') { $commands = array(); $commands[] = ajax_command_replace( '#ajax-display', "<div id='ajax-display'>" . $time . "</div>"); ajax_deliver(array( '#type' => ‘ajax', '#commands' => $commands)); } else { return array('#markup' => $time); }}
Ajax Framework• Then, define the callback for that menu item:
function ajax_link_callback($ajax) { $time = t('The current time is: !time', array('!time' => date('Y-m-d H:i:s')));
if ($ajax == 'ajax') { $commands = array(); $commands[] = ajax_command_replace( '#ajax-display', "<div id='ajax-display'>" . $time . "</div>"); ajax_deliver(array( '#type' => ‘ajax', '#commands' => $commands)); } else { return array('#markup' => $time); }}
Ajax Forms
• Ajax forms in Drupal are provided by the Form API.
• You write the form using the Drupal Form API.
• You do not write or see any Javascript.
Ajax Forms• Specifiy what form element activates the Ajax behavior by adding #ajax
to it.
• Specify what part of the form’s HTML is to be replaced by the callback using the ‘wrapper’ attribute.
• Provide a callback function that receives the whole rebuild form, and returns the piece of form that will replace the wrapper content.
• Your form builder needs to take into account $form_state[‘values’] when building the form.
• Find examples in the Drupal Examples for Developers(examples) module.
Ajax Forms• Example of FAPI Ajax:
$form['dropdown_first'] = array( '#type' => 'select', '#title' => 'Instrument Type', '#options' => $options_first, '#default_value' => $form_state['values']['dropdown_first'], '#ajax' => array( 'callback' => 'dependent_dropdown_callback', 'wrapper' => 'dropdown-second-replace', ),);
Ajax Forms• Example of FAPI Ajax:
$form['dropdown_first'] = array( '#type' => 'select', '#title' => 'Instrument Type', '#options' => $options_first, '#default_value' => $form_state['values']['dropdown_first'], '#ajax' => array( 'callback' => 'dependent_dropdown_callback', 'wrapper' => 'dropdown-second-replace', ),);
Ajax Forms
• Example of FAPI Ajax:$form['dropdown_second'] = array( '#type' => 'select', '#title' => $options_first[$selected] . ' ' . t('Instruments'), '#prefix' => '<div id="dropdown-second-replace">', '#suffix' => '</div>', '#options' => _get_second_dropdown_options( $form_state['values']['dropdown_first']), '#default_value' => $form_state['values']['dropdown_second'],);
Ajax Forms
• Example of FAPI Ajax:$form['dropdown_second'] = array( '#type' => 'select', '#title' => $options_first[$selected] . ' ' . t('Instruments'), '#prefix' => '<div id="dropdown-second-replace">', '#suffix' => '</div>', '#options' => _get_second_dropdown_options( $form_state['values']['dropdown_first']), '#default_value' => $form_state['values']['dropdown_second'],);
Ajax Forms
• Example of FAPI Ajax:$form['dropdown_second'] = array( '#type' => 'select', '#title' => $options_first[$selected] . ' ' . t('Instruments'), '#prefix' => '<div id="dropdown-second-replace">', '#suffix' => '</div>', '#options' => _get_second_dropdown_options( $form_state['values']['dropdown_first']), '#default_value' => $form_state['values']['dropdown_second'],);
Ajax Forms
function dependent_dropdown_callback($form, $form_state) {
return $form['dropdown_second'];
}
Ajax Forms
function dependent_dropdown_callback($form, $form_state) {
return $form['dropdown_second'];
}
States• Provides interactive forms where the actual underlying form doesn't change,
just the presentation to the user.
• You mark a form element that is dependent on another element (opposite of #ajax)
• You specify the condition and resultant action: 'checked' => array( ':input[name="more_info"]' => array('filled' => TRUE)),
• The Conditional fields (conditional_fields) module provides an UI for using this API on fields.
• Find examples in the Drupal Examples for Developers(examples) module.
States$form['source'] = array(
'#type' => 'checkboxes',
'#options' => drupal_map_assoc(array(
t(‘TV'),
t(‘Newspaper’),
t(‘Internet),
t(‘Other…)
)),
'#title' => t(‘Where did you hear of us?'),
);
States$form['source'] = array(
'#type' => 'checkboxes',
'#options' => drupal_map_assoc(array(
t(‘TV'),
t(‘Newspaper’),
t(‘Internet),
t(‘Other…)
)),
'#title' => t(‘Where did you hear of us?'),
);
States$form[‘source_text’] = array(
'#type' => 'textfield',
'#title' => t(‘Write in a few words where you heard of us'),
'#states' => array(
'visible' => array(
':input[name=source]' => array(
'value' => t(‘Other…’)
),
),
),
);
States$form[‘source_text’] = array(
'#type' => 'textfield',
'#title' => t(‘Write in a few words where you heard of us'),
'#states' => array(
'visible' => array(
':input[name=source]' => array(
'value' => t(‘Other…’)
),
),
),
);
States$form[‘source_text’] = array(
'#type' => 'textfield',
'#title' => t(‘Write in a few words where you heard of us'),
'#states' => array(
'visible' => array(
':input[name=source]' => array(
'value' => t(‘Other…’)
),
),
),
);
Drupal.theme• Is the JavaScript counterpart to theme()
• To define a theme function simply create a new public method for the Drupal.theme class:Dupal.theme.prototype.displayName = function(name, url) { return '<a href="' + url + '">' + name + '</a>';}
• Then invoke it through Drupal.theme when needed:var name = "John Doe";var url = "http://example.com";var display = Drupal.theme('displayName', name, url)
Drupal.theme• Is the JavaScript counterpart to theme()
• To define a theme function simply create a new public method for the Drupal.theme class:Dupal.theme.prototype.displayName = function(name, url) { return '<a href="' + url + '">' + name + '</a>';}
• Then invoke it through Drupal.theme when needed:var name = "John Doe";var url = "http://example.com";var display = Drupal.theme('displayName', name, url)
Drupal.theme• Is the JavaScript counterpart to theme()
• To define a theme function simply create a new public method for the Drupal.theme class:Dupal.theme.prototype.displayName = function(name, url) { return '<a href="' + url + '">' + name + '</a>';}
• Then invoke it through Drupal.theme when needed:var name = "John Doe";var url = "http://example.com";var display = Drupal.theme('displayName', name, url)
Drupal.theme
• Another developer changes the implementation:Dupal.theme.prototype.displayName = function(name, url) { return ‘<div class=‘username-wrapper”><a href="' + url + '">' + name + ‘</a></div>';}
• All places where the theme function is used will now display the updated markup.
Drupal.theme
• Allows you to alter the output of components defined by third parties.
• Allows others to alter the output of your components.
• In D7 there is only one theme implementation in core (placeholder).
Multilingual• Drupal has multilingual support in JS.
• You can wrap your text in Drupal.t(), and it will be available for translation in the UI. If there is a translation for your text in the current language, it will be used.
• It only works if the text is explicitly written inside the call to Drupal.t(), and not if it’s inside a variable.
• Drupal.t(str, args, options)str - the string to be translated, has to be in Englishargs - an object of replacement pairs to be made after translationoptions - options object, only ‘context’ key is used, defaults to empty string
Other API’s
• autocomplete
• FAPI property:'#autocomplete_path' => ‘some/path’,
• the callback function for that path needs to return a JSON with matches in the format ‘value’ => ‘display_string’
Other API’s
• autocomplete
• FAPI property:'#autocomplete_path' => ‘some/path’,
• the callback function for that path needs to return a JSON with matches in the format ‘value’ => ‘display_string’
Other API’s
• autocomplete
• FAPI property:'#autocomplete_path' => ‘some/path’,
• the callback function for that path needs to return a JSON with matches in the format ‘value’ => ‘display_string’
Other API’s
• tabledrag - drupal_add_tabledrag()
• Assists in adding the tableDrag JavaScript behavior to a themed table
• Draggable tables should be used wherever an outline or list of sortable items needs to be arranged by an end-user. Draggable tables are very flexible and can manipulate the value of form elements placed within individual columns.
• not so simple to implement
Other API’s - tabledrag
Drupal 8
• Drupal.settings -> drupalSettings
• Drupal.theme.prototype -> Drupal.theme
• Drupal.ajax.prototype.commands -> Drupal.AjaxCommands.prototype
Drupal 8
• Only the JavaScript required on a particular page will be added to that page
• jQuery is not automatically loaded on all pages anymore.
• You have to declare a dependency for your code on jQuery to have jQuery loaded on the page
Drupal 8 - Defining a library
*.libraries.yml in your module:
cuddly-slider:
version: 1.x
css:
theme:
css/cuddly-slider.css: {}
js:
js/cuddly-slider.js: {}
dependencies:
- core/jquery
Drupal 8 - Attaching a library to existing content
<?php
function mymodule_element_info_alter(array &$types) {
if (isset($types['table']) {
$types['table']['#attached']['library'][] =
'mymodule/cuddly-slider';
}
}
Drupal 8 - Attaching a library to new content
<?php
$build[‘your_element’]['#attached']['library'][] =
‘mymodule/cuddly-slider';
Drupal 8 - Attaching a library to pages
hook_page_attachments(). Example from the Contextual links module
<?php
function contextual_page_attachments(array &$page) {
if (!\Drupal::currentUser()
->hasPermission('access contextual links')) {
return;
}
$page['#attached']['library'][] =
'contextual/drupal.contextual-links';
}
Drupal 8 - Attaching settings
$build[‘#attached']['drupalSettings']['mymodule'][‘cuddlySlider']
['foo'] = 'bar';
Drupal 8 - Inline JavaScript
• Inline JavaScript is discouraged.
• It's recommended to put the JS you want to use inline in a file instead, because that allows that JavaScript to be cached on the client side.
• It allows JavaScript code to be reviewed and linted
Drupal 8 - Inline JavaScript that generates
markup
• Examples of this are ads, social media sharing buttons, social media listing widgets.
• Option 1: Put the script inside a custom block.
• Option 2: Put the script inside a twig template.
Drupal 8 - Inline JavaScript that affects the entire page
• Example: Google Analytics. It should not be front end / styling
• hook_page_attachments() — define attached HTML <HEAD> data by using the 'html_head' key in the #attached property:
Drupal 8 - Inline JavaScript that affects the entire page
<?php
function mymodule_page_attachments(array &$page) {
$page['#attached']['html_head'][] = [
// The data.
[
'#tag' => 'script',
'#value' => 'alert("Hello world!");',
],
// A key, to make it possible to recognize this HTML <HEAD>
element when altering.
'hello-world'
];
}
Drupal 8
• Use “Strict Mode”
• "use strict";
• It catches some common coding bloopers, throwing exceptions.
• It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object).
• It disables features that are confusing or poorly thought out.
Drupal 8 - Strict Mode
• Variables and Properties
• An attempt to assign foo = "bar"; where ‘foo’ hasn’t been defined will fail.
• Deleting a variable, a function, or an argument will result in an error.
• Defining a property more than once in an object literal will cause an exception to be thrown
Drupal 8 - Strict Mode
eval is evil
Drupal 8More Libraries
Drupal 8
• jQuery 2
• underscore
• Backbone
• Modernizr
• CKEditor
Drupal 8
