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

Recommended

More Related Content

What's hot (18)

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

Recently uploaded (20)

jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript