From a9e46c1d55b03f7568efa62227d8828a9004aab8 Mon Sep 17 00:00:00 2001 From: Ryan Montgomery Date: Sun, 11 Dec 2011 16:59:30 -0500 Subject: [PATCH] Fractal Analysis Output * Added analysis.xsl to transform the fractal validation xml into html which is injected into the analysis iframe. This allowed for easier styling of the returned xml data. * Added xslt query plugin to fetch and transform the xml * Styled the output in a similar manner to the Fractal website --- mailcatcher.gemspec | 1 + public/javascripts/application.coffee | 10 ++-------- public/javascripts/application.js | 11 ++--------- public/javascripts/xslt-3.2.js | 1 + public/stylesheets/analysis.xsl | 26 ++++++++++++++++++++++++++ public/stylesheets/application.css | 17 +++++++++++++++++ public/stylesheets/application.sass | 18 ++++++++++++++++++ 7 files changed, 67 insertions(+), 17 deletions(-) create mode 100644 public/javascripts/xslt-3.2.js create mode 100644 public/stylesheets/analysis.xsl diff --git a/mailcatcher.gemspec b/mailcatcher.gemspec index 9f330e6a..67bba915 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 f0185c2d..60286fdc 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 4c372ffc..12554668 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 00000000..cc199ea3
--- /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 6948286b..8b21d54b 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 09961bd1..13917632 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)