jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript

jQuery UI in Drupal 7 Darren Mothersele @mothersele http://www.darrenmothersele.com Ivan Sutherland's Sketchpad system is demonstrated on the console of the TX-2 at MIT (1963)

jQuery UI in Drupal 7 • Using Javascript to improve UI • Javascript in Drupal 7 • jQuery UI widgets • Building complex interactions

HTML + Javascript • HTML deﬁnes a set of standard form elements • Javascript allows us to build new interactive widgets • jQuery UI provides widgets, interactions and effects

Javascript widgets • Reduce errors in data entry • Quicker/more efﬁcient • More engaging/fun • ...

Progressive Enhancement • Create widget using jQuery • Hide old widget • Fill in value in the background • Transparent to Drupal, nice and safe • Non-js friendly

Before Active Tags • Multiple tagging methodologies • Some people just expect to use spaces • http://drupal.org/node/91074 • Character-delimited system

Active Tags • Action-delimited system • Autocomplete • Original widget hidden • http://drupal.org/project/active_tags

Javascript in Drupal 7 • Theme or Module? • Scope? • Module speciﬁc or reuseable? (Javascript Library) • How and where to include code?

theme.info name = My theme description = Theme developed by me. core = 7.x engine = phptemplate scripts[] = my_script.js

drupal_add_js($data, $options) $data is either: • path to Javascript ﬁle to include • Javascript code to include ‘inline’ • absolute path to external JS code • array of settings for Javascript $options includes type, location, caching, ...

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(); } }

hook_library() • Used in Core for jQuery UI • Use to include other third-party plugins • Deﬁne your own reusable Javascript

Dialog Example function 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)); }

id="edit-field-issue-type-und" $("#edit-ﬁeld-issue-type-und").buttonset();

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; }

https://github.com/padolsey/jQuery.fn.autoResize

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(), ), )); }

id="edit-field-project-desc-und-0-value" $("#edit-ﬁeld-project-desc-und-0-value").autoResize();

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; }

Building a more complex interaction • Drupal Behaviors • jQuery ui.draggable • jQuery ui.droppable • jQuery AJAX • Contrib modules: Page manager (ctools), Rules, Relation

Behaviors • Replacement for $(document).ready(); • Use attach function: (function ($) { Drupal.behaviors.exampleModule = { attach: function (context, settings) { $('.dproj', context).draggable(); } }; }(jQuery)); • AJAX safe • Detachable

Drag and Drop Draggable Droppable $.ajax() Callback

.dproj-draggable .dproj-droppable $('.dproj-draggable').draggable(); $('.dproj-droppable').droppable();

path1 = add-attendee/[uid] path2 = /[nid] callback = path1 + path2 callback = add-attendee/[uid]/[nid]

Callback argument inserted 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: '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); }});}});}};

Resources • jQuery UI • Contrib Modules http://jqueryui.com/ demos • Views • Managing Javascript in • Relation Drupal 7 http://drupal.org/node/ 756722 • Page manager • Rules

jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript

More Related Content

What's hot

Similar to jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript

Recently uploaded

jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript