Refactor: generalize mail de-obfuscate javacript into a library

helpers/middleman_casper_helpers.rb

@@ -128,53 +128,12 @@ module MiddlemanCasperHelpers
   def author_path
     "#{blog.options.prefix.to_s}/author/#{blog_author.name.parameterize}/"
   end
-  def author_email_link(span_class = nil)
+  def author_email
+    # The email address is stored encoded in the blog sources
     raw_email = blog_author.email.to_s.scan(/&#\d+;/).map{|c| c[2..-2].to_i}.pack('U*')
+    obfuscated_email = raw_email.tr('!-~', 'P-~!-O').unpack('U*').map{ |code| "&##{code.to_s};"}.join
 
-    # We emit the email address as HTML encoded ROT47 string
-    email = raw_email.tr('!-~', 'P-~!-O').unpack('U*').map{ |code| "&##{code.to_s};"}.join
-
-    if span_class
-      writer = <<-JAVASCRIPT.tap { |s| s.gsub!(/^#{s.scan(/^[ \t]+(?=\S)/).min}/, '') }.html_safe
-        document.addEventListener("DOMContentLoaded", function() {
-          Array.prototype.forEach.call(document.getElementsByClassName("#{span_class}"), function(element){ element.innerHTML = link; });
-        }, false);
-      JAVASCRIPT
-    else
-      writer = 'document.write(link);'
-    end
-
-    script = <<-HTML.tap { |s| s.gsub!(/^#{s.scan(/^[ \t]+(?=\S)/).min}/, '') }
-      <script type="text/javascript">
-        (function() {
-          function decodeHTMLEntities(str) {
-            if(str && typeof str === 'string') {
-              var e = document.createElement('div');
-              e.innerHTML = str;
-              str = e.innerHTML;
-              e.remove();
-            }
-            return str;
-          }
-          function encodeHTMLEntities(str) {
-            var buf = [];
-            for (var i=str.length-1;i>=0;i--) {
-              buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
-            }
-            return buf.join('');
-          };
-          var str = encodeHTMLEntities(decodeHTMLEntities("#{email}").replace(/[!-~]/g,function(c){return String.fromCharCode(126>=(c=c.charCodeAt(0)+47)?c:c-94);}));
-          var link = "<" + "a h" + "ref=\\\"mai" + "lto:" + str + "\\\">" + str + "</" + "a>";
-          #{writer}
-        })()
-      </script>
-    HTML
-    script << '<noscript><em>(Please enable JavaScript to show the email address)</em></noscript>' unless span_class
-    script.html_safe
-  end
-
-  def author_email_span(span_class)
-    %{<span class="#{span_class}"><em>(Please enable JavaScript to show the email address)</em></span>}.html_safe
+    %{<span class="hidden-email" data-email="#{obfuscated_email}"><em>(Please enable JavaScript to show the email address)</em></span>}.html_safe
   end
 
   def og_type

source/author.html.haml

@@ -5,7 +5,6 @@ cover: cover.jpg
 cover_license: '[Cover Image](https://unsplash.com/photos/2ShvY8Lf6l0) by [Lukasz Szmigiel](https://unsplash.com/szmigieldesign), [CC Zero 1.0](https://unsplash.com/license)'
 ---
 
-= author_email_link('author-email')
 %header.main-header.author-head{cover}
   %nav.main-nav.overlay.clearfix
     %a.home-button.icon-angle-left{href: home_path}
@@ -37,8 +36,8 @@ cover_license: '[Cover Image](https://unsplash.com/photos/2ShvY8Lf6l0) by [Lukas
       integral part of the community by not only providing source code but also
       advice, help, and organisational support to advance the status quo.
 
-      If you want to contact me, preferrably send an email to
-      #{author_email_span('author-email')} in either German or English. I am
+      If you want to contact me, preferrably send an email to #{author_email}
+      in either German or English. I am
       [#{blog_author.profile_links[:github][:user]}](#{blog_author.profile_links[:github][:link]}) on GitHub and
       [@#{blog_author.profile_links[:twitter][:user]}](#{blog_author.profile_links[:twitter][:link]}) on Twitter.
       I try to help people on [Stack Overflow](#{blog_author.profile_links[:stackoverflow][:link]}).

source/impressum.md.erb

@@ -13,7 +13,7 @@ GERMANY
 
 <p>
   <span class="icon-mail"><span class="hidden">E-Mail:</span></span>
-  <%= author_email_link %>
+  <%= author_email %>
 </p>
 
 Diese Daten dürfen nicht zu Werbezwecken genutzt werden.<br>

source/javascripts/application.js.coffee

@@ -1,2 +1,3 @@
 #= require vendor/jquery-1.11.2
 #= require vendor/casper
+#= require obfuscate

source/javascripts/obfuscate.js

@@ -0,0 +1,33 @@
+(function() {
+  function decodeHTMLEntities(str) {
+    if(str && typeof str === 'string') {
+      var e = document.createElement('div');
+      e.innerHTML = str;
+      str = e.innerHTML;
+      e.remove();
+    }
+    return str;
+  }
+  function encodeHTMLEntities(str) {
+    var buf = [];
+    for (var i=str.length-1;i>=0;i--) {
+      buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
+    }
+    return buf.join('');
+  };
+
+  document.addEventListener("DOMContentLoaded", function() {
+    var elements = document.getElementsByClassName("hidden-email");
+    Array.prototype.forEach.call(elements, function(element){
+      var encoded = element.getAttribute("data-email");
+      var plain_encoded = decodeHTMLEntities(encoded)
+      var plain_decoded = plain_encoded.replace(/[!-~]/g,function(c){
+        return String.fromCharCode(126>=(c=c.charCodeAt(0)+47)?c:c-94);
+      });
+      var decoded = encodeHTMLEntities(plain_decoded);
+
+      var link = "<" + "a h" + "ref=\"mai" + "lto:" + decoded + "\">" + decoded + "</" + "a>";
+      element.innerHTML = link;
+    });
+  }, false);
+})()