- Added functional demo application

- Removed datepicker folder from functional demo folder

1 files changed, 175 insertions, 0 deletions

diff --git a/demos/functional/js/functional.demo.js b/demos/functional/js/functional.demo.js
new file mode 100644
index 000000000..330ffce9e
--- /dev/null
+++ b/demos/functional/js/functional.demo.js
@@ -0,0 +1,175 @@
+var uid = 0;
+
+/**
+ * Render a demo template page
+ * @author Eduardo Lundgren (braeker)
+ * @param {Object} model
+ */
+var uiRenderDemo = function(model) {
+	
+	var title = model.title, renderAt = $(model.renderAt);
+	
+	function nl2br( str ) {
+    return str.replace(/([^>])\n/g, '$1<br />\n');
+	}
+	
+	var js2html = function(code) {
+		var src = (js_beautify(code) || "");
+		
+		//if ($.browser.msie)
+		//	src = src.replace(/([^>])\n/g, '$1<br />\n');
+		
+		return src;
+	};
+	
+	renderAt.append(
+		'<h3>'+ title +'</h3>'
+	);
+
+	$.each(model.demos, function(i, demo) {
+		
+		/**
+		 * Rendering each demo
+		 */
+
+		if (!demo) return;
+		
+		var uiHtmlRendered = $('<div class="ui-html-rendered"></div>');
+		
+		if (model.onRenderStart) model.onRenderStart.apply(window);
+		
+		var gid = 'ui-gen-'+uid++, demoBox = $('<div id="'+gid+'"></div>');
+
+		renderAt.append(demoBox);
+
+		var detailsHtml = $(
+			'<br><div class="ui-details"><div class="menutitle">'+demo.title+'</div></div>'
+		);
+		
+		var descBox = $(
+			'<div class="ui-demo-description">'+(demo.desc||'')+'</div>'
+		);
+		
+		var optionsBox = $(
+			'<div class="ui-demo-options"><label for="select-'+gid+'">Try more options on the fly: </label></div>'
+		);
+	
+		var codesBox = $(
+			'<div id="code-'+gid+'"></div>'
+		)
+		.css({display: 'none'});
+
+		var sourceTmpl = $(
+			'<div></div>'
+		);
+		
+		var preTmpl = $(
+			'<span style="white-space: pre;"></span>'
+		);
+		
+		var codeTmpl = $(
+			'<code></code>'
+		);
+		
+		var htmlCode = '', sourceHtml = sourceTmpl.clone(), sourceJs = sourceTmpl.clone(), entitiesHtml = function(html) {
+			return html.replace(/</g,"&lt;").replace(/>/g,"&gt;");
+		};
+		
+		// Render simple HTML
+		if (typeof demo.html == 'string') {
+			uiHtmlRendered.html(demo.html);
+			htmlCode = demo.html;
+		}
+		// Render data html by URL
+		if (typeof demo.html == 'object' && demo.html.url) {
+			
+			uiHtmlRendered.html("<img src='/images/ajax-loader.gif'>");
+			
+			$.ajax({ 
+				type: "GET", 
+				url: demo.html.url,
+				cache: false,
+				success: function(data) {
+					uiHtmlRendered.html(data);
+					htmlCode = data;
+					
+					// set html code view
+					sourceHtml.html(preTmpl.clone().html( codeTmpl.clone().addClass('colored html').html(entitiesHtml(htmlCode)) ));
+					
+					$.each(demo.options, function(x, o) {
+						// eval the first source of <select>
+						if (!x) jQuery.globalEval(o.source);
+					});
+					
+					$('#'+gid).find('.colored.html').chili();
+					
+					// fire renderEnd callback to ajax async transactions
+					if (model.onRenderEnd) model.onRenderEnd.apply(window);
+				}
+			});
+			
+		}
+		// set html code view
+		sourceHtml.html(preTmpl.clone().html( codeTmpl.clone().addClass('colored html').html(entitiesHtml(htmlCode)) ));
+		
+		var select = $('<select id="select-'+ gid+'"></select>').change(function() {
+			var ecode = decodeURIComponent($(this).val());
+
+			jQuery.globalEval(demo.destroy);
+			jQuery.globalEval(ecode);
+
+			sourceJs.html(preTmpl.html( codeTmpl.clone().addClass('colored javascript').html(js2html(ecode, 4)) ));
+			$('.colored.javascript').chili();
+		});
+
+		var a = $('<a>View Source</a>').attr('href', 'javascript:void(0);').addClass('link-view-source').toggle(function() {
+			var self = this;
+			$(codesBox).show("fast");
+			$(this).text("Hide Source");
+		},
+		function() {
+			$(codesBox).hide();
+			$(this).text("Show Source");
+		});
+
+		demoBox.append(
+			detailsHtml, descBox, uiHtmlRendered, optionsBox.append(
+				select, a, '<br>', codesBox.append('<br>JavaScript:<br>', sourceJs, '<br>HTML:<br>', sourceHtml)
+			)
+		);
+		
+		// population select with the demo options
+		$.each(demo.options, function(x, o) {
+			if (o && o.desc) {
+				var source = encodeURIComponent(o.source);
+	  		select.append($('<option>' + o.desc + '</option>').val(source));
+	  		// eval the first source of <select>
+				if (!x) {
+					sourceJs.html(preTmpl.html(codeTmpl.clone().addClass('colored javascript').html(js2html(o.source, 4))));
+					jQuery.globalEval(o.source);
+				}
+			}
+		});
+		
+		$('#'+gid).find('.colored.javascript').chili();
+		$('#'+gid).find('.colored.html').chili();
+		
+		// fire renderEnd callback to direct-html-render
+		if (typeof demo.html != 'object' && model.onRenderEnd) model.onRenderEnd.apply(window);
+		
+	});
+};
+
+var loadDemo = function(comp) {
+	
+	$('#containerDemo').html("<img src='images/ajax-loader.gif'>");
+	
+	 $("#containerDemo").ajaxError(function(request, settings){ 
+	   $(this).html("Ops, there is no template file for this component."); 
+	 });
+	
+	$.get('templates/'+comp+'.html', function(data) {
+		$('#containerDemo').html(data);
+	});
+	
+};
\ No newline at end of file