definicao de layout

2026-02-06 14:37:54 +00:00
parent 872a5bb3ea
commit a4f80c85c2
2686 changed files with 640668 additions and 294 deletions
--- a/public/assets/js/form-builder/form-builder-2/form-builder-2.js
+++ b/public/assets/js/form-builder/form-builder-2/form-builder-2.js
@@ -0,0 +1,134 @@
+$(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();
+});