[Summary view] [Print] [Text view]

   1  var uid = 0;
   2  
   3  /**

   4   * Render a demo template page

   5   * @author Eduardo Lundgren (braeker)

   6   * @param {Object} model

   7   */
   8  var uiRenderDemo = function(model) {
   9  
  10      var title = model.title, renderAt = $(model.renderAt);
  11  
  12  	function nl2br( str ) {
  13      return str.replace(/([^>])\n/g, '$1<br />\n');
  14      }
  15  
  16      var js2html = function(code) {
  17          var src = (js_beautify(code) || "");
  18  
  19          //if ($.browser.msie)

  20          //    src = src.replace(/([^>])\n/g, '$1<br />\n');

  21  
  22          return src;
  23      };
  24  
  25      renderAt.append(
  26          '<h3>'+ title +'</h3>'
  27      );
  28  
  29      $.each(model.demos, function(i, demo) {
  30  
  31          /**

  32           * Rendering each demo

  33           */
  34  
  35          if (!demo) return;
  36  
  37          var uiHtmlRendered = $('<div class="ui-html-rendered"></div>');
  38  
  39          if (model.onRenderStart) model.onRenderStart.apply(window);
  40  
  41          var gid = 'ui-gen-'+uid++, demoBox = $('<div id="'+gid+'"></div>');
  42  
  43          renderAt.append(demoBox);
  44  
  45          var detailsHtml = $(
  46              '<br><div class="ui-details"><div class="menutitle">'+demo.title+'</div></div>'
  47          );
  48  
  49          var descBox = $(
  50              '<div class="ui-demo-description">'+(demo.desc||'')+'</div>'
  51          );
  52  
  53          var optionsBox = $(
  54              '<div class="ui-demo-options"><label for="select-'+gid+'">Try more options on the fly: </label></div>'
  55          );
  56  
  57          var codesBox = $(
  58              '<div id="code-'+gid+'"></div>'
  59          )
  60          .css({display: 'none'});
  61  
  62          var sourceTmpl = $(
  63              '<div></div>'
  64          );
  65  
  66          var preTmpl = $(
  67              '<span style="white-space: pre;"></span>'
  68          );
  69  
  70          var codeTmpl = $(
  71              '<code></code>'
  72          );
  73  
  74          var htmlCode = '', sourceHtml = sourceTmpl.clone(), sourceJs = sourceTmpl.clone(), entitiesHtml = function(html) {
  75              return html.replace(/</g,"&lt;").replace(/>/g,"&gt;");
  76          };
  77  
  78          // Render simple HTML

  79          if (typeof demo.html == 'string') {
  80              uiHtmlRendered.html(demo.html);
  81              htmlCode = demo.html;
  82          }
  83          // Render data html by URL

  84          if (typeof demo.html == 'object' && demo.html.url) {
  85  
  86              uiHtmlRendered.html("<img src='/images/ajax-loader.gif'>");
  87  
  88              $.ajax({ 
  89                  type: "GET", 
  90                  url: demo.html.url,
  91                  cache: false,
  92                  success: function(data) {
  93                      uiHtmlRendered.html(data);
  94                      htmlCode = data;
  95  
  96                      // set html code view

  97                      sourceHtml.html(preTmpl.clone().html( codeTmpl.clone().addClass('colored html').html(entitiesHtml(htmlCode)) ));
  98  
  99                      $.each(demo.options, function(x, o) {
 100                          // eval the first source of <select>

 101                          if (!x) jQuery.globalEval(o.source);
 102                      });
 103  
 104                      $('#'+gid).find('.colored.html').chili();
 105  
 106                      // fire renderEnd callback to ajax async transactions

 107                      if (model.onRenderEnd) model.onRenderEnd.apply(window);
 108                  }
 109              });
 110  
 111          }
 112          // set html code view

 113          sourceHtml.html(preTmpl.clone().html( codeTmpl.clone().addClass('colored html').html(entitiesHtml(htmlCode)) ));
 114  
 115          var select = $('<select id="select-'+ gid+'"></select>').change(function() {
 116              var ecode = decodeURIComponent($(this).val());
 117  
 118              jQuery.globalEval(demo.destroy);
 119              jQuery.globalEval(ecode);
 120  
 121              sourceJs.html(preTmpl.html( codeTmpl.clone().addClass('colored javascript').html(js2html(ecode, 4)) ));
 122              $('.colored.javascript').chili();
 123          });
 124  
 125          var a = $('<a>View Source</a>').attr('href', 'javascript:void(0);').addClass('link-view-source').toggle(function() {
 126              var self = this;
 127              $(codesBox).show("fast");
 128              $(this).text("Hide Source");
 129          },
 130          function() {
 131              $(codesBox).hide();
 132              $(this).text("Show Source");
 133          });
 134  
 135          demoBox.append(
 136              detailsHtml, descBox, uiHtmlRendered, optionsBox.append(
 137                  select, a, '<br>', codesBox.append('<br>JavaScript:<br>', sourceJs, '<br>HTML:<br>', sourceHtml)
 138              )
 139          );
 140  
 141          // population select with the demo options

 142          $.each(demo.options, function(x, o) {
 143              if (o && o.desc) {
 144                  var source = encodeURIComponent(o.source);
 145                select.append($('<option>' + o.desc + '</option>').val(source));
 146                // eval the first source of <select>

 147                  if (!x) {
 148                      sourceJs.html(preTmpl.html(codeTmpl.clone().addClass('colored javascript').html(js2html(o.source, 4))));
 149                      jQuery.globalEval(o.source);
 150                  }
 151              }
 152          });
 153  
 154          $('#'+gid).find('.colored.javascript').chili();
 155          $('#'+gid).find('.colored.html').chili();
 156  
 157          // fire renderEnd callback to direct-html-render

 158          if (typeof demo.html != 'object' && model.onRenderEnd) model.onRenderEnd.apply(window);
 159  
 160      });
 161  };
 162  
 163  var loadDemo = function(comp) {
 164  
 165      $("#dialog").dialog().remove();
 166  
 167      $('#containerDemo').html("<img src='images/ajax-loader.gif'>");
 168  
 169       $("#containerDemo").ajaxError(function(request, settings){ 
 170         $(this).html("Oops, there is no template file for this component."); 
 171       });
 172  
 173      $.get('templates/'+comp+'.html', function(data) {
 174          $('#containerDemo').html(data);
 175      });
 176  
 177  };