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
parent
c1027deee6
commit
a9e46c1d55
|
|
@ -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"]
|
||||
|
|
|
|||
|
|
@ -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…</span>
|
||||
</form>
|
||||
|
|
@ -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('<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) =>
|
||||
$.each messages, (i, message) =>
|
||||
|
|
|
|||
|
|
@ -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…</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…</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");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,{}))
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue