|
|
/*
*
* Copyright (c) 2007 Andrew Tetlaw & Millstream Web Software
* http://www.millstream.com.au/view/code/tablekit/
* Version: 1.2.1 2007-03-11
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use, copy,
* modify, merge, publish, distribute, sublicense, and/or sell copies
* of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
* BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
* *
*/
TableKit.Editable = {
init : function(elm, options){
var table = $(elm);
if(table.tagName !== "TABLE") {return;}
TableKit.register(table,Object.extend(options || {},{editable:true}));
Event.observe(table.tBodies[0], 'click', TableKit.Editable._editCell);
},
_editCell : function(e) {
e = TableKit.e(e);
var cell = Event.findElement(e,'td');
TableKit.Editable.editCell(null, cell);
},
editCell : function(table, index, cindex) {
var cell, row;
if(typeof index === 'number') {
if(!table || (table.tagName && table.tagName !== "TABLE")) {return;}
table = $(table);
index = Math.min(table.tBodies[0].rows.length, index);
index = Math.max(1, index);
index -= 1;
cindex = Math.min(table.rows[0].cells.length, cindex);
cindex = Math.max(1, cindex);
cindex -= 1;
row = $(table.tBodies[0].rows[index]);
cell = $(row.cells[cindex]);
} else {
cell = $(index);
table = (table && table.tagName && table.tagName !== "TABLE") ? $(table) : cell.up('table');
row = cell.up('tr');
}
var op = TableKit.option('noEditClass', table.id);
if(cell.hasClassName(op.noEditClass)) {return;}
var head = $(TableKit.getHeaderCells(table, cell)[TableKit.getCellIndex(cell)]);
if(head.hasClassName(op.noEditClass)) {return;}
TableKit.registerCell(cell);
var data = TableKit.cells[cell.id];
if(data.active) {return;}
data.htmlContent = cell.innerHTML;
var ftype = TableKit.Editable.types['text-input'];
if(head.id && TableKit.Editable.types[head.id]) {
ftype = TableKit.Editable.types[head.id];
} else {
var n = head.classNames().detect(function(n){
return (TableKit.Editable.types[n]) ? true : false;
});
ftype = n ? TableKit.Editable.types[n] : ftype;
}
ftype.edit(cell);
data.active = true;
},
types : {},
addCellEditor : function(o) {
if(o && o.name) { TableKit.Editable.types[o.name] = o; }
}
};
TableKit.Editable.CellEditor = Class.create();
TableKit.Editable.CellEditor.prototype = {
initialize : function(name, options){
this.name = name;
this.options = Object.extend({
element : 'input',
attributes : {name : 'value', type : 'text'},
selectOptions : [],
showSubmit : true,
submitText : 'OK',
showCancel : true,
cancelText : 'Cancel',
ajaxURI : null,
ajaxOptions : null
}, options || {});
},
edit : function(cell) {
cell = $(cell);
var op = this.options;
var table = cell.up('table');
var form = $(document.createElement("form"));
form.id = cell.id + '-form';
form.addClassName(TableKit.option('formClassName', table.id)[0]);
form.onsubmit = this._submit.bindAsEventListener(this);
var field = document.createElement(op.element);
$H(op.attributes).each(function(v){
field[v.key] = v.value;
});
switch(op.element) {
case 'input':
case 'textarea':
field.value = TableKit.getCellText(cell);
break;
case 'select':
var txt = TableKit.getCellText(cell);
$A(op.selectOptions).each(function(v){
field.options[field.options.length] = new Option(v[0], v[1]);
if(txt === v[1]) {
field.options[field.options.length-1].selected = 'selected';
}
});
break;
}
form.appendChild(field);
if(op.element === 'textarea') {
form.appendChild(document.createElement("br"));
}
if(op.showSubmit) {
var okButton = document.createElement("input");
okButton.type = "submit";
okButton.value = op.submitText;
okButton.className = 'editor_ok_button';
form.appendChild(okButton);
}
if(op.showCancel) {
var cancelLink = document.createElement("a");
cancelLink.href = "#";
cancelLink.appendChild(document.createTextNode(op.cancelText));
cancelLink.onclick = this._cancel.bindAsEventListener(this);
cancelLink.className = 'editor_cancel';
form.appendChild(cancelLink);
}
cell.innerHTML = '';
cell.appendChild(form);
},
_submit : function(e) {
var cell = Event.findElement(e,'td');
var form = Event.findElement(e,'form');
Event.stop(e);
this.submit(cell,form);
},
submit : function(cell, form) {
var op = this.options;
form = form ? form : cell.down('form');
var head = $(TableKit.getHeaderCells(null, cell)[TableKit.getCellIndex(cell)]);
var row = cell.up('tr');
var table = cell.up('table');
var s = '&row=' + (TableKit.getRowIndex(row)+1) + '&cell=' + (TableKit.getCellIndex(cell)+1) + '&id=' + row.id + '&field=' + head.id + '&' + Form.serialize(form);
this.ajax = new Ajax.Updater(cell, op.ajaxURI || TableKit.option('editAjaxURI', table.id)[0], Object.extend(op.ajaxOptions || TableKit.option('editAjaxOptions', table.id)[0], {
postBody : s,
onComplete : function() {
var data = TableKit.cells[cell.id];
data.active = false;
data.refresh = true; // mark cell cache for refreshing, in case cell contents has changed and sorting is applied
}
}));
},
_cancel : function(e) {
var cell = Event.findElement(e,'td');
Event.stop(e);
this.cancel(cell);
},
cancel : function(cell) {
this.ajax = null;
var data = TableKit.cells[cell.id];
cell.innerHTML = data.htmlContent;
data.htmlContent = '';
data.active = false;
},
ajax : null
};
TableKit.Editable.textInput = function(n,attributes) {
TableKit.Editable.addCellEditor(new TableKit.Editable.CellEditor(n, {
element : 'input',
attributes : Object.extend({name : 'value', type : 'text'}, attributes||{})
}));
};
TableKit.Editable.textInput('text-input');
TableKit.Editable.multiLineInput = function(n,attributes) {
TableKit.Editable.addCellEditor(new TableKit.Editable.CellEditor(n, {
element : 'textarea',
attributes : Object.extend({name : 'value', rows : '5', cols : '20'}, attributes||{})
}));
};
TableKit.Editable.multiLineInput('multi-line-input');
TableKit.Editable.selectInput = function(n,attributes,selectOptions) {
TableKit.Editable.addCellEditor(new TableKit.Editable.CellEditor(n, {
element : 'select',
attributes : Object.extend({name : 'value'}, attributes||{}),
'selectOptions' : selectOptions
}));
};
|