var dragged = null; var droparea = { width: 0, height: 0 }; var draggable_count = 0; var bgImage = { src: "", width: "", height: ""}; function initApplication() { $(".sidebar").draggable() $("#shower").draggable() var isInDroparea = false; var drags = document.querySelectorAll("#dragbase .draggable") for (var i = 0; i < drags.length; i++) { drags[i].ondragstart = dragStartEvent; drags[i].ondragend = dragEndEvent; } $("#dg_width").spinner({ min: 10, step: 1, page: 5, change: updateDgWidth, spin: updateDgWidth }) $("#dg_height").spinner({ min: 10, step: 1, page: 5, change: updateDgHeight, spin: updateDgHeight }) $("#dialog-addImage").dialog({ autoOpen: false, height: 200, width: 450, modal: true, resizable: false, buttons: { "Přidat obrázek": function () { var bValid = true; $("#new_img_url").removeClass("ui-state-error"); var obr = $("#new_img_url").attr("value") if (obr != "") { addDraggable(obr) } $(this).dialog("close"); }, "Zrušit": function () { $(this).dialog("close"); } }, close: function () { $("#new_img_url").val("").removeClass("ui-state-error"); } }); $("#dialog-addText").dialog({ autoOpen: false, height: 200, width: 450, modal: true, resizable: false, buttons: { "Přidat text": 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-addVideo").dialog({ autoOpen: false, height: 250, width: 450, modal: true, resizable: false, buttons: { "Vložit video": function () { var bValid = true; $("#new_video_url").removeClass("ui-state-error"); var video = $("#new_video_url").attr("value") if (video != "") { insertVideo(video) } $(this).dialog("close"); }, "Zrušit": function () { $(this).dialog("close"); } }, close: function () { $("#new_video_url").val("").removeClass("ui-state-error"); } }); $("#dialog-addAudio").dialog({ autoOpen: false, height: 250, width: 450, modal: true, resizable: false, buttons: { "Vložit audio": function () { var bValid = true; $("#new_audio_url").removeClass("ui-state-error"); var audio = $("#new_audio_url").attr("value") if (audio != "") { insertAudio(audio) } $(this).dialog("close"); }, "Zrušit": function () { $(this).dialog("close"); } }, close: function () { $("#new_audio_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(); }); $("#testitem_content").draggable() var tiContent = document.getElementById("testitem_content"); tiContent.style.left = "900px"; tiContent.style.top = "450px"; tiContent.style.display = "none"; $("#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() //if (ui.newTab) // }); setMode('gap_input'); document.getElementById("code_auth").checked = true; document.getElementById("mainmode_input").checked = true; resetAll(); CKEDITOR.inline( 'edit_title', configEditSimple ); CKEDITOR.inline( 'edit_task', configEditSimple ); report(" "); } var coords = { x: 0, y: 0} function getCoords(evt) { var rect = evt.target.getBoundingClientRect(); var mouseX = Math.round(evt.clientX - rect.left); var mouseY = Math.round(evt.clientY - rect.top); coords = { x: mouseX, y: mouseY } } 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 = function () { selectItem(this) } 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; if (!isInDroparea) { dragged = null; } else { //var coords = getCoords(e); report("drop pokus na " + coords.x + ", " + coords.y) dragged = null; } EventHelpers.preventDefault(e); } function dragLeaveEvent(e) { isInDroparea = false; EventHelpers.preventDefault(e); } function dropEvent(e) { EventHelpers.preventDefault(e); var puvRodic = dragged.parentNode; var rodic = this; 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" } } */ } } var actualDraggable = null; var actualInstance = null; var xOffset = 0; var yOffset = 0; 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($("span", 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 = evt.pageX - $("#qArea").offset().left - ui.helper.width() / 2 //ui.position.left - 0*xOffset var cy = evt.pageY - $("#qArea").offset().top - ui.helper.height() / 2 //ui.position.top - 1*yOffset popis.style.top = (cy) + "px" //Math.round(coords.y - ui.height/2 - 2) + "px" popis.style.left = (cx) + "px" //Math.round(coords.x - ui.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); document.getElementById("qArea").appendChild(popis); $(popis).draggable(); } function addInstanceOf(dadNode, posX, posY) { var novy = dadNode.cloneNode(true) //dragged.cloneNode(true) novy.style.position = "static"; novy.className = "" novy.removeAttribute("draggable") 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 = droparea.height + "px" popis.className = "droparea" popis.appendChild(novy) plocha.appendChild(popis) $(popis).draggable({ start: initDragging, drag: updateConnectors }).click(function () { if ($(this).is('.ui-draggable-dragging')) { // return; } //alert ( this.innerHTML ) getDraggableById(this.firstChild.getAttribute("data-id")) actualInstance = this; }); getInputMaxLength(); } function addDraggableText(txt, posX, posY) { draggable_count++; var novy = document.createElement("span"); novy.innerHTML= txt; novy.setAttribute("draggable", "true"); novy.setAttribute("data-id", "drag_" + draggable_count); novy.setAttribute("alt", "draggable text"); novy.setAttribute("contenteditable", "true"); novy.className = "draggable"; //novy.ondragstart = dragStartEvent; //novy.ondragend = dragEndEvent; novy.onclick = function () { selectDraggable(this) } //novy.onload = function () {unifyDraggables() } var adder = document.getElementById("add_draggable"); if (adder) { adder.parentNode.insertBefore(novy, adder) } else { document.getElementById("dragbase").appendChild(novy) } $(novy).draggable({ helper: "clone", start: initDragging, stop: stopDragging, drag: updateConnectors } ) // $("#dragbase").append(novy) //alert(novy.width) addInstanceOf(novy, posX, posY); unifyDraggables() } function deleteSelectedDraggable() { if (!actualDraggable) return; var content = actualDraggable; var drops = $(".droparea") for (var i = drops.length - 1; i > -1; i--) { if (drops[i].firstChild.nodeName == content.nodeName && drops[i].firstChild.getAttribute("data-id") == content.getAttribute("data-id")) { drops[i].parentNode.removeChild(drops[i]) } }; actualDraggable.parentNode.removeChild(actualDraggable); actualDraggable = null; unifyDraggables(); document.getElementById("del_draggable").style.display = "none"; document.getElementById("imgSize").style.display = "none"; document.getElementById("textValue").style.display = "none"; } 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).removeClass("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()); } document.getElementById("imgSize").style.display = "none"; document.getElementById("textValue").style.display = "none"; if (actualDraggable.nodeName.toLowerCase() == "img") { document.getElementById("imgSize").style.display = "block"; $("#dg_width").spinner("value", ad.width()); $("#dg_height").spinner("value", ad.height()); } if (actualDraggable.nodeName.toLowerCase() == "span") { document.getElementById("textValue").style.display = "block"; document.getElementById("dg_text").value = actualDraggable.innerHTML; } document.getElementById("del_draggable").style.display = "block" } function updateDgText () { var newContent = document.getElementById("dg_text").value actualDraggable.innerHTML = newContent $("#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() ) } $(".droparea").css( { "width": droparea.width + "px", "height": droparea.height + "px", "line-height": (droparea.height-2) + "px"} ) } 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 checkLatex(uzel) { if (uzel == null) return if (uzel.nextSibling) checkLatex(uzel.nextSibling) if (uzel.nodeType == 1 ) { //for (var i = 0; i < uzel.childNodes.length; i++) { } checkLatex(uzel.firstChild); } if (uzel.nodeType == 3 ) { if (uzel.nodeValue.indexOf("$") == -1) return; var rodic = uzel.parentNode; var kousky = uzel.nodeValue.split("$"); for (var j = 0; j < kousky.length; j++) { //alert(kousky[j]) var novy = null; if (j %2 == 0) { novy = document.createTextNode(kousky[j]) rodic.insertBefore(novy, uzel) } if (j %2 == 1) { novy = document.createElement("IMG"); novy.setAttribute("src", "https://is.muni.cz/auth/system/tex2img?code=" + escape(kousky[j]) ) novy.setAttribute("style", "vertical-align: -4px;") novy.setAttribute("alt", kousky[j]) } rodic.insertBefore(novy, uzel) } rodic.removeChild(uzel) if (novy.nextSibling) checkLatex(novy.nextSibling) } } function insertTable() { var cols = parseInt(document.getElementById("table_cols").value) if (isNaN(cols)) cols = 2 var rows = parseInt(document.getElementById("table_rows").value) if (isNaN(rows)) rows = 2 var type = document.getElementById("table_class").value var trida = (type != "" ) ? "class='" + type + "'" : "" var head = document.getElementById("table_head").checked var vystup = "
<\/th>" vystup += "<\/tr>" } for (var ii = 0; ii < rows; ii++) { vystup += " | ||||
---|---|---|---|---|
<\/td>"
vystup += "<\/tr>"
}
vystup += "<\/table>"
document.execCommand("insertHTML", false, vystup)
}
//alert( escape("x\\in\\{-2,-1,1,2\\}") )
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 item = document.createElement("SPAN");
item.setAttribute("class", "draggable");
item.setAttribute("draggable", "true");
item.innerHTML = items[i].innerHTML;
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 += "\n" +
"" +
"" +
"" +
"\n";
classDAD = " dad_move_sc"
}
if (mainMode =="pic_dad") {
vystup += "\n" +
"" +
"" +
"" +
"\n";
classDAD = " dad_clone"
}
vystup += " \n"
if (qTitle.trim() != "") vystup += " " + qTitle + "<\/div>\n"
if (qTask.trim() != "") vystup += " " + qTask +"<\/div>\n"
if ( mainMode == "gap_dad" || mainMode == "desc_dad" ) {
vystup += " \n";
var spans = q_content.draggables //document.querySelectorAll("#dragbase span")
for (var i = 0; i < spans.length; i++) {
vystup += "" + spans[i] + "\n"
}
vystup += "<\/div>\n"
}
vystup += " \n"
vystup += q_content.ok + "\n";
vystup = vystup.replace(/table\>\s+\\s+\\n";
//audio nebo video v otazce
var figure = document.querySelector("#multimedia_insert figure");
if (figure) {
vystup += "\n \n" + figure.innerHTML + " \n\n"
}
vystup += q_content.content + "\n\s+\ | \s+\<\/tr/g, "td> | ") node.innerHTML = "" } //************************ vkladani a editace multimedii - video, audio *********/ var actMedia = null; var video_widths = [360, 480, 600]; var video_ratios = [1.333, 1.778]; function insertVideo(url, w, h) { var mmedia = document.getElementById("multimedia_insert") var figure = mmedia.querySelector("figure"); if (!figure) figure = mmedia.insertBefore( document.createElement("figure"),mmedia.firstChild); if (w == undefined) w= 480; if (h == undefined) h= 360; if (url == undefined) url = "https://is.muni.cz/do/1499/el/nastroje/gem/media/info-odpovedniky.flv" var ratio = w/h; var source = "unknown"; var video = ""; if (url.indexOf("www.youtube.com/watch?v=") > -1) { //video z YouTube var source = url.substring(url.indexOf("=") +1) video = ""; source = "youtube"; } if (url.indexOf("https://is.muni.cz/auth/video/") == 0) { //video v IS var videoId = url.substring(url.lastIndexOf("/")+1); if (videoId.indexOf("?") > -1) { videoId = videoId.substring(0, videoId.indexOf("?")); } video = "".replace(/\{video_id\}/g, videoId); source = "IS"; w= 480; h = 360; url = videoId; } if (url.indexOf(".video") == url.length -6 ) { //video v IS loadVideoPage(url); return; } actMedia = {type: "video", width: w, height: h, url: url, ratio: ratio, source: source} //16:9 = 1:0.5625 figure.innerHTML = video document.getElementById("vsize").value = 1; document.getElementById("vratio").value = 1.333; document.getElementById("video_url").innerHTML = url; document.getElementById("media_insert").style.display = "none" document.getElementById("video_settings").style.display = "block" document.getElementById("audio_settings").style.display = "none" } function loadVideoPage(url) { var http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/html'); } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert(strProblemXMLHTTP); return false; } http_request.onreadystatechange = function () { parseVideoPage(http_request); }; http_request.open('GET', url, true); http_request.send(); } function parseVideoPage(req) { if (req.readyState == 4) { if (req.status == 200) { var vystup = "" var response = req.responseText //.documentElement; var idPos = response.indexOf("\"id=") + 4 var videoId = response.substring(idPos, response.indexOf("&", idPos)); insertVideo("https://is.muni.cz/auth/video/" + videoId); } else { if (req.getAllResponseHeaders()) { alert(strProblemRequest); } } } } function setVideoSize(index) { var obj = document.getElementById("multimedia_insert").querySelector("object, iframe"); if (!obj || !actMedia || actMedia.type != "video") return; if (actMedia.width == video_widths[index]) return; actMedia.width = video_widths[index]; actMedia.height = Math.round(video_widths[index]/actMedia.ratio) obj.setAttribute("width", actMedia.width); obj.setAttribute("height", actMedia.height); } function setVideoRatio(ratio) { var obj = document.getElementById("multimedia_insert").querySelector("object, iframe"); if (!obj || !actMedia || actMedia.type != "video" ) return; if (typeof ratio == "string") ratio = parseFloat(ratio) if (isNaN(ratio)) return; actMedia.ratio = ratio; actMedia.height = Math.round(actMedia.width/ratio) obj.setAttribute("width", actMedia.width); obj.setAttribute("height", actMedia.height); } function insertAudio(url) { var mmedia = document.getElementById("multimedia_insert") var figure = mmedia.querySelector("figure"); if (!figure) figure = mmedia.insertBefore( document.createElement("figure"),mmedia.firstChild); var w= 300; var h= 70; if (url == undefined) url = "https://is.muni.cz/do/1499/el/nastroje/gem/media/elportal.mp3" figure.innerHTML = ""; actMedia = {type: "audio", url: url} document.getElementById("audio_url").innerHTML = url; document.getElementById("media_insert").style.display = "none" document.getElementById("video_settings").style.display = "none" document.getElementById("audio_settings").style.display = "block" } function deleteMedia() { var mmedia = document.getElementById("multimedia_insert") var figure = mmedia.querySelector("figure"); if (figure) figure.parentNode.removeChild(figure); document.getElementById("media_insert").style.display = "block" document.getElementById("video_settings").style.display = "none" document.getElementById("audio_settings").style.display = "none" } |