Textarea Edit Template
After doing a few changes to the Input-Template , I created a editable Textarea, but missed some css for Mozilla.
// ****************************************************************
// TEXTAREA Editable Cell Template.
// ****************************************************************
My.Templates.Textarea = Active.Templates.Text.subclass();
My.Templates.Textarea.create = function()
{
var obj = this.prototype;
// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.TEXTAREA;
editor.setClass("templates", "textarea");
editor.setAttribute("type", "text");
editor.setContent("text", function(){return template.getItemProperty("text")});
// template variable provides temporary reference
// to the parent template during edit mode.
var template;
function switchToEditMode(){
if (template) { switchToTextMode() }
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
editor.setEvent("ondblclick", editor.element().focus());
}
obj.setEvent("ondblclick", switchToEditMode);
function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
template = null;
}
editor.setEvent("onblur", switchToTextMode);
};
My.Templates.Textarea.create();
******************************************
Plus CSS ....
******************************************
.active-templates-textarea {
width: 100%;
height: 100%;
padding: 0px 5px;
margin: -1px 0px;
border: 1px solid #666;
vertical-align: top;
font: menu;
line-height: 1.4em;
}
.active-templates-textarea.gecko {
display: block;
margin: 0px;
}
// ****************************************************************
// TEXTAREA Editable Cell Template.
// ****************************************************************
My.Templates.Textarea = Active.Templates.Text.subclass();
My.Templates.Textarea.create = function()
{
var obj = this.prototype;
// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.TEXTAREA;
editor.setClass("templates", "textarea");
editor.setAttribute("type", "text");
editor.setContent("text", function(){return template.getItemProperty("text")});
// template variable provides temporary reference
// to the parent template during edit mode.
var template;
function switchToEditMode(){
if (template) { switchToTextMode() }
template = this;
template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
editor.setEvent("ondblclick", editor.element().focus());
}
obj.setEvent("ondblclick", switchToEditMode);
function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
template = null;
}
editor.setEvent("onblur", switchToTextMode);
};
My.Templates.Textarea.create();
******************************************
Plus CSS ....
******************************************
.active-templates-textarea {
width: 100%;
height: 100%;
padding: 0px 5px;
margin: -1px 0px;
border: 1px solid #666;
vertical-align: top;
font: menu;
line-height: 1.4em;
}
.active-templates-textarea.gecko {
display: block;
margin: 0px;
}
Carlos
January 16,