We'll discuss ways to develop reusable and flexible JavaScript components by leveraging JavaScript's full potential and using Drupal's lightweight JavaScript frameworks. We'll look at several JavaScript components and see how they were implemented and how they interact with each other.

1. Developing
JavaScript
Widgets
Konstantin
Käfer

2. 1 Functions
2 Drupal’s JavaScript facilities
3 Widgets
4 Debugging & Analyzing
2 Konstantin Käfer

3. Functions
Functions are first class entities
‣
– Store in variables, pass as parameters, return from
functions
– Can be defined at any place
Functions can contain properties
‣
Anonymous functions
‣
3 Konstantin Käfer

4. Functions (II)
var foo = function(callback) {
callback();
return function() {
print(quot;Returned function calledquot;);
};
};
foo(function() {
print(quot;Passed function calledquot;);
})();
foo.bar = quot;bazquot;;
4 Konstantin Käfer

5. Prototypal OOP
JavaScript doesn’t have classes
‣
Prototype of a function used as base class
‣
var Foo = function() { /* ... */ };
Foo.prototype = {
'bar': function() { /* ... */ },
'baz': function() { /* ... */ }
};
var instance = new Foo();
instance.bar();
instance.baz();
5 Konstantin Käfer

6. Prototypal OOP (II)
Function is constructor
‣
“Instances” have an implicit link to the base
‣
class
var Foo = function() { /* ... */ };
Foo.prototype = {
'bar': function() { /* ... */ }
};
var instance = new Foo();
instance.bar();
Foo.prototype.baz = function() { /* ... */ };
instance.baz();
6 Konstantin Käfer

7. Prototypal OOP (III)
Any objects can be extended/changed at any
‣
time
Number.prototype.celsiusToFahrenheit = function() {
return (this * 9 / 5) + 32;
};
js> (34).celsiusToFahrenheit();
93.2
js> (0).celsiusToFahrenheit();
32
7 Konstantin Käfer

8. 1 Functions
2 Drupal’s JavaScript facilities
3 Widgets
4 Debugging & Analyzing
8 Konstantin Käfer

9. AJAX Callbacks
In the menu system:
‣
$items['mymodule/js'] = array(
'title' => 'JavaScript callback',
'page callback' => 'mymodule_js',
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);
Menu callback:
‣
function mymodule_js() {
// Generate $data...
drupal_json($data);
}
9 Konstantin Käfer

10. Translation
Similar to PHP
‣
Drupal.t('This is a string.');
‣
Drupal.t('Do you really want to delete %object?',
‣
{ '%object': object.name });
Drupal.formatPlural(count,
‣
'1 comment', '@count comments');
POT extractor and Drupal parse JavaScript files
‣
10 Konstantin Käfer

11. Behaviors
All functions in Drupal.behaviors are executed
‣
onready (when the DOM is ready)
Functions have to be non-destructive
‣
Functions get a context parameter to act on
‣
Advantage: Can be called later as well
‣
Drupal.behaviors.foo = function(context) {
‣
$('.foo:not(.foo-processed)', context).each(
function() { … }
);
};
11 Konstantin Käfer

12. Theming
Theme functions for HTML code
‣
Advantage: Themes can change markup
‣
In the module’s JavaScript:
‣
var elem = Drupal.theme('mymodule');
$('body').append(elem);
Drupal.theme.prototype.mymodule = function() { /*...*/ }
In the theme’s JavaScript:
‣
Drupal.theme.mymodule = function() {
return $('<div class=quot;mymodulequot;></div>');
}
12 Konstantin Käfer

13. 1 Functions
2 Drupal’s JavaScript facilities
3 Widgets
4 Debugging & Analyzing
13 Konstantin Käfer

14. Compatibility
14 Konstantin Käfer

15. Reusability
15 Konstantin Käfer

16. Flexibility
16 Konstantin Käfer

17. Encapsulation
17 Konstantin Käfer

18. Speed
18 Konstantin Käfer

19. Initializing
Drupal.behaviors.horizscroll =
function(context) {
$('.horizscroll:not(.horizscroll-processed)',
context).each(function() {
// <<< Initialize the horizscroll >>>
}).addClass('horizscroll-processed');
};
19 Konstantin Käfer

20. Constructor
Drupal.horizscroll = function(options) {
var that = this;
$.extend(this, options);
// Store references to elements.
// Set first element as the quot;target item.quot;
// Initialize left and right buttons.
// Initialize the button status.
};
20 Konstantin Käfer

21. Methods
Drupal.horizScroll.prototype = {
// Update the button status based on the
// position of the content.
'updateButtons': function() { },
// Moves the content box to an item.
'scrollToItem': function() { },
// Calculate the next target item.
'findTarget': function() { }
};
21 Konstantin Käfer

22. 1 Functions
2 Drupal’s JavaScript facilities
3 Widgets
4 Debugging & Analyzing
22 Konstantin Käfer

23. Advanced JavaScript console
‣
Logging to the console (console.log())
‣
DOM inspector
‣
JavaScript debugger (with backtrace!)
‣
Profile JavaScript activity
‣
http://getfirebug.com
‣
23 Konstantin Käfer

24. JavaScript debugger for IE
‣
Free of charge
‣
Some configuration work needed
‣
http://msdn.microsoft.com/vstudio/express/
‣
vwd/
24 Konstantin Käfer

25. WebDevHelper
JavaScript console for IE
‣
HTTP Logger
‣
JavaScript backtracer
‣
http://projects.nikhilk.net/WebDevHelper/
‣
Default.aspx
25 Konstantin Käfer

26. JavaScript Lint
Lint = tool for analyzing code
‣
Discovers sloppy coding
‣
Command line interface
‣
Use as pre-commit hook for <insert RCS>
‣
http://javascriptlint.com
‣
TextMate bundle: http://andrewdupont.net/
‣
2006/10/01/javascript-tools-textmate-bundle/
26 Konstantin Käfer

27. Thanks! Questions?
Konstantin Käfer
mail@kkaefer.com
27 Konstantin Käfer

28. Further reading
Example taken from
‣
“Front End Drupal”
Pre-order on Amazon!
‣
Now on Safari Online
‣
In stores in April
‣
28 Konstantin Käfer