var dragged = null;
var droparea = { width: 0, height: 0 };
var draggable_count = 0;
var bgImage = { src: "", width: "", height: ""};
//limitni rozmery obrazku na pozadi
var bgLimits = { width: 1000, height: 800}
var textMaxLength = 0, textMaxChars = 0;
var insertPoint = { x: 20, y: 20}
var coords = { x: 0, y: 0}
var actualDraggable = null,
actualInstance = null,
xOffset = 0,
yOffset = 0;
var actConnector = null;
var connectors = { width: 3, color: "#000"};
var svgNS = "http://www.w3.org/2000/svg";
var connectorCount = 0;
function initApplication() {
$(".sidebar").draggable()
$("#shower").draggable()
var isInDroparea = false;
var qArea = document.getElementById("qArea");
qArea.ondragover = dragOverEvent;
qArea.ondragleave = dragLeaveEvent;
qArea.ondrop = dropEvent;
$("#qArea .ui-right").draggable();
var drags = document.querySelectorAll("#dragbase .draggable");
for (var i = 0; i < drags.length; i++) {
drags[i].ondragstart = dragStartEvent;
drags[i].ondragend = dragEndEvent;
}
$("#dialog-addText").dialog({
autoOpen: false,
height: "auto",
width: 450,
modal: true,
resizable: false,
buttons: {
"Přidat popisek": function () {
var bValid = true;
$("#new_text").removeClass("ui-state-error");
var txt = $("#new_text").attr("value")
if (txt != "") {
addDraggableText(txt)
}
$(this).dialog("close");
},
"Zrušit": function () {
$(this).dialog("close");
}
},
close: function () {
$("#new_text").val("").removeClass("ui-state-error");
}
});
$("#dialog-setBgImage").dialog({
autoOpen: false,
height: 250,
width: 800,
modal: true,
resizable: false,
buttons: {
"Nahrát obrázek": function () {
loadImage();
$(this).dialog("close");
},
"Zavřít": function () {
$(this).dialog("close");
}
},
close: function () {
$("#pic_url").val("").removeClass("ui-state-error");
}
});
$("#dialog-importCode").dialog({
autoOpen: false,
height: 400,
width: 800,
modal: true,
resizable: false,
buttons: {
"Importovat kód": function () {
importCode();
$(this).dialog("close");
},
"Zavřít": function () {
$(this).dialog("close");
}
},
close: function () {
$("#import_code").val("").removeClass("ui-state-error");
}
});
$("input[type=button], button")
.button()
.click(function (event) {
event.preventDefault();
});
$("#tabs").tabs();
// fix the classes
$(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
.removeClass("ui-corner-all ui-corner-top")
.addClass("ui-corner-bottom");
// move the nav to the bottom
$(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
$("#tabs").on("tabsactivate", function (event, ui) {
var pid = ui.newPanel.attr("id")
if (pid == "tabs-2") generatePreview();
if (pid == "tabs-3") generateCode();
});
document.getElementById("connector-width").value = 3;
document.getElementById("connector-color").value = "#000000";
var bgTest = document.getElementById("bg_test")
bgTest.addEventListener("load", bgTestLoad);
bgTest.addEventListener("error", bgTestError);
//loadImage("https://is.muni.cz/auth/do/rect/el/storage/utils/descriptors/demo/bunka_nolines.png")
}
function report(text) {
console.log(text);
}
function setMainMode(mode) {
}
function getCoords(evt ) {
var rect = /*document.querySelector("#qArea")*/ evt.target.getBoundingClientRect() //evt.target
var mouseX = Math.round( evt.clientX - rect.left )
var mouseY = Math.round( evt.clientY - rect.top )
coords = { x: mouseX, y: mouseY}
report("x: " + coords.x + ", y:" + coords.y )
}
function dragStartEvent(e) {
var rodic = this.parentNode
puvRodic = this.parentNode
var dname = this.nodeName.toLowerCase();
var novy = document.createElement("SPAN") //dragged.cloneNode(true)
if (dname == "img") {
novy = document.createElement("img")
novy.src = this.src;
novy.setAttribute("data-id", this.getAttribute("data-id"));
}
//novy.setAttribute("draggable", "true")
//novy.setAttribute("class", "draggable")
novy.innerHTML = this.innerHTML
var popis = document.createElement("span")
popis.style.position = "absolute"
popis.style.top = Math.round(coords.y - this.height/2 - 2) + "px"
popis.style.left = Math.round(coords.x - this.width/2 - 2) + "px"
popis.style.width = droparea.width + "px"
popis.style.height = droparea.height + "px"
popis.style.lineHeight = (droparea.height-2) + "px"
popis.className = "droparea"
popis.appendChild(novy)
//EventHelpers.addEvent(novy, 'dragstart', dragStartMoveEvent);
//EventHelpers.addEvent(novy, 'dragend', dragEndCloneEvent);
rodic.appendChild(popis)
//dragged.style.visibility = "hidden"
popis.onclick = selectItem
document.getElementById("qArea").appendChild(popis)
dragged = popis;
$(popis).draggable()
}
function dragOverEvent(e) {
isInDroparea = true;
getCoords(e)
EventHelpers.preventDefault(e);
}
function dragEndEvent(e) {
var puvRodic = dragged.parentNode;
//alert (isInDroparea)
if (!isInDroparea) {
dragged = null;
//puvRodic.removeChild(dragged);
}
else { //var coords = getCoords(e);
report("drop pokus na " + coords.x + ", " + coords.y)
/*
dragged.style.position = "absolute";
dragged.style.top = -coords.y + "px"
dragged.style.left = -coords.x + "px"
alert(coords.y)
*/
dragged = null;
}
EventHelpers.preventDefault(e);
}
function dragLeaveEvent(e) {
isInDroparea = false;
EventHelpers.preventDefault(e);
}
function dropEvent(e) {
EventHelpers.preventDefault(e);
//alert("Zkouska pridani")
//var content = e.dataTransfer.getData('Text' )
var puvRodic = dragged.parentNode;
var rodic = this;
/*
if (puvRodic.className.indexOf("droparea") > -1 && rodic.className.indexOf("droparea") > -1 ) {
rodic.appendChild(puvRodic.removeChild(dragged))
}
*/
if (puvRodic.className == "dragbase" ) { }
//pretahovani prvku zpet do vychozi dragbase
if (puvRodic.className.indexOf("droparea") > -1 && rodic.className.indexOf("dragbase") > -1 ) {
/*
puvRodic.removeChild(dragged);
var dname = dragged.nodeName.toLowerCase()
var ditems = rodic.querySelectorAll(dname);
for (var k = 0; k < ditems.length; k++) {
if (dname == "span" && ditems[k].firstChild.nodeValue == content) ditems[k].style.visibility = "visible"
if (dname == "img" && ditems[k].src == dragged.src) {
ditems[k].style.visibility = "visible"
}
}
*/
}
}
function initDragging(evt, ui) {
//xOffset = $("#qArea").offset().left - ui.helper.offset().left;
//yOffset = $("#qArea").offset().top - ui.helper.offset().top ;
//alert(typeof ui.helper)
selectDraggable((ui.helper)[0])
}
function stopDragging(evt, ui) {
var novy = ui.helper[0].cloneNode(true) //dragged.cloneNode(true)
//novy.style.position = "static";
novy.className = ""
novy.removeAttribute("draggable")
var popis = document.createElement("span")
popis.style.position = "absolute"
var cx = Math.round(evt.pageX - $("#qArea").offset().left - ui.helper.width() / 2 )
var cy = Math.round(evt.pageY - $("#qArea").offset().top - ui.helper.height() / 2 )
popis.style.top = (cy) + "px"
popis.style.left = (cx) + "px"
popis.style.width = droparea.width + "px"
popis.style.height = droparea.height + "px"
popis.className = "droparea"
popis.onmouseover = showContextHelp;
popis.appendChild(novy)
document.getElementById("qArea").appendChild(popis)
$(popis).draggable({
start: initDragging,
drag: updateConnectors
}).click(function (evt) {
selectDraggable(this)
if (evt.altKey) { alert("pokus o vymaz")
deleteSelectedDraggable()
return;
}
actualInstance = this;
})
selectDraggable(popis)
}
function addInstanceOf(dadNode, posX, posY) {
var novy = dadNode.cloneNode(true) //dragged.cloneNode(true)
novy.style.position = "static";
novy.className = "desc-content"
var plocha = document.getElementById("img_placeholder")
var popis = document.createElement("span")
popis.style.position = "absolute"
var cx = (posX == undefined) ? plocha.scrollLeft + 20 : posX
var cy = (posY == undefined) ? plocha.scrollTop + 20 : posY
popis.style.top = (cy) + "px"
popis.style.left = (cx) + "px"
popis.style.width = droparea.width + "px"
popis.style.height = "18px" //droparea.height +
popis.className = "droparea"
draggable_count++;
popis.setAttribute("data-id", "drag_" + draggable_count);
popis.appendChild(novy)
plocha.appendChild(popis)
$(popis).draggable({
start: initDragging,
drag: updateConnectors
}).click(function (evt) {
selectDraggable(this)
if (evt.altKey) {
deleteSelectedDraggable()
return;
}
actualInstance = this;
});
popis.ondblclick = editTitle;
popis.onmouseover = showContextHelp;
getInputMaxLength();
unifyDraggables();
selectDraggable(popis)
}
function addDraggableText(txt) {
var vals = txt.split("
");
var adder = document.getElementById("add_draggable");
for (var i = 0; i < vals.length; i++) {
var val = vals[i];
if (val == "") continue;
var novy = document.createElement("span");
novy.innerHTML = val;
novy.setAttribute("alt", "draggable text");
if (adder) {
adder.parentNode.insertBefore(novy, adder)
} else {
document.getElementById("dragbase").appendChild(novy)
}
}
var novy = document.createElement("span");
novy.innerHTML = txt;
novy.setAttribute("alt", "draggable text");
addInstanceOf(novy, insertPoint.x, insertPoint.y);
}
function deleteSelectedDraggable() {
if (!actualDraggable) return;
var did = actualDraggable.getAttribute("data-id");
var cons = document.querySelectorAll("[data-ref=" + did + "]");
for (var i = 0; i < cons.length; i++) {
var con = cons[i];
var end = document.querySelector("[data-endof=" + cons[i].getAttribute("data-end") + "]")
deleteNode(con);
deleteNode(end);
}
deleteNode(actualDraggable);
actualDraggable = null;
unifyDraggables();
}
function getDraggableById(did) {
$("span[data-id]").removeClass("actual")
var sought = $("#dragbase span[data-id='" + did +"']")[0];
$("span[data-id='" + did +"']").addClass("actual")
if (sought) { selectDraggable(sought); }
}
function selectDraggable(node) {
if (actualDraggable) actualDraggable.classList.remove("actual");
actualDraggable = node;
var ad = $(actualDraggable);
ad.addClass("actual");
if (!ad.attr("data-orig-width")) {
ad.attr("data-orig-width", ad.width());
ad.attr("data-orig-height", ad.height());
}
}
function selectEdit(evt) {
var node = evt.target;
node.setAttribute("contenteditable", "true");
}
function updateDgText() {
var newContent = document.getElementById("dg_text").value
actualDraggable.innerHTML = newContent
//update instances
$("#qArea [data-id='" + actualDraggable.getAttribute("data-id") + "']").html(newContent)
unifyDraggables()
getInputMaxLength();
}
function updateDgWidth() {
actualDraggable.width = $("#dg_width").spinner( "value" );
var ow = parseFloat(actualDraggable.getAttribute("data-orig-width"));
var oh = parseFloat(actualDraggable.getAttribute("data-orig-height"));
actualDraggable.height = Math.round(oh*parseFloat(actualDraggable.width)/ow)
$("#dg_height").spinner( "value", actualDraggable.height )
unifyDraggables()
}
function updateDgHeight() {
actualDraggable.height = $("#dg_height").spinner( "value" );
var ow = parseFloat(actualDraggable.getAttribute("data-orig-width"));
var oh = parseFloat(actualDraggable.getAttribute("data-orig-height"));
actualDraggable.width = Math.round(ow*parseFloat(actualDraggable.height)/oh)
$("#dg_width").spinner( "value", actualDraggable.width )
unifyDraggables()
}
//sjednoceni rozmeru dropareas
function unifyDraggables() {
var drags = $(".draggable, .droparea span")
droparea.width = 0; //droparea.height = 0;
for (var i = 0; i < drags.length; i++) {
droparea.width = Math.max( droparea.width, $(drags[i]).width() )
droparea.height = Math.max( droparea.height, $(drags[i]).height() )
}
var das = document.querySelectorAll(".droparea");
for (var i = 0; i < das.length; i++) {
var da = das[i];
da.style.width = (droparea.width + 5) + "px";
//da.style.height = droparea.height + "px";
da.style.lineHeight = (droparea.height-2) + "px";
updateConnectorsOfDesc(da);
}
// $(".droparea").css( { "width": droparea.width + "px", "height": droparea.height + "px", "line-height": (droparea.height-2) + "px"} )
}
function getInputMaxLength() {
var maxLength = 0;
var maxChars = 0;
var tisT = document.querySelectorAll(".testitem.t .option");
for (var i = 0; i < tisT.length; i++) {
maxLength = Math.max(maxLength, $(tisT[i]).width());
maxChars = Math.max(maxChars, tisT[i].innerHTML.length);
}
tisT = document.querySelectorAll(".droparea span");
for (var i = 0; i < tisT.length; i++) {
maxLength = Math.max(maxLength, $(tisT[i]).width());
maxChars = Math.max(maxChars, tisT[i].innerHTML.length)
}
maxLength += 10
textMaxLength = maxLength;
textMaxChars = maxChars;
}
/**** konektory - pridavani, mazani, upravy *****/
function addConnectorAt(evt) {
var img = document.getElementById("img_placeholder").getBoundingClientRect()
var cx = evt.clientX - img.left
var cy = evt.clientY - img.top
if (evt.ctrlKey == 1) addConnector(cx, cy)
if (evt.shiftKey) {
//addDraggableText("p", cx, cy)
insertPoint.x = cx;
insertPoint.y = cy;
$('#dialog-addText').dialog('open');
}
}
function addConnector(cx, cy, node) {
if (node == undefined) {
node = actualDraggable;
}
if (!node) return;
var did = node.getAttribute("data-id");
var box = node.getBoundingClientRect();
var da = node;
var x1 = da.style.left;
x1 = parseFloat(x1.substring(0, x1.indexOf("px")));
var y1 = da.style.top;
y1 = parseFloat(y1.substring(0, y1.indexOf("px")));
var svg = document.getElementById("connectors")
var connector = svg.appendChild(document.createElementNS(svgNS, "line"))
connector.setAttribute("x1", x1 + box.width / 2);
connector.setAttribute("y1", y1 + box.height / 2);
var x2 = (cx != undefined && !isNaN(cx)) ? cx : x1 + box.width / 2
var y2 = (cy != undefined && !isNaN(cy)) ? cy : y1 + 100
connector.setAttribute("x2", x2);
connector.setAttribute("y2", y2);
var style = "stroke-width: " + connectors.width + "; stroke: " + connectors.color + "; stroke-linecap: round";
connector.setAttribute("style", style);
connector.setAttribute("data-ref", did);
connector.setAttribute("data-end", did + "_" + ++connectorCount);
connector.onclick = deleteConByClick
var end = document.createElement("span");
end.innerHTML = " ";
end.setAttribute("data-endof", did + "_" + connectorCount);
end.style.position = "absolute"
end.className = "connector-end"
end.style.top = "" + (y2 - 8) + "px"
end.style.left = "" + (x2 - 8) + "px"
end.onmouseover = showContextHelp;
document.getElementById("img_placeholder").appendChild(end)
$(end).draggable({
start: initConnectorEnd,
drag: updateConnectorEnd,
stop: stopConnectorEnd
})
end.addEventListener("click", deleteConByClick);
}
function deleteConnector(index) {
}
function deleteConByClick(evt) {
if (!evt.altKey) return;
var cil = evt.target;
var end = null,
line = null;
if (cil.nodeName == "SPAN") {
end = cil;
line = document.querySelector("[data-end=" + cil.getAttribute("data-endof") + "]")
}
if (cil.nodeName == "line") {
end = document.querySelector("[data-endof=" + cil.getAttribute("data-end") + "]")
line = cil;
}
if (!end || !line) return
end.parentNode.removeChild(end);
line.parentNode.removeChild(line);
}
function initConnectorEnd(evt, ui) {
// alert(ui.helper.attr("data-ref"))
}
function stopConnectorEnd(evt, ui) {
}
function updateConnectors(evt, ui) {
var did = actualDraggable.getAttribute("data-id");
var box = actualDraggable.getBoundingClientRect();
var da = actualDraggable;
var x1 = da.style.left;
x1 = parseFloat(x1.substring(0, x1.indexOf("px")));
var y1 = da.style.top;
y1 = parseFloat(y1.substring(0, y1.indexOf("px")));
$("line[data-ref=" + did + "]").attr("x1", x1 + box.width / 2).attr("y1", y1 + box.height / 2)
}
function updateConnectorsOfDesc(desc) {
var did = desc.getAttribute("data-id");
var box = desc.getBoundingClientRect();
var x1 = desc.style.left;
x1 = parseFloat(x1.substring(0, x1.indexOf("px")));
var y1 = desc.style.top;
y1 = parseFloat(y1.substring(0, y1.indexOf("px")));
$("line[data-ref=" + did + "]").attr("x1", x1 + box.width / 2).attr("y1", y1 + box.height / 2)
}
function updateConnectorEnd(evt, ui) {
var line = $("line[data-end=" + ui.helper.attr("data-endof") + "]")
line.attr("x2", "" + (ui.position.left + 8) + "px").attr("y2", "" + (ui.position.top + 8) + "px")
}
//nastaveni barvy spojnic
function setConnectorWidth(width) {
var lines = document.querySelectorAll("#connectors line");
connectors.width = width;
for (var i = 0; i < lines.length; i++) {
lines[i].style.strokeWidth = width;
}
}
//nastaveni tloustky spojnic
function setConnectorColor(color) {
var lines = document.querySelectorAll("#connectors line");
connectors.color = color;
for (var i = 0; i < lines.length; i++) {
lines[i].style.stroke = color;
}
}
function createTestItem() {
var qItems = ""
var range = window.getSelection().getRangeAt(0)
var novy = document.createElement("SPAN")
novy.setAttribute("class", "droparea");
range.surroundContents(novy);
checkItems()
}
function checkItems() {
var base = document.getElementById("dragbase");
base.innerHTML = ""
var items = document.getElementById("qArea").querySelectorAll(".droparea");
for (var i = 0; i < items.length; i++) {
var item = document.createElement("SPAN");
item.setAttribute("class", "testitem");
item.setAttribute("draggable", "true");
item.innerHTML = items[i].innerHTML;
base.appendChild(item)
}
initDrag()
checkLatex(document.getElementById("qArea"))
}
function clearFormat() {
document.execCommand("removeFormat", false, null)
checkItems()
}
function setQuestionType(typ) {
document.getElementById("dragbase").style.display = (typ == "dad") ? "block" : "none"
}
function showPreview() {
var qType = document.getElementById("question_type").value;
var q = document.createElement("div");
var trida = ""
if (qType == "dad") {
trida = " dad_move_sc"
}
q.setAttribute("class", "question" + trida)
var qTitle = document.createElement("div");
qTitle.setAttribute("class", "title")
var task = document.createElement("div");
task.setAttribute("class", "task")
var dragbase = document.createElement("div");
dragbase.setAttribute("class", "dragbase")
var content = document.createElement("div");
content.setAttribute("class", "content")
q.appendChild(qTitle)
q.appendChild(task)
if (qType == "dad") q.appendChild(dragbase)
q.appendChild(content)
qTitle.innerHTML = document.getElementById("edit_title").innerHTML
task.innerHTML = document.getElementById("edit_task").innerHTML
content.innerHTML = document.getElementById("qArea").innerHTML
var sc = document.getElementById("shower-content")
sc.innerHTML = ""
sc.appendChild(q)
var items = sc.querySelectorAll(".droparea");
var maxLength = 0;
for (var i = 0; i < items.length; i++) {
maxLength = Math.max(maxLength, items[i].innerHTML.length)
}
for (var i = 0; i < items.length; i++) {
if (qType == "dad") {
var vals = items[i].innerHTML.split("
")
for (var j = 0; j < vals.length; j++) {
if (vals[j] == "") continue;
var item = document.createElement("SPAN");
item.setAttribute("class", "draggable");
item.setAttribute("draggable", "true");
item.innerHTML = vals[j];
dragbase.appendChild(item)
}
items[i].className = "droparea_move_sc"
var tk = 0.5 //0.5
items[i].setAttribute("style", "width: " + (maxLength * tk) + "em")
} else items[i].className = "droparea_move_sc"
items[i].innerHTML = ""
var field = document.createElement("input");
field.setAttribute("type", "text")
field.setAttribute("style", "width: " + (maxLength * tk) + "em")
items[i].appendChild(field)
//EventHelpers.addEvent(items[i], 'dragover', dragOverMoveSCEvent);
//EventHelpers.addEvent(items[i], 'drop', dropMoveSCEvent);
}
if (qType == "dad") initDrag()
document.getElementById("shower").style.left = "700px"
}
function showCode() {
/* pocet_a = 0;
pocet_b = 0;
pocet_c = 0;
pocet_l = 0;
pocet_m = 0;
pocet_n = 0;
pocet_r = 0;
pocet_t = 0;
pocet_v = 0;
*/
var qType = document.getElementById("question_type").value;
var pocet_t = 0;
var area = document.createElement("textarea");
area.setAttribute("rows", "10")
area.setAttribute("cols", "70")
var vystup = "\n"
vystup += "