jQuery

JavaScript Theming, a Paradigm Shift

Oleg Terenchuk (litwol) is now developing the JavaScript Theming module. The five second elevator spiel: this will move theming from the server to the client.

The longer explanation is a bit more exciting. This module plans to abstract the core of Drupal theming into a javascript layer. This will allow a JSON feed to pass raw data to a browser to be formatted on the fly for display.

The implications are astounding, and I'm still wrapping my brain around the possibilities. For one, it could mean super fast in place load times, because Drupal doesn't have to mess around with passing everything around the theming system. An AJAX request could just ask for the data, Drupal sends it, and jQuery will format your list, table, teaser, or what have you. In its second day of life, it already works with messages (and item lists, I believe).

A potential problem I see might be that slower computers would see slower rendering times. But this is already happening with some jQuery-heavy sites anyway. The benefit would be most seen with faster hardware, but this is always true with cutting-edge technology. Everyone else will catch up soon enough.

In any case, I have a feeling that by this time next year, I'll be blogging about the killer combo that changed the world of Drupal and is sending ripples through the Internet: Embed Widgets + JavaScript Theming...

PS Come to DrupalCampNYC next month to find out more!

Playlist Sorting at Air America Radio

Advomatic just launched a new feature for Air America's player. Users are able to create their own play lists of favorite audio and video clips, and sort them in their preferred order.

To see this functionality in action, you'll need to go to the Air America site, and create a user account. After doing so, launch their player, by pressing on the big Listen Live button on the top left of every page.

Add two or three audio clips by pressing the "+" next to a clip, then go to the video tab and do the same thing.

Finally, go to the Playlist tab. Here, you can click and drag clips to sort them as desired. Go ahead. It's all saved, which you can confirm by going to another tab, logging out, logging back in, etc.

Site recipe follows!

jQuery Media Release

I made an official release for the jQuery Media module. This is a wrapper for the jQuery Media plugin. I have made this a full featured module, an aid for developers and themers. We are using it for the audio clips of Air America Radio.

From its help page:

The jQuery Media plugin will turn links to media into their embedded media equivalents, or into a modal overlay embedding the media when the link is clicked. Installing and configuring the module is only the first step: you must also manually theme the output of links in order to enjoy the benefits of this plugin.

Theming is outside of the scope of this help page. You might look at Drupal's Theme Developer's Guide for more information. However, once you are ready to theme your elements, you only need to add a class and invoke this plugin. For instance, if you have a File Field with a video, simply use something like the following:

<?php
jq_add
('jquery_media');
print
l($node->title, $node->field_file_field[0]['filepath'], array('class' => 'media'));
?>

You may override the global defaults of this plugin when configuring. Additionally, you may override a global default on a case-by-case basis by including the override in an options array when invoking the plugin. For instance, you might override the background color of players on a specific page with

<?php
jq_add
('jquery_media', array('bgcolor' => '#33FF00'));
?>

This will override the defaults of the plugin for every media link on that page, which may in turn override those individually (more on that later).

The full array of global overrides are as follows:

  • 'flvplayer' => The path to the Flash Video Player to be used, such as the JW FLV Player or Wimpy Rave.
  • 'mp3player' => The path to the MP3 Audio Player to be used, such as the JW FLV Player or Wimpy MP3 Player.
  • 'boxtitle' => When using the MediaBox option (the modal overlay), this will be the title displayed on that box after clicking the link.
  • 'loadingimage' => When using the MediaBox option, the path to this image will be displayed while loading the media after clicking the link.
  • 'media width' => The width the media will be displayed as.
  • 'media height' => The height the media will be displayed as.
  • 'mediabox width' => The width the MediaBox will be displayed as.
  • 'mediabox height' => The height the MediaBox will be displayed as.
  • 'autoplay' => If TRUE, then play the media as soon as loading it.
  • 'bgcolor' => This will be the background color for the media player, in hexidecimal code (#RRGGBB).
  • 'invoke media' => If TRUE, then cause all links with the 'media class' to automatically be turned into embedded media when invoking the plugin.
  • 'invoke mediabox' => If TRUE, then cause all links with the 'mediabox class' to automatically display a modal overlay box when clicked.
  • 'media class' => The class that will be turned into embedded media on invocation. It uses jQuery CSS notation, so should be something like 'a.media' for links.
  • 'mediabox class' => The class that will display a modal overlay box when clicked on invocation. It uses jQuery CSS notation, so should be something like 'a.mediabox' for links.

Finally, you may override a global setting on an individual basis. The customizations here are extensive, and rather than repeating that here, you are directed to the jQuery Media homepage for more information. As an example, you might set the size of a specific file with the following, while leaving any other jquery media links on the page at their default. (Note that we change the class away from the default 'media' in this example. It also assumes we've already invoked it as above.):

<?php
print l($node->title, $node->field_audio_file, array('class' => 'media-audio')); drupal_add_js("$('a.media-audio').media( { width: 200, height: 15, autoplay: true } )", 'inline');
?>

Note that by default, the module will add its default overrides inline. However, you may set it to output them to a dynamic javascript file, and may additionally wish to set the defaults to a static js file, once development is complete. You can alter those settings when configuring the module.

Plans for jQuery Media and jMedia Support

I've just created the jQuery Media and jMedia wrapper modules for those two jQuery plugins. I am excited about both of them, which are similar. I'm already using jQuery Media for the audio player for Air America Radio (to be launched next week), and found out about jMedia today while researching other uses for the plugin.

Basically, these plugins will replace links or other text with Multimedia, automatically compatible with the browser. They both support audio and video, and come packed with cool features that I haven't even finished exploring yet.

I'll show you how it works next week after Air America's launch. But I'll let you know, it's really, really cool. Makes developing multimedia intensive sites super easy. And I'll definitely have to put it in Drupal Multimedia, my book that should be published this summer.

I plan to support one or both of them in Embedded Media Field as well, as it should make theming that easier than it currently is. They both already support jQ out of the box, for easier administration.

And that's just the beginning...

Drupal Text Editor Brainstorming

Oleg Terenchuk (litwol) and I were discussing the Rich Text Editor (RTE) in core thread on the developer's list the other day. He has a great idea to create some hooks to allow this to be simple, powerful, and easily extendible. It would be written in jQuery, and allow buttons to be built on top of it.

The difficult part would be getting jQuery to recognize selected text in a textarea. jQuery has no native functions to do this, so a plugin would have to be written. Most current jQuery RTE's work using an IFrame, due mainly to the difficulty in getting FireFox to easily query the selected text of a textarea.

In Internet Explorer, it's easy: built-in proprietary properties, .selectionStart and .selectionEnd, will give you whatever's selected, whether in a textarea, or in the document itself. Of course, it's non-standard, so it doesn't work in FireFox.

I found the solution while we were chatting. However, it is in javascript, rather than jQuery, which means we have to do some tweaking. Using the original post for inspiration, ideally we could code something like this:

jQuery.fn.selectionText = function() {
  if (this[0].selection) {
    return this[0].selection.createRange().text;
  }
  else if (this[0].selectionStart != 'undefined') {
    return this[0].value.substring(this[0].selectionStart, this[0].selectionEnd);
  }
}

Unfortunately, I don't believe that this[0].selection will work, from what I've read. Thus, we have to use document.selection, which will work after a fashion. Unfortunately, that will select text from anywhere on the page, so we'll have to do some more research.

If it works, however, this should give the text of the selection. This would have to be tweaked to work with elements other than ID's, as jQuery $('.whatever') actually returns an array of elements. This code would only return the selected text of the first element, which might be blank if the selection is elsewhere.

Then we could do something like:

jQuery.fn.setSelectionText = function(txt) {
  if (this[0].selection) {
    this[0].selection.createRange().text = txt;
  }
  else {
    this[0].value = txt;
  }
  this[0].focus();
}

You would use this something like this, attaching this to a button, say, that makes something bold:

$(document).ready(function() {
  $('#bold-button').click(function() {
    $('#my-textarea').setSelectionText('<b>' + $('#my-textarea').selectionText() + '</b>');
  });
});

That should do it. We'll be building and testing later this week, so expect a live demonstration soon!

HoverIntent in Air America Header

I've set up a sliding show schedule header for Air America, although unfortunately, you can't preview it yet. (That'll launch in April). I found a good use for the hoverIntent module there: when you scroll over a show icon, the upcoming show information will be displayed below. Usually, you would just use jQuery's .mouseOver event for that. However, using hoverIntent, it slows down the reaction, so if you zip your mouse past an icon, it won't automatically set the text: you'll instead need to intentionally point your mouse at it for half a second. I believe this makes the animation much smoother.

Views Slideshow uses that module if it's enabled as well. Note that hoverIntent requires jQ and (if you're using Drupal 5) jQuery Update.

Here's the snippet I used:

Syndicate content

The Society for Venturism has chosen me as the recipient of its charity for this year, to hopefully offer me cryonic preservation when the time comes. And this month, Longecity, an excellent forum for the discussion of issues related to extending the lifespan of humans, has offered up a matching grant of up to a thousand dollars to help out! So help out! Please.