2016-04-22 07:36:29 +00:00
|
|
|
/*\
|
|
|
|
title: $:/core/modules/editor/engines/simple.js
|
|
|
|
type: application/javascript
|
|
|
|
module-type: library
|
|
|
|
|
|
|
|
Text editor engine based on a simple input or textarea tag
|
|
|
|
|
|
|
|
\*/
|
|
|
|
(function(){
|
|
|
|
|
|
|
|
/*jslint node: true, browser: true */
|
|
|
|
/*global $tw: false */
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
var HEIGHT_VALUE_TITLE = "$:/config/TextEditor/EditorHeight/Height";
|
|
|
|
|
|
|
|
function SimpleEngine(options) {
|
|
|
|
// Save our options
|
|
|
|
options = options || {};
|
|
|
|
this.widget = options.widget;
|
|
|
|
this.value = options.value;
|
|
|
|
this.parentNode = options.parentNode;
|
|
|
|
this.nextSibling = options.nextSibling;
|
|
|
|
// Construct the textarea or input node
|
|
|
|
var tag = this.widget.editTag;
|
|
|
|
if($tw.config.htmlUnsafeElements.indexOf(tag) !== -1) {
|
|
|
|
tag = "input";
|
|
|
|
}
|
|
|
|
this.domNode = this.widget.document.createElement(tag);
|
|
|
|
if(this.widget.editType) {
|
|
|
|
this.domNode.setAttribute("type",this.widget.editType);
|
|
|
|
}
|
|
|
|
if(this.widget.editPlaceholder) {
|
|
|
|
this.domNode.setAttribute("placeholder",this.widget.editPlaceholder);
|
|
|
|
}
|
|
|
|
if(this.widget.editSize) {
|
|
|
|
this.domNode.setAttribute("size",this.widget.editSize);
|
|
|
|
}
|
|
|
|
if(this.widget.editRows) {
|
|
|
|
this.domNode.setAttribute("rows",this.widget.editRows);
|
|
|
|
}
|
|
|
|
if(this.widget.editClass) {
|
|
|
|
this.domNode.className = this.widget.editClass;
|
|
|
|
}
|
|
|
|
// Set the text
|
|
|
|
if(this.widget.editTag === "textarea") {
|
|
|
|
this.domNode.appendChild(this.widget.document.createTextNode(this.value));
|
|
|
|
} else {
|
|
|
|
this.domNode.value = this.value;
|
|
|
|
}
|
|
|
|
// Add an input event handler
|
|
|
|
$tw.utils.addEventListeners(this.domNode,[
|
|
|
|
{name: "focus", handlerObject: this, handlerMethod: "handleFocusEvent"},
|
|
|
|
{name: "input", handlerObject: this, handlerMethod: "handleInputEvent"}
|
|
|
|
]);
|
|
|
|
// Insert the element into the DOM
|
|
|
|
this.parentNode.insertBefore(this.domNode,this.nextSibling);
|
|
|
|
this.widget.domNodes.push(this.domNode);
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
Set the text of the engine if it doesn't currently have focus
|
|
|
|
*/
|
|
|
|
SimpleEngine.prototype.setText = function(text,type) {
|
|
|
|
if(!this.domNode.isTiddlyWikiFakeDom) {
|
|
|
|
if(this.domNode.ownerDocument.activeElement !== this.domNode) {
|
|
|
|
this.domNode.value = text;
|
|
|
|
}
|
|
|
|
// Fix the height if needed
|
|
|
|
this.fixHeight();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
Get the text of the engine
|
|
|
|
*/
|
|
|
|
SimpleEngine.prototype.getText = function() {
|
|
|
|
return this.domNode.value;
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
Fix the height of textarea to fit content
|
|
|
|
*/
|
|
|
|
SimpleEngine.prototype.fixHeight = function() {
|
|
|
|
if(this.widget.editTag === "textarea") {
|
|
|
|
if(this.widget.editAutoHeight) {
|
|
|
|
if(this.domNode && !this.domNode.isTiddlyWikiFakeDom) {
|
|
|
|
$tw.utils.resizeTextAreaToFit(this.domNode,this.widget.editMinHeight);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
var fixedHeight = parseInt(this.widget.wiki.getTiddlerText(HEIGHT_VALUE_TITLE,"400px"),10);
|
|
|
|
fixedHeight = Math.max(fixedHeight,20);
|
|
|
|
this.domNode.style.height = fixedHeight + "px";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
Focus the engine node
|
|
|
|
*/
|
|
|
|
SimpleEngine.prototype.focus = function() {
|
|
|
|
if(this.domNode.focus && this.domNode.select) {
|
|
|
|
this.domNode.focus();
|
|
|
|
this.domNode.select();
|
|
|
|
}
|
2016-04-23 16:23:14 +00:00
|
|
|
};
|
2016-04-22 07:36:29 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
Handle a dom "input" event which occurs when the text has changed
|
|
|
|
*/
|
|
|
|
SimpleEngine.prototype.handleInputEvent = function(event) {
|
|
|
|
this.widget.saveChanges(this.getText());
|
|
|
|
this.fixHeight();
|
|
|
|
return true;
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
Handle a dom "focus" event
|
|
|
|
*/
|
|
|
|
SimpleEngine.prototype.handleFocusEvent = function(event) {
|
|
|
|
if(this.widget.editFocusPopup) {
|
|
|
|
$tw.popup.triggerPopup({
|
|
|
|
domNode: this.domNode,
|
|
|
|
title: this.widget.editFocusPopup,
|
|
|
|
wiki: this.widget.wiki,
|
|
|
|
force: true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
Create a blank structure representing a text operation
|
|
|
|
*/
|
|
|
|
SimpleEngine.prototype.createTextOperation = function() {
|
|
|
|
return null;
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
Execute a command
|
|
|
|
*/
|
|
|
|
SimpleEngine.prototype.execCommand = function() {
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
Execute a text operation
|
|
|
|
*/
|
|
|
|
SimpleEngine.prototype.executeTextOperation = function(operation) {
|
|
|
|
};
|
|
|
|
|
|
|
|
exports.SimpleEngine = SimpleEngine;
|
|
|
|
|
|
|
|
})();
|