Jump to:
Issue Summary
#315100: Allow to add JS/CSS libraries (sets of files, settings, and dependent libraries) allowed the addition of multiple JavaScript/CSS libraries at a time. Taking action during the addition of these libraries was not put in that issue though. Some examples of what we could do when the libraries are being added are give the settings so that the JavaScript settings take effect correctly. This would end up looking something like this:
<?php
echo '<div id="mydialog">Hello, I'm a dialog box!</div>';
drupal_add_library('system', 'ui.dialog', '#mydialog');
?>As you can see, while we're adding "ui.dialog" to the page, we also pass it some settings to properly attach the behaviors to the specified element. But, what this is missing is context. We need a way to specify how we want those setting to behave so you're not restricted to always passing the element that you'd like to take action on. This concept was known as the "add callbacks" in #315100: Allow to add JS/CSS libraries (sets of files, settings, and dependent libraries).
Comments
#1
I think we should look at this in a larger scope. Passing data to a callback function that turns them into JavaScript settings and loads a support script is not sufficient in many cases.
The library as well as the settings and support script also depend on a interaction design pattern:
1) Theme functions: The markup to which a behavior/effect is applied must match the markup the library expects, resp. requires.
2) Initialization: Just turning some content into a dialog/tab/whatever does not (always) show the dialog/tab/whatever; most often, a separate trigger is required.
#454382: Provide jquery_ui_elements() for easier usage of plugins in other modules provides some more clues. Small and easily overlooked, but very important amendment there regarding 2) above:
#2
I think the focus should be on what can be done with a callback. To try and find a solution for every single scenario it's not possible.
What can be done is to initialize each interaction or widget (in ui case). We can't expect to put every option/event "draggable" can handle for example in drupal_add_library.
We also can make theme functions to render the widgets, add the library and initialize the widget. Everything else is developers job to do.
Off issue: that dialog doesn't need anything because autoOpen defaults to true in ui.dialog.
#3
Tagging.
#4
#87994: Quit clobbering people's work when they click the filter tips link contains something like this, but targets jQuery UI elements as they all hold almost the same API structure.
#5
We still need to get #87994 in though.
#6
If it's ok with you, I'm going to move this into the jQuery libraries project, as I think we've to come up with a solution that actually works in the real world there first.
#7
Oh, mfer and I came up with something pretty interesting a while ago:
http://drupalcode.org/viewvc/drupal/contributions/sandbox/robloach/modul...
This is PHP...
<?php// In this example, we fade in some text.
$output .= '<p>' . t('This box should fade out slow, then back in fast.') . '</p>';
$output .= '<div class="fadeinthis" style="background:red;display:block;width:100px;height:100px;"></div>';
jquery('.fadeinthis')->fadeOut(5000)->fadeIn('fast')->slideUp()->slideDown(4000);
?>
#8
Nice! We can definitely consider to add a functionality like that to this project. (Though right now, I'd personally rather focus on getting Libraries API integration to work.) I'd be happy to review patches though.
#9
Very interesting feature(s) - subscribing.
#10
Changing the direction of this issue to follow #87994-242: Quit clobbering people's work when they click the filter tips link...
<?php$element['format_help_tips']['#attached']['library'] = array('ui.dialog');
// Take these jQuery actions on the element.
$element['format_help_tips']['#attached']['action'][] = array(
'selector' => '#' . $element['format_help_tips']['#id'],
'arguments' => array(
array(
'width' => 720,
'height' => 400,
'autoOpen' => FALSE,
'title' => t('Filter tips'),
),
),
'actions' => array(
// When the more information link is clicked, open the dialog box.
array(
'event' => 'click',
'bound_element' => '.filter-help a.filter-help-link',
'arguments' => array('open'),
),
),
);
?>
#11
$element['format_help_tips']['#attached']['action'][] = array('selector' => '#' . $element['format_help_tips']['#id'],
It would be sensible if
$element['format_help_tips']['#id'], if the 'selector' key does not exist during #attached processingstrtr(); obviously, ideally using delimiters that are invalid JS/CSS in terms of selectors; e.g.,{ID}- this would allow us to build stuff likefieldset:has(#{ID})and even more complex stuff.