Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
jQuery UI in Drupal 7              Darren Mothersele @mothersele             http://www.darrenmothersele.comIvan Sutherlan...
jQuery UI in Drupal 7• Using Javascript to improve UI• Javascript in Drupal 7• jQuery UI widgets• Building complex interac...
HTML + Javascript• HTML defines a set of standard form elements• Javascript allows us to build new interactive widgets• jQu...
Javascript widgets• Reduce errors in data entry• Quicker/more efficient• More engaging/fun• ...
Progressive Enhancement • Create widget using jQuery • Hide old widget • Fill in value in the background • Transparent to ...
Before Active Tags• Multiple tagging methodologies• Some people just expect to use spaces• http://drupal.org/node/91074• C...
Active Tags•   Action-delimited system•   Autocomplete•   Original widget hidden•   http://drupal.org/project/active_tags
Javascript in Drupal 7• Theme or Module?• Scope?• Module specific or reuseable?  (Javascript Library)• How and where to inc...
theme.infoname = My themedescription = Theme developed by me.core = 7.xengine = phptemplatescripts[] = my_script.js
drupal_add_js($data, $options) $data is either:  • path to Javascript file to include  • Javascript code to include ‘inline...
hook_preprocess_page()function mytheme_preprocess_page(&$vars, $hook) {    if (true) {        drupal_add_js(          drup...
hook_library()• Used in Core for jQuery UI• Use to include other third-party plugins• Define your own reusable Javascript
jQuery UI Buttons
Dialog Examplefunction dproj_form_user_login_block_alter(&$form, $form_state) {    drupal_add_library(system, ui.dialog); ...
id="edit-field-issue-type-und"$("#edit-field-issue-type-und").buttonset();
drupal_add_library()function dproj_form_issue_node_form_alter(&$form, $form_state,$form_id) {    $language = $form[#node]-...
https://github.com/padolsey/jQuery.fn.autoResize
hook_library()function dproj_library() {    $path = drupal_get_path(module, dproj);    return array(autoresize =>     arra...
id="edit-field-project-desc-und-0-value"$("#edit-field-project-desc-und-0-value").autoResize();
function dproj_form_project_node_form_alter(&$form,$form_state, $form_id) {    $language = $form[#node]->language;    $for...
Building a more  complex interaction• Drupal Behaviors• jQuery ui.draggable• jQuery ui.droppable• jQuery AJAX• Contrib mod...
Behaviors• Replacement for $(document).ready();• Use attach function:   (function ($) {     Drupal.behaviors.exampleModule...
Drag and DropDraggable                          Droppable               $.ajax()    Callback
.dproj-draggable              .dproj-droppable$(.dproj-draggable).draggable();$(.dproj-droppable).droppable();
path1 =      add-attendee/[uid]           path2 =            /[nid]     callback = path1 + path2callback = add-attendee/[u...
Callback argumentinserted into header
<span class=callback>  add-attendee/1</span>   <span class=callback>/20</span>callback = add-attendee/1/20
Drupal.behaviors.dprojdrag = {  attach: function (context, settings) {    $(.dproj-draggable, context).draggable({revert: ...
Resources•   jQuery UI                 •   Contrib Modules    http://jqueryui.com/    demos                         •   Vi...
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
Upcoming SlideShare
Loading in …5
×

jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript

17,923 views

Published on

These are the slides from my presentation at the London Drupal Drop In December 2011. I have posted more information to go along with these slides on my <a>Drupal blog</a>.

Published in: Technology

jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript

  1. 1. jQuery UI in Drupal 7 Darren Mothersele @mothersele http://www.darrenmothersele.comIvan Sutherlands Sketchpad system is demonstrated on the console of the TX-2 at MIT (1963)
  2. 2. jQuery UI in Drupal 7• Using Javascript to improve UI• Javascript in Drupal 7• jQuery UI widgets• Building complex interactions
  3. 3. HTML + Javascript• HTML defines a set of standard form elements• Javascript allows us to build new interactive widgets• jQuery UI provides widgets, interactions and effects
  4. 4. Javascript widgets• Reduce errors in data entry• Quicker/more efficient• More engaging/fun• ...
  5. 5. Progressive Enhancement • Create widget using jQuery • Hide old widget • Fill in value in the background • Transparent to Drupal, nice and safe • Non-js friendly
  6. 6. Before Active Tags• Multiple tagging methodologies• Some people just expect to use spaces• http://drupal.org/node/91074• Character-delimited system
  7. 7. Active Tags• Action-delimited system• Autocomplete• Original widget hidden• http://drupal.org/project/active_tags
  8. 8. Javascript in Drupal 7• Theme or Module?• Scope?• Module specific or reuseable? (Javascript Library)• How and where to include code?
  9. 9. theme.infoname = My themedescription = Theme developed by me.core = 7.xengine = phptemplatescripts[] = my_script.js
  10. 10. drupal_add_js($data, $options) $data is either: • path to Javascript file to include • Javascript code to include ‘inline’ • absolute path to external JS code • array of settings for Javascript $options includes type, location, caching, ...
  11. 11. hook_preprocess_page()function mytheme_preprocess_page(&$vars, $hook) { if (true) { drupal_add_js( drupal_get_path(theme, mytheme) . /scriptname.js, theme); $vars[scripts] = drupal_get_js(); }}
  12. 12. hook_library()• Used in Core for jQuery UI• Use to include other third-party plugins• Define your own reusable Javascript
  13. 13. jQuery UI Buttons
  14. 14. Dialog Examplefunction dproj_form_user_login_block_alter(&$form, $form_state) { drupal_add_library(system, ui.dialog); $dialog_js = $("#block-user-login").dialog({title: "User login"});; $dialog_js = jQuery(document).ready(function () { (function ($) { . $dialog_js . }(jQuery)); });; drupal_add_js($dialog_js, array(type => inline, scope => footer, weight => 5));}
  15. 15. id="edit-field-issue-type-und"$("#edit-field-issue-type-und").buttonset();
  16. 16. drupal_add_library()function dproj_form_issue_node_form_alter(&$form, $form_state,$form_id) { $language = $form[#node]->language; $form[field_issue_type][$language][#after_build][] = _dproj_button_helper;}function _dproj_button_helper($element, &$form_state) { $button_js = $("#. $element[#id] .").buttonset();; $button_js = JS_PREFIX . $button_js . JS_SUFFIX; drupal_add_library(system, ui.button); drupal_add_js($button_js, array(type => inline, scope =>footer, weight => 5)); return $element;}
  17. 17. https://github.com/padolsey/jQuery.fn.autoResize
  18. 18. hook_library()function dproj_library() { $path = drupal_get_path(module, dproj); return array(autoresize => array( title => AutoResize, website => https://github.com/... version => 1.14, js => array( $path ./jquery.autoresize.js => array(), ), ));}
  19. 19. id="edit-field-project-desc-und-0-value"$("#edit-field-project-desc-und-0-value").autoResize();
  20. 20. function dproj_form_project_node_form_alter(&$form,$form_state, $form_id) { $language = $form[#node]->language; $form[field_project_desc][$language][#after_build][] = _dproj_autoresize_helper;}function _dproj_autoresize_helper($element, &$form_state) { $id = $element[0][value][#id] $autoresize_js = $("#. $id .").autoResize();; $autoresize_js = JS_PREFIX . $autoresize_js . JS_SUFFIX; drupal_add_library(dproj, autoresize); drupal_add_js($autoresize_js, array(type => inline, scope => footer, weight => 5)); return $element;}
  21. 21. Building a more complex interaction• Drupal Behaviors• jQuery ui.draggable• jQuery ui.droppable• jQuery AJAX• Contrib modules: Page manager (ctools), Rules, Relation
  22. 22. Behaviors• Replacement for $(document).ready();• Use attach function: (function ($) { Drupal.behaviors.exampleModule = { attach: function (context, settings) { $(.dproj, context).draggable(); } }; }(jQuery));• AJAX safe• Detachable
  23. 23. Drag and DropDraggable Droppable $.ajax() Callback
  24. 24. .dproj-draggable .dproj-droppable$(.dproj-draggable).draggable();$(.dproj-droppable).droppable();
  25. 25. path1 = add-attendee/[uid] path2 = /[nid] callback = path1 + path2callback = add-attendee/[uid]/[nid]
  26. 26. Callback argumentinserted into header
  27. 27. <span class=callback> add-attendee/1</span> <span class=callback>/20</span>callback = add-attendee/1/20
  28. 28. Drupal.behaviors.dprojdrag = { attach: function (context, settings) { $(.dproj-draggable, context).draggable({revert: invalid}); $(.dproj-droppable, context).droppable({ hoverClass: drop-hover, accept: .dproj-draggable, drop: function (e, ui) { $(ui.draggable).hide(); $(e.target).fadeTo(fast, 0.5); var view_id = . + $(e.target).attr(class).match(/view-dom-id-d+/)[0]; var href = Drupal.settings.basePath + $(.callback, ui.draggable).html() + $(.callback, e.target).html(); $.ajax({ url: href, success: function (data) { $(view_id).html($(view_id, $(data))); $(view_id).fadeTo(fast, 1);}});}});}};
  29. 29. Resources• jQuery UI • Contrib Modules http://jqueryui.com/ demos • Views• Managing Javascript in • Relation Drupal 7 http://drupal.org/node/ 756722 • Page manager • Rules

×