Drupal DOMinate was presented by Matt Wrather and Steven Rifkin at the Los Angeles Drupal User Group meetup 5/14/13. The presentation covers the use of the Drupal Javascript API focusing on the behaviors and settings objects.

1. Drupal DOMinate
Stories of masochism on the front end
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

2. Agenda
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather
Worst Practices
Best Practices
Drupal.behaviors{}
Drupal.settings{}
Questions

3. Don’t hack core
If I update jQuery versions it works it doesn’t work!
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather
Stories from the front-end lines

4. Better/Best Practices
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather
jQuery Update module
http://drupal.org/project/jquery_update
Using closure
http://drupal.org/project/jqmulti

5. Drupal DOM object
Whip out your web inspector, firebug, dev tool flavor and take a peek
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather
Drupal {}
Drupal.settings{}
Drupal.theme()
Drupal.locale{}
Drupal.behaviors{}

6. Drupal.js
Let’s have a read
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather
var Drupal = Drupal || { 'settings': {}, 'behaviors': {}, 'locale': {} };

7. Drupal.behaviors
Man I wish I knew that before
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

8. Drupal.behaviors
Man I wish I knew that before
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather
So how should I load my script on the page?

9. Drupal.behaviors
Man I wish I knew that before
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

10. Drupal.behaviors
Man I wish I knew that before
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather
Drupal.attachBehaviors();

11. Drupal.behaviors
Man I wish I knew that before
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather
$(“#element”).doSomething();
$(“#element:not(.processed)”).addClass(‘processed’).doSomething();
vs

12. Drupal.settings
Another way of using drupal_add_js
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

13. Drupal.settings
Another way of using drupal_add_js
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

14. Sources
Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather
http://api.drupal.org/api/drupal/developer!topics!
javascript_startup_guide.html/6
http://drupal.org/node/304258
http://drupal.org/project/jqmulti
https://drupal.org/node/121997