Tiny File Manager

Back Back Up Advanced Editor

<html>
<head><title>Insert Select Field</title>
<style><%include editor_dialog.css%></style>
<script>

var name, tab, height, checked, inner_select, data_table, innerInterval;
var edit_row, edit_text, edit_value, edit_selected;
var dialogWindow = new Object();

function initDialog () {
    name  = document.getElementById('name');
    tab   = document.getElementById('tab');
    height = document.getElementById('height');
    checked= document.getElementById('checked');
    data_table = document.getElementById('data_table');
    innerInterval = setInterval("calcPressed()", 100);    
}

function done () {
/* ---------------------------------------------------------
 * When the user hits done this fucntion is called to 
 * produce the html from the div tags. It then inserts
 * it into the edit window and closes this window.
 */
    clearInterval(innerInterval);
    var html = '<select name="' + ((name.value) ? name.value : 'Select') + '"';
    if (tab.value) 
      html += ' tabIndex="' + tab.value + '"';

if (height.value)
      html += ' height="' + height.value + '"';
      
    if (checked.checked)
      html += ' multiple';    
    html += '>';

if (data_table.rows.length > 1) {
      var rows = data_table.rows;
      for (i=1; i<rows.length; i++) {
        var text  = rows[i].cells[1].innerHTML;
        var value = rows[i].cells[2].innerHTML;
        var selected = rows[i].cells[3].innerHTML;
        if (value == '&nbsp;') value = '';
        selected = (selected == 'Yes') ? ' selected ' : '';
        html += '<option';
        if (value)
          html += ' value="' + value + '"';

html += selected + '>';
        html += text + '</option>';
      }
    }

html += '</select>';
    opener.dialogWindow.returnFunc(html);
    window.close();
}

function selectDialog (do_equals, width, height, dialogReturn) {
/*------------------------------------------------------------
 * show dialog window
 */
    var url = opener.baseURL + ';page=' + do_equals + '.html;' + opener.extraURL;

if (dialogWindow.win && !dialogWindow.win.closed && dialogWindow.url == url) {
        dialogWindow.win.focus();
    }
    else {
        if (dialogWindow.win && !dialogWindow.win.closed) dialogWindow.win.close();
        dialogWindow.returnFunc = dialogReturn;
        dialogWindow.url = url;
        dialogWindow.width = width;
        dialogWindow.height = height;
        dialogWindow.name = Math.random().toString().replace(/\./, "");

dialogWindow.left = (screen.width - width) / 2;
        dialogWindow.top = (screen.height - height) / 2;
        dialogWindow.attribs = 'left=' + dialogWindow.left + ',' +
            'top=' + dialogWindow.top + ',' +
            'resizable=no,statusbar=yes,' +
            'width=' + dialogWindow.width + ',' +
            'height=' + dialogWindow.height;

dialogWindow.win = window.open(dialogWindow.url, dialogWindow.name, dialogWindow.attribs);
        dialogWindow.win.focus();
    }
}

function add () {
/* ---------------------------------------------------------
 * Called when the Add button is pressed. Created the SPAN's
 * for the select list and inserts them. Then calles a 
 * prompt. The prompt then populates the SPAN's for the 
 * entry.
 */
    edit_row = 0;
    selectDialog('editor_select_option', 370, 150, returnAdd);
}

function returnAdd(text, value, selected) {    
    var tbody = document.createElement("tbody");
    var tr    = document.createElement("tr");
    var nrow  = data_table.rows.length;
    var data  = new Array(4);
    data[0]   = '<input type="radio" id="data_row" name="data_row" value="">';
    data[1]   = text;
    data[2]   = value;
    data[3]   = '';
    
    if (selected) { // Un-mark the selected field
        _unChecked();
        data[3]   = 'Yes';
    }

for (var i=0; i < data.length; i++) {
        var align = (i==3) ? 'center' : '';
        var td = _createTD(data[i], align);
        tr.appendChild(td);
    }    
    tr.bgColor = "#FFFFFF";
    tbody.appendChild(tr);
    data_table.appendChild(tbody);
}

function modify () {
/* ---------------------------------------------------------
 * Called when the Modify button is clicked. This just gets
 * the SPAN that has the entry in it and calles the dialogue
 * window with that element.
 */    
    var checked = _getChecked();
    if (checked <= 0) return;

edit_text     = data_table.rows[checked].cells[1].innerHTML;
    edit_value    = data_table.rows[checked].cells[2].innerHTML;
    edit_selected = data_table.rows[checked].cells[3].innerHTML;

if (edit_selected != 'Yes') edit_selected = '';
    if (edit_value    == '&nbsp;') edit_value = '';
    edit_row = checked;
    selectDialog('editor_select_option', 370, 150, returnModify);
}

function returnModify(text, value, selected) {
    if (edit_row <= 0) return;

data_table.rows[edit_row].cells[1].innerHTML = text;
    data_table.rows[edit_row].cells[2].innerHTML = value;
    if (selected) { // Un-mark the selected field
      _unChecked();
      data_table.rows[edit_row].cells[3].innerHTML = 'Yes';
    }
    else {
      data_table.rows[edit_row].cells[3].innerHTML = '&nbsp;';
    }
}

function del () {
/* ---------------------------------------------------------
 * Called when an the Delete button is pressed. Deletes the
 * currently selected element in the list. It then selectes
 * the next in the list.
 */
    var checked = _getChecked();    
    if (checked <= 0) return;
    
    data_table.deleteRow(checked)    
    var html = data_table.innerHTML;
    html = html.replace(/<tbody><\/tbody>/gi,'');
    data_table.innerHTML = html;
}

function _moveTR(from, to) {
    var from_row = data_table.rows[from];
    var to_row   = data_table.rows[to];

var to_text     = to_row.cells[1].innerHTML;
    var to_value    = to_row.cells[2].innerHTML;
    var to_selected = to_row.cells[3].innerHTML;

for (i=1; i<from_row.cells.length; i++) {      
      data_table.rows[to].cells[i].innerHTML = from_row.cells[i].innerHTML;      
    }
    data_table.rows[from].cells[1].innerHTML = to_text;
    data_table.rows[from].cells[2].innerHTML = to_value;
    data_table.rows[from].cells[3].innerHTML = to_selected;
    
    document.myform.data_row[to - 1].checked = true;
}

function _createTD(text, align) {
    var td = document.createElement("td");
    td.innerHTML = (text) ? text : '&nbsp;';
    td.align     = (align)? align: '';
    return td;
}

function _unChecked() {
    var rows = data_table.rows;   
    if (rows.length <= 1) return;

for (i=1; i<rows.length; i++) {
      if (rows[i].cells[3].innerHTML == 'Yes') {
        data_table.rows[i].cells[3].innerHTML = '&nbsp;';
      }
    }
}

</script>
<body onload="initDialog();" class="body">
<form name="myform" method="post" action="#">
<table border=0 cellpadding=3 width=480 align=center>
    <tr class=body>
        <td>Name:</td><td><input id=name name=name size="30" class=botton></input></td><td> &nbsp; </td>
    </tr>
    <tr class=body>
        <td colspan=2 valign="top">
            <div class="select_list_inner" style="position: relative; width:450px; height:140px; overflow:auto; background:#FFFFFF">
            <table id="data_table" cellpadding="1" cellspacing="1" border="0" bgcolor="#808080">
              <tr bgcolor="#E0E0E0">
                <td width="20">&nbsp;</td>
                <td id=left_title class=select_title width="260"><b>Choice</b></td>
                <td id=right_title class=select_title width="100"><b>Value</b></td>
                <td id=middle_title class=select_title width="70" align="center"><b>Selected</b></td>
              </tr>
            </table>
            </div>
        </td>
        <td align=left>
            <p style="margin-top:5;margin-bottom:5"><input type="button" class=button id="badd" onclick="add ();" value="Add"></p>
            <p style="margin-top:5;margin-bottom:5"><input type="button" class=button id="bmodify" disabled onclick="modify ();" value="Modify"></p>
            <p style="margin-top:5;margin-bottom:5"><input type="button" class=button id="bremove" disabled onclick="del ();" value="Remove"></p>
            <p style="margin-top:5;margin-bottom:5"><input type="button" class=button id="bup" disabled onclick="move ('up');" value="Move Up"></p>
            <p style="margin-top:5;margin-bottom:5"><input type="button" class=button id="bdown" disabled onclick="move ('down');" value="Move Down"></p>
        </td>
    </tr>
    <tr class=body>
        <td colspan=2>
            <table border=0>
                <tr class=body>
                    <td>Height: </td>
                    <td><input type=text name=height id=height size=3 class=botton></input></td>
                    <td>Allow multiple selections: </td>
                    <td><input type=radio id=checked name=multi value=Yes>Yes</td>
                </tr>
                <tr class=body>
                    <td>Tab order: </td>
                    <td><input type=text id=tab size=3 class=botton></input></td>
                    <td> &nbsp; </td>
                    <td valign=top><input type=radio id=multi name=multi value=No checked> No</td>
                </tr>
            </table>
        </td>
        <td> &nbsp; </td>
    </tr>
</table>
<hr>
<div align=right>
    <input type=button class=button onclick="done();" value="OK"> &nbsp;
    <input type=button class=button onclick="window.close();" value="Cancel">&nbsp;
</div>
</form>
</body>
</html>