javascript.tcl

Go to the documentation of this file.

/*  javascript.tcl --*/
/* */
/*  This file contains procedures that create HTML and Java Script*/
/*  functions that implement objects such as:*/
/* */
/*      paired multi-selection boxes*/
/*      guarded submit buttons*/
/*      parent and child checkboxes*/
/* */
/*  Copyright (c) 1998-2000 by Ajuba Solutions.*/
/* */
/*  See the file "license.terms" for information on usage and redistribution*/
/*  of this file, and for a DISCLAIMER OF ALL WARRANTIES.*/
/* */
/*  RCS: @(#) $Id: javascript.tcl,v 1.5 2005/09/30 05:36:39 andreas_kupries Exp $*/

package require Tcl 8
package require ncgi 1
package provide javascript 1.0.2


namespace ::javascript {

    /*  The SelectionObjList namespace variable is used to keep the list of*/
    /*  selection boxes that were created as parts of paired multi-selection*/
    /*  boxes.  When a submit button is made for pages that have paired*/
    /*  multi-selection boxes, we set a hidden field to store the initial values*/
    /*  in the box.*/

    variable SelectionObjList {}
}

/*  ::javascript::BeginJS --*/
/* */
/*  Create HTML code to begin a java script program.*/
/* */
/*  Arguments:*/
/*  none.*/
/* */
/*  Results:*/
/*  Returns HTML code.*/

ret  ::javascript::BeginJS () {
    return "\n<SCRIPT LANGUAGE=\"JavaScript\">\n"
}

/*  ::javascript::EndJS --*/
/* */
/*  Create HTML code to end a java script program.*/
/* */
/*  Arguments:*/
/*  none.*/
/* */
/*  Results:*/
/*  Returns HTML code.*/

ret  ::javascript::EndJS () {
    return "\n</SCRIPT>\n"
}

/*  ::javascript::MakeMultiSel --*/
/* */
/*  Construct HTML code to create a multi-selection box.*/
/* */
/*  Arguments:*/
/*  id      The suffix of all HTML objects in this megawidget.*/
/*  side        Either "left" or "right".*/
/*  eltValues   The values to populate the selection box with.*/
/*  eltNames    The values to populate the selection box with.*/
/*  emptyElts   The number of empty box entry to stuff in the*/
/*          Selection box as placeholders for elts to be added.*/
/*  length      The number of elts to show before adding a vertical*/
/*          scrollbar.*/
/*  minWidth    Number of spaces to determin the minimum box width.*/
/* */
/*  Results:*/
/*  Returns HTML to show the selection box.*/

ret  ::javascript::MakeMultiSel (type id , type side , type eltValues , type eltNames , type emptyElts \
    , type length , type minWidth) {

    variable SelectionObjList

    # Add this selection box to the list.

    set name "$side$id"
    lappend SelectionObjList $name

    # Create the selection box and populate it with elts.

    set html ""
    append html "<select name=$name multiple size=$length>"
    foreach elt $eltValues name $eltNames {
    set encodedElt [ncgi::encode $elt]
    append html "<option value=$encodedElt>$name"
    }

    # Add empty values for the remaining elements.

    for {set i 0} {$i < $emptyElts} {incr i} {
    append html "<option value=\"\"> "
    }

    # Add an empty value with text that is as wide as the minWidth.

    set filler ""
    for {set i 0} {$i < $minWidth} {incr i} {
    append filler "&nbsp;&nbsp;"
    }
    append html "<option value=\"\">$filler"

    append html "</select>"
    return $html
}

/*  ::javascript::MakeClickProc --*/
/* */
/*  Create a "moveSelected$id" java script procedure to move selected items*/
/*  from one selection box to the other.*/
/* */
/*  Arguments:*/
/*  id  The suffix of all objects in this multiselection megawidget.*/
/* */
/*  Results:*/
/*  Returns java script code.*/

ret  ::javascript::MakeClickProc (type id) {

    set result "\nfunction moveSelected${id}(fromObj,toObj) \{\n"

    # If nothing is selected, do nothing.

    append result "\n    if (fromObj.selectedIndex > -1) \{"

    # Find the first empty element in the toObj.

    append result {
        for (var k = 0; toObj.options[k].value != ""; k++) {}
}

    # Move the selected elements from the fromObj to the end of the toObj.
    # Shift the objects in the fromObj to fill any empty spots.
    # Clear out any extra slots in the fromObj.
    # Deselect any selected elements (deselect with both 'selected = false'
    # and by setting selectedIndex to -1, because setting selectedIndex to
    # -1 didn't seem to clear selection on all windows browsers.

    append result {
        for (var i = fromObj.selectedIndex, j = fromObj.selectedIndex; fromObj.options[i].value != ""; i++) {
            if (fromObj.options[i].selected) {
                toObj.options[k].text = fromObj.options[i].text
                toObj.options[k++].value = fromObj.options[i].value
                fromObj.options[i].selected = false
            } else {
                fromObj.options[j].text = fromObj.options[i].text
                fromObj.options[j++].value = fromObj.options[i].value
            }
        }
        for (; j < i; j++) {
            fromObj.options[j].text = ""
            fromObj.options[j].value = ""
        }
        fromObj.selectedIndex = -1
}

    # Close the if statement and the function

    append result "    \}
\}
"
    return $result
}

/*  ::javascript::makeSelectorWidget --*/
/* */
/*  Construct HTML code to create a dual-multi-selection megawidget.  This*/
/*  megawidget consists of two side-by-side multi-selection boxes*/
/*  separated by a left arrow and a right arrow button.  The right arrow*/
/*  button moves all items selected in the left box to the right box.  The*/
/*  left arrow button moves all items selected in the right box to the left*/
/*  box.*/
/* */
/*  Arguments:*/
/*  id      The suffix of all HTML objects in this megawidget.*/
/*  leftLabel   The text that appears above the left selection box.*/
/*  leftValueList   The values of items in the left selection box.*/
/*  leftNameList    The names to appear in the left selection box.*/
/*  rightLabel  The text that appears above the right selection box.*/
/*  rightValueList  The values of items in the right selection box.*/
/*  rightNameList   The names to appear in the right selection box.*/
/*  length      (optional) The number of elts to show before adding a*/
/*          vertical scrollbar.  Defaults to 8.*/
/*  minWidth    (optional) The number of spaces to determin the*/
/*          minimum box width.  Defaults to 32.*/
/* */
/*  Results:*/
/*  Returns HTML to show the dual-multi-selection megawidget.*/

ret  ::javascript::makeSelectorWidget (type id , type leftLabel , type leftValueList , type leftNameList \
    , type rightLabel , type rightValueList , type rightNameList , optional length =8 , optional minWidth =32) {

    set html ""
    append html [BeginJS] \
        [MakeClickProc $id] \
        [EndJS]

    append html "<table border=0 cellspacing=0 cellpadding=2>\n<tr><th>" \
        $leftLabel "</th><th></th><th>" $rightLabel "</th></tr>\n<tr>"

    set leftLen [llength $leftValueList]
    set rightLen [llength $rightValueList]
    set len [expr {$leftLen + $rightLen}]

    append html "<td valign=top colspan=1>" \
        [MakeMultiSel $id "left" $leftValueList $leftNameList \
        $rightLen $length $minWidth] \
        "&nbsp;&nbsp;</td>\n"

    append html "<td>" \
        "<table border=0 cellspacing=0 cellpadding=2>\n"

    set args "this.form.left${id},this.form.right${id}"

    append html "<tr><td><input type=button name=left${id}Button
    onClick=\"moveSelected${id}(${args})\" value=\" >> \"></td></tr>"

    set args "this.form.right${id},this.form.left${id}"

    append html "<tr><td><input type=button name=right${id}Button
    onClick=\"moveSelected${id}(${args})\" value=\" << \"></td></tr>"

    append html "</table>\n" \
        "</td>\n"

    append html "<td valign=top colspan=1>" \
        [MakeMultiSel $id "right" $rightValueList $rightNameList \
        $leftLen $length $minWidth] \
        "&nbsp;&nbsp;</td>\n"

    append html "</tr>\n" \
        "</table>\n"

    # Add a hidden field to collect the data.

    append html "<input type=hidden name=valleft${id} " \
        "value=\"$leftValueList\">\n" \
        "<input type=hidden name=valright${id} " \
        "value=\"$rightValueList\">\n"

    return $html
}

/*  ::javascript::makeSubmitButton --*/
/* */
/*  Create an HTML submit button that resets a hidden field for each*/
/*  registered multi-selection box.*/
/* */
/*  Arguments:*/
/*  name    the name of the HTML button object to create.*/
/*  value   the label of the HTML button object to create.*/
/* */
/*  Results:*/
/*  Returns HTML submit button code.*/

ret  ::javascript::makeSubmitButton (type name , type value) {
    variable SelectionObjList
    set html ""

    # Create the java script procedure that gathers the current values for each
    # registered multi-selection box.

    append html [BeginJS]
    append html "\nfunction getSelections(form) \{\n"

    # For each registered selection box, reset hidden field to
    # store nonempty values.

    foreach obj $SelectionObjList {
    set selObj "form.$obj"
    set hiddenObj "form.val$obj"
    append html "    var tmp$obj = \"\"\n"
    append html "    for (var i$obj = 0; i$obj < $selObj.length; i$obj++) {\n"
    append html "        if ($selObj.options\[i$obj\].value == \"\") {\n"
    append html "            break\n"
    append html "        }\n"
    append html "        tmp$obj += \" \" + $selObj.options\[i$obj\].value\n"
    append html "    }\n"
    append html "    $hiddenObj.value = tmp$obj \n"
    }
    append html "\}\n"
    append html [EndJS]

    # Empty the selection box for the next page.

    set SelectionObjList {}

    # Create the HTML submit button.

    append html "<input type=submit name=\"$name\" value=\"$value\" 
    onClick=\"getSelections(this.form)\">"

    return $html
}

/*  ::javascript::makeProtectedSubmitButton --*/
/* */
/*  Create an HTML submit button that prompts the user with a*/
/*  continue/cancel shutdown warning before the form is submitted.*/
/* */
/*  Arguments:*/
/*  name    the name of the HTML button object to create.*/
/*  value   the label of the HTML button object to create.*/
/*  msg The message to display when the button is pressed.*/
/* */
/*  Results:*/
/*  Returns HTML submit button code.*/

ret  ::javascript::makeProtectedSubmitButton (type name , type value , type msg) {
    set html ""

    # Create the java script procedure that gives the user the option to cancel
    # the server shutdown request.

    append html [BeginJS]
    append html "\nfunction areYouSure${name}(form) \{\n"
    append html "    if (confirm(\"$msg\")) \{\n"
    append html "        return true\n"
    append html "    \} else \{\n"
    append html "        return false\n"
    append html "    \}\n"
    append html "\}\n"
    append html [EndJS]

    # Create the HTML submit button.

    append html "<input type=submit name=\"$name\" value=\"$value\" 
    onClick=\"return areYouSure${name}(this.form)\">"

    return $html
}

/*  ::javascript::makeMasterButton --*/
/* */
/*  Create an HTML button that sets it's slave checkboxs to the boolean*/
/*  value.*/
/* */
/*  Arguments:*/
/*  master  the name of the child's parent html checkbox object.*/
/*  value   the value of the master.*/
/*  slaves  the name of child html checkbox object to create.*/
/*  boolean the java script boolean value that will be given to all the*/
/*      slaves.  Must be true or false.*/
/* */
/*  Results:*/
/*  Returns HTML code to create the child checkbox.*/

ret  ::javascript::makeMasterButton (type master , type value , type slavePattern , type boolean) {
    set html ""

    # Create the java script "checkMaster$name" proc that gets called when the
    # master checkbox is selected or de-selected.

    append html [BeginJS]
    append html "\nfunction checkMaster${master}(form) \{\n"
    append html "    for (var i = 0; i < form.elements.length; i++) \{\n"
    append html "        if (form.elements\[i\].name.match('$slavePattern')) \{\n"
    append html "            form.elements\[i\].checked = $boolean \n"
    append html "        \}\n"
    append html "    \}\n"

    append html "\}\n"
    append html [EndJS]
    
    # Create the HTML button object.

    append html "<input type=button name=\"$master\" value=\"$value\" " \
        "onClick=\"checkMaster${master}(this.form)\">\n"

    return $html
}

/*  ::javascript::makeParentCheckbox --*/
/* */
/*  Create an HTML checkbox and tie its value to that of it's child*/
/*  checkbox.  If the parent is unchecked, the child is automatically*/
/*  unchecked.*/
/* */
/*  Arguments:*/
/*  parentName  the name of parent html checkbox object to create.*/
/*  childName   the name of the parent's child html checkbox object*/
/*  Results:*/
/*  Returns HTML code to create the child checkbox.*/

ret  ::javascript::makeParentCheckbox (type parentName , type childName) {
    set parentObj "form.$parentName"
    set childObj "form.$childName"
    set html ""

    # Create the java script "checkParent$name" proc that gets called when the
    # parent checkbox is selected or de-selected.

    append html [BeginJS]
    append html "\nfunction checkParent${parentName}(form) \{\n"
    append html "    if (!$parentObj.checked && $childObj.checked) \{\n"
    append html "        $childObj.checked = false\n"
    append html "    \}\n"
    append html "\}\n"
    append html [EndJS]

    # Create the HTML checkbox object.

    append html "<input type=checkbox name=$parentName value=1 " \
        "onClick=\"checkParent${parentName}(this.form)\">"

    return $html
}

/*  ::javascript::makeChildCheckbox --*/
/* */
/*  Create an HTML checkbox and tie its value to that of it's parent*/
/*  checkbox.  If the child is checked, the parent is automatically*/
/*  checked.*/
/* */
/*  Arguments:*/
/*  parentName  the name of the child's parent html checkbox object*/
/*  childName   the name of child html checkbox object to create.*/
/* */
/*  Results:*/
/*  Returns HTML code to create the child checkbox.*/

ret  ::javascript::makeChildCheckbox (type parentName , type childName) {
    set parentObj "form.$parentName"
    set childObj "form.$childName"
    set html ""

    # Create the java script "checkChild$name" proc that gets called when the
    # child checkbox is selected or de-selected.

    append html [BeginJS]
    append html "\nfunction checkChild${childName}(form) \{\n"
    append html "    if ($childObj.checked && !$parentObj.checked) \{\n"
    append html "        $parentObj.checked = true\n"
    append html "    \}\n"
    append html "\}\n"
    append html [EndJS]

    # Create the HTML checkbox object.

    append html "<input type=checkbox name=$childName value=1 " \
        "onClick=\"checkChild${childName}(this.form)\">"

    return $html
}