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
This commit is contained in:
Ryan Montgomery 2011-12-11 16:59:30 -05:00
parent c1027deee6
commit a9e46c1d55
7 changed files with 67 additions and 17 deletions

View File

@ -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"]

View File

@ -150,7 +150,6 @@ class MailCatcher
<h1>Analyse your email with Fractal</h1>
<p><a href="http://getfractal.com/" target="_blank">Fractal</a> is a really neat service that applies common email design and development knowledge from <a href="http://www.email-standards.org/" target="_blank">Email Standards Project</a> to your HTML email and tells you what you've done wrong or what you should do instead.</p>
<p>Please note that this <strong>sends your email to the Fractal service</strong> for analysis. Read their <a href="http://getfractal.com/terms" target="_blank">terms of service</a> if you're paranoid.</p>
<p>(This output is still just raw XML. Someone keen to transform this into something prettier would be greatly appreciated!)</p>
<form>
<input type="submit" value="Analyse" /><span class="loading" style="color: #999; display: none">Analysing&hellip;</span>
</form>
@ -163,12 +162,7 @@ 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('<h2>Results</h2><pre id="result"></pre>')
$iframe.find("#result").text data
$form.xslt("/messages/#{id}/analysis.xml", "/stylesheets/analysis.xsl")
refresh: ->
$.getJSON '/messages', (messages) =>

View File

@ -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("<html>\n<head>\n<title>Analysis</title>\n" + ($('link[rel="stylesheet"]')[0].outerHTML) + "\n</head>\n<body class=\"iframe\">\n<h1>Analyse your email with Fractal</h1>\n<p><a href=\"http://getfractal.com/\" target=\"_blank\">Fractal</a> is a really neat service that applies common email design and development knowledge from <a href=\"http://www.email-standards.org/\" target=\"_blank\">Email Standards Project</a> to your HTML email and tells you what you've done wrong or what you should do instead.</p>\n<p>Please note that this <strong>sends your email to the Fractal service</strong> for analysis. Read their <a href=\"http://getfractal.com/terms\" target=\"_blank\">terms of service</a> if you're paranoid.</p>\n<p>(This output is still just raw XML. Someone keen to transform this into something prettier would be greatly appreciated!)</p>\n<form>\n<input type=\"submit\" value=\"Analyse\" /><span class=\"loading\" style=\"color: #999; display: none\">Analysing&hellip;</span>\n</form>\n</body>\n</html>");
$iframe = $('#message iframe').contents().children().html("<html>\n<head>\n<title>Analysis</title>\n" + ($('link[rel="stylesheet"]')[0].outerHTML) + "\n</head>\n<body class=\"iframe\">\n<h1>Analyse your email with Fractal</h1>\n<p><a href=\"http://getfractal.com/\" target=\"_blank\">Fractal</a> is a really neat service that applies common email design and development knowledge from <a href=\"http://www.email-standards.org/\" target=\"_blank\">Email Standards Project</a> to your HTML email and tells you what you've done wrong or what you should do instead.</p>\n<p>Please note that this <strong>sends your email to the Fractal service</strong> for analysis. Read their <a href=\"http://getfractal.com/terms\" target=\"_blank\">terms of service</a> if you're paranoid.</p>\n<form>\n<input type=\"submit\" value=\"Analyse\" /><span class=\"loading\" style=\"color: #999; display: none\">Analysing&hellip;</span>\n</form>\n</body>\n</html>");
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('<h2>Results</h2><pre id="result"></pre>');
return $iframe.find("#result").text(data);
}
});
return $form.xslt("/messages/" + id + "/analysis.xml", "/stylesheets/analysis.xsl");
});
}
};

View File

@ -0,0 +1 @@
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?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*</;1(a.11){C.l.h=2(F,G){0 H=C(7);0 J=2(){0 K="V";1(I.5==K&&E.5==K){b.W(2(){H.z(I.P(E.Q))},R)}};0 I=a.r("6");I.d=J;I[D.f(F)?"n":"o"]=F;0 E=a.r("6");E.d=J;E[D.f(G)?"n":"o"]=G;C("T").g(I).g(E);k 7}}8{1(b.m!=e&&b.U!=e&&b.i!=e){0 B=9 i();0 A=t;1(C.v(B.j)){A=b.M!=e}8{A=q}1(A){C.l.h=2(G,H){0 I=C(7);0 F=t;0 J={5:4};0 E={5:4};0 K=2(){1(J.5==4&&E.5==4&&!F){0 L=9 i();1(C.v(L.j)){c=a.X.Y("","",y);L.j(J.3,E.3,c,y);I.z(9 M().Z(c))}8{L.10(E.3);c=L.O(J.3,a);I.S().g(c)}F=q}};1(D.f(G)){J.3=9 m().x(G,"p/6")}8{J=C.u({w:"6",N:G});J.d=K}1(D.f(H)){E.3=9 m().x(H,"p/6");K()}8{E=C.u({w:"6",N:H});E.d=K}k 7}}}}})(12);',62,65,'var|if|function|responseXML||readyState|xml|this|else|new|document|window|resultDoc|onreadystatechange|undefined|test|append|xslt|XSLTProcessor|transformDocument|return|fn|DOMParser|innerHTML|src|text|true|createElement||false|ajax|isFunction|dataType|parseFromString|null|html|||||||||||||XMLSerializer|url|transformToFragment|transformNode|XMLDocument|50|empty|body|XMLHttpRequest|complete|setTimeout|implementation|createDocument|serializeToString|importStylesheet|recalc|jQuery'.split('|'),0,{}))

View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/xml">
<section class="fractal-analysis">
<xsl:for-each select="result/errors/error">
<xsl:variable name="errorCount" select="position()"/>
<p class="report-intro">
<strong><xsl:value-of select="$errorCount" />.</strong> The <span class="code"><xsl:value-of select="rule/rule_name" /></span> near <span class="code"><xsl:value-of select="snippet" /></span> on line <span class="code"><xsl:value-of select="error_line" /></span> of your code.
</p>
<dl class="unsupported-clients">
<dt>This is unsupported in:</dt>
<dd>
<ul>
<xsl:for-each select="rule/email_client//item">
<li>
<xsl:value-of select="." />
</li>
</xsl:for-each>
</ul>
</dd>
</dl>
</xsl:for-each>
</section>
</xsl:template>
</xsl:stylesheet>

View File

@ -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;

View File

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