Sunday, August 15, 2010

Expanding / collapsing Sitecore content tree nodes on double click

The Sitecore CMS provides very high level of usability, so people without special training can get used to it very quickly. But there is one thing in content tree, that behaves differently in a Windows Explorer. Let's see the following example:










If you double-click on the "Inner folder 1" folder name, it will expand / collapse. But how about Sitecore?










Hmm... double click does nothing, item simply gets refreshed.

So, why Sitecore does not handle this event? I suppose it's because single and double click can not be handled in JavaScript without some delay to distinguish them. If you make a double-click, single-click event is fired first, and if you want to find the right one, you have to wait 200-300ms before processing event. 

But, when extra 200ms(only when you perform a single click) to the response time are not too important and you want to pass through the item levels really quickly without having to aim small glyph near the item name, it makes sense to enable double-clicking.

JavaScript code that manages Content Tree is located here: website\sitecore\shell\Applications\Content Manager\Content Editor.js and its possible to implement our improvement by changing only this file.

First, let's add the double-click handling method. The idea is pretty simple: find a clicked item's glyph and pass it to the "Glyph clicked" event handler:

scContentEditor.prototype.onTreeDoubleClick = function(sender, evt) {
  clearTimeout(timer);
  dblclick = true;
  var ctl = scForm.browser.getSrcElement(evt);
  if (ctl != null) {    
    while(ctl != null && ctl.tagName != "A") {
      ctl = ctl.parentNode;
    }
    
    if (ctl != null) {
      if (ctl.id != null && ctl.id.indexOf("_Node_") >= 0) {
  ctl = document.getElementById(ctl.id.split("_Node_").join("_Glyph_"));
        return scContent.onTreeGlyphClick(ctl, ctl.id.substr(ctl.id.lastIndexOf("_") + 1));
      }
    }
  }

  scForm.browser.clearEvent(evt, true, false);
  
  return false;
}

Then, we need to modify existing single-click handler. Instead of instant processing, we'll schedule it using

timer = setTimeout(function()
{
 ... method body..... 
},250)  

Where 250 is a delay before processing event in milliseconds.

As you can see in the double-click handler above, timeout for a single click will be cleared if the double-click event was fired.

And finally, few lines of code to add ondblclick event to the content tree:

$('ContentTreePanel').observe('dblclick', function(event){
  scContent.onTreeDoubleClick(this, event)
  });

Done! Now, if you double-click at the item name, it's node will expand / collapse. Try it, I find it very fascinating.


The resulting file for Sitecore 6.3(it will probably work with earlier versions too) is attached. It's confirmed to work fine in IE / Firefox / Chrome, please let me know if you find any issues with it.