135 lines
4.4 KiB
JavaScript
135 lines
4.4 KiB
JavaScript
$(document).ready(function() {
|
||
setup_draggable();
|
||
|
||
$("#n-columns").on("change", function() {
|
||
var v = $(this).val();
|
||
if(v==="1") {
|
||
var $col = $('.form-body .col-md-12').toggle(true);
|
||
$('.form-body .col-md-6 .draggable').each(function(i, el) {
|
||
$(this).remove().appendTo($col);
|
||
})
|
||
$('.form-body .col-md-6').toggle(false);
|
||
} else {
|
||
var $col = $('.form-body .col-md-6').toggle(true);
|
||
$(".form-body .col-md-12 .draggable").each(function(i, el) {
|
||
$(this).remove().appendTo(i % 2 ? $col[1] : $col[0]);
|
||
});
|
||
$('.form-body .col-md-12').toggle(false);
|
||
}
|
||
});
|
||
|
||
$("#copy-to-clipboard").on("click", function() {
|
||
var $copy = $(".form-body").parent().clone().appendTo(document.body);
|
||
$copy.find(".tools, :hidden").remove();
|
||
$.each(["draggable", "droppable", "sortable", "dropped",
|
||
"ui-sortable", "ui-draggable", "ui-droppable", "form-body"], function(i, c) {
|
||
$copy.find("." + c).removeClass(c);
|
||
})
|
||
var html = html_beautify($copy.html());
|
||
$copy.remove();
|
||
|
||
$modal = get_modal(html).modal("show");
|
||
$modal.find(".btn").remove();
|
||
$modal.find(".modal-title").html("Copy HTML");
|
||
$modal.find(":input:first").select().focus();
|
||
|
||
return false;
|
||
})
|
||
|
||
|
||
});
|
||
|
||
var setup_draggable = function() {
|
||
$( ".draggable" ).draggable({
|
||
appendTo: "body",
|
||
helper: "clone"
|
||
});
|
||
$( ".droppable" ).droppable({
|
||
accept: ".draggable",
|
||
helper: "clone",
|
||
hoverClass: "droppable-active",
|
||
drop: function( event, ui ) {
|
||
$(".empty-form").remove();
|
||
var $orig = $(ui.draggable)
|
||
if(!$(ui.draggable).hasClass("dropped")) {
|
||
var $el = $orig
|
||
.clone()
|
||
.addClass("dropped")
|
||
.css({"position": "static", "left": null, "right": null})
|
||
.appendTo(this);
|
||
|
||
// update id
|
||
var id = $orig.find(":input").attr("id");
|
||
|
||
if(id) {
|
||
id = id.split("-").slice(0,-1).join("-") + "-"
|
||
+ (parseInt(id.split("-").slice(-1)[0]) + 1)
|
||
|
||
$orig.find(":input").attr("id", id);
|
||
$orig.find("label").attr("for", id);
|
||
}
|
||
|
||
// tools
|
||
$('<p class="tools">\
|
||
<a class="edit-link">Edit HTML<a> | \
|
||
<a class="remove-link">Remove</a></p>').appendTo($el);
|
||
} else {
|
||
if($(this)[0]!=$orig.parent()[0]) {
|
||
var $el = $orig
|
||
.clone()
|
||
.css({"position": "static", "left": null, "right": null})
|
||
.appendTo(this);
|
||
$orig.remove();
|
||
}
|
||
}
|
||
}
|
||
}).sortable();
|
||
|
||
}
|
||
|
||
var get_modal = function(content) {
|
||
var modal = $('<div class="modal" style="overflow: auto;" tabindex="-1">\
|
||
<div class="modal-dialog">\
|
||
<div class="modal-content">\
|
||
<div class="modal-header">\
|
||
<h4 class="modal-title">Edit HTML</h4>\
|
||
<button type="button" class="close" data-bs-dismiss="modal">×</button>\
|
||
</div>\
|
||
<div class="modal-body ui-front">\
|
||
<textarea class="form-control btn-square" \
|
||
style="min-height: 200px; margin-bottom: 10px;\
|
||
font-family: Monaco, Fixed">'+content+'</textarea>\
|
||
<button class="btn btn-theme btn-square">Update</button>\
|
||
</div>\
|
||
</div>\
|
||
</div>\
|
||
</div>').appendTo(document.body);
|
||
|
||
return modal;
|
||
};
|
||
|
||
$(document).on("click", ".edit-link", function(ev) {
|
||
var $el = $(this).parent().parent();
|
||
var $el_copy = $el.clone();
|
||
|
||
var $edit_btn = $el_copy.find(".edit-link").parent().remove();
|
||
|
||
var $modal = get_modal(html_beautify($el_copy.html())).modal("show");
|
||
$modal.find(":input:first").focus();
|
||
$modal.find(".btn-theme").click(function(ev2) {
|
||
var html = $modal.find("textarea").val();
|
||
if(!html) {
|
||
$el.remove();
|
||
} else {
|
||
$el.html(html);
|
||
$edit_btn.appendTo($el);
|
||
}
|
||
$modal.modal("hide");
|
||
return false;
|
||
})
|
||
});
|
||
|
||
$(document).on("click", ".remove-link", function(ev) {
|
||
$(this).parent().parent().remove();
|
||
});
|