#1 Three small enhancements

[Arialdo Martini]

Nice work! Krumo is an excellent tool, even if usually print_r() is enough for most applications.

Here are 4 little enhancement I wrote hoping they can be useful for Krumo's lovers.

Recursive Fold/Unfold all

Folding and unfolding Krumo's capabilities are supposed to be used especially with very long results, hence the need to click on every single node can be very annoying. What Krumo is missing, in my opinion, is a way to fold and unfold recursively a set of nodes. I think it's unconfortable to have a dinamically structured print of a complex dump if it requires tons of clicks.

My version of Krumo displays a "++" next to each node's name: clicking on it every child node is recursively unfolded and "++" becomes "--". Equally, clicking on a "--" every child node will be folded. This may ease and speed up node's browsing.

To achieve this result, you have to change both class.krumo.php and krumo.js

In krumo.js add

krumo.toggleAll = function(el) {
var ul = el.parentNode.parentNode.getElementsByTagName('ul');

var parentMode = (ul[0].parentNode.style.display == 'none')
? 'block'
: 'none';
var parentText = (ul[0].parentNode.style.display == 'none')
? '--'
: '++';
el.innerHTML = parentText;
for (var i=0; i<ul.length; i++) {
ul[i].parentNode.style.display = parentMode;

}

var expandAlls = el.parentNode.parentNode.getElementsByClassName('expandall');
for (var i=0; i<expandAlls.length; i++) {
expandAlls[i].innerHTML = parentText;

}

}

Other small fixes are in the resulting file wich you can download from the bottom of this page.

In krumo.php, you have to change function _array() in order to print the '++' element with the right javascript onClick event.

Private Static Function _array(&$data, $name) {
?>
<li class="krumo-child">
<div class="krumo-element<?php echo (count($data) > 0) ? ' krumo-expand' : ' krumo-dontexpand';?>"
<?php if (count($data) > 0) {?> onClick="return;krumo.toggle(this);"<?php } ?>
>
<a class="krumo-name" <?php if (count($data) > 0) {?> onClick="krumo.toggle(this.parentNode);"<?php } ?>>
<?php echo $name;?>
</a> |
<a class="expandall" <?php if (count($data) > 0) {?> onClick="krumo.toggleAll(this);"<?php } ?>>
<?php echo "++";?>
</a>

Only clickable items showed as links

Foldable and unfoldable items always appear underlined, as ordinary links but of course, they cannot be clicked. This can be confusing. To improve readibility, I think unfoldable items should be printed as normal text. This can be easily obtained adding a css class "krumo-dontexpand" and substituting, in class.krumo.php::_string(), the code

<div class="krumo-element<?php echo $_extra ? ' krumo-expand' : '';?>"
<?php if ($_extra) {?> onClick="krumo.toggle(this);"<?php } ?>
onMouseOver="krumo.over(this);"
onMouseOut="krumo.out(this);">

with

<div class="krumo-element<?php echo $_extra ? ' krumo-expand' : ' krumo-dontexpand';?>"

Then, you can style your krumo-dontexpand items as desired. I'm using

div.krumo-dontexpand a{
text-decoration:none;
color:black;
}
div.krumo-expand a{
text-decoration:underline;
}

OnMouseOver without JavaScript

The last little enhancement is for the Hover coloring effect. You can add the class

div.krumo-element:hover
{
background-color: #aaaaff;
}

in the skin.css file and get rid of the two Javascript functions

krumo.over = function(el) {
krumo.reclass(el, 'krumo-hover');
}

krumo.out = function(el) {
krumo.unclass(el, 'krumo-hover');
}

in the file krumo.js

Hence every reference to onMouseOver() and onMouseOut() in krumo.php can be deleted. For example,

<div class="krumo-element"
onMouseOver="krumo.over(this);"
onMouseOut="krumo.out(this);">

<a class="krumo-name"><?php echo $name;?></a>
(<em class="krumo-type krumo-null">NULL</em>)
</div>

becomes

<div class="krumo-element"
<a class="krumo-name"><?php echo $name;?></a>
(<em class="krumo-type krumo-null">NULL</em>)
</div>

Please, find attached the whole project

arialdomartini@bebox.it

[Arialdo Martini]

Krumo with some small enhancements