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 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)