index.html

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">

        <title>JavaScript ♥ Drupal</title>

        <meta name="description" content="JavaScript in the context of a Drupal site">
        <meta name="author" content="Pierre Buyle">

        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <link rel="stylesheet" href="css/reveal.min.css">
        <link rel="stylesheet" href="css/theme/default.css" id="theme">

        <!-- For syntax highlighting -->
        <link rel="stylesheet" href="lib/css/zenburn.css">

        <!-- If the query includes 'print-pdf', use the PDF print sheet -->
        <script>
            document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
        </script>

        <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="reveal">

            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">
                <section>
                    <h1>JavaScript<br/><large>♥</large><br/>Drupal</h1>
                    <p>
                        <small>by <a href="http://about.me/pbuyle">Pierre Buyle</a> </small>
                    </p>
                </section>
                <section>
                    <section id="adding-javascript">
                    <h2>Adding JavaScript to pages</h2>
                    <p>
                        <ul>
                            <li>Include a JavaScript file on every pages of the site.<pre><code class="ini">scripts[] = awesomeness.js</code></pre></li>
                            <li>Include JavaScript on a page.<pre><code class="php">drupal_add_js($data, $options)</code></pre></li>
                            <li>Attach JavaScript to a <a href="https://drupal.org/node/930760">renderable array</a>.<pre><code class="php">$element['#attached']['js'][] = array($data => $options)</code></pre></li>
                        </ul>
                    </p>
                    </section>
                    <section id="dot-info-scripts">
                        <h2>scripts[] in .info files</h2>
                        <p>
                            <pre><code class="ini">scripts[] = awesomeness.js</code></pre>
                            <ul>
                                <li>Add the referenced files on <strong>every page</strong></li>
                                <li>Files are <strong>processed</strong> (aggregated) and <strong>cached</strong></li>
                                <li>Not very flexible but good enough</li>
                            </ul>
                        </p>
                    </section>
                    <section id="drupal-add-js">
                        <h2>drupal_add_js()</h2>
                        <p>
                            Add JavaScript to the currently rendered page.
                            <pre><code class="php" data-trim>drupal_add_js('path/to/awesomeness.js', 'file')</code></pre>
                            <pre class="fragment"><code class="php" data-trim>drupal_add_js('alert("Awesome!");', 'inline');</code></pre>
                            <pre class="fragment"><code class="php" data-trim>drupal_add_js(array('myAwesomeModule' => array(
    'foo' => 'bar',
    'bar' => 'foo',
)), 'setting');</code></pre>
                            <pre class="fragment"><code class="php" data-trim>drupal_add_js('//aweso.me/ness.js', 'external');</code></pre>
                        </p>
                    </section>
                    <section id="drupal-add-js-options">
                        <h2>$options</h2>
                        <p>
                            <pre><code class="php" data-trim>
drupal_add_js('path/to/awesomeness.js', array(
  'type' => 'file',</code></pre>
                            <pre class="fragment"><code class="php">  'scope' => 'footer',</code></pre>
                            <pre class="fragment"><code class="php">  'group' => 'JSTHEME',
  'weigth' => '-10',</code></pre>
                            <pre class="fragment"><code class="php">  'preprocess' => TRUE,
  'every_page' => TRUE,</code></pre>
                            <pre class="fragment"><code class="php">  'defer' => TRUE,
  'cache' => FALSE,</code></pre>
                            <pre><code class="php" data-trim>));</code></pre>
                        </p>
                    </section>
                    <section id="hash-attached">
                        <h2>#attached</h2>
                        <p>
                            Attach JavaScript to a <a href="https://drupal.org/node/930760">renderable array</a>.
                            <pre><code class="php">$element['#attached']['js'][] = array($data => $options);</code></pre>
                            Invoke drupal_add_js($data, $options) when $element is rendered.
                            <pre class="fragment"><code class="php" data-trim>$element['#attached']['js'][] = array('path/to/awesomeness.js', 'file')</code></pre>
                            <pre class="fragment"><code class="php" data-trim>$element['#attached']['js'][] = array('alert("Awesome!");', 'inline');</code></pre>
                            <pre class="fragment"><code class="php" data-trim>$element['#attached']['js'][] = array(array('myAwesomeModule' => array(
    'foo' => 'bar',
    'bar' => 'foo',
)), 'setting');</code></pre>
                            <pre class="fragment"><code class="php" data-trim>$element['#attached']['js'][] = array('//aweso.me/ness.js', 'external');</code></pre>

                        </p>
                    </section>
                </section>
                <section>
                    <section id="writing-javascript">
                        <h2>Writing JavaScript</h2>
                        <p>
                            Things to known and use when writing JavaScript for Drupal
                            <ul class="fragment">
                                <li>jQuery.noConflict</li>
                                <li>Drupal.behaviors</li>
                                <li>jQuery.once</li>
                                <li>Drupal.settings</li>
                                <li>Drupal.theme</li>
                                <li>Drupal.t</li>
                            </ul>
                         </p>
                    </section>
                    <section id="jquery-no-conflict">
                        <h2>jQuery.noConflict</h2>
                        <p>
                            <ul>
                                <li><code>$</code> <strong>is not</strong> the jQuery object.</li>
                                <li class="fragment">Code should be wrapped in an <a href="http://stage.learn.jquery.com/javascript-101/functions/#immediately-invoked-function-expression">Immediately Invoked Function Expression</a>.
                                <pre><code class="javascript" data-trim>
(function($) {
  // Here $ is the jQuery object
})(jQuery);
                                    </code></pre></li>
                                 <li class="fragment">Variables are kept out of the global scope.</li>
                             </ul>
                        </p>
                    </section>
                    <section id="drupal-behaviors">
                        <h2>Drupal.behaviors</h2>
                        <p>
                            Replace <code>$(document).ready()</code> to process elements.
                            <pre><code class="javascript" data-trim>
Drupal.behaviors.doSomething = {
  attach: function(context, settings) {
    // do something here
                            </code></pre>
                            <span class="fragment">Also used when element are removed, moved or serialized.
                            <pre><code class="php">  }
  detach: function(context, settings, trigger) {
    // do something here too</code></pre></span>
                            <pre><code class="php">  }
}</code></pre>
                            <span class="fragment">Attach and detach behavior altering the DOM
                            <pre><code class="php" data-trim>
Drupal.attachBehaviors(context, [settings])
Drupal.detachBehaviors(context, [settings], [trigger])</code></pre></span>
                        </p>
                    </section>
                    <section id="jquery-once">
                        <h2>jQuery.once</h2>
                        <p>
                            <ul>
                            <li>Behaviors could be applied multiple times on the page.</li>
                            <li>Avoid processing the same elements multiple time.</li>
                            </ul>
                            <pre class="fragment"><code class="javascript" data-trim>
$('div.something', context).once('do-something');
                            </code></pre>
                        </p>
                    </section>
                    <section id="drupal-settings">
                        <h2>Drupal.settings</h2>
                        <p>
                          Passing values from PHP to Javascript
                            <div class="fragment"><pre><code class="php" data-trim>drupal_add_js(
  array('myAwesomeModule' => array(
    'foo' => 'bar',
    'bar' => 'foo',
  )
), 'setting');</code></pre></div>
                            <div class="fragment"><pre><code class="javascript" data-trim>

Drupal.settings.myAwesomeModule.foo;
Drupal.settings.myAwesomeModule.bar;
Drupal.behaviors.doSomething = {
  attach: function(context, settings) {
    settings.myAwesomeModule.foo
  }
}
                                </code></pre></div>
                        </p>
                    </section>
                    <section id="writing-javascript-summary">
                        <h2>Summary</h2>
                        <p>
                                <pre><code class="javascript" data-trim>
(function($) {
  Drupal.behaviors.doSomething = {
    attach: function(context, settings) {
      $('div.something', context).once('do-something').doSomething({
        foo: settings.myAwesomeModule.foo,
        bar: settings.myAwesomeModule.bar
      });
    }
  }
})(jQuery);
                                </code></pre>
                            </p>
                    </section>
                    <section id="drupal-theme">
                        <h2>Drupal.theme</h2>
                        <p>
                            Theme functions in JavaScript.
                            <pre><code class="javascript" data-trim>
Dupal.theme.prototype.awesome = function(str) {
  return '<span class="awesome">' + str + '</span>';
}
                            </code></pre>
                            <pre><code class="javascript" data-trim>
var html = Drupal.theme('awesome', 'Hello World');
                            </code></pre>
                            <pre class="fragment"><code class="javascript" data-trim>
Dupal.theme.awesome = function(str) {
  return '<div class="awesome">' + str + '</div>';
}
                            </code></pre>
                        </p>
                    </section>
                    <section id="drupal-t">
                        <h2>Drupal.t</h2>
                        Translate strings to the page language or a given language.<pre><code class="javascript" data-trim>Drupal.t(str, args, options)</code></pre>
                        <div class="fragment">
                            <h3>And friends</h3>
                            <ul>
                                <li>Format a string containing a count of items.<pre><code class="javascript" data-trim>Drupal.formatPlural(count, singular, plural, args, options)</code></pre></li>
                                <li>Replace placeholders with sanitized values in a string.<pre><code class="javascript" data-trim>Drupal.formatString(str, args)</code></pre></li>
                                <li>Encode special characters in a plain-text string for display as HTML.<pre><code class="javascript" data-trim>Drupal.checkPlain(str)</code></pre></li>
                            </ul>
                        </div>
                    </section>
                </section>
                <section>
                    <section id="javascript-libraries">
                        <h2>JavaScript Libraries</h2>
                        <p>Writing re-usable JavaScript with dependencies management.</p>
                    </section>
                    <section id="hook-library">
                        <p>
                            A library defines a set of <strong>JavaScript files</strong>
                            <pre><code class="php" data-trim>
/**
 * Implements hook_library().
 */
awesome_library() {
  return array(
    'awesomeness' => array(
      'title' => 'Awesome Library',
      'website' => 'http://aweso.me/',
      'version' => '1.0.0'
      'js' => array('full/path/to/awesome.js' => array()),
</code></pre><span class="fragment">and/or <strong>CSS files</strong><pre><code class="php">      'css' => array('full/path/to/awesome.css' => array()),
</code></pre></span><span class="fragment">optionally using <strong>settings</strong><pre><code class="php">      'js' => array(array('type' => 'setting', 'data' => $settings)),
</code></pre></span><span class="fragment">and optionally <strong>requiring</strong> another library<pre><code class="php">      'dependencies' => array(
        array($module, $library),
      )
</code></pre></span><pre><code class="php">    ),
  )
}</code></pre>
                        </p>
                    </section>
                    <section id="drupal-add-library">
                        <h2>Using a library</h2>
                        <p>
                            <pre><code class="php" data-trim>drupal_add_library($module, $library)</code></pre>
                            <pre><code class="php">$element['#attached']['library'][] = array($module, $library)</code></pre>
                        </p>
                    </section>
                    <section id="core-libraries">
                        <h2>Libraries bundled with Drupal core</h2>
                        <ul>
                            <li><a href="http://api.drupal.org/api/drupal/includes--ajax.inc/group/ajax/7">Drupal AJAX</a></li>
                            <li><a href="http://jquery.com">jQuery</a></li>
                            <li><a href="http://plugins.jquery.com/once">jQuery Once</a></li>
                            <li><a href="http://malsup.com/jquery/form/">jQuery Forms</a></li>
                            <li><a href="http://benalman.com/projects/jquery-bbq-plugin/">jQuery BBQ</a></li>
                            <li><a href="http://plugins.jquery.com/cookie">jQuery Cookie</a></li>
                            <li><a href="http://jqueryui.com">jQuery UI</a></li>
                            <li><a href="http://code.google.com/p/farbtastic/">Farbtastic</a></li>
                        </ul>
                    </section>
                </section>
                <section>
                    <section id="third-party-libraries">
                        <h2>Third party libraries</h2>
                        <p>
                            How to use and manage third party libraries.
                        </p>
                    </section>
                    <section id="library-api">
                        <h2>Library API</h2>
                        <a href="http://drupal.org/project/libraries">http://drupal.org/project/libraries</a>
                        <ul>
                            <li>Keep libraries out in site/&lt;domain&gt;/libraries.</li>
                            <li>The same library can be shared by more than one site.</li>
                            <li>Ease the process of upgrading a module that requires an external library.</li>
                            <li>Prevent incompatibilities due to having the same library installed more than once in different versions.</li>
                            <li>Dependency handling.</li>
                            <li>Library version detection.</li>
                            <li>Runtime control of library availability.</li>
                        </ul>
                    </section>
                    <section id="hook-libray-info">
                        <h2>Declaring a 3rd party library</h2>
                        <pre><code class="php" data-trim>
/**
 * Implements hook_libraries_info()
 */
function awesome_libraries_info() {
  return array(
  'awesome' => array(
    'name' => 'Awesome Library',
    'vendor url' => 'http://aweso.me',
    'download url' => 'https://github.com/awesome/awesomejs/zipball/latest',
    'version arguments' => array(
      'file' => 'package.json',
      'pattern' => '/"version": "(.*)"/',
    ),
    'files' => array('js' => array('awesome.min.js')),
  );
);</code></pre>
                    </section>
                    <section id="hook-library-glue">
                        <h2>Libraries API and hook_library()</h2>
                        <pre><code class="php" data-trim>
/**
 * Implements hook_library()
 */
function awesome_library() {
  $libraries = array();
  if (($library = libraries_detect('awesome')) && $library['installed']) {
    $libraries['awesome'] = array(
      'title' => $library['name'],
      'website' => $library['vendor url'],
      'version' => $library['version'],
      'js' => array(
        library['library path'] . '/' . $library['files']['js'][0]
      )
    );
  }
  return $libraries
}
</code></pre>
                    </section>
                </section>
                <section id="the-end">
                    <h2>The end</h2>
                    <p>
                            <pre><code class="javascript" data-trim>
(function($) {
  Drupal.behaviors.doSomething = {
    attach: function(context, settings) {
      $('div.something', context).once('do-something').doSomething({
        foo: settings.myAwesomeModule.foo,
        bar: settings.myAwesomeModule.bar
      });
    }
  }
})(jQuery);
                            </code></pre>
                        </p>
                </section>
                <section id="references">
                    <h2>References</h2>
                    <ul>
                        <li><a href="https://drupal.org/node/756722">Managing JavaScript in Drupal 7</a></li>
                        <li><a href="https://coderwall.com/p/kd-4cg">JavaScript, jQuery and DOM Ready in Drupal 7</a></li>
                        <li><a href="https://api.drupal.org">Drupal API documentation</a>
                            <ul><a href="https://api.drupal.org/api/drupal/includes!common.inc/function/drupal_add_js/7">drupal_add_js()</a></ul>
                            <ul><a href="https://api.drupal.org/api/drupal/includes!common.inc/function/drupal_add_library/7">drupal_add_library()</a></ul>
                            <ul><a href="https://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7#attached">#attached</a> and <a href="https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_process_attached/7">drupal_process_attached()</a></ul>
                            <ul><a href="https://api.drupal.org/api/drupal/modules!system!system.api.php/function/hook_library/7">hook_library</a></ul>
                        </li>
                        <li><a href="https://drupal.org/project/libraries">Libraries API</a></li>
                    </ul>
                </section>
            </div>

        </div>

        <script src="lib/js/head.min.js"></script>
        <script src="js/reveal.min.js"></script>

        <script>

            // Full list of configuration options available here:
            // https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                history: true,
                center: true,

                theme: Reveal.getQueryHash().theme || 'solarized', // available themes are in /css/theme
                transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

                // Optional libraries used to extend on reveal.js
                dependencies: [
                    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                    { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
                    { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
                ]
            });

        </script>
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-291684-6', 'pbuyle.github.io');
            ga('send', 'pageview');

        </script>
    </body>
</html>