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.
108 lines
4.2 KiB
JavaScript
108 lines
4.2 KiB
JavaScript
define([
|
|
"jquery", "mustache", "underscore", "class",
|
|
"views/temp-snippet",
|
|
"text!templates/app/renderform.html"
|
|
], function (
|
|
$, Mustache, _, Class,
|
|
TempSnippetView,
|
|
_renderForm
|
|
) {
|
|
return Class.extend({
|
|
init: function (options) {
|
|
// class name is actually not needed
|
|
this.clsname = "MyFormView";
|
|
|
|
this.collection = options.collection;
|
|
|
|
this.collection.on("add", $.proxy(this.toJson, this));
|
|
this.collection.on("remove", $.proxy(this.toJson, this));
|
|
this.collection.on("change", $.proxy(this.toJson, this));
|
|
|
|
this.collection.on("add", $.proxy(this.render, this));
|
|
this.collection.on("remove", $.proxy(this.render, this));
|
|
this.collection.on("change", $.proxy(this.render, this));
|
|
|
|
this.$el = $("<fieldset/>");
|
|
this.$build = $("#build");
|
|
|
|
this.$el.on("mySnippetDrag", $.proxy(this.handleSnippetDrag, this));
|
|
this.$el.on("tempMove", $.proxy(this.handleTempMove, this));
|
|
this.$el.on("tempDrop", $.proxy(this.handleTempDrop, this));
|
|
|
|
this.renderForm = _.partial(Mustache.to_html, _renderForm);
|
|
this.render();
|
|
},
|
|
render: function () {
|
|
//Render Snippet Views
|
|
this.$el.empty();
|
|
var that = this;
|
|
_.each(this.collection.renderAll(), function (snippet) {
|
|
that.$el.append(snippet); //console.log(snippet.map());
|
|
});
|
|
//console.log(JSON.stringify(this.collection));
|
|
//在这里添加内容，但是元素不响应鼠标事件
|
|
//that.$el.append($('#sssss').html());
|
|
//console.log('1');
|
|
|
|
$("#render").html(that.renderForm({
|
|
text: _.map(this.collection.renderAllClean(), function (e) {
|
|
return e.html()
|
|
}).join("\n")
|
|
}));
|
|
|
|
this.$el.appendTo("#build > form");
|
|
},
|
|
toJson: function () {
|
|
//console.log(JSON.stringify(this.collection));
|
|
//把json更新到一个隐藏属性里面去
|
|
$('#form_structure').val(JSON.stringify(this.collection));
|
|
},
|
|
getBottomAbove: function (eventY) {
|
|
var myFormBits = $(this.$el.find(".component"));
|
|
var topelement = _.find(myFormBits, function (renderedSnippet) {
|
|
if (($(renderedSnippet).offset().top + $(renderedSnippet).height()) > eventY - 90) {
|
|
return true;
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
});
|
|
|
|
if (topelement) {
|
|
return topelement;
|
|
} else {
|
|
return myFormBits[0];
|
|
}
|
|
},
|
|
handleSnippetDrag: function (mySnippetDragEvent, mouseEvent, snippetModel,
|
|
removalOption) {
|
|
var temp_snip = new TempSnippetView({model: snippetModel});
|
|
$("body").append(temp_snip.render());
|
|
this.collection.remove(snippetModel, removalOption);
|
|
temp_snip.$el.trigger("newTempPostRender", mouseEvent);
|
|
},
|
|
handleTempMove: function (tempMoveEvent, mouseEvent, widthOffset) {
|
|
$(".target").removeClass("target");
|
|
if (mouseEvent.pageX >= this.$build.offset().left &&
|
|
mouseEvent.pageX < (this.$build.width() + this.$build.offset().left
|
|
+ widthOffset) &&
|
|
mouseEvent.pageY >= this.$build.offset().top &&
|
|
mouseEvent.pageY < (this.$build.height() + this.$build.offset().top)
|
|
) {
|
|
|
|
$(this.getBottomAbove(mouseEvent.pageY)).addClass("target");
|
|
} else {
|
|
$(".target").removeClass("target");
|
|
}
|
|
},
|
|
handleTempDrop: function (tempDropEvent, mouseEvent, model, widthOffset, index) {
|
|
if ($(".target").length) {
|
|
var index = $(".target").index();
|
|
$(".target").removeClass("target");
|
|
this.collection.add(model, {at: index + 1});
|
|
} else {
|
|
$(".target").removeClass("target");
|
|
}
|
|
}
|
|
})
|
|
}); |