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.
109 lines
3.4 KiB
JavaScript
109 lines
3.4 KiB
JavaScript
define([
|
|
"jquery", "underscore", "class",
|
|
"views/snippet",
|
|
], function(
|
|
$, _, Class,
|
|
SnippetView
|
|
){
|
|
return SnippetView.extend({
|
|
init: function(options){
|
|
this._super(options);
|
|
|
|
// class name is actually not needed;
|
|
this.clsname = "MyFormSnippetView";
|
|
this.parentModel = this.options.parentModel;
|
|
this.options = _.omit(this.options, 'parentModel');
|
|
},
|
|
|
|
events:{
|
|
"click" : "preventPropagation" //stops checkbox / radio reacting.
|
|
, "mousedown" : "mouseDownHandler"
|
|
, "mouseup" : "mouseUpHandler"
|
|
},
|
|
|
|
mouseDownHandler : function(mouseDownEvent){
|
|
mouseDownEvent.stopPropagation();
|
|
mouseDownEvent.preventDefault();
|
|
var that = this;
|
|
//popover
|
|
$(".popover").remove();
|
|
this.$el.popover("show");
|
|
$(".popover #save").on("click", this.saveHandler(that));
|
|
$(".popover #cancel").on("click", this.cancelHandler(that));
|
|
//add drag event for all but form name
|
|
if(this.model.get("title") !== "Form Name"){
|
|
$("body").on("mousemove", function(mouseMoveEvent){
|
|
if(
|
|
Math.abs(mouseDownEvent.pageX - mouseMoveEvent.pageX) > 10 ||
|
|
Math.abs(mouseDownEvent.pageY - mouseMoveEvent.pageY) > 10
|
|
){
|
|
that.$el.popover('destroy');
|
|
$("#build > form > fieldset").trigger("mySnippetDrag", [mouseDownEvent,
|
|
that.model, {at: that.$el.index()}]);
|
|
that.mouseUpHandler();
|
|
};
|
|
});
|
|
}
|
|
},
|
|
|
|
preventPropagation: function(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
},
|
|
|
|
mouseUpHandler : function(mouseUpEvent) {
|
|
$("body").off("mousemove");
|
|
},
|
|
|
|
saveHandler : function(boundContext) {
|
|
return function(mouseEvent) {
|
|
mouseEvent.preventDefault();
|
|
var fields = $(".popover .field");
|
|
_.each(fields, function(e){
|
|
|
|
var $e = $(e),
|
|
type = $e.attr("data-type"),
|
|
name = $e.attr("id");
|
|
|
|
switch(type) {
|
|
case "checkbox":
|
|
boundContext.model.setField(name, $e.is(":checked"));
|
|
break;
|
|
case "input":
|
|
boundContext.model.setField(name, $e.val());
|
|
break;
|
|
case "textarea":
|
|
boundContext.model.setField(name, $e.val());
|
|
break;
|
|
case "textarea-split":
|
|
boundContext.model.setField(name,
|
|
_.chain($e.val().split("\n"))
|
|
.map(function(t){return $.trim(t)})
|
|
.filter(function(t){return t.length > 0})
|
|
.value()
|
|
);
|
|
break;
|
|
case "select":
|
|
var valarr = _.map($e.find("option"), function(e){
|
|
return {value: e.value, selected: e.selected, label:$(e).text()};
|
|
});
|
|
boundContext.model.setField(name, valarr);
|
|
break;
|
|
}
|
|
});
|
|
boundContext.parentModel.change(boundContext.model,
|
|
{at:boundContext.$el.index()});
|
|
$(".popover").remove();
|
|
}
|
|
},
|
|
|
|
cancelHandler : function(boundContext) {
|
|
return function(mouseEvent) {
|
|
mouseEvent.preventDefault();
|
|
$(".popover").remove();
|
|
//boundContext.model.trigger("change");
|
|
}
|
|
}
|
|
|
|
});
|
|
}); |