You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
284 lines
12 KiB
JavaScript
284 lines
12 KiB
JavaScript
$(document).ready(function () {
|
|
//在字段元素上按下鼠标时
|
|
$("body").delegate(".component", "mousedown", function (md) {
|
|
md.preventDefault();
|
|
$(".popover").remove();
|
|
var tops = [];
|
|
var mouseX = md.pageX;
|
|
var mouseY = md.pageY;
|
|
var $temp;
|
|
var timeout;
|
|
var $this = $(this);
|
|
var delays = {main: 0, form: 120}
|
|
var type;
|
|
//判断是否是左边的字段列表
|
|
if ($this.parent().attr("id") === "components") {
|
|
type = "main";
|
|
} else {
|
|
type = "form";
|
|
}
|
|
|
|
var delayed = setTimeout(function () {
|
|
if (type === "main") {
|
|
var form_html = $this.attr('data-content');
|
|
$temp = $("<form class='form-horizontal col-sm-24' id='temp'></form>").append(form_html);
|
|
} else {
|
|
if ($this.attr("id") !== "legend") {
|
|
$temp = $("<form class='form-horizontal col-sm-24' id='temp'></form>").append($this);
|
|
}
|
|
}
|
|
$("body").append($temp);
|
|
$temp.css({"position": "absolute",
|
|
"top": mouseY - ($temp.height() / 2) + "px",
|
|
"left": mouseX - ($temp.width() / 2) + "px",
|
|
"opacity": "0.9"}).show()
|
|
|
|
var half_box_height = ($temp.height() / 2);
|
|
var half_box_width = ($temp.width() / 2);
|
|
|
|
//右侧表单容器
|
|
var $target = $("#target");
|
|
var tar_pos = $target.offset();
|
|
var $target_component = $("#target .component");
|
|
|
|
//拖动表单的时候的样式
|
|
$(document).delegate("body", "mousemove", function (mm) {
|
|
var mm_mouseX = mm.pageX;
|
|
var mm_mouseY = mm.pageY;
|
|
$temp.css({"top": mm_mouseY - half_box_height + "px", "left": mm_mouseX - half_box_width + "px"});
|
|
//进入到右侧表单容器时的容器的样式变化，同时判断要插入到哪个位置
|
|
if (mm_mouseX > tar_pos.left &&
|
|
mm_mouseX < tar_pos.left + $target.width() &&
|
|
mm_mouseY > tar_pos.top &&
|
|
mm_mouseY < tar_pos.top + $target.height() + $temp.height() / 2
|
|
) {
|
|
$("#target").css("background-color", "#fafdff");
|
|
$target_component.css({"border-top": "1px solid white", "border-bottom": "none"});
|
|
tops = $.grep($target_component, function (e) {
|
|
return ($(e).offset().top - mm_mouseY + half_box_height > 0 && $(e).attr("id") !== "legend");
|
|
});
|
|
if (tops.length > 0) {
|
|
$(tops[0]).css("border-top", "1px solid #22aaff");
|
|
} else {
|
|
if ($target_component.length > 0) {
|
|
$($target_component[$target_component.length - 1]).css("border-bottom", "1px solid #22aaff");
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
$("#target").css("background-color", "#fff");
|
|
$target_component.css({"border-top": "1px solid white", "border-bottom": "none"});
|
|
$target.css("background-color", "#fff");
|
|
}
|
|
});
|
|
|
|
$("body").delegate("#temp", "mouseup", function (mu) {
|
|
mu.preventDefault();
|
|
var mu_mouseX = mu.pageX;
|
|
var mu_mouseY = mu.pageY;
|
|
var tar_pos = $target.offset();
|
|
|
|
$("#target .component").css({"border-top": "1px solid white", "border-bottom": "none"});
|
|
|
|
// 进入到右边表单区域的话添加一个字段
|
|
if (mu_mouseX > tar_pos.left &&
|
|
mu_mouseX < tar_pos.left + $target.width() &&
|
|
mu_mouseY + half_box_height > tar_pos.top &&
|
|
mu_mouseY - half_box_height < tar_pos.top + $target.height()
|
|
) {
|
|
$temp.attr("style", null);
|
|
// where to add
|
|
if (tops.length > 0) {
|
|
$($temp.html()).insertBefore(tops[0]);
|
|
} else {
|
|
$("#target fieldset").append($temp.append("\n\n\ \ \ \ ").html());
|
|
}
|
|
} else {
|
|
// no add
|
|
$("#target .component").css({"border-top": "1px solid white", "border-bottom": "none"});
|
|
tops = [];
|
|
}
|
|
|
|
//clean up
|
|
$target.css("background-color", "#fff");
|
|
$(document).undelegate("body", "mousemove");
|
|
$("body").undelegate("#temp", "mouseup");
|
|
$temp.remove();
|
|
|
|
});
|
|
}, delays[type]);
|
|
|
|
$(document).mouseup(function () {
|
|
clearInterval(delayed);
|
|
hover_set();
|
|
//return false;
|
|
});
|
|
$(this).mouseout(function () {
|
|
clearInterval(delayed);
|
|
hover_set();
|
|
//return false;
|
|
});
|
|
});
|
|
//打开字段属性编辑窗口
|
|
$("#target").on('click', ".component .glyphicon-cog", function (event) {
|
|
$("#target").find('.component').removeClass('active');
|
|
var $component = $(this).parents('.component');
|
|
$component.addClass('active');
|
|
|
|
//初始化字段标签名称
|
|
var filed_label = $component.find(".filed_label_name").text();
|
|
filed_label = filed_label.replace('*', '');
|
|
$('#filed_label').val(filed_label);
|
|
|
|
//初始化必填选项
|
|
if ($component.find(".filed_label_name>span").length > 0) {
|
|
$("#filed_need").attr('checked', 'checked');
|
|
} else {
|
|
$("#filed_need").attr('checked', false);
|
|
}
|
|
|
|
//初始化帮助选项
|
|
if ($component.find(".help_span_box").html() == '') {
|
|
$("#filed_help_text").val('');
|
|
$("#filed_help_link").val('');
|
|
$("#filed_help").attr('checked', false);
|
|
$(".help_container").hide();
|
|
} else {
|
|
$help_child = $component.find(".help_span_box").children();
|
|
$("#filed_help_text").val($help_child.attr('title'));
|
|
if ($help_child.attr('href')) {
|
|
$("#filed_help_link").val($help_child.attr('href'));
|
|
}
|
|
$("#filed_help").attr('checked', 'checked');
|
|
$(".help_container").show();
|
|
}
|
|
|
|
//按钮的话，不用展示“其他”选项
|
|
$(".radio_kuang").hide();
|
|
$(".form_filed_dialog").css({"display": "block", "opacity": "1"});
|
|
if ($component.attr('data-filed_type') == "button") {
|
|
$(".filed_other_option").hide();
|
|
$("#filed_label").val($component.find("button").text());
|
|
} else if ($component.attr('data-filed_type') == "d_radio") {
|
|
$(".radio_kuang").show();
|
|
var radio_html = '';
|
|
$component.find("input:radio").each(function () {
|
|
radio_html += $(this).val() + '\r\n';
|
|
});
|
|
$(".radio_list_key").val(radio_html);
|
|
} else if ($component.attr('data-filed_type') == "d_checkbox") {
|
|
$(".radio_kuang").show();
|
|
var radio_html = '';
|
|
$component.find("input:checkbox").each(function () {
|
|
radio_html += $(this).val() + '\r\n';
|
|
});
|
|
$(".radio_list_key").val(radio_html);
|
|
} else if ($component.attr('data-filed_type') == "d_select") {
|
|
$(".radio_kuang").show();
|
|
var radio_html = '';
|
|
$component.find(".select_lists>option").each(function () {
|
|
radio_html += $(this).text() + '\r\n';
|
|
});
|
|
$(".radio_list_key").val(radio_html);
|
|
}
|
|
else {
|
|
$(".filed_other_option").show();
|
|
}
|
|
});
|
|
//关闭字段属性编辑窗口
|
|
$("body").on('click', ".close_form_option", function (event) {
|
|
$(".form_filed_dialog").css({"display": "none", "opacity": "0"});
|
|
$("#target").find('.component').removeClass('active');
|
|
});
|
|
|
|
//删除选中的字段
|
|
$("#target").on('click', ".component .glyphicon-trash", function (event) {
|
|
$(this).parents('.component').remove();
|
|
});
|
|
|
|
//表单设置
|
|
$(".btn_set_filed_options").on('click', function () {
|
|
var $component = $("#target").find('.component.active');
|
|
var filed_label = $('#filed_label').val();
|
|
if ($component.attr('data-filed_type') == "button") {
|
|
$component.find("button").text(filed_label);
|
|
} else {
|
|
$component.find(".filed_label_name").text(filed_label);
|
|
if ($("#filed_need").attr('checked')) {
|
|
$component.find(".filed_label_name").append('<span class="text-danger">*</span>');
|
|
}
|
|
;
|
|
if ($("#filed_help").attr('checked')) {
|
|
var title = $("#filed_help_text").val();
|
|
var href = $("#filed_help_link").val();
|
|
href == '' && $component.find(".help_span_box").html('<span title="' + title + '" class="glyphicon glyphicon-question-sign"></span>');
|
|
href != '' && $component.find(".help_span_box").html('<a target="_blank" href="' + href + '" title="' + title + '" class="glyphicon glyphicon-question-sign"></a>');
|
|
} else {
|
|
$component.find(".help_span_box").html('');
|
|
}
|
|
|
|
if ($component.attr('data-filed_type') == "d_radio") {
|
|
var radio_list_key = $(".radio_list_key").val();
|
|
var radio_arr = radio_list_key.split('\n');
|
|
var radio_html = '';
|
|
var radio_name = filed_label.replace(' ', '_');
|
|
for (var i = 0; i < radio_arr.length; i++) {
|
|
if (radio_arr[i] != '')
|
|
radio_html += '<label class="radio-inline"><input type="radio" name="' + radio_name + '" value="' + radio_arr[i] + '">' + radio_arr[i] + '</label>';
|
|
}
|
|
;
|
|
var $radio_lists = $component.find('.radio_lists');
|
|
$radio_lists.html(radio_html);
|
|
}
|
|
|
|
if ($component.attr('data-filed_type') == "d_checkbox") {
|
|
var radio_list_key = $(".radio_list_key").val();
|
|
var radio_arr = radio_list_key.split('\n');
|
|
var radio_html = '';
|
|
var radio_name = filed_label.replace(' ', '_');
|
|
for (var i = 0; i < radio_arr.length; i++) {
|
|
if (radio_arr[i] != '')
|
|
radio_html += '<label class="checkbox-inline"><input type="checkbox" name="' + radio_name + '[]" value="' + radio_arr[i] + '">' + radio_arr[i] + '</label>';
|
|
}
|
|
;
|
|
var $checkbox_lists = $component.find('.checkbox_lists');
|
|
$checkbox_lists.html(radio_html);
|
|
}
|
|
if ($component.attr('data-filed_type') == "d_select") {
|
|
var radio_list_key = $(".radio_list_key").val();
|
|
var radio_arr = radio_list_key.split('\n');
|
|
var radio_html = '';
|
|
var radio_name = filed_label.replace(' ', '_');
|
|
for (var i = 0; i < radio_arr.length; i++) {
|
|
if (radio_arr[i] != '')
|
|
radio_html += '<option value="' + radio_arr[i] + '">' + radio_arr[i] + '</option>';
|
|
}
|
|
;
|
|
var $select_lists = $component.find('.select_lists');
|
|
$select_lists.html(radio_html);
|
|
$select_lists.attr('name', radio_name);
|
|
}
|
|
}
|
|
|
|
$(".form_filed_dialog").css({"display": "none", "opacity": "0"});
|
|
});
|
|
|
|
$("body").on("click", "#guide_backup_toggle", function () {
|
|
$("#guide_backup").show();
|
|
}).on("click", "#guide_backup_hide", function () {
|
|
$("#guide_backup").hide();
|
|
});
|
|
|
|
});
|
|
|
|
hover_set();
|
|
function hover_set() {
|
|
$("#target").on('hover', ".component", function (event) {
|
|
event.preventDefault();
|
|
$(this).find(".set_form_btn").removeClass("hidden");
|
|
}).on('mouseleave', '.component', function (event) {
|
|
event.preventDefault();
|
|
$(this).find(".set_form_btn").addClass("hidden");
|
|
});
|
|
}
|