index.html.erb in tr8n-3.0.3

- old
+ new

@@ -1,9 +1,7 @@
 <%= render :partial => "/tr8n/admin/common/header" %>
 
-<%=tr8n_client_sdk_scripts_tag %>
-
 <div class="section_title">
   <span style="font-size:12px; color:grey; float:right; padding-top:5px;">
     <strong>Make sure that key source tracking is enabled!</strong> And try not to register useless phrases in production.
   </span> 
 	
@@ -32,11 +30,11 @@
 			   <center>
 			   <div style="width:150px; text-align:center; padding-top:15px;">
 			     <%=link_to_function("<span>Translate Label</span>".html_safe, "translate();", :class => "tr8n_grey_button tr8n_pcb") %>
 
 	         <div style="margin-top:15px; padding:2px; text-align:center; border: 1px dotted #ccc;">
-              <%=link_to_function("<span>View Examples</span>".html_safe, "tr8nLightbox.show('/tr8n/admin/clientsdk/lb_samples', {height:450});", :class => "tr8n_grey_button tr8n_pcb", :style=>"width:200px;") %><br>
+              <%=link_to_function("<span>View Examples</span>".html_safe, "tr8nLightbox.show('/tr8n/admin/clientsdk/lb_samples', {height:550});", :class => "tr8n_grey_button tr8n_pcb", :style=>"width:200px;") %><br>
               <%=link_to("<span>View Phrases</span>".html_safe, "/tr8n/phrases/index?section_key=clientsdk", :target => "_phrases", :class => "tr8n_grey_button tr8n_pcb", :style=>"width:200px;") %><br>
               <%=link_to_function("<span>Load Translations</span>".html_safe, "reloadTranslations();", :class => "tr8n_grey_button tr8n_pcb", :style=>"width:200px;") %><br>
               <%=link_to_function("<span>Clear Results</span>".html_safe, "clearResults();", :class => "tr8n_grey_button tr8n_pcb", :style=>"width:200px;") %><br>
               <%=link_to_function("<span>Run Speed Test</span>".html_safe, "speedTest();", :class => "tr8n_grey_button tr8n_pcb", :style=>"width:200px;") %><br>
 	            <%=link_to("<span>Download SDK</span>".html_safe, "/tr8n/javascripts/tr8n_client_sdk.js", :class => "tr8n_grey_button tr8n_pcb", :style=>"width:200px;") %><br>
@@ -53,34 +51,35 @@
       </td>
     </tr>
     <tr>
       <td colspan="2" style="padding:2px;">
         <div style="font-weight:bold; padding-top:10px;">Translation <span style='color:grey'>- translated label with substituted tokens</span></div>
+        <div id="result_html" style="background:#F9F8F7; height:40px; overflow:auto; border:1px dotted #ccc; padding:10px;"></div>
+        <div style="font-weight:bold; padding-top:10px; color:grey;">Raw HTML:</div>
         <%=text_area_tag(:result, "", :style => "width:99%; background:#F9F8F7;", :readonly => true)%>     
       </td>
     </tr>
   </table>
 <% end %>
 </div>
 
 <div id="debugger" class="section_box colored" style="font-size:10px; border:1px solid black; height:230px; overflow:auto; padding: 2px;">
 </div>
 
+<%=tr8n_translations_js_tag(:sources => ["clientsdk_examples"], :id => :tr8n_clientsdk_translations) %>
+<%=tr8n_client_sdk_scripts_tag(
+    :default_source             => "clientsdk_examples",
+    :debugger_element_id        => "debugger",
+    :translations_element_id    => "tr8n_clientsdk_translations",
+    :scheduler_interval         =>  5000
+) %>
+            
 <script>
-  var tr8nProxy = new Tr8n.Proxy({
-    "debugger": "debugger",
-    "source": "clientsdk",
-    "decorations": {"bold": "<strong>{$0}</strong>", "italic": "<i>{$0}</i>", "link": "<a href='{$href}'>{$0}</a>"},
-    "rules": {"number":{"token_suffixes":["count", "num"]}, 
-              "gender":{"token_suffixes":["user", "profile", "actor", "target"]},
-              "list":{"token_suffixes":["list"]}, "date":{"token_suffixes":["date"]}
-    }
-  });
-
   function clearResults() {
 		Tr8n.element('debugger').innerHTML = '';
 		Tr8n.element('result').value = '';
+    Tr8n.element('result_html').innerHTML = '';
 	}
 	
   function reloadTranslations() {
 		tr8nProxy.initTranslations(true);
 	}
@@ -98,9 +97,10 @@
     if (Tr8n.element('tokens').value != "") {
       tokens = eval("[" + Tr8n.value('tokens') + "]")[0];
     }
     
     Tr8n.element('result').value = tr8nProxy.tr(Tr8n.value('label'), '', tokens);
+    Tr8n.element('result_html').innerHTML = Tr8n.element('result').value;
   }
   
   function speedTest() {
 		var tokens = null;
 