Commit ae5b922a authored by bbaer's avatar bbaer
Browse files

Improved editor, selection example that gets removed

parent f3c3dace
......@@ -109,9 +109,9 @@ var QfqNS = QfqNS || {};
};
n.CommentController.prototype.displayEditor = function() {
var $editor = $("<textarea />");
var editor = new n.Editor();
var $editor = editor.buildEditor();
$editor.appendTo(this.$container);
this.updateHeight();
};
n.CommentController.prototype.getContainer = function() {
......
......@@ -19,11 +19,12 @@ var QfqNS = QfqNS || {};
'use strict';
/**
* Manages a Text Editor for Comments
* Manages Text Editor for Comments
*
*/
n.Editor = function () {
this.$container = {};
this.$textArea = {};
this.text = "";
// Event Emitter is a Library qfq uses to emit custom Events.
this.eventEmitter = new EventEmitter();
......@@ -31,7 +32,54 @@ var QfqNS = QfqNS || {};
n.Editor.prototype.on = n.EventEmitter.onMixin;
n.Editor.prototype.buildEditor = function($hook) {
n.Editor.prototype.buildEditor = function() {
var that = this;
this.$container = $("<div />", {
class: "qfqEditorContainer"
});
this.$textArea = $("<div />", {
class: "qfqEditor",
contenteditable: true
});
var controls = $("<div />", {
class: "qfqEditorControls"
});
var submitButton = $("<button />", {
class: "btn btn-primary",
text: "Send"
});
submitButton.on("click", function() { that._handleClick();});
submitButton.appendTo(controls);
var testButton = $("<button />",{
class: "btn btn-info",
text: "Test"
});
testButton.on("click", function() { that._addHTML();});
testButton.appendTo(controls);
this.$textArea.appendTo(this.$container);
controls.appendTo(this.$container);
return this.$container;
};
n.Editor.prototype._handleClick = function() {
var text = this.$textArea.html();
console.log(text);
};
n.Editor.prototype._addHTML = function() {
if (window.getSelection) {
var selection = window.getSelection();
var selectionText = selection.focusNode.data.substring(selection.anchorOffset, selection.extentOffset);
console.log(selection);
console.log(selection.focusNode.length);
console.log(selectionText);
var node = selection.focusNode;
var start = selection.anchorOffset;
var length = selection.extentOffset - selection.anchorOffset;
var replacement = "<b>" + selectionText + "</b>";
node.data = node.data.Remove(start, length).node.data.Insert(start, replacement);
console.log(node.data);
}
};
......
......@@ -530,6 +530,10 @@ i.@{spinner_class} {
grid-column: 1;
width: 100%;
min-height: 100px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 8px;
}
.qfqEditorControls {
......
......@@ -36,12 +36,7 @@
</div>
</div>
<div class="qfqEditorContainer">
<textarea class="qfqEditor"></textarea>
<div class="qfqEditorControls">
<button class="btn btn-primary">Send</button>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment