File "editor_select.html"
Full Path: /home/analogde/www/private/templates/common/editor_select.html
File size: 11.17 KB
MIME-type: text/html
Charset: utf-8
<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 calcPressed() {
if (data_table.rows.length == 1) {
if (!document.getElementById('bmodify').disabled) document.getElementById('bmodify').disabled = true;
if (!document.getElementById('bremove').disabled) document.getElementById('bremove').disabled = true;
if (!document.getElementById('bup').disabled) document.getElementById('bup').disabled = true;
if (!document.getElementById('bdown').disabled) document.getElementById('bdown').disabled = true;
}
else {
if (document.getElementById('bmodify').disabled) document.getElementById('bmodify').disabled = false;
if (document.getElementById('bremove').disabled) document.getElementById('bremove').disabled = false;
if (document.getElementById('bup').disabled) document.getElementById('bup').disabled = false;
if (document.getElementById('bdown').disabled) document.getElementById('bdown').disabled = false;
}
}
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 == ' ') 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 == ' ') 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 = ' ';
}
}
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 move (where) {
/* ---------------------------------------------------------
* Called when either the move up or move down button is
* pressed. Based on what is passed in either moves the
* element up in the list or down in the list.
*/
var checked = _getChecked();
if (checked <= 0) return;
if (where == 'up') {
if (checked == 1) return;
_moveTR(checked, checked - 1);
}
else {
if (checked == data_table.rows.length - 1) return;
_moveTR(checked, checked + 1);
}
}
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 : ' ';
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 = ' ';
}
}
}
function _getChecked() {
if (!document.getElementById('data_row')) return 0;
var data_row = document.myform.data_row;
var nrows = data_row.length;
var checked = 0;
if (typeof(nrows) == 'undefined'){
if (document.myform.data_row.checked)
checked = 1;
}
else {
for (var i=0; i<nrows; i++) {
if (data_row[i].checked) {
checked = i + 1;
break;
}
}
}
return checked;
}
</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> </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"> </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> </td>
<td valign=top><input type=radio id=multi name=multi value=No checked> No</td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
<hr>
<div align=right>
<input type=button class=button onclick="done();" value="OK">
<input type=button class=button onclick="window.close();" value="Cancel">
</div>
</form>
</body>
</html>