oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changed File Control so the empty image column does not show up unless a file is selected. This allows forms to align properly and not look awkward.

Browse source
This commit is contained in:
Frank Dillon 2006-02-26 21:39:16 +00:00
parent 5fe11ed251
commit 11f64a7a4b
1 changed files with 132 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

262
www/extras/FileUploadControl.js
View file

@ -1,130 +1,132 @@
//constructor for a new file upload control object. The object generates file upload boxes based on user //constructor for a new file upload control object. The object generates file upload boxes based on user
//input. Each file upload input is named "file" the control must be rendered in a form. The //input. Each file upload input is named "file" the control must be rendered in a form. The
//Workspace id is the id of the div in the html page to render the control in. //Workspace id is the id of the div in the html page to render the control in.
function FileUploadControl(fieldName, imageArray, removeLabel, fileLimit) { function FileUploadControl(fieldName, imageArray, removeLabel, fileLimit) {
this.images = imageArray; this.images = imageArray;
this.fileLimit = fileLimit; this.fileLimit = fileLimit;
this.fileCount = 1; this.fileCount = 1;
this.fieldName = fieldName; this.fieldName = fieldName;
workspaceId = fieldName+"_fileUploadControl"; workspaceId = fieldName+"_fileUploadControl";
this.workspaceId = workspaceId; this.workspaceId = workspaceId;
this.dom=document.getElementById&&!document.all; this.dom=document.getElementById&&!document.all;
this.topLevelElement=this.dom? "HTML" : "BODY" this.topLevelElement=this.dom? "HTML" : "BODY"
document.write('<div id="'+workspaceId+'"> </div>'); document.write('<div id="'+workspaceId+'"> </div>');
var workspace = document.getElementById(workspaceId); var workspace = document.getElementById(workspaceId);
var str = '<table border="0"><tbody id="' + workspaceId + '.fileUpload.body">'; var str = '<table border="0" cellspacing="0" cellpadding="0"><tbody id="' + workspaceId + '.fileUpload.body">';
str += '</tbody></table>'; str += '</tbody></table>';
str +='<table style="display: none;">' str +='<table style="display: none;">'
str += '<tr id="' + workspaceId + '.template" class="fileUploadRow"><td><img src="' + imageArray["unknown"] + '" style="visibility: hidden"></td>'; str += '<tr id="' + workspaceId + '.template" class="fileUploadRow"><td style="display:none;"><img src="' + imageArray["unknown"] + '" style="visibility: hidden;"></td>';
str +='<td><input type="file" name="'+fieldName+'" size="40" onchange="FileUploadControl_valueChange(event)"></td><td><input type="button" value="' + removeLabel + '" onclick="FileUploadControl_removeButtonClick(event)"></td></tr>'; str +='<td colspan="2"><input type="file" name="'+fieldName+'" size="40" onchange="FileUploadControl_valueChange(event)"></td><td><input type="button" value="' + removeLabel + '" onclick="FileUploadControl_removeButtonClick(event)"></td></tr>';
str += '</table>'; str += '</table>';
workspace.innerHTML = str; workspace.innerHTML = str;
this.tbody = document.getElementById(workspaceId + '.fileUpload.body'); this.tbody = document.getElementById(workspaceId + '.fileUpload.body');
this.tbody.fileUploadControl = this; this.tbody.fileUploadControl = this;
this.rowTemplate = document.getElementById(workspaceId + ".template"); this.rowTemplate = document.getElementById(workspaceId + ".template");
this.removeRow = FileUploadControl_removeRow; this.removeRow = FileUploadControl_removeRow;
this.addRow = FileUploadControl_addRow; this.addRow = FileUploadControl_addRow;
this.swapImage = FileUploadControl_swapImage; this.swapImage = FileUploadControl_swapImage;
this.getRow = FileUploadControl_getRow; this.getRow = FileUploadControl_getRow;
} }
//Searches up the object tree to find the control that owns this object //Searches up the object tree to find the control that owns this object
function FileUploadControl_getControl(firedobj){ function FileUploadControl_getControl(firedobj){
var dom=document.getElementById&&!document.all; var dom=document.getElementById&&!document.all;
var topLevelElement=dom? "HTML" : "BODY" var topLevelElement=dom? "HTML" : "BODY"
//traverse up the dom tree until you find the asset //traverse up the dom tree until you find the asset
while (firedobj.tagName!=topLevelElement && !firedobj.fileUploadControl) { while (firedobj.tagName!=topLevelElement && !firedobj.fileUploadControl) {
firedobj=dom? firedobj.parentNode : firedobj.parentElement firedobj=dom? firedobj.parentNode : firedobj.parentElement
} }
if (firedobj.fileUploadControl) { if (firedobj.fileUploadControl) {
return firedobj.fileUploadControl; return firedobj.fileUploadControl;
}else { }else {
return null; return null;
} }
} }
//traverses up the object tree to find the row associated with firedobj //traverses up the object tree to find the row associated with firedobj
function FileUploadControl_getRow(firedobj) { function FileUploadControl_getRow(firedobj) {
while (firedobj.tagName!=this.topLevelElement && firedobj.className!="fileUploadRow") { while (firedobj.tagName!=this.topLevelElement && firedobj.className!="fileUploadRow") {
firedobj=this.dom? firedobj.parentNode : firedobj.parentElement firedobj=this.dom? firedobj.parentNode : firedobj.parentElement
} }
return firedobj; return firedobj;
} }
//uses the image array passed into the constructor to set the src on the image for the row. //uses the image array passed into the constructor to set the src on the image for the row.
function FileUploadControl_swapImage(firedobj) { function FileUploadControl_swapImage(firedobj) {
var parts = firedobj.value.split('.'); var parts = firedobj.value.split('.');
var imgPath = this.images["unknown"]; var imgPath = this.images["unknown"];
if (parts.length !=1) { if (parts.length !=1) {
var extension = parts[parts.length -1].toLowerCase(); var extension = parts[parts.length -1].toLowerCase();
if (this.images[extension]) { if (this.images[extension]) {
imgPath = this.images[extension]; imgPath = this.images[extension];
} }
} }
var row = this.getRow(firedobj); var row = this.getRow(firedobj);
var img = row.childNodes[0].childNodes[0]; row.childNodes[0].style.display='';
img.src = imgPath; row.childNodes[1].colSpan=1;
img.style.visibility="visible"; var img = row.childNodes[0].childNodes[0];
} img.src = imgPath;
img.style.visibility="visible";
//removes a row from the control }
function FileUploadControl_removeRow(firedobj) {
var row = this.getRow(firedobj); //removes a row from the control
this.tbody.removeChild(row); function FileUploadControl_removeRow(firedobj) {
} var row = this.getRow(firedobj);
this.tbody.removeChild(row);
//adds a row to the control }
function FileUploadControl_addRow() {
var row = this.rowTemplate.cloneNode(true); //adds a row to the control
row.id = new Date().getTime(); function FileUploadControl_addRow() {
this.tbody.appendChild(row); var row = this.rowTemplate.cloneNode(true);
} row.id = new Date().getTime();
this.tbody.appendChild(row);
//event handlers }
//called on click of the remove button
function FileUploadControl_removeButtonClick(e) { //event handlers
var dom = document.getElementById&&!document.all; //called on click of the remove button
e=dom? e : event; function FileUploadControl_removeButtonClick(e) {
var firedobj =dom? e.target : e.srcElement var dom = document.getElementById&&!document.all;
e=dom? e : event;
var control = FileUploadControl_getControl(firedobj); var firedobj =dom? e.target : e.srcElement
if (control.tbody.childNodes[control.tbody.childNodes.length -1] == control.getRow(firedobj)) {
control.addRow(); var control = FileUploadControl_getControl(firedobj);
} else { if (control.tbody.childNodes[control.tbody.childNodes.length -1] == control.getRow(firedobj)) {
control.fileCount--; control.addRow();
} } else {
control.removeRow(firedobj); control.fileCount--;
}
} control.removeRow(firedobj);
//called on change of the upload inputs }
function FileUploadControl_valueChange(e) {
var dom = document.getElementById&&!document.all; //called on change of the upload inputs
e=dom? e : event; function FileUploadControl_valueChange(e) {
var firedobj =dom? e.target : e.srcElement var dom = document.getElementById&&!document.all;
e=dom? e : event;
var control = FileUploadControl_getControl(firedobj); var firedobj =dom? e.target : e.srcElement
if (control.tbody.childNodes[control.tbody.childNodes.length -1].childNodes[1].childNodes[0].value != "") { var control = FileUploadControl_getControl(firedobj);
if (control.fileCount < control.fileLimit) {
control.addRow(); if (control.tbody.childNodes[control.tbody.childNodes.length -1].childNodes[1].childNodes[0].value != "") {
control.fileCount++; if (control.fileCount < control.fileLimit) {
} control.addRow();
} control.fileCount++;
}
control.swapImage(firedobj); }
}
control.swapImage(firedobj);
}