nanotree plugin
| From: | Tom Anderson | Date: | Thu, 22 May 2003 18:09:41 +0000 |
| Subject: | nanotree plugin | ||
| References: | 1 | Groups: | php.smarty.dev |
| Request: | Send a blank email to php-smarty-dev+get-1494@lists.php.net to get a copy of this message | ||
I've got this working but only sorta.
The flexibility of nanotree does not lend itself to a simple-to-use smarty
plugin.
My original thought was 'build a tree based on a multidimentional array'.
I've done this but it doesn't allow for extended attributes such as the icon
used for the page.
Also, text for nodes is a problem. for array('p1','p2'); you'd epxect
|_p1
|_p2
but nanotree allows nodes to have additional text. the first node (help
icon) on the official version uses this. However, I haven't found a way to
make a simple associative array work this way:
'page name' => 'extended text'
could work, but runs into problems when you have things like
'new page' => '',
'new page' => ''
which would, of course, need to be done as
'new page','new page'
but then 0 and 1 would be the page names.
This could be worked around by not allowing ints as page titles, but it's
quite a kludge.
Tom
Here's the code so far:
function.nanotree.php:
<?php
function smarty_function_nanotree($params, &$smarty) {
/*
// Required: container, data
// name == container?
if (!$params['data'] || !$params['container']) {
// $smarty->trigger_error("assign: missing 'var' parameter");
// return;
}
$data = $params['data'];
$container = $params['container'];
*/
$showRootNode = ($params['showRootNode']) ? 'true': 'false';
$container = 'examplediv';
$data =
array(
'RootNode' => array(
'subpage 1' =>
'<P>This treenode can be renamed (Try to click onnce
more on the node).<br>(You have to handle the renaming itself in a function
though, since this is implementation specific. ie: Go down in a database and
change the titel of a page).<br>A good example would be to open a PHP script
to do the renaming, this can for example be done by setting location.href on
a hidden iframe, or by setting the src attribute on a script element.</P>',
'subpage 2' => array(
'1st subpage to node 2' => array(
'subpage to subpage of node 2' => array(
'Some Child', 'Some Child', 'Some
Child'
),
'2nd subpage to node 2',
'3rd subpage to node 2'
),
),
'subpage 3' => array(
'Yet another child'
),
'subpage 4'
)
);
echo <<<EOF
<script type="text/javascript" language="JavaScript">
showRootNode = $showRootNode;
sortNodes = false;
dragable = false;
/**
* Needed to initialize the tree.
* And to call showTree(imagePath); to actually show the tree.
* Alternatively this can be done in a script block at the bottom of the
page.
* Though this method is somewhat cleaner.
*/
function init() {
container = document.getElementById('$container');
showTree('');
}
/**
* Called when a user clicks on a node.
* @param treeNode the TreeNode object which have been clicked.
*/
function standardClick(treeNode) {
var mytext = document.getElementById('mytext');
var param = treeNode.getParam();
mytext.innerHTML = (param == '') ? treeNode.getName() : param;
}
function nodeEdited(treeNode) {
}
var closedGif = 'images/folder_closed.gif';
var openGif = 'images/folder_open.gif';
var pageIcon = 'images/page16x16.gif';
var userIcon = 'images/user_16x16.gif';
var helpIcon = 'images/help_16x16.gif';
EOF;
_smarty_function_nanotree_treewalk($data);
echo "\n\n</script>";
}
function _smarty_function_nanotree_treewalk($nodedata, $nodekey = '',
$parent = 'node', $subkey = 65) {
static $nodeNumber, $rootNode;
if (is_array($nodedata)) {
$parent = $parent . chr($subkey);
if ($rootNode) {
$thisNode = $parent;
} else {
$thisNode = 'rootNode';
$parent = 'node';
}
$rootNode = true;
echo 'var ' . $thisNode . ' = new TreeNode(' . ++$nodeNumber
. ', "' . key($nodedata) . "\",new Array(closedGif,openGif));\n";
$subsubkey = 65;
foreach ($nodedata as $key => $value) {
if (!_smarty_function_nanotree_treewalk($value,
$key, $parent, $subsubkey)) {
echo "\t$thisNode.addChild($parent" .
chr($subsubkey) . ");\n";
}
$subsubkey ++;
}
return false;
} else {
// This is a leaf
echo 'var ' . $parent . chr($subkey) . " = new TreeNode(" .
++$nodeNumber . ',"' . $nodedata . '", pageIcon';
echo ");\n";
echo "\t$parent.addChild($parent" . chr($subkey) . ");\n";
return true;
}
}
?>
usage in a template file:
<script type="text/javascript" language="JavaScript"
src="js/nanotree.js"></script>
{nanotree}
{literal}
<style type="text/css">
div,p,a {
font-family: Verdana,Arial;
font-size: 11px;
}
#exampletable {
width: 100%;
height: 100%;
}
#examplediv {
width: 250px;
height: 100%;
overflow: auto;
}
.explanation {
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body onLoad="init();">