Modal test

gistfile1.js

({
	"id": "cw.TestModal",
	"params": {
	},
	"data": {
		"text": "Nada"
	},
	"init": function ($form, form) {
		$form.html(this.HTML);
	},
	"ui": {
		"#result": "text",
		"#add_col": {
			"bind": function (d,v,$o){
				if (v!=null) {
					// Modal dialog with form
					if (!$o.data("modal")) 
						$o.modal({
							manifest:this.Popup,
							width:400,
							data:d ,
							esc: true, enter:true, drag:false,
							root:$("#controls"),
							align:"top:100%",
							nose:"top"
						}).then(function(modalData){
							console.log(JSON.stringify(modalData));
							d.text=modalData.text;
							$o.my().root.trigger("change");
						});
					else $o.modal();
				}},
			"events": "click.my",
			"recalc": "#result" //stupid workaround 
		}
	},
	"HTML": "<div>\n\t <div id=\"controls\" class=\"row\"><span id=\"add_col\" class=\"fi-plus blue mr10\">\n\t\t </span><span class=\"\">Add column</span>\n\t\t <div id=\"result\"></div>\n\t</div>\n</div>",
	"Popup": {
		"data": {
			"start": 1,
			"end": 10
		},
		"init": function ($form){
				$form.html('<div class="fs90">\
				<h2>Fill col with range</h2>\
				<span class="mr2">start:</span><input id="range-start" type="text" placeholder="1" class="fs90 w50">\
				<span>end:</span>	<input id="range-end" type="text" placeholder="10" class="fs90 w50">\
				<input id="btn-ok" type="button" value="fill" class="mt10">\
				</div>\
				');
			},
		"ui": {
			"#btn-ok": {
				"bind": function (data,value,$o){
						if(null!=value){
							var values= [];
							var start=data.start,end=data.end;
							for(var i=start; i<end; i++){
								values.push(i);
							}
							data.text = values.join('\n');
						  $o.trigger("commit");
						}
					},
				"events": "click.my"
			},
			"#range-start": "start",
			"#range-end": "end"
		}
	}
})