Radiant CMS: Improving Drag & Order

In the Radiant administration interface, we wanted to allow our CMS users to be able to move pages around and have that final order in the navigation. Well, that is solved by an existing extension- the Drag and Order by Bright4.

We decided to change the icon to make it jump out more, and to turn off rollover highlighting when the user is dragging the page. This post is about changing the highlight rollover functionality.

The rollover highlight is set with CSS, in Radiant’s main.css Line 257:

#content table.index tr.highlight,
#content table.index tr:hover {
  background-color: #ffffb3;

So we needed to essentially turn the tr.highlight/tr.hover off when an object is being dragged, then turn it back on again after dragging, so the rest of the application still has this rollover functionality.

At first, we wrote our own JavaScript file and included it in the header partial, and on the events of MouseUp and MouseDown for the drag image.

A week later, I reviewed the Drag Order JavaScript, and was able to consolidate our changes within that script. When assessing all of the TRs for the table, I inserted a quick loop through all TRs and setting the background color to white:

	// scroll through all trs and set bgcolor to white to reset hover
	 var myTrArray = this.origRow.parentNode.getElementsBySelector('tr');
	 myTrArray.each(function(i) {
		    if(i.id != ''){ $(i.id).setStyle({ backgroundColor: '#ffffff'});}

This is on line 77- in the DragOrder function.

It’s great to consolidate a lot of changes in 4 lines!

One Comment

  1. Posted December 15, 2010 at 5:36 am | Permalink

    Excellent post, one of the few articles I’ve read today that said something unique! One new subscriber here :)

Post a Comment

Your email is never shared. Required fields are marked *