diff --git a/mailcatcher.gemspec b/mailcatcher.gemspec index 9f330e6..67bba91 100644 --- a/mailcatcher.gemspec +++ b/mailcatcher.gemspec @@ -21,6 +21,7 @@ Gem::Specification.new do |s| "public/images/**/*", "public/javascripts/**/*.js", "public/stylesheets/**/*.css", + "public/stylesheets/**/*.xsl", "views/**/*" ] s.require_paths = ["lib"] diff --git a/public/javascripts/application.coffee b/public/javascripts/application.coffee index f0185c2..60286fd 100644 --- a/public/javascripts/application.coffee +++ b/public/javascripts/application.coffee @@ -150,7 +150,6 @@ class MailCatcher

Analyse your email with Fractal

Fractal is a really neat service that applies common email design and development knowledge from Email Standards Project to your HTML email and tells you what you've done wrong or what you should do instead.

Please note that this sends your email to the Fractal service for analysis. Read their terms of service if you're paranoid.

-

(This output is still just raw XML. Someone keen to transform this into something prettier would be greatly appreciated!)

@@ -163,13 +162,8 @@ class MailCatcher $(this) .find('input[type="submit"]').attr('disabled', 'disabled').end() .find('.loading').show() - $.ajax - url: "/messages/#{id}/analysis.xml", - dataType: "text" - success: (data) -> - $form.replaceWith('

Results

')
-              $iframe.find("#result").text data
-
+          $form.xslt("/messages/#{id}/analysis.xml", "/stylesheets/analysis.xsl")
+  
   refresh: ->
     $.getJSON '/messages', (messages) =>
       $.each messages, (i, message) =>
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 4c372ff..1255466 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -155,18 +155,11 @@
       $("#message .views .analysis.tab:not(.selected)").addClass('selected');
       $("#message .views :not(.analysis).tab.selected").removeClass('selected');
       if (id != null) {
-        $iframe = $('#message iframe').contents().children().html("\n\nAnalysis\n" + ($('link[rel="stylesheet"]')[0].outerHTML) + "\n\n\n
Analyse your email with Fractal
\n
Fractal is a really neat service that applies common email design and development knowledge from Email Standards Project to your HTML email and tells you what you've done wrong or what you should do instead.
\n
Please note that this sends your email to the Fractal service for analysis. Read their terms of service if you're paranoid.
\n
(This output is still just raw XML. Someone keen to transform this into something prettier would be greatly appreciated!)
\n
\nAnalysing…\n
\n\n");
+        $iframe = $('#message iframe').contents().children().html("\n\nAnalysis\n" + ($('link[rel="stylesheet"]')[0].outerHTML) + "\n\n\n
Analyse your email with Fractal
\n
Fractal is a really neat service that applies common email design and development knowledge from Email Standards Project to your HTML email and tells you what you've done wrong or what you should do instead.
\n
Please note that this sends your email to the Fractal service for analysis. Read their terms of service if you're paranoid.
\n
\nAnalysing…\n
\n\n");
         return $form = $iframe.find('form').submit(function(e) {
           e.preventDefault();
           $(this).find('input[type="submit"]').attr('disabled', 'disabled').end().find('.loading').show();
-          return $.ajax({
-            url: "/messages/" + id + "/analysis.xml",
-            dataType: "text",
-            success: function(data) {
-              $form.replaceWith('
Results
');
-              return $iframe.find("#result").text(data);
-            }
-          });
+          return $form.xslt("/messages/" + id + "/analysis.xml", "/stylesheets/analysis.xsl");
         });
       }
     };
diff --git a/public/javascripts/xslt-3.2.js b/public/javascripts/xslt-3.2.js
new file mode 100644
index 0000000..cc199ea
--- /dev/null
+++ b/public/javascripts/xslt-3.2.js
@@ -0,0 +1 @@
+eval(function(p,a,c,k,e,d){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(2(C){C.l.h=2(){k 7};0 D=/^\\s*
+
+  
+  
+  

+  
+    
+    

+      . The  near  on line  of your code.
+    

+    

+      
This is unsupported in:

+      

+        
    
+          
+          
  • 
+            
+          
    • 
+              
+        
    
+      

+    

+  
+  

+  
+
\ No newline at end of file
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 6948286..8b21d54 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -335,6 +335,23 @@ body > header {
       #message > header .views .action {
         *display: inline; }
 
+.fractal-analysis .report-intro {
+  background: #eef4f5;
+  margin-top: 1.5em;
+  padding: 1em; }
+  .fractal-analysis .report-intro strong {
+    font-weight: bold; }
+  .fractal-analysis .report-intro .code {
+    background-color: white;
+    font-family: comic Sans MS;
+    padding: 1px 5px; }
+.fractal-analysis .unsupported-clients {
+  margin: 1em; }
+  .fractal-analysis .unsupported-clients dt {
+    padding-left: 1em; }
+  .fractal-analysis .unsupported-clients dd {
+    padding-left: 2em; }
+
 iframe {
   display: -moz-box;
   display: -webkit-box;
diff --git a/public/stylesheets/application.sass b/public/stylesheets/application.sass
index 09961bd..1391763 100644
--- a/public/stylesheets/application.sass
+++ b/public/stylesheets/application.sass
@@ -200,6 +200,24 @@ body > header
         float: right
         margin: 0 .25em
 
+.fractal-analysis
+  .report-intro
+    background: #EEF4F5
+    margin-top: 1.5em
+    padding: 1em
+    strong
+      font-weight: bold
+    .code
+      background-color: white
+      font-family: comic Sans MS
+      padding: 1px 5px
+  .unsupported-clients
+    margin: 1em
+    dt
+      padding-left: 1em
+    dd
+      padding-left: 2em
+      
 iframe
   +display-box
   +box-flex(1)