jQuery.quickform.js

/*
	var dom = $("#form"); //empty dom
	dom.quickform({
		title:"Test Edit",
		fields:{
			user:"text",
			email:"text",
			comment:"textarea"
		},
		save:function(object){
			//TODO: add save btn action/callback.
		}
	
	});
*/
(function($,undefined){
    $.fn.quickform = function(options,a1,a2,a3){
    	var that = this;
		var processfields = function(fields){
			var fs = fields = _.clone(fields);
			_.each(fs,function(field,key){
				var type = field;/* TODO: object field type */
				fs[key] = {name:key,type:type};
			});
			return fs;
		};
		this.renderRows = function(){
			var form = $(".form fieldset",this);
			var rowtmpl = _.template('<div class="field-row"> <label><%=name%></label> '
				+'<div class="field-input field-<%=type%>"></div> </div>');
			_.each(this.fields,function(field,key){
				//add dom
				var html = $(rowtmpl(field));
				html.appendTo(form);

				//render input
				var func = $.fn.quickform.types[field.type];
				var inputDom = html.find(".field-input");
				inputDom.append(func(field,that.data));
			});
		};
		if(_.isObject(options)){ //initialize
			var dom = $(this).empty();
			_.extend(this,options);
			this.fields = processfields(options.fields);

			//render dom
			dom.html('<form class="form"> <fieldset></fieldset> '
					+'<hr><div class="actions">'
						+' <button type="button" class="btn btn-save btn-primary">Save</button> </div>'
				+'</div>');

			//render rows, append to dom
			if(options.title){
				$("<legend>",{html:options.title}).prependTo(dom.find(".form"));
			};
			this.renderRows();
			

			// $("<hr>").appendTo(dom);

			// TODOs
			dom.on("click",".btn-save",function(e){
				var obj = {};
				dom.find("[name]").each(function(){
					var input = $(this);
					var key = input.attr("name");
					if(_.has(that.fields,key)){
						obj[key] = input.val()||input.html();
					}
				});
				if(that.save)that.save(obj);
			});
			// bind btns


			// callback()
		}else if(_.isString(options)){
			var action = options;
			// DO actions
		}
	};
	$.fn.quickform.types = {
		"text":function(options){
			return $("<input>",{
				name:options.name,
				type:"text"
			});
		},
		"textarea":(function(){
			var tmpl = _.template('<div class="row-fluid">'
				+'<div class="span12">'
					+'<textarea type="text" class="span12 input-large" rows=5 name="<%=name%>""><%=data.content%></textarea>'
				+'</div>'
			+'</div>');
			return function(options,data){
				console.log("options",options,data);
				options.data = data;
				var dom = tmpl(options);
				if(options.callback)options.callback();
				return dom;
			}
		})(),
		// Based on jQuery File Upload Plugin
		"image":function(options,data){ //works with jQuery-file-upload and Bootstrap
			var tmpl = _.template(
				'<div class="row-fluid"><div class="span6 imgspan"><img src="" alt="" /></div><div class="span6">'
					+'<span class="btn btn-primary fileinput-button">'
						+'<span class="upload-btn-text">upload</span>'
						+'<input type="file" name="<%=name%>">'
					+'</span></div>'
				+'</div>');
			options.data = data;
			console.log(data);
			var dom =  $(tmpl(options));
			if(data.img){
				console.log("img src");
				dom.find(".imgspan").show().find("img").attr("src",data.img.src).show();
				$(".upload-btn-text",dom).text("change");
			}else {
				dom.find(".imgspan").hide();
			}
			return dom;
		},		
		// Based on jQuery File Upload Plugin
		"file":function(options,data){ //works with jQuery-file-upload and Bootstrap
			var tmpl = _.template('<span class="btn btn-primary fileinput-button">'
				+'<span>upload</span>'
				+'<input type="file" name="<%=name%>">'
			+'</span>');
			options.data = data;
			var dom =  $(tmpl(options));
			return dom;
		},
		"link":function(){
			var html = '<span class="form-inline">'
					+' <input type="text" name="link-text" placeholder="Text"></input> '
					+' <input type="url" name="link-text" placeholder="URL"></input> '
				+'</span>';
			return $(html);
		}
	};

})(jQuery);