Commit 1a47f17a authored by bbaer's avatar bbaer
Browse files

More indepth selection tests, editor controls, new functions

parent 70507c07
......@@ -41,6 +41,7 @@ var QfqNS = QfqNS || {};
class: "qfqEditor",
contenteditable: true
});
this._addEditorControls();
var controls = $("<div />", {
class: "qfqEditorControls"
});
......@@ -50,12 +51,7 @@ var QfqNS = QfqNS || {};
});
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;
......@@ -63,19 +59,99 @@ var QfqNS = QfqNS || {};
n.Editor.prototype._handleClick = function() {
var text = this.$textArea.html();
console.log(text);
};
n.Editor.prototype._addHTML = function() {
n.Editor.prototype._playingWithSelection = function() {
var selection = window.getSelection();
console.log(selection);
if (!selection.isCollapsed) {
var currentNode = selection.anchorNode;
var count = 1;
if (selection.anchorNode.nextSibling !== null) {
if (currentNode.nextSibling.isSameNode(selection.focusNode)) {
console.log("Selected 2 nodes");
} else {
while (!currentNode.isSameNode(selection.focusNode)) {
count++;
if (currentNode.nextSibling !== null) {
currentNode = currentNode.nextSibling;
} else {
console.error("whoops");
break;
}
}
console.log("Selected " + count + " nodes");
}
} else {
if (selection.focusNode.nextSibling !== null) {
if (selection.focusNode.nextSibling.isSameNode(selection.anchorNode)) {
console.log("Selected 2 nodes");
} else {
currentNode = selection.focusNode;
while (!currentNode.isSameNode(selection.focusNode)) {
count++;
if (currentNode.previousSibling !== null) {
currentNode = currentNode.previousSibling;
} else {
console.error("whoops");
break;
}
}
console.log("Selected " + count + " nodes");
}
} else {
console.log(selection.toString());
selection.deleteFromDocument();
}
}
} else {
console.log("Selected one node");
}
};
n.Editor.prototype._addEditorControls = function() {
var that = this;
var $addCode = $("<span />", {
class: "glyphicon glyphicon-console qfqEditorControl qfqCodeAdd"
});
$addCode.on("click", function() { that._addCodeElement();});
$addCode.appendTo(this.$container);
var $addList = $("<span />", {
class: "glyphicon glyphicon-list qfqEditorControl qfqCodeList"
});
$addList.on("click", function() { that._addListElement();});
$addList.appendTo(this.$container);
this._addStandardTextElement();
};
n.Editor.prototype._addCodeElement = function() {
var $code = $("<code />", {
class: "qfqCodeElement",
text: "Write your code here"
});
$code.appendTo(this.$textArea);
this._addStandardTextElement();
};
n.Editor.prototype._addListElement = function() {
var $unsortedList = $("<ul />");
var selection = window.getSelection();
console.log(selection);
var $listElement = $("<li />", {
text: "Write your list"
});
$listElement.appendTo($unsortedList);
$unsortedList.appendTo(this.$textArea);
this._addStandardTextElement();
};
n.Editor.prototype._addStandardTextElement = function() {
var $regular = $("<p />", {
text: "\xA0"
text: "\xA0"
}
);
$code.appendTo(this.$textArea);
$regular.appendTo(this.$textArea);
};
......
......@@ -476,14 +476,15 @@ i.@{spinner_class} {
width: 100px;
height: 120px;
border: 1px solid #ccc;
padding: 5px;
padding: 4px;
padding-bottom: 20px;
/*transform: rotate(20deg);*/
}
.qfqCommentAuthor {
position: absolute;
top: 5px;
left: 8px;
top: 10px;
left: 10px;
font-weight: bold;
}
......@@ -493,7 +494,7 @@ i.@{spinner_class} {
grid-row-end: 3;
background-color: #fff;
width: 100%;
padding: 8px;
padding: 10px;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 5px 5px;
......@@ -511,8 +512,8 @@ i.@{spinner_class} {
.qfqCommentDateTime {
position: absolute;
right: 8px;
top: 5px;
right: 10px;
top: 10px;
color: grey;
font-size: 0.8em;
}
......@@ -527,17 +528,53 @@ i.@{spinner_class} {
}
.qfqEditor {
z-index: 1;
position: relative;
grid-column: 1;
width: 100%;
min-height: 100px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 8px;
padding: 10px;
padding-left: 40px;
}
.qfqEditorControls {
grid-column: 2;
width: 100%;
padding-left: 10px;
}
.qfqCodeElement {
display: block;
background: #333;
color: #eee;
margin: 10px;
padding: 15px;
border-left: 2px solid #5cb85c;
}
.qfqEditor ul {
margin: 10px;
}
.qfqEditorControl {
z-index: 5;
cursor: pointer;
color: #ccc;
position: absolute;
left: 10px;
}
.qfqEditorControl:hover {
color: #9acfea;
}
.qfqCodeAdd {
top: 10px;
}
.qfqCodeList {
top: 35px;
}
\ No newline at end of file
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