diff options
Diffstat (limited to 'demos/functional/js/functional.demo.js')
| -rw-r--r-- | demos/functional/js/functional.demo.js | 175 |
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,"<").replace(/>/g,">"); + }; + + // 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 |