var storage = []; //{col:1, row:1, colamount:1, rowamount: 1}];
function doOverlap(l1x, l1y, r1x, r1y, l2x, l2y, r2x, r2y)
{
// If one rectangle is on left side of other
if (l1x > r2x || l2x > r1x)
return false;
// If one rectangle is above other
if (l1y > r2y || l2y > r1y)
return false;
return true;
}
/*
function clearRectangel(l1x, l1y, r1x, r1y){
for(var i = l1x; i <= r1x; ++i)
for(var k = l1y; k <= r1y; ++k){
$(".item" + (i) + "-" + (k)).remove();
//$(".item" + (i) + "-" + (k)).css({"display": "block", "border-style": "none", "border-color": "black", "grid-area": "auto"});
//$(".item" + (i) + "-" + (k)).text("");
}
}
function hideRectangel(l1x, l1y, r1x, r1y){
for(var i = l1x; i <= r1x; ++i)
for(var k = l1y; k <= r1y; ++k)
if(!(i == l1x && k == l1y))
$(".item" + (i) + "-" + (k)).hide(100);
}
*/
function makeFrame(lx, ly, rx, ry, content = "", id = "", showbutton=false) {
//check if rects overlap if they do remove old ones
for (i = 0; i < window.storage.length; i++) {
if(doOverlap(window.storage[i].lx, window.storage[i].ly, window.storage[i].rx, window.storage[i].ry, lx, ly, rx, ry)){
$(".item" + window.storage[i].lx + "-" + window.storage[i].ly).remove();
//clearRectangel(window.storage[i].lx, window.storage[i].ly, window.storage[i].rx, window.storage[i].ry)
window.storage.splice(i,1);
--i;
}
}
//add new ellement to storage
window.storage.push({lx:lx, ly:ly, rx:rx, ry: ry})
const container = document.getElementById("container");
let cell = document.createElement("div");
cell.classList.add("grid-item");
cell.classList.add("item" + lx + "-" + ly);
spancol= ""
if(rx-lx+1 > 1){
spancol = " / span " + (rx-lx+1);
}
spanrow= ""
if(ry-ly+1 > 1){
spanrow = " / span " + (ry-ly+1);
}
jQuery.cssNumber.gridColumnStart = true;
jQuery.cssNumber.gridColumnEnd = true;
jQuery.cssNumber.gridRowStart = true;
jQuery.cssNumber.gridRowEnd = true;
$(cell).css({"display": "block", "border-style": "solid", "border-color": "blue", "grid-column": (lx+1) + spancol, "grid-row": ly+1 + spanrow});
console.log({"display": "block", "border-style": "solid", "border-color": "blue", "grid-column-start": (lx+1), "grid-column-end": (rx+1), "grid-row-start": ly+1, "grid-row-end": ry+1})
container.appendChild(cell);
//Create new element with width, heigth and content
//$(".item" + lx + "-" + ly).css({"display": "block", "border-style": "solid", "border-color": "blue", "grid-column": (lx+1) + " / span " + (rx-lx+1), "grid-row": ly+1 + " / span " + (ry-ly+1)});
if(content != null && content != ""){
$(".item" + lx + "-" + ly).html("");
if(showbutton && content.startsWith("https://centurio.work/out/forms")){
$(".item" + lx + "-" + ly).append('')
}
//hideRectangel(lx, ly, rx, ry)
}
else{
$(".item" + lx + "-" + ly).html("No language available.
Nicht in der Sprache verfügbar.");
//hideRectangel(lx, ly, rx, ry)
}
};
function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
function sendForm(menuitem, cpeecallback,lx,ly){
/* old can be used when formi js is active */
$.ajax({
type: "PUT",
url: decodeURIComponent(cpeecallback),
contentType: "application/json",
data: $('iframe[name="' + decodeURIComponent(cpeecallback) + '"]').contents().find("#submission").html(),
success: function (data) {
//close form
$(menuitem).remove();
}
});
//get Iframe then data
/* without formio JS
var $form = $('iframe[name="' + decodeURIComponent(cpeecallback) + '"]').contents().find("#form");
var formdatajson = getFormData($form);
alert(JSON.stringify(formdatajson))
$.ajax({
type: "PUT",
url: decodeURIComponent(cpeecallback),
contentType: "application/json",
data: JSON.stringify(formdatajson),
success: function (data) {
//close form
$(menuitem).remove();
}
});
*/
//remove from Server
$.ajax({
type: "Post",
url: "",
headers: {"content-id": "deleteframe"},
data: {lx: lx, ly: ly},
success: function (data) {
}
});
}
/*
document.addEventListener('keyup', (event) => {
if (event.key == 'ArrowUp') {
alert("ArrowUp");
makeFrame(0,0,0,0, "a")
}
if (event.key == 'ArrowDown') {
alert("ArrowDown");
makeFrame(0,0,1,1, "b")
}
if (event.key == 'ArrowLeft') {
alert("ArrowLeft");
makeFrame(1,1,2,2, "c")
}
if (event.key == 'ArrowRight') {
alert(JSON.stringify(window.storage));
}
});
*/