neilw
05-23-2008, 09:28 PM
I'm having a strange problem with a Deki Script XML extension. I'm running 8.05.
I've been hacking daveh's "content.collapse" extension (http://forums.opengarden.org/showpost.php?p=13896&postcount=16) to suit my needs a bit better. Mainly, I'm adding the ability to select the label that is shown for "show" and "hide", by setting the innerHTML property of the show/hide anchor. So far so good.
I decided to get cute and add the option for little "+" and "-" box toggles. If the labels are set to "+" and "-", the code swaps in the appropriate images. This is where the problem is coming in: Deki is inserting extra characters into my <img> tag, and it's visible on the screen. I can see that this stuff gets inserted harmlessly in other places as well, and presumably has a purpose, but in this case it seems misplaced and is certainly unwelcome.
Here's the extension code (note this still needs cleanup, though it would work if not for the aforementioned problem.)
<extension>
<title>Custom Content Extension</title>
<description>Hides/shows a div</description>
<namespace>content</namespace>
<function transform="pre">
<name>collapse</name>
<description>Allow regions of text to be collapsed.</description>
<param name="divname" type="str">name of div to hide/show</param>
<param name="showlabel" type="str" >text to display for "show"</param>
<param name="hidelabel" type="str" >text to display for "hide"</param>
<param name="initialcollapse" type="bool" optional="true">initial display behavior. if true, div is hidden on load</param>
<return>
<html xmlns:eval="http://mindtouch.com/2007/dekiscript">
<head>
<script type="text/javascript">
function ShowHide( divid , showLabel, hideLabel ) {
var divElem = document.getElementById(divid);
var divAnchor = document.getElementById(divid + "_showhide");
if ( divElem.style.display == "none" ) {
divElem.style.display = "block";
divAnchor.innerHTML = (hideLabel == "-" ?
'<img src="/skins/common/icons/icon-collapse.gif" />' : hideLabel);
}
else {
divElem.style.display = "none";
divAnchor.innerHTML = (showLabel == "+" ?
'<img src="/skins/common/icons/icon-expand.gif" />' : showLabel);
}
}
</script>
</head>
<body>
<a eval:id="args.divname..'_showhide'" href="#"
eval:onClick="'ShowHide('..json.emit(args.divname)..','..
json.emit(args.showlabel)..','..
json.emit(args.hidelabel)..');'"><eval:expr>args.hidelabel</eval:expr></a>
</body>
<tail>
<script type="text/javascript">
if ( <eval:js>args.initialcollapse ?? true</eval:js>)
ShowHide(<eval:js>args.divname</eval:js>,
<eval:js>args.showlabel</eval:js>,
<eval:js>args.hidelabel</eval:js>);
ShowHide(<eval:js>args.divname</eval:js>,
<eval:js>args.showlabel</eval:js>,
<eval:js>args.hidelabel</eval:js>);
</script>
</tail>
</html>
</return>
</function>
</extension>
Here's the HEAD script spit out by Deki Wiki on a page where this extension is called:
<script type="text/javascript">/*<![CDATA[*/
function ShowHide( divid , showLabel, hideLabel ) {
var divElem = document.getElementById(divid);
var divAnchor = document.getElementById(divid + "_showhide");
if ( divElem.style.display == "none" ) {
divElem.style.display = "block";
divAnchor.innerHTML = (hideLabel == "-" ?
'<img src="/skins/common/icons/icon-collapse.gif">/*]]>*/</img>/*<![CDATA[*/' : hideLabel);
}
else {
divElem.style.display = "none";
divAnchor.innerHTML = (showLabel == "+" ?
'<img src="/skins/common/icons/icon-expand.gif">/*]]>*/</img>/*<![CDATA[*/' : showLabel);
}
}
/*]]>*/</script>
Note that the string "/*]]>*/" is inserted into my "IMG" tag. This is showing up on screen to the immediate right of the image.
Can anyone shed light on why this is happening, and how I might work around it?
Thanks...
I've been hacking daveh's "content.collapse" extension (http://forums.opengarden.org/showpost.php?p=13896&postcount=16) to suit my needs a bit better. Mainly, I'm adding the ability to select the label that is shown for "show" and "hide", by setting the innerHTML property of the show/hide anchor. So far so good.
I decided to get cute and add the option for little "+" and "-" box toggles. If the labels are set to "+" and "-", the code swaps in the appropriate images. This is where the problem is coming in: Deki is inserting extra characters into my <img> tag, and it's visible on the screen. I can see that this stuff gets inserted harmlessly in other places as well, and presumably has a purpose, but in this case it seems misplaced and is certainly unwelcome.
Here's the extension code (note this still needs cleanup, though it would work if not for the aforementioned problem.)
<extension>
<title>Custom Content Extension</title>
<description>Hides/shows a div</description>
<namespace>content</namespace>
<function transform="pre">
<name>collapse</name>
<description>Allow regions of text to be collapsed.</description>
<param name="divname" type="str">name of div to hide/show</param>
<param name="showlabel" type="str" >text to display for "show"</param>
<param name="hidelabel" type="str" >text to display for "hide"</param>
<param name="initialcollapse" type="bool" optional="true">initial display behavior. if true, div is hidden on load</param>
<return>
<html xmlns:eval="http://mindtouch.com/2007/dekiscript">
<head>
<script type="text/javascript">
function ShowHide( divid , showLabel, hideLabel ) {
var divElem = document.getElementById(divid);
var divAnchor = document.getElementById(divid + "_showhide");
if ( divElem.style.display == "none" ) {
divElem.style.display = "block";
divAnchor.innerHTML = (hideLabel == "-" ?
'<img src="/skins/common/icons/icon-collapse.gif" />' : hideLabel);
}
else {
divElem.style.display = "none";
divAnchor.innerHTML = (showLabel == "+" ?
'<img src="/skins/common/icons/icon-expand.gif" />' : showLabel);
}
}
</script>
</head>
<body>
<a eval:id="args.divname..'_showhide'" href="#"
eval:onClick="'ShowHide('..json.emit(args.divname)..','..
json.emit(args.showlabel)..','..
json.emit(args.hidelabel)..');'"><eval:expr>args.hidelabel</eval:expr></a>
</body>
<tail>
<script type="text/javascript">
if ( <eval:js>args.initialcollapse ?? true</eval:js>)
ShowHide(<eval:js>args.divname</eval:js>,
<eval:js>args.showlabel</eval:js>,
<eval:js>args.hidelabel</eval:js>);
ShowHide(<eval:js>args.divname</eval:js>,
<eval:js>args.showlabel</eval:js>,
<eval:js>args.hidelabel</eval:js>);
</script>
</tail>
</html>
</return>
</function>
</extension>
Here's the HEAD script spit out by Deki Wiki on a page where this extension is called:
<script type="text/javascript">/*<![CDATA[*/
function ShowHide( divid , showLabel, hideLabel ) {
var divElem = document.getElementById(divid);
var divAnchor = document.getElementById(divid + "_showhide");
if ( divElem.style.display == "none" ) {
divElem.style.display = "block";
divAnchor.innerHTML = (hideLabel == "-" ?
'<img src="/skins/common/icons/icon-collapse.gif">/*]]>*/</img>/*<![CDATA[*/' : hideLabel);
}
else {
divElem.style.display = "none";
divAnchor.innerHTML = (showLabel == "+" ?
'<img src="/skins/common/icons/icon-expand.gif">/*]]>*/</img>/*<![CDATA[*/' : showLabel);
}
}
/*]]>*/</script>
Note that the string "/*]]>*/" is inserted into my "IMG" tag. This is showing up on screen to the immediate right of the image.
Can anyone shed light on why this is happening, and how I might work around it?
Thanks...