mirror of
https://github.com/moparisthebest/mailcatcher
synced 2024-10-31 15:35:07 -04:00
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/images/**/*",
|
||||||
"public/javascripts/**/*.js",
|
"public/javascripts/**/*.js",
|
||||||
"public/stylesheets/**/*.css",
|
"public/stylesheets/**/*.css",
|
||||||
|
"public/stylesheets/**/*.xsl",
|
||||||
"views/**/*"
|
"views/**/*"
|
||||||
]
|
]
|
||||||
s.require_paths = ["lib"]
|
s.require_paths = ["lib"]
|
||||||
|
|||||||
@ -150,7 +150,6 @@ class MailCatcher
|
|||||||
<h1>Analyse your email with Fractal</h1>
|
<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><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>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>
|
<form>
|
||||||
<input type="submit" value="Analyse" /><span class="loading" style="color: #999; display: none">Analysing…</span>
|
<input type="submit" value="Analyse" /><span class="loading" style="color: #999; display: none">Analysing…</span>
|
||||||
</form>
|
</form>
|
||||||
@ -163,13 +162,8 @@ class MailCatcher
|
|||||||
$(this)
|
$(this)
|
||||||
.find('input[type="submit"]').attr('disabled', 'disabled').end()
|
.find('input[type="submit"]').attr('disabled', 'disabled').end()
|
||||||
.find('.loading').show()
|
.find('.loading').show()
|
||||||
$.ajax
|
$form.xslt("/messages/#{id}/analysis.xml", "/stylesheets/analysis.xsl")
|
||||||
url: "/messages/#{id}/analysis.xml",
|
|
||||||
dataType: "text"
|
|
||||||
success: (data) ->
|
|
||||||
$form.replaceWith('<h2>Results</h2><pre id="result"></pre>')
|
|
||||||
$iframe.find("#result").text data
|
|
||||||
|
|
||||||
refresh: ->
|
refresh: ->
|
||||||
$.getJSON '/messages', (messages) =>
|
$.getJSON '/messages', (messages) =>
|
||||||
$.each messages, (i, message) =>
|
$.each messages, (i, message) =>
|
||||||
|
|||||||
@ -155,18 +155,11 @@
|
|||||||
$("#message .views .analysis.tab:not(.selected)").addClass('selected');
|
$("#message .views .analysis.tab:not(.selected)").addClass('selected');
|
||||||
$("#message .views :not(.analysis).tab.selected").removeClass('selected');
|
$("#message .views :not(.analysis).tab.selected").removeClass('selected');
|
||||||
if (id != null) {
|
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) {
|
return $form = $iframe.find('form').submit(function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
$(this).find('input[type="submit"]').attr('disabled', 'disabled').end().find('.loading').show();
|
$(this).find('input[type="submit"]').attr('disabled', 'disabled').end().find('.loading').show();
|
||||||
return $.ajax({
|
return $form.xslt("/messages/" + id + "/analysis.xml", "/stylesheets/analysis.xsl");
|
||||||
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
1
public/javascripts/xslt-3.2.js
Normal file
1
public/javascripts/xslt-3.2.js
Normal 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,{}))
|
||||||
26
public/stylesheets/analysis.xsl
Normal file
26
public/stylesheets/analysis.xsl
Normal 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>
|
||||||
@ -335,6 +335,23 @@ body > header {
|
|||||||
#message > header .views .action {
|
#message > header .views .action {
|
||||||
*display: inline; }
|
*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 {
|
iframe {
|
||||||
display: -moz-box;
|
display: -moz-box;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
|
|||||||
@ -200,6 +200,24 @@ body > header
|
|||||||
float: right
|
float: right
|
||||||
margin: 0 .25em
|
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
|
iframe
|
||||||
+display-box
|
+display-box
|
||||||
+box-flex(1)
|
+box-flex(1)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user