mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-09-12 07:10:07 +02:00
MultilineTextEditor partially fixed
This commit is contained in:
parent
fe4bff17cf
commit
ccab3bf9ec
@ -25,38 +25,33 @@ mindplot.MultilineTextEditor = new Class({
|
|||||||
|
|
||||||
_buildEditor:function () {
|
_buildEditor:function () {
|
||||||
|
|
||||||
var result = new Element('div');
|
var result = $('<div></div>')
|
||||||
result.set('id',"textContainer")
|
.attr('id', 'textContainer')
|
||||||
result.setStyles({
|
.css({
|
||||||
display:"none",
|
display:"none",
|
||||||
zIndex:"8",
|
zIndex:"8",
|
||||||
overflow:"hidden",
|
overflow:"hidden",
|
||||||
border:"0 none"
|
border:"0 none"
|
||||||
}
|
});
|
||||||
);
|
|
||||||
|
|
||||||
var textareaElem = new Element('textarea',
|
|
||||||
{ tabindex:'-1',
|
|
||||||
value:"",
|
|
||||||
wrap:'off'
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
textareaElem.setStyles({
|
var textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>')
|
||||||
border:"1px gray dashed",
|
.css({
|
||||||
background:"rgba(98, 135, 167, .3)",
|
border:"1px gray dashed",
|
||||||
outline:'0 none',
|
background:"rgba(98, 135, 167, .3)",
|
||||||
resize:'none',
|
outline:'0 none',
|
||||||
overflow:"hidden"
|
resize:'none',
|
||||||
});
|
overflow:"hidden"
|
||||||
textareaElem.inject(result);
|
});
|
||||||
|
|
||||||
|
result.append(textareaElem);
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
|
|
||||||
_registerEvents:function (containerElem) {
|
_registerEvents:function (containerElem) {
|
||||||
var textareaElem = this._getTextareaElem();
|
var textareaElem = this._getTextareaElem();
|
||||||
|
|
||||||
textareaElem.addEvent('keydown', function (event) {
|
textareaElem.on('keydown', function (event) {
|
||||||
switch (event.key) {
|
switch (event.key) {
|
||||||
case 'esc':
|
case 'esc':
|
||||||
this.close(false);
|
this.close(false);
|
||||||
@ -65,7 +60,7 @@ mindplot.MultilineTextEditor = new Class({
|
|||||||
if (event.meta || event.control) {
|
if (event.meta || event.control) {
|
||||||
|
|
||||||
// Add return ...
|
// Add return ...
|
||||||
var text = textareaElem.value;
|
var text = textareaElem.val();
|
||||||
var cursorPosition = text.length;
|
var cursorPosition = text.length;
|
||||||
if (textareaElem.selectionStart) {
|
if (textareaElem.selectionStart) {
|
||||||
cursorPosition = textareaElem.selectionStart;
|
cursorPosition = textareaElem.selectionStart;
|
||||||
@ -76,12 +71,12 @@ mindplot.MultilineTextEditor = new Class({
|
|||||||
if (cursorPosition < text.length) {
|
if (cursorPosition < text.length) {
|
||||||
tail = text.substring(cursorPosition, text.length);
|
tail = text.substring(cursorPosition, text.length);
|
||||||
}
|
}
|
||||||
textareaElem.value = head + "\n" + tail;
|
textareaElem.val(head + "\n" + tail);
|
||||||
|
|
||||||
// Position cursor ...
|
// Position cursor ...
|
||||||
if (textareaElem.setSelectionRange) {
|
if (textareaElem[0].setSelectionRange) {
|
||||||
textareaElem.focus();
|
textareaElem.focus();
|
||||||
textareaElem.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
|
textareaElem[0].setSelectionRange(cursorPosition + 1, cursorPosition + 1);
|
||||||
} else if (textareaElem.createTextRange) {
|
} else if (textareaElem.createTextRange) {
|
||||||
var range = textareaElem.createTextRange();
|
var range = textareaElem.createTextRange();
|
||||||
range.moveStart('character', cursorPosition + 1);
|
range.moveStart('character', cursorPosition + 1);
|
||||||
@ -97,24 +92,24 @@ mindplot.MultilineTextEditor = new Class({
|
|||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
textareaElem.addEvent('keypress', function (event) {
|
textareaElem.on('keypress', function (event) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
});
|
});
|
||||||
|
|
||||||
textareaElem.addEvent('keyup', function (event) {
|
textareaElem.on('keyup', function (event) {
|
||||||
var text = this._getTextareaElem().value;
|
var text = this._getTextareaElem().val();
|
||||||
this.fireEvent('input', [event, text]);
|
this.fireEvent('input', [event, text]);
|
||||||
this._adjustEditorSize();
|
this._adjustEditorSize();
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
// If the user clicks on the input, all event must be ignored ...
|
// If the user clicks on the input, all event must be ignored ...
|
||||||
containerElem.addEvent('click', function (event) {
|
containerElem.on('click', function (event) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
});
|
});
|
||||||
containerElem.addEvent('dblclick', function (event) {
|
containerElem.on('dblclick', function (event) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
});
|
});
|
||||||
containerElem.addEvent('mousedown', function (event) {
|
containerElem.on('mousedown', function (event) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@ -124,25 +119,25 @@ mindplot.MultilineTextEditor = new Class({
|
|||||||
if (this.isVisible()) {
|
if (this.isVisible()) {
|
||||||
var textElem = this._getTextareaElem();
|
var textElem = this._getTextareaElem();
|
||||||
|
|
||||||
var lines = textElem.value.split('\n');
|
var lines = textElem.val().split('\n');
|
||||||
var maxLineLength = 1;
|
var maxLineLength = 1;
|
||||||
_.each(lines, function (line) {
|
_.each(lines, function (line) {
|
||||||
if (maxLineLength < line.length)
|
if (maxLineLength < line.length)
|
||||||
maxLineLength = line.length;
|
maxLineLength = line.length;
|
||||||
});
|
});
|
||||||
|
|
||||||
textElem.setAttribute('cols', maxLineLength);
|
textElem.attr('cols', maxLineLength);
|
||||||
textElem.setAttribute('rows', lines.length);
|
textElem.attr('rows', lines.length);
|
||||||
|
|
||||||
this._containerElem.setStyles({
|
this._containerElem.css({
|
||||||
width:(maxLineLength + 3) + 'em',
|
width:(maxLineLength + 3) + 'em',
|
||||||
height:textElem.getSize().height
|
height:textElem.height()
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
isVisible:function () {
|
isVisible:function () {
|
||||||
return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block';
|
return $defined(this._containerElem) && this._containerElem.css('display') == 'block';
|
||||||
},
|
},
|
||||||
|
|
||||||
_updateModel:function () {
|
_updateModel:function () {
|
||||||
@ -166,7 +161,7 @@ mindplot.MultilineTextEditor = new Class({
|
|||||||
if (!this.isVisible()) {
|
if (!this.isVisible()) {
|
||||||
//Create editor ui
|
//Create editor ui
|
||||||
var containerElem = this._buildEditor();
|
var containerElem = this._buildEditor();
|
||||||
containerElem.inject($(document.body)[0]);
|
$('body').append(containerElem);
|
||||||
|
|
||||||
this._containerElem = containerElem;
|
this._containerElem = containerElem;
|
||||||
this._registerEvents(containerElem);
|
this._registerEvents(containerElem);
|
||||||
@ -193,14 +188,14 @@ mindplot.MultilineTextEditor = new Class({
|
|||||||
// Position the editor and set the size...
|
// Position the editor and set the size...
|
||||||
var textShape = topic.getTextShape();
|
var textShape = topic.getTextShape();
|
||||||
|
|
||||||
$('#textContainer')[0].position({
|
$('#textContainer').position({
|
||||||
my: "left top",
|
my: "left top",
|
||||||
at: "left bottom",
|
at: "left bottom",
|
||||||
of: $(textShape)[0]
|
of: $(textShape)[0]
|
||||||
// collision: "fit"
|
// collision: "fit"
|
||||||
});
|
});
|
||||||
|
|
||||||
this._containerElem.setStyle('display', 'block');
|
this._containerElem.css('display', 'block');
|
||||||
|
|
||||||
// Set editor's initial text ...
|
// Set editor's initial text ...
|
||||||
var text = $defined(defaultText) ? defaultText : topic.getText();
|
var text = $defined(defaultText) ? defaultText : topic.getText();
|
||||||
@ -236,22 +231,22 @@ mindplot.MultilineTextEditor = new Class({
|
|||||||
fontWeight:fontStyle.weight,
|
fontWeight:fontStyle.weight,
|
||||||
color:fontStyle.color
|
color:fontStyle.color
|
||||||
};
|
};
|
||||||
inputField.setStyles(style);
|
inputField.css(style);
|
||||||
this._containerElem.setStyles(style);
|
this._containerElem.css(style);
|
||||||
},
|
},
|
||||||
|
|
||||||
_setText:function (text) {
|
_setText:function (text) {
|
||||||
var textareaElem = this._getTextareaElem();
|
var textareaElem = this._getTextareaElem();
|
||||||
textareaElem.value = text;
|
textareaElem.val(text);
|
||||||
this._adjustEditorSize();
|
this._adjustEditorSize();
|
||||||
},
|
},
|
||||||
|
|
||||||
_getText:function () {
|
_getText:function () {
|
||||||
return this._getTextareaElem().value;
|
return this._getTextareaElem().val();
|
||||||
},
|
},
|
||||||
|
|
||||||
_getTextareaElem:function () {
|
_getTextareaElem:function () {
|
||||||
return this._containerElem.getElement('textarea');
|
return this._containerElem.find('textarea');
|
||||||
},
|
},
|
||||||
|
|
||||||
_positionCursor:function (textareaElem, selectText) {
|
_positionCursor:function (textareaElem, selectText) {
|
||||||
@ -261,19 +256,19 @@ mindplot.MultilineTextEditor = new Class({
|
|||||||
if (textareaElem.createTextRange) {
|
if (textareaElem.createTextRange) {
|
||||||
var rang = textareaElem.createTextRange();
|
var rang = textareaElem.createTextRange();
|
||||||
rang.select();
|
rang.select();
|
||||||
rang.move("character", textareaElem.value.length);
|
rang.move("character", textareaElem.val().length);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
textareaElem.setSelectionRange(0, textareaElem.value.length);
|
textareaElem[0].setSelectionRange(0, textareaElem.val().length);
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// Move the cursor to the last character ..
|
// Move the cursor to the last character ..
|
||||||
if (textareaElem.createTextRange) {
|
if (textareaElem.createTextRange) {
|
||||||
var range = textareaElem.createTextRange();
|
var range = textareaElem.createTextRange();
|
||||||
range.move("character", textareaElem.value.length);
|
range.move("character", textareaElem.val().length);
|
||||||
} else {
|
} else {
|
||||||
textareaElem.selectionStart = textareaElem.value.length;
|
textareaElem.selectionStart = textareaElem.val().length;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -51,7 +51,7 @@ mindplot.ScreenManager = new Class({
|
|||||||
this._clickEvents.remove(listener);
|
this._clickEvents.remove(listener);
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
this._divContainer.removeEvent(event, listener);
|
this._divContainer.unbind(event, listener);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -118,13 +118,13 @@ mindplot.ScreenManager = new Class({
|
|||||||
|
|
||||||
getWorkspaceMousePosition : function(event) {
|
getWorkspaceMousePosition : function(event) {
|
||||||
// Retrieve current mouse position.
|
// Retrieve current mouse position.
|
||||||
var x = event.client.x;
|
var x = event.clientX;
|
||||||
var y = event.client.y;
|
var y = event.clientY;
|
||||||
|
|
||||||
// Subtract div position.
|
//FIXME: paulo: why? Subtract div position.
|
||||||
var containerPosition = this.getContainer().getPosition();
|
/*var containerPosition = this.getContainer().position();
|
||||||
x = x - containerPosition.x;
|
x = x - containerPosition.x;
|
||||||
y = y - containerPosition.y;
|
y = y - containerPosition.y;*/
|
||||||
|
|
||||||
// Scale coordinate in order to be relative to the workspace. That's coordSize/size;
|
// Scale coordinate in order to be relative to the workspace. That's coordSize/size;
|
||||||
x = x * this._scale;
|
x = x * this._scale;
|
||||||
|
Loading…
Reference in New Issue
Block a user