| Current File : //var/wcp4/lef/public_html/file/private/templates.old/common/editor_select.html |
<html>
<head><title>Insert Select Field</title>
<style>
<%include editor_dialog.css%>
</style>
<script language=JScript>
// Global to store arguments from calling window.
returnValue = [];
var url = window.location.protocol + '//' + window.location.hostname + '/' + window.location.pathname + '?<%url_opts%>';
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.
*/
var html = '<select';
if (document.all.name.value)
html += ' name="' + document.all.name.value + '"';
if (document.all.height.value)
html += ' size="' + document.all.height.value + '"';
if (document.all.tab.value)
html += ' tabindex="' + document.all.tab.value + '"';
if (document.all.multi[0].checked)
html += ' multiple';
html += '></select>';
var opt = new Array();
var max = 0;
if (inner_select.children.length) {
var l = inner_select.children;
var e = 0;
for (var i = 0; i < l.length; i++) {
var item = l[i];
if (!item) continue;
if (!item.className) continue;
if (item.id == 'select_outer') continue;
if (!item.children.length) continue;
var label = '';
var selected = '';
if (item.children (0).innerText)
label = item.children (0).innerText;
if (item.children (1).innerText == 'Yes')
selected = 'Yes';
opt[max++] = new Array (label, item.children (2).innerText,selected);
}
}
returnValue = [html,opt];
window.close();
}
function select () {
/* ---------------------------------------------------------
* Called when a select option in out fake select list is
* clicked on. This just highlights the selection.
*/
var element = event.srcElement.parentElement;
var class_name = event.srcElement.parentElement.className;
if (class_name == 'select_option_selected') {
element.className = 'select_option';
return;
}
else if (class_name != 'select_option') {
var selected = get_selected('object');
if (selected) selected.className = 'select_option';
return;
}
var selected = get_selected('object');
if (selected) selected.className = 'select_option'
element.className = 'select_option_selected';
}
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.
*/
// Calculate select option width
var sbar = 346 - inner_select.clientWidth;
var new_width = 346 - sbar;
var width = Math.floor ((new_width - 54) / 2);
// Create the DIV for the option
var span = document.createElement("<DIV class='select_option' style='WIDTH:" + new_width + "' onclick='select();'>");
// Insert it into the select list
inner_select.appendChild (span);
var ins = inner_select.children (inner_select.children.length - 1);
// Build the html for the children
var html;
html = "<SPAN name=left style='WIDTH:" + width + ";padding-left:10'></span>";
html += "<SPAN nale=middle style='WIDTH:54;padding-left:10'></span>";
html += "<SPAN name=right style='WIDTH:" + width + ";padding-left:10'></span></div>";
ins.innerHTML = html;
// call the Dialog for the option
var ret = showModalDialog (url + "&fdo=cmd_show&page=common/editor_select_option.html&foo=26", ins, "dialogHeight:200px;dialogWidth:305px");
// Make sure position is maintained.
sinc_option_size ();
// If no return delete the node.
if (!ret) ins.removeNode(true);
// Make sure if multiple are selected check the multi
// select option.
check_multi();
return true;
}
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 element = get_selected ('object');
// Nothing selected return
if (!element) return;
// Dialog for the selected element
showModalDialog (url + "&fdo=cmd_show&page=common/editor_select_option.html&foo=90", element, "dialogHeight:200px;dialogWidth:305px");
// Resinc sizes for the DIV and the children nodes
sinc_option_size ();
}
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 cndx = get_selected ('index');
if (cndx == null) return;
inner_select.removeChild (inner_select.children(cndx));
sinc_option_size ();
if (!inner_select.children.length) return;
cndx--;
if (inner_select.children (cndx).id == 'select_outer') return;
inner_select.children (cndx).className = 'select_option_selected';
}
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 mndx, cndx;
mndx = cndx = get_selected ('index');
if (cndx == null) return;
var into;
if (where == 'up') { mndx-- }
else { mndx++ }
if (mndx < 0) return;
if (mndx == inner_select.children.length) return;
if (
inner_select.children (mndx).id == 'select_outer' ||
inner_select.children (cndx).id == 'select_outer'
)
{
return;
}
inner_select.children(cndx).swapNode (inner_select.children(mndx));
}
function get_selected (what) {
/* ---------------------------------------------------------
* Utility function that returns the index that is
* currently selected is "what" is "index" else it returns
* the object of what is selected.
*/
var l = inner_select.children;
var len = l.length;
for (var i = 0; i < len; i++) {
var item = l[i];
if (!item) continue;
if (!item.className) continue;
if (!item.children.length) continue;
if (item.className != 'select_option_selected') continue;
if (item.className == 'select_option_selected') {
if (what == 'index') {
return i;
}
return item;
}
}
return null;
}
function check_multi () {
/* ---------------------------------------------------------
* Called when an entry is made in the select list or when
* the multi radio button is set to Yes. Checks that Multi
* is set to yes is more than one element in the list is
* set to Selected.
*/
var l = inner_select.children;
var checked = 0;
for (var i = 0; i < l.length; i++) {
var item = l[i];
if (!item) continue;
if (!item.className) continue;
if (!item.children.length) continue;
if (item.children (1).innerText == 'Yes') {
checked++;
}
}
if (checked > 1 && multi[1].checked) {
multi[0].checked = true;
return cancel_event ();
}
return true;
}
function sinc_option_size () {
/* ---------------------------------------------------------
* Sincs sizes of all element with the total of it's
* children.
*/
var children = inner_select.children;
var len = inner_select.children.length;
// Get the largest size of left right
var largest_left = 0, largest_right = 0, largest_total = 0;
for (var i = 0; i < len; i++) {
var cur = children[i];
if (!cur.children.length) continue;
if (cur.children (0).innerText.length > largest_left)
largest_left = cur.children (0).innerText.length;
if (cur.children (2).innerText.length > largest_right)
largest_right = cur.children (2).innerText.length;
}
// Font size is 8px
largest_left *= 8;
largest_right *= 8;
// Add padding
largest_left += 10;
largest_right += 10;
if (largest_left < 146) largest_left = 146;
if (largest_right < 146) largest_right = 146;
largest_total = largest_left + 54 + largest_right;
// Sinc all elements
var pos = 0;
for (var i = 0; i < len; i++) {
var cur = children[i];
if (!cur.children.length) continue;
cur.style.width = largest_total + 'px';
cur.children (0).style.width = largest_left + 'px';
cur.children (2).style.width = largest_right + 'px';
}
}
function set_width () {
/* ---------------------------------------------------------
* Called onload of the page. Makes sure the dementions of
* the inner scroll SPAN are correct.
*/
var sbar = 346 - inner_select.clientWidth;
var new_width = 346 - sbar;
var wi = 361 + sbar
inner_select.style.width = wi + 'px';
}
function cancel_event () {
/* ---------------------------------------------------------
* General function to cancel an event.
*/
event.returnValue = false;
event.cancelBubble = true;
return false;
}
</script>
</head>
<body onload="set_width ();">
<table border=0 cellpadding=3 width=480 align=center>
<tr>
<td>Name:</td><td><input id=name name=name size="30"></input></td><td> </td>
</tr>
<tr>
<td colspan=2>
<div id="inner_select" class=select_list_inner>
<div class=select_title_outer id=select_outer>
<span id=left_title
class=select_title style="WIDTH: 146px"> Choice</span><span id=middle_title
class=select_title style="WIDTH: 54px"> Selected</span><span id=right_title
class=select_title style="WIDTH: 146px"> Value</span>
</div>
</div>
</td>
<td align=left>
<p style="margin-top:5;margin-bottom:5"><button class=button onclick="add ();">Add</button></p>
<p style="margin-top:5;margin-bottom:5"><button class=button onclick="modify ();">Modify</button></p>
<p style="margin-top:5;margin-bottom:5"><button class=button onclick="del ();">Remove</button></p>
<p style="margin-top:5;margin-bottom:5"><button class=button onclick="move ('up');">Move Up</button></p>
<p style="margin-top:5;margin-bottom:5"><button class=button onclick="move ('down');">Move Down</button></p>
</td>
</tr>
<tr>
<td colspan=2>
<table border=0>
<tr>
<td>Height: </td>
<td><input type=text name=height size=3></input></td>
<td>Allow multiple selections: </td>
<td><input type=radio id=multi name=multi value=Yes></input> Yes</td>
</tr>
<tr>
<td>Tab order: </td>
<td><input type=text id=tab size=2></input></td>
<td> </td>
<td valign=top><input type=radio id=multi name=multi value=No onclick="check_multi();" checked></input> No</td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
<hr>
<div align=right>
<button class=button onclick="done();">OK</button>
<button class=button onclick="window.close();">Cancel</button>
</div>
</body>
</html>