|
Hi, here is a snippet that I've just done for the
community use, it will help you when debugging your application
files.
Please feedback any suggestion or even if you just
find it usefull.
If anyone add some extensions It will be glad that
it remain available for the communauty
I plan to have a better rendering of arrays
etc...
I know that there is many @rows loop that can be
optimised with use of variables assigments
but I've just done this because I'm completly
excited with the DOM features and I know it will help me in any Witango
development, and I'm not a mad developer that can implement everything in the
first batch ;)
Gauthier
ps:
WARNING:
-it work only on standard
compliant browser, that's not an issue as soon as it's fired only on the
developper computer and he can easily install a compliant browser
;)
-you should change the local$scopeArray values to
add array that matter for you
here is the first bugs that I've reported to
myself:
-if you change the current tab, the ex-selected var
will remain 'selected' in the tab content
-if you have variable with same name in multiple
scopes, they all are showed when you click one, but it's finally a kind of
feature so I keep it for the moment
|
<@debug>
<@assign local$scopeArray <@array value="Domain;User;Local;">>
<style type="text/css">
body {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px;}
span.tab, span.tabOn, span.tabOff {border:1px solid #000; cursor:pointer;
line-height:15px;}
span.tabOn, .debugVarTable td.on {background-color:#369; color:#FFF;}
span.tabOff, .debugVarTable td.off {background-color:#FFF; color:#369;}
.tabGrp {width:30%;}
#tabContent{ overflow:scroll; overflow-x:hidden ; height:200px;border:1px
solid #369;}
.debugVarTable td { border:1px solid #000;}
#varContent {border:4px dashed #336699;}
</style>
<div class="tabGrp" id="tabGrpDebugWitango">
<div id="tabHeader">
<@rows array="local$scopeArray">
<span class="tab" id="scope<@var local$scopeArray[<@currow>,1]>"
onclick="selectTab(this);"><@var local$scopeArray[<@currow>,1]> Scope</span>
</@rows>
</div>
<div id="tabContent">
<@rows array="local$scopeArray"><@assign local$eachScope <@currow>>
<div id="tabscope<@var local$scopeArray[<@currow>,1]>">
<@assign local$<@var
local$scopeArray[<@currow>,1]>Vars <@varnames scope='<@var
local$scopeArray[<@currow>,1]>'>>
<table class="debugVarTable">
<@rows array="local$<@var
local$scopeArray[<@currow>,1]>Vars" step="4">
<tr>
<td id="<@var local$<@var
local$scopeArray[<@var local$eachScope>,1]>Vars[<@calc expr="<@currow>+0">,1]>"
onclick="refreshVar(this)">
<@var local$<@var
local$scopeArray[<@var local$eachScope>,1]>Vars[<@calc expr="<@currow>+0">,1]>
</td>
<td id="<@var local$<@var
local$scopeArray[<@var local$eachScope>,1]>Vars[<@calc expr="<@currow>+1">,1]>"
onclick="refreshVar(this)">
<@var local$<@var
local$scopeArray[<@var local$eachScope>,1]>Vars[<@calc expr="<@currow>+1">,1]>
</td>
<td id="<@var local$<@var
local$scopeArray[<@var local$eachScope>,1]>Vars[<@calc expr="<@currow>+2">,1]>"
onclick="refreshVar(this)">
<@var local$<@var
local$scopeArray[<@var local$eachScope>,1]>Vars[<@calc expr="<@currow>+2">,1]>
</td>
<td id="<@var local$<@var
local$scopeArray[<@var local$eachScope>,1]>Vars[<@calc expr="<@currow>+3">,1]>"
onclick="refreshVar(this)">
<@var local$<@var
local$scopeArray[<@var local$eachScope>,1]>Vars[<@calc expr="<@currow>+3">,1]>
</td>
</tr>
</@rows>
</table>
</div>
</@rows>
</div>
</div>
<div id="varContent">
<@rows array="local$scopeArray"><@assign local$eachScope <@currow>>
<@rows array="local$<@var local$scopeArray[<@currow>,1]>Vars">
<div style="display:none" id="<@var local$<@var local$scopeArray[<@var
local$eachScope>,1]>Vars[<@currow>,1]>">
<h2><@var local$scopeArray[<@var local$eachScope>,1]>$<@var
local$<@var local$scopeArray[<@var local$eachScope>,1]>Vars[<@currow>,1]></h2>
<h3>value:</h3>
<@var <@var local$scopeArray[<@var local$eachScope>,1]>$<@var
local$<@var local$scopeArray[<@var local$eachScope>,1]>Vars[<@currow>,1]>>
</div>
</@rows>
</@rows>
</div>
<script>
function refreshVar(elm)
{
for(var i=0;i<elm.parentNode.parentNode.childNodes.length;i++)
for(var
j=0;j<elm.parentNode.parentNode.childNodes[i].childNodes.length;j++)
elm.parentNode.parentNode.childNodes[i].childNodes[j].className='off'
elm.className='on';
var divContent=document.getElementById('varContent');
for(i=0;i<divContent.childNodes.length;i++)
{
if(divContent.childNodes[i].id!=elm.id)
divContent.childNodes[i].style.display='none';
else
divContent.childNodes[i].style.display='block';
}
}
</script>
<script>
var classTabOn ='tabOn';
var classTabOff ='tabOff';
currentTabGrp=document.getElementById('tabGrpDebugWitango');
selectTab(currentTabGrp.childNodes(0).childNodes(0));
function showTabContent(divsource,tabcontentid)
{
function hideAllTabsContents(divsource)
{
var contents=divsource.childNodes(1);
var childs=contents.childNodes.length;
var i;
for(i=0;i<childs;i++)
{
contents.childNodes(i).style.display='none';
}
}
hideAllTabsContents(divsource);
var childs=divsource.childNodes(1).childNodes.length;
var i;
for(i=0;i<childs;i++)
{
if(divsource.childNodes(1).childNodes(i).id==tabcontentid)
{
divsource.childNodes(1).childNodes(i).style.display='block';
}
}
}
function deselectSiblingTabs(tab)
{
for(var i=0;i<tab.parentNode.childNodes.length;i++)
{
if(tab.parentNode.childNodes(i).tagName=='SPAN' &&
tab.parentNode.childNodes(i).id!==tab.id)
{
tab.parentNode.childNodes(i).className='tabOff';
tab.parentNode.childNodes(i).style.cursor='pointer';
}
}
}
function selectTab(tab)
{
showTabContent(tab.parentNode.parentNode,'tab'+tab.id);
deselectSiblingTabs(tab);
tab.className=classTabOn;
tab.style.cursor='default';
}
</script>
</@debug>
