'Battle plans'

How best to move forward implementing priority AJAX functionality?

We've got a lot of pieces in the works.

• Drupal.js helpers and the existing core behaviours (collapse, autocomplete, etc.)
• Thox's contributions beyond existing core pieces, including AJAX spellcheck
• Steven's contributions beyond existing core pieces, including tablesorting
• Jaza's Activeselect
• Jjeff has 'prototyped' methods for scriptaculiousifying Drupal in S/P Ajax.
• Based on his Moo module, Steve McKenzie has roughed in a very cool edit in place behaviour.
• I've recently sketched in a number of behaviours (AJAX form submitting with preview, dynamically loading content into a block, etc.) as Javascript Tools
• etc.

So there's a lot of good work underway. How can/should we coordinate efforts? How can we ensure that different behaviours know about each other as needed? If various behaviours need the same helpers (e.g, determining the base url), how can we register these once? How can we avoid unneeded duplication of efforts, e.g., developing different implementations of the same behaviour?

In coversations with Steve and Jjeff over the past couple of days, we've come up with a few ideas. Here they are. Please wade in and correct or comment!

• Behaviours should be distinct from effects. Implement behaviours in generic ways so that various effect libraries could be attached. Expose effects (e.g., collapsing or scrollIntoView from collapse.js) so that effects libraries can attache effects to them.
• We need a way to register behaviours - including core ones - so e.g. we can reattach them to dynamically loaded content.
• Put commonly needed helpers into a shared place, as is done in drupal.js for core behaviours.
• Ideally, implement namespace to avoid functionname collisions/
• Communicate, collaborate--hence this new group!

A possible approach:

• Refactor the existing Javascript Tools library so that it is its own module with an equivalent to drupal.js--a place for common methods, some of them candidates for eventual inclusion in drupal.js. E.b., jstools.js. Use an equivalent to drupal_add_js to ensure that this is loaded before any behaviour libraries relying on it.
• Behaviours register themselves to an object defined in jstools.js. Existing core behaviours are also detected (through detecting their attach functions).
• All effects are pulled into separate function calls. jstools.js implement 'vanilla' effects, like the existing drupal.js ones (e.g., toggling of classes for collapse). Effects libraries can override these with their own versions.

Some rough sample code. I'm using object notation to minimize collisions, but we could easily follow drupal.js instead.

A. Provide a set of helper functions, beyond those in drupal.js.

// A set of helper functions, beyond the methods declared in drupal.js.
function jsToolsHelpers() {};

// Cookie handling helpers
jsToolsHelpers.prototype.setCookie = function(sName, sValue, nDays) {
  var expires = "";
  if (nDays) {
    var d = new Date();
    d.setTime(d.getTime() + nDays * 24 * 60 * 60 * 1000);
    expires = '; expires=' + d.toGMTString();
  }

  document.cookie = sName + '=' + sValue + expires + '; path=/';
};

B. Factor out our effects.

var jsToolsEffects = function() {};
// Returns the event's source element 
jsToolsEffects.prototype.collapse = function(node) {
  toggleClass(node, 'collapsed');
}

C. Register behaviours.

if (jsToolsHelpers && jsToolsEffects) {
  var jsTools = {
    behaviors: {},
    helpers: new jsToolsHelpers(),
    effects: new jsToolsEffects(),
    init: function() {
      jstools.attachBehaviors();
      // We detect core behaviours after inital attachment because they already register themselves
      // as load events.
      jstools.detectCoreBehaviors();
    },
    attachBehaviors: function(elt) {
      if (!elt) {
        elt = document;
      }
      for(var behaviorName in  jsTools.behaviors) {
        jstools.behaviors[behaviorName](elt);
        if (jstools.behaviorListeners[behaviorName]) {
          for (var listenerName in jstools.behaviorListeners[behaviorName]) {
            if (jstools.behaviors[listenerName]) {
              jstools.behaviors[listenerName](elt);
            }
          }
        }
      }
    },
    detectCoreBehaviors: function() {
      var coreBehaviors = {'upload': uploadAutoAttach};
      for (behaviorName in coreBehaviors) {
        if (coreBehaviors[behaviorName]) {
          jstools.behaviors[behaviorName] = {
            attach: coreBehaviors[behaviorName]
          };
        }
      }
    }
  };

We would declare a new behaviour as:

if (jsTools) {
  jsTools.behaviours['autowhatever'] = autowhateverAutoAttach;
}