FOLLOW US
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:
|
1 2 3 4 5 |
<code>
#content table.index tr.highlight,
#content table.index tr:hover {
background-color: #ffffb3;
}</code> |
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:
|
1 2 3 4 5 6 7 |
<code>
// 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'});}
});
</code> |
This is on line 77- in the DragOrder function.
It’s great to consolidate a lot of changes in 4 lines!