Quote from Summary, because my posts are always way too long
If you change a few CSS classes and have the PHP set them instead of the JavaScript, then you can simply use this CSS (which handles the changes) and this JavaScript. The JavaScript in this post is a lot shorter than the one you use. It requires jQuery, but SEN has jQuery, so that's not a problem.
You depend on JS to identify the last item in a tree or subtree; this should be done in the PHP.
If you write "last" as a separate className, and if you write it using PHP, then you can use the CSS and JavaScript below. The CSS is slightly shorter, and the JavaScript is considerably shorter but requires the jQuery library (which we have on SEN, so that's fine).
So for example, instead of writing out something with class="lastopen", you'd write class="last open".
CSS: replace lines 48-67
Code
.sc2 .last, .sc2 .tree.last
{
background-image: url('Images/Format-Angle.png');
background-position: 4px 0px;
background-color: #FFFFFF;
}
.sc2 .collapsed.last
{
background-image: url('Images/Format-Plus-End.png');
}
.sc2 .open.last
{
background-image: url('Images/Format-Minus-End.png');
}
{
background-image: url('Images/Format-Angle.png');
background-position: 4px 0px;
background-color: #FFFFFF;
}
.sc2 .collapsed.last
{
background-image: url('Images/Format-Plus-End.png');
}
.sc2 .open.last
{
background-image: url('Images/Format-Minus-End.png');
}
(A CSS rule can select an element with a combination of classes. div.foo.bar only matches DIVs with both the class "foo" and the class "bar".)
JavaScript, requires jQuery:
Code
SC2Tree =
{
// Allow classnames to be configured in the script
// in case a class needs to be renamed due to a
// conflict or something
classes:
{
open: "open",
collapsed: "collapsed"
},
_click:
function(e) {
e.stopPropagation(); // we don't want this bubbling up to ancestor LIs.
var mouseX = e.pageX,
mouseY = e.pageY;
// X/Y position of the element on the page.
var cur = $(this).offset();
// Ignore clicks that aren't on the "-" and "+" buttons.
// Probably not good to hard-code the "hitbox" size, but whatever.
if (mouseY - cur.top > 16 || mouseX - cur.left > 20)
return;
// swap the classes
if ($(this).hasClass(SC2Tree.classes.open))
$(this).removeClass(SC2Tree.classes.open).addClass(SC2Tree.classes.collapsed);
else
$(this).removeClass(SC2Tree.classes.collapsed).addClass(SC2Tree.classes.open);
},
init: // sc2tree
function() {
// Add the event handler to any LI that contains a sub-list.
$("div.sc2trigger li:has(ul)").click(this._click);
}
};
$(document).ready(function(){SC2Tree.init()}); // initialize when the page loads.
{
// Allow classnames to be configured in the script
// in case a class needs to be renamed due to a
// conflict or something
classes:
{
open: "open",
collapsed: "collapsed"
},
_click:
function(e) {
e.stopPropagation(); // we don't want this bubbling up to ancestor LIs.
var mouseX = e.pageX,
mouseY = e.pageY;
// X/Y position of the element on the page.
var cur = $(this).offset();
// Ignore clicks that aren't on the "-" and "+" buttons.
// Probably not good to hard-code the "hitbox" size, but whatever.
if (mouseY - cur.top > 16 || mouseX - cur.left > 20)
return;
// swap the classes
if ($(this).hasClass(SC2Tree.classes.open))
$(this).removeClass(SC2Tree.classes.open).addClass(SC2Tree.classes.collapsed);
else
$(this).removeClass(SC2Tree.classes.collapsed).addClass(SC2Tree.classes.open);
},
init: // sc2tree
function() {
// Add the event handler to any LI that contains a sub-list.
$("div.sc2trigger li:has(ul)").click(this._click);
}
};
$(document).ready(function(){SC2Tree.init()}); // initialize when the page loads.
You can then remove the IDs from the div.sc2trigger>ul.sc2. The JavaScript I've posted uses jQuery to locate all div.sc2trigger elements fairly quickly, so the IDs end up being redundant.
None.
Currently Working On: 
