Feb
13
2006

Smarty How to: Javascript Debug Template

UPDATE : A download package is available here : http://ideamesh.com/file/11/Smarty-Debug-with-Collapsible-Variables.html

Here is the modified code, working and ready to go..

Here is the link where you can download the nanotree javascript…
http://nanotree.sourceforge.net/

Replace my variable {$Site.framework_pub} appropriately so that the javascript and images can be loaded correctly.

Also please note, I have added in a section to handle user defined debug vars… My debug structure is named ‘_user_debug’ and ‘_user_debug_key’

For more info on how to implement this look at this thread :
http://www.smarty.net/forums/viewtopic.php?p=31241#31241

Otherwise if you aren’t interested, it is safe to remove that section from the template. You could also remove the {if} statement I used to wrap the template var section.

Another thing you might want to play with is how many characters are output as the value for debug. Look for this and modify the second number to alter the max chars output :@debug_print_var:0:1000

PS Can anyone figure out why I am getting a space above the <h3> in the right cell?

Hope this helps, I know I like it Smile

PS To get all the javascript working correctly you only need to modify the line “var mynanopath = ” and make sure it points to your public nanopath directory. You can down the nanotree package from http://sourceforge.net/projects/nanotree/

Here is the updated code

Code:
{*
Smarty Custom DHTML Debug Template
@author Hielke Hoeve
@author Owen Cole <owenc at ideamesh dot com>
@since 02/13/2006 Smarty 2.6.12
@package Smarty
@filename debug.tpl
*}

{assign_debug_info}

<SCRIPT language=javascript>
var mynanopath =  “{$Site.javascript_path}\/nanotree\/”;

if( self.name == ” ) {ldelim}
var title = ‘Console’;
{rdelim}
else {ldelim}
var title = ‘Console_’ + self.name;
{rdelim}
_smarty_console = window.open(”",title.value,”width=800,height=600,resizable,scrollbars=yes”);
_smarty_console.document.write(”<html><head><title>Smarty Debug Console_”+self.name+”<\/title>\n”);
_smarty_console.document.write(”<style>\n”);
_smarty_console.document.write(”h3 {ldelim}padding : 5px 5px 5px 5px; margin : 0px 0px 0px 0px; background-color : #cccccc;{rdelim}\n”);
_smarty_console.document.write(”#debugtreetable {ldelim}width : 100%;{rdelim} \n”);
_smarty_console.document.write(”#debugtreetable td {ldelim}border : thin solid black;{rdelim} \n”);
_smarty_console.document.write(”#debugtreetextdiv div {ldelim}padding-left : 10px;{rdelim} \n”);
_smarty_console.document.write(”<\/style>\n”);
_smarty_console.document.write(”<script language=\”Javascript\” src=\”" + mynanopath + “nanotree.js\”><\/script>\n”);
_smarty_console.document.write(”<script type=\”text\/javascript\” language=\”JavaScript\”>\n”);
_smarty_console.document.write(”<!–\n”);
_smarty_console.document.write(”   showRootNode = true;\n”);
_smarty_console.document.write(”   sortNodes = 0;\n”);
_smarty_console.document.write(”   dragable = false;\n”);
_smarty_console.document.write(”   showAllNodesOnStartup = true;\n”);

_smarty_console.document.write(”   \/**\n”);
_smarty_console.document.write(”    * Needed to initialize the tree.\n”);
_smarty_console.document.write(”    * And to call showTree(imagePath); to actually show the tree.\n”);
_smarty_console.document.write(”    * Alternatively this can be done in a script block at the bottom of the page.\n”);
_smarty_console.document.write(”    * Though this method is somewhat cleaner.\n”);
_smarty_console.document.write(”    *\/\n”);
_smarty_console.document.write(”   function init() {ldelim}\n”);
_smarty_console.document.write(”      container = document.getElementById(’debugtreediv’);\n”);
_smarty_console.document.write(”      showTree(’” + mynanopath + “‘);\n”);
_smarty_console.document.write(”   {rdelim}\n”);

_smarty_console.document.write(”   \/**\n”);
_smarty_console.document.write(”    * Called when a user clicks on a node.\n”);
_smarty_console.document.write(”    * @param treeNode the TreeNode object which have been clicked.\n”);
_smarty_console.document.write(”    *\/\n”);
_smarty_console.document.write(”   function standardClick(treeNode) {ldelim}\n”);
_smarty_console.document.write(”      var mytext = document.getElementById(’debugtreetextdiv’);\n”);
_smarty_console.document.write(”      var param = treeNode.getParam();\n”);
_smarty_console.document.write(”      mytext.innerHTML = (param == ”) ? treeNode.getName() : ‘<h3>’ + treeNode.getName() + ‘<\/h3><div>’ + param + ‘<\/div>’;\n”);
_smarty_console.document.write(”   {rdelim}\n”);

_smarty_console.document.write(”   function nodeEdited(treeNode) {ldelim}\n”);
_smarty_console.document.write(”   {rdelim}\n”);

_smarty_console.document.write(”   var closedGif = ‘” + mynanopath + “images\/folder_closed.gif’;\n”);
_smarty_console.document.write(”   var openGif   = ‘” + mynanopath + “images\/folder_open.gif’;\n”);
_smarty_console.document.write(”   var pageIcon  = ‘” + mynanopath + “images\/page16×16.gif’;\n”);
_smarty_console.document.write(”   var userIcon  = ‘” + mynanopath + “images\/user_16×16.gif’;\n”);
_smarty_console.document.write(”   var helpIcon  = ‘” + mynanopath + “images\/help_16×16.gif’;\n”);

{* Create base node *}
{assign var=counter value=0}
_smarty_console.document.write(”   rootNode = new TreeNode({$counter},’Smarty Debug’, helpIcon, ‘This is the Debug Tree. It replaces the classical version of the Smarty Debug Console’);\n”);
{$counter++}

{* Create node for template includes *}
_smarty_console.document.write(”   var node{$counter} = new TreeNode({$counter}, ‘included templates & config files (load time in seconds):’, pageIcon, ‘”);
_smarty_console.document.write(”<table width=\”100%\”>”);
{section name=templates loop=$_debug_tpls}
_smarty_console.document.write(”<tr bgcolor={if %templates.index% is even}#eeeeee{else}#fafafa{/if}><td colspan=2><tt>{section name=indent loop=$_debug_tpls[templates].depth}&&&{/section}<font color={if $_debug_tpls[templates].type eq “template”}brown{elseif $_debug_tpls[templates].type eq “insert”}black{else}green{/if}>{$_debug_tpls[templates].filename|escape:html|escape:javascript}<\\/font>{if isset($_debug_tpls[templates].exec_time)} <font size=-1><i>({$_debug_tpls[templates].exec_time|string_format:”%.5f”}){if %templates.index% eq 0} (total){/if}<\\/i><\\/font>{/if}<\\/tt><\\/td><\\/tr>”);
{sectionelse}
_smarty_console.document.write(”<tr bgcolor=#eeeeee><td colspan=2><tt><i>no templates included<\\/i><\\/tt><\\/td><\\/tr>”);
{/section}
_smarty_console.document.write(”<\\/table>”);
_smarty_console.document.write(”‘);\n”);

_smarty_console.document.write(”   rootNode.addChild(node{$counter});\n”);
{$counter++}

{* Create node for user debug variables *}
_smarty_console.document.write(”   var node{$counter} = new TreeNode({$counter}, ‘user debug variables:’, new Array(closedGif,openGif) );\n”);
_smarty_console.document.write(”   rootNode.addChild(node{$counter});\n”);
_smarty_console.document.write(”   var parent = node{$counter};\n”);
{$counter++}

{* Create child nodes for user debug variables *}
{section name=vars loop=$_user_debug}
_smarty_console.document.write(”      var node{$counter} = new TreeNode( {$counter}, ‘{ldelim}${$_user_debug_key[vars]}{rdelim}’, pageIcon, ‘{$_user_debug[vars]|@debug_print_var:0:1000|escape:javascript|escape:javascript}’ );\n”);
_smarty_console.document.write(”      parent.addChild(node{$counter});\n”);
{$counter++}
{sectionelse}
_smarty_console.document.write(”      var node{$counter} = new TreeNode(   {$counter}, ‘No User Debug Information assigned’, HelpIcon );\n”);
_smarty_console.document.write(”      parent.addChild(node{$counter});\n”);
{$counter++}
{/section}

{* Create node for template variables *}
_smarty_console.document.write(”   var node{$counter} = new TreeNode({$counter}, ‘assigned template variables:’, new Array(closedGif,openGif) );\n”);
_smarty_console.document.write(”   rootNode.addChild(node{$counter});\n”);
_smarty_console.document.write(”   var parent = node{$counter};\n”);
{$counter++}

{* Create child nodes for template variables *}
{section name=vars loop=$_debug_keys}
{ if $_debug_keys[vars] != ‘_user_debug’ && $_debug_keys[vars] != ‘_user_debug_key’ }
_smarty_console.document.write(”      var node{$counter} = new TreeNode( {$counter}, ‘{ldelim}${$_debug_keys[vars]}{rdelim}’, pageIcon, ‘{$_debug_vals[vars]|@debug_print_var:0:1000|escape:javascript|escape:javascript}’ );\n”);
_smarty_console.document.write(”      parent.addChild(node{$counter});\n”);
{$counter++}
{/if}
{sectionelse}
_smarty_console.document.write(”      var node{$counter} = new TreeNode(   {$counter}, ‘No template variables assigned’, HelpIcon );\n”);
_smarty_console.document.write(”      parent.addChild(node{$counter});\n”);
{$counter++}
{/section}

{* Create node for smarty config file variables *}
_smarty_console.document.write(”   var node{$counter} = new TreeNode({$counter}, ‘assigned config file variables (outer template scope):’, new Array(closedGif,openGif) );\n”);
_smarty_console.document.write(”   rootNode.addChild(node{$counter});\n”);
_smarty_console.document.write(”   var parent = node{$counter};\n”);
{$counter++}

{* Create child nodes for smarty config file variables *}
{section name=config_vars loop=$_debug_config_keys}
_smarty_console.document.write(”       var node{$counter} = new TreeNode( {$counter}, ‘{ldelim}${$_debug_config_keys[config_vars]}{rdelim}’, pageIcon,  ‘{$_debug_config_vals[config_vars]|@debug_print_var:0:1000|escape:javascript|escape:javascript}’ );\n”);
_smarty_console.document.write(”        parent.addChild(node{$counter});\n”);
{$counter++}
{sectionelse}
_smarty_console.document.write(”      var node{$counter} = new TreeNode( {$counter}, ‘No config variables assigned’, HelpIcon );\n”);
_smarty_console.document.write(”      parent.addChild(node{$counter});\n”);
{$counter++}
{/section}

_smarty_console.document.write(”\/\/–>\n”);
_smarty_console.document.write(”<\/script>\n\n”);
_smarty_console.document.write(”<\/head><body onload=\”init()\”>\n”);
_smarty_console.document.write(”<h3>Smarty & User Debug Console<\/h3>”);
_smarty_console.document.write(”<h4>Click on variables in the tree to have their contents displayed in the right side panel.<\/h4>”);
_smarty_console.document.write(”<table border=’0′ id=’debugtreetable’><tr>”);
_smarty_console.document.write(”<td valign=’top’ style=’width: 250px;’><div id=’debugtreediv’>&<\/div><\/td>”);
_smarty_console.document.write(”<td valign=’top’><div id=’debugtreetextdiv’>&<\/td>”);
_smarty_console.document.write(”<\/tr><\/table>”);
_smarty_console.document.write(”<\/body><\/html>”);
_smarty_console.document.close();
</SCRIPT>

tags: ,
posted in Guides, Programming by Owen

Follow comments via the RSS Feed | Leave a comment | Trackback URL

Leave Your Comment

 
© 2008 - 2012 — All Rights Reserved — Ideamesh, Inc. 22 queries. 0.273 seconds.