wisemapping-open-source/mindplot/src/main/javascript/TextEditor.js

265 lines
8.7 KiB
JavaScript
Raw Normal View History

2009-06-14 15:02:27 +02:00
/*
2011-04-17 20:04:02 +02:00
* Copyright [2011] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
mindplot.TextEditor = new Class({
initialize:function(topic) {
this._topic = topic;
},
2011-04-17 20:04:02 +02:00
_buildEditor : function() {
2011-04-17 20:04:02 +02:00
this._size = {width:500, height:100};
var result = new Element('div');
result.setStyles({
position:"absolute",
display: "none",
zIndex: "8",
width:"500px",
height:"100px"}
);
var inputContainer = new Element('div');
inputContainer.setStyles({
border:"none",
2011-08-20 15:50:48 +02:00
overflow:"auto"
});
inputContainer.inject(result);
var inputText = new Element('input',
{type:"text",
tabindex:'-1',
value:""}
);
inputText.setStyles({
border:"none",
background:"transparent"
});
inputText.inject(inputContainer);
2011-04-17 20:04:02 +02:00
var spanContainer = new Element('div');
spanContainer.setStyle('visibility', "hidden");
spanContainer.inject(result);
2011-07-27 19:53:32 +02:00
var spanElem = new Element('span', {tabindex:"-1"});
spanElem.setStyle('white-space', "nowrap");
spanElem.setStyle('nowrap', 'nowrap');
spanElem.inject(spanContainer);
return result;
2011-04-17 20:04:02 +02:00
},
2011-07-27 19:53:32 +02:00
_registerEvents : function(divElem) {
2011-09-02 07:31:03 +02:00
var inputElem = this._getTextareaElem();
var spanElem = this._getSpanElem();
divElem.addEvent('keydown', function (event) {
switch (event.key) {
2011-04-17 20:04:02 +02:00
case 'esc':
this.close(false);
break;
2011-04-17 20:04:02 +02:00
case 'enter':
this.close(true);
2011-04-17 20:04:02 +02:00
break;
default:
spanElem.innerHTML = inputElem.value;
var size = inputElem.value.length + 1;
inputElem.size = size;
if (spanElem.offsetWidth > (parseInt(divElem.style.width) - 100)) {
divElem.style.width = (spanElem.offsetWidth + 100) + "px";
2011-04-17 20:04:02 +02:00
}
break;
}
event.stopPropagation();
}.bind(this));
2011-07-27 19:53:32 +02:00
// If the user clicks on the input, all event must be ignored ...
divElem.addEvent('click', function(event) {
event.stopPropagation();
});
divElem.addEvent('dblclick', function(event) {
event.stopPropagation();
});
divElem.addEvent('mousedown', function(event) {
event.stopPropagation();
});
2011-04-17 20:04:02 +02:00
},
2011-07-27 19:53:32 +02:00
isVisible : function () {
2011-09-04 08:28:09 +02:00
return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block';
2011-04-17 20:04:02 +02:00
},
2011-07-27 19:53:32 +02:00
_updateModel : function () {
2011-07-27 19:53:32 +02:00
if (this._topic.getText() != this._getText()) {
var text = this._getText();
var topicId = this._topic.getId();
2009-06-07 20:59:43 +02:00
2011-08-05 03:12:53 +02:00
var actionDispatcher = mindplot.ActionDispatcher.getInstance();
actionDispatcher.changeTextToTopic([topicId], text);
2011-04-17 20:04:02 +02:00
}
},
2011-07-27 19:53:32 +02:00
show : function (text) {
2011-07-27 19:53:32 +02:00
if (!this.isVisible()) {
//Create editor ui
var editorElem = this._buildEditor();
editorElem.inject($(document.body));
2011-09-04 08:28:09 +02:00
this._containerElem = editorElem;
this._registerEvents(editorElem);
this._showEditor(text);
2009-06-07 20:59:43 +02:00
}
},
_showEditor : function (defaultText) {
var topic = this._topic;
// Hide topic text ...
topic.getTextShape().setVisibility(false);
2009-06-07 20:59:43 +02:00
// Set Editor Style
var nodeText = topic.getTextShape();
2011-04-17 20:04:02 +02:00
var font = nodeText.getFont();
font.size = nodeText.getHtmlFontSize();
2011-04-17 20:04:02 +02:00
font.color = nodeText.getColor();
this._setStyle(font);
2009-06-07 20:59:43 +02:00
// Set editor's initial text
var text = $defined(defaultText) ? defaultText : topic.getText();
this._setText(text);
// Set editor's initial size
var displayFunc = function() {
// Position the editor and set the size...
var textShape = this._topic.getTextShape();
2011-09-04 08:28:09 +02:00
textShape.positionRelativeTo(this._containerElem, {
position: {x: 'left',y:'top'},
edge: {x: 'left', y: 'top'}
});
2011-09-04 08:28:09 +02:00
this._containerElem.setStyle('display', 'block');
// Set size ...
var elemSize = topic.getSize();
this._setEditorSize(elemSize.width, elemSize.height);
2011-09-05 14:25:38 +02:00
var textareaElem = this._getTextareaElem();
textareaElem.focus();
this._positionCursor(textareaElem, !$defined(defaultText));
}.bind(this);
displayFunc.delay(10);
2011-04-17 20:04:02 +02:00
},
2011-07-27 19:53:32 +02:00
_setStyle : function (fontStyle) {
2011-09-02 07:31:03 +02:00
var inputField = this._getTextareaElem();
var spanField = this._getSpanElem();
2011-07-27 19:53:32 +02:00
if (!$defined(fontStyle.font)) {
2011-04-17 20:04:02 +02:00
fontStyle.font = "Arial";
}
2011-07-27 19:53:32 +02:00
if (!$defined(fontStyle.style)) {
2011-04-17 20:04:02 +02:00
fontStyle.style = "normal";
}
2011-07-27 19:53:32 +02:00
if (!$defined(fontStyle.weight)) {
2011-04-17 20:04:02 +02:00
fontStyle.weight = "normal";
}
2011-07-27 19:53:32 +02:00
if (!$defined(fontStyle.size)) {
2011-04-17 20:04:02 +02:00
fontStyle.size = 12;
}
inputField.style.fontSize = fontStyle.size + "px";
inputField.style.fontFamily = fontStyle.font;
inputField.style.fontStyle = fontStyle.style;
inputField.style.fontWeight = fontStyle.weight;
inputField.style.color = fontStyle.color;
spanField.style.fontFamily = fontStyle.font;
spanField.style.fontStyle = fontStyle.style;
spanField.style.fontWeight = fontStyle.weight;
spanField.style.fontSize = fontStyle.size + "px";
},
2011-07-27 19:53:32 +02:00
_setText : function(text) {
2011-09-02 07:31:03 +02:00
var inputField = this._getTextareaElem();
2011-04-17 20:04:02 +02:00
inputField.size = text.length + 1;
2011-09-04 08:28:09 +02:00
this._containerElem.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px";
var spanField = this._getSpanElem();
2011-04-17 20:04:02 +02:00
spanField.innerHTML = text;
inputField.value = text;
},
2011-07-27 19:53:32 +02:00
_getText : function() {
2011-09-02 07:31:03 +02:00
return this._getTextareaElem().value;
},
2011-09-02 07:31:03 +02:00
_getTextareaElem : function() {
2011-09-04 08:28:09 +02:00
return this._containerElem.getElement('input');
2011-04-17 20:04:02 +02:00
},
2011-07-27 19:53:32 +02:00
_getSpanElem : function() {
2011-09-04 08:28:09 +02:00
return this._containerElem.getElement('span');
},
_setEditorSize : function (width, height) {
var textShape = this._topic.getTextShape();
var scale = web2d.peer.utils.TransformUtil.workoutScale(textShape._peer);
2011-04-17 20:04:02 +02:00
this._size = {width:width * scale.width, height:height * scale.height};
2011-09-04 08:28:09 +02:00
this._containerElem.style.width = this._size.width * 2 + "px";
this._containerElem.style.height = this._size.height + "px";
2011-04-17 20:04:02 +02:00
},
2011-07-27 19:53:32 +02:00
2011-09-05 14:25:38 +02:00
_positionCursor : function(inputElem, selectText) {
// Select text if it's required ...
if (inputElem.createTextRange) //ie
2009-06-07 20:59:43 +02:00
{
var range = inputElem.createTextRange();
var pos = inputElem.value.length;
if (!selectText) {
2011-04-17 20:04:02 +02:00
range.select();
range.move("character", pos);
}
2011-07-27 19:53:32 +02:00
else {
2011-04-17 20:04:02 +02:00
range.move("character", pos);
range.select();
}
2009-06-07 20:59:43 +02:00
}
else if (!selectText) {
inputElem.setSelectionRange(0, inputElem.value.length);
2009-06-07 20:59:43 +02:00
}
2011-04-17 20:04:02 +02:00
},
2011-07-27 19:53:32 +02:00
close : function(update) {
2011-07-27 19:53:32 +02:00
if (this.isVisible()) {
// Update changes ...
if (!$defined(update) || update) {
this._updateModel();
2011-04-17 20:04:02 +02:00
}
// Let make the visible text in the node visible again ...
this._topic.getTextShape().setVisibility(true);
// Remove it form the screen ...
2011-09-04 08:28:09 +02:00
this._containerElem.dispose();
this._containerElem = null;
2011-03-29 18:06:59 +02:00
}
}
2011-04-17 20:04:02 +02:00
});
2011-03-29 18:06:59 +02:00