mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-28 02:50:27 +00:00
Code Issues Releases Wiki Activity

Switched back to using textareas and inputs for editors

Browse Source 
The contenteditable stuff was complicated and performing badly. More to
the point, I've now got a pretty solid way to resize the textarea to
fit it's content
This commit is contained in:
Jeremy Ruston 2012-04-10 13:53:02 +01:00
parent 0d8cdb9671
commit b456c0a01c
1 changed files with 55 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
js/macros/edit.js
View File

@ -184,56 +184,68 @@ TextEditor.prototype.getContent = function() {
break; break;
} }
} }
var type = "div";
if(field === "text") {
type = "pre";
}
var attributes = { var attributes = {
"contenteditable": true, "class": ["tw-edit-field"]
"class": ["tw-edit-field"] },
}; tagName,
return [Renderer.ElementNode(type,attributes,[Renderer.TextNode(value)])]; content = [];
}; if(field === "text") {
tagName = "textarea";
TextEditor.prototype.getText = function(text,node) { content.push(Renderer.TextNode(value));
if(node.nodeType === window.Node.TEXT_NODE) { } else {
text.push(node.data); tagName = "input";
} else if(node.nodeType === window.Node.ELEMENT_NODE && node.nodeName.toLowerCase() === "br") { attributes.type = "text";
// Firefox has `<br>` tags instead of line feeds attributes.value = value;
text.push("\n");
}
if(node.hasChildNodes && node.hasChildNodes()) {
for(var t=0; t<node.childNodes.length; t++) {
this.getText(text,node.childNodes[t]);
}
} }
return [Renderer.ElementNode(tagName,attributes,content)];
}; };
TextEditor.prototype.addEventHandlers = function() { TextEditor.prototype.addEventHandlers = function() {
this.macroNode.domNode.addEventListener("DOMNodeInserted",this,false); this.macroNode.domNode.addEventListener("focus",this,false);
this.macroNode.domNode.addEventListener("DOMNodeRemoved",this,false); this.macroNode.domNode.addEventListener("keyup",this,false);
this.macroNode.domNode.addEventListener("DOMCharacterDataModified",this,false);
}; };
TextEditor.prototype.handleEvent = function(event) { TextEditor.prototype.handleEvent = function(event) {
if(["DOMNodeInserted","DOMNodeRemoved","DOMCharacterDataModified"].indexOf(event.type) !== -1) { // Get the value of the field if it might have changed
var tiddler = this.macroNode.store.getTiddler(this.macroNode.tiddlerTitle); if("keyup".split(" ").indexOf(event.type) !== -1) {
if(this.macroNode.content[0].domNode && tiddler) { this.saveChanges();
var text = [];
this.getText(text,this.macroNode.content[0].domNode);
text = text.join("");
if(text !== tiddler[this.macroNode.params.field]) {
var update = {};
update[this.macroNode.params.field] = text;
this.macroNode.store.addTiddler(new Tiddler(tiddler,update));
}
event.stopPropagation();
return false;
}
} }
// Whatever the event, fix the height of the textarea if required
var self = this;
window.setTimeout(function() {
self.fixHeight();
},5);
return true; return true;
}; };
TextEditor.prototype.saveChanges = function() {
var text = this.macroNode.content[0].domNode.value,
tiddler = this.macroNode.store.getTiddler(this.macroNode.tiddlerTitle);
if(tiddler && text !== tiddler[this.macroNode.params.field]) {
var update = {};
update[this.macroNode.params.field] = text;
this.macroNode.store.addTiddler(new Tiddler(tiddler,update));
}
};
TextEditor.prototype.fixHeight = function() {
if(this.macroNode.content[0] && this.macroNode.content[0].domNode) {
var wrapper = this.macroNode.domNode,
textarea = this.macroNode.content[0].domNode;
// Set the text area height to 1px temporarily, which allows us to read the true scrollHeight
var prevWrapperHeight = wrapper.style.height;
wrapper.style.height = textarea.style.height + "px";
textarea.style.overflow = "hidden";
textarea.style.height = "1px";
textarea.style.height = textarea.scrollHeight + "px";
wrapper.style.height = prevWrapperHeight;
}
};
TextEditor.prototype.renderInDom = function() {
this.fixHeight();
}
TextEditor.prototype.isRefreshable = function() { TextEditor.prototype.isRefreshable = function() {
// Don't refresh the editor if it contains the caret or selection // Don't refresh the editor if it contains the caret or selection
return !window.getSelection().containsNode(this.macroNode.domNode, true); return !window.getSelection().containsNode(this.macroNode.domNode, true);
@ -292,6 +304,11 @@ exports.macro = {
this.content[t].renderInDom(this.domNode); this.content[t].renderInDom(this.domNode);
} }
} }
} else {
// Refresh any children
for(t=0; t<this.content.length; t++) {
this.content[t].refreshInDom(changes);
}
} }
} }
}; };