Customize scripts on the Javascript tool

Dynamic HTML Editor contains a very useful Javascript tool with many pre-made ready-to-use scripts.

Actually there isn't a method to insert new scripts into this tool; this giude will explain you how to do this.

If anyone has the time to create the tool for us please let me know and I'll include it in the next release of the program.
Step 1 - Find the javascript.xml file

This file is located into the installation folder of the program; if you are running Windows Vista you may need administrative rights in order to modify it.
The file is a standard XML file, each script is contained into a "javascript" node

a javascript node is composed as follows:

- has these attributes:

    • name: this is the name of the script that will be displayed in the editor
    • comp: script compatibility, user defined string
    • cr: copyright notice or creator of the script
    • box:
        0 - the script has no box
        1 - the script uses the drawn box in the editor
    • b64code: contains the modified script code (see below) encoded in Base 64 (see below)

- can have sub-nodes (parameter)

The parameter represents each option available in the script window into Dynamic HTML Editor (see the picture below)
A param node has the following attributes:

    • name: this is the name of the parameter that will be displayed in the editor
    • type: the type of the parameter:
        • text -> standard text expected
        • num -> numeric value between min and max values
        • color -> color value in HTML format #RRGGBB
        • fontstyle -> font value
        • bin -> binary value, b64code is the file content in Base 64
    • value: this is the default value of the parameter;
                        for binary parameters, it represents the name of the file that will be created when exporting the page;
                        the file will contain binary data as defined in the b64code attribute.
Step 2 - The Base64 program

This program permits you to convert text or files to Base64 and vice-versa. Download it here.
• B64 Encode - Converts the text written in the box to Base64 so you can paste it into the XML file
• B64 Decode - Converts a Base64 text written in the box to the normal encoding

• Clear - Clears the box
• Copy - Copies the box content to the System Clipboard
• Paste - Pastes into the box the content of the System Clipboard

• ... - Permits you to choose a file and Encode it to Base64 pasting its content into the box
Step 3 - Modify the script code for the javascript tool

we can take as example a simple javascript like this:

<script language="javascript" type="text/javascript">
<!--

var colors = ("red|blue|green|purple|black|tan|red").split('|');
var delay = 0.5; // seconds
var link = 0;
var vlink = 2;

function linkDance() {
    link = (link+1)%colors.length;
    vlink = (vlink+1)%colors.length;
    document.linkColor = colors[link];
    document.vlinkColor = colors[vlink];
    setTimeout("linkDance()",delay*1000);
}
linkDance();

//-->
</script>
This script changes the link color in the entire page from "red" to "blue", etc...

Try and modify it as you want by using an HTML object.

The first thing we have to do now is to find global variables / functions or objects in the script in order to make them 
unique in the page (also if a user draws two scripts of this type in Dynamic HTML Editor)

A variable in javascript has a "var" before (note that the "var" string is not required so make attention ;-)), a function has 
the "function" word before.

In this script we have 4 global variables (colors, delay, link, vlink) and a function (linkDance) that will be modified by 
adding the #dheobj# before.
In this way D.H.E. will prefix the variable with the name of the object used in the editor so the variable will be always 
unique.

The script after the replace will look like this:

<script language="javascript" type="text/javascript">
<!--

var #dheobj#colors = ("red|blue|green|purple|black|tan|red").split('|');
var #dheobj#delay = 0.5; // seconds
var #dheobj#link = 0;
var #dheobj#vlink = 2;

function #dheobj#linkDance() {
    #dheobj#link = (#dheobj#link+1)%#dheobj#colors.length;
    #dheobj#vlink = (#dheobj#vlink+1)%#dheobj#colors.length;
    document.linkColor = #dheobj#colors[#dheobj#link];
    document.vlinkColor = #dheobj#colors[#dheobj#vlink];
    setTimeout("#dheobj#linkDance()",#dheobj#delay*1000);
}
#dheobj#linkDance();

//-->
</script>
Now if we want we can create parameters for this script, for example changing the delay time for the color transition.
Simply change the 0.5 value to the Parameter name #Delay Time#.
Delay Time will be the name of the parameter added to the XML.
<script language="javascript" type="text/javascript">
<!--

var #dheobj#colors = ("red|blue|green|purple|black|tan|red").split('|');
var #dheobj#delay = #Delay Time#; // seconds
var #dheobj#link = 0;
var #dheobj#vlink = 2;

function #dheobj#linkDance() {
    #dheobj#link = (#dheobj#link+1)%#dheobj#colors.length;
    #dheobj#vlink = (#dheobj#vlink+1)%#dheobj#colors.length;
    document.linkColor = #dheobj#colors[#dheobj#link];
    document.vlinkColor = #dheobj#colors[#dheobj#vlink];
    setTimeout("#dheobj#linkDance()",#dheobj#delay*1000);
}
#dheobj#linkDance();

//-->
</script>
Now we can add the code to the XML file; just open it with the Notepad and add a new javascript node.
Encode the script with the Base64.exe program and paste it into the b64code attribute, see below:

    <javascript name="Dancing Links" comp="IE" cr="unknown" box="0" b64code="... see the XML file 
...">
        <param name="Delay Time" type="num" value="1" min="1" max="100"/>
    </javascript>
Save the .XML file, open the Javascript tool and try your script ;-)