Merge pull request #636 from pixelated/dev/sandbox

Dev/sandbox

12 files changed, 166 insertions, 12 deletions

diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 2d35662c..107e9102 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -100,6 +100,7 @@
 <script src="assets/bower_components/foundation/js/foundation/foundation.reveal.js" ></script>
 <script src="assets/bower_components/foundation/js/foundation/foundation.offcanvas.js"></script>
 <script src="assets/js/foundation/initialize_foundation.js"></script>
+<script src="assets/bower_components/iframe-resizer/js/iframeResizer.min.js"></script>
 <script src="assets/bower_components/requirejs/require.js" data-main="assets/js/main.js"></script>
 <!--usemin_end-->
 
diff --git a/web-ui/app/js/helpers/sanitizer.js b/web-ui/app/js/helpers/sanitizer.js
index eea1f0f7..443e8602 100644
--- a/web-ui/app/js/helpers/sanitizer.js
+++ b/web-ui/app/js/helpers/sanitizer.js
@@ -23,6 +23,16 @@ define(['DOMPurify', 'he'], function (DOMPurify, he) {
    */
   var sanitizer = {};
 
+  sanitizer.whitelist = [{
+    // highlight tag open
+    pre: '&#x3C;&#x65;&#x6D;&#x20;&#x63;&#x6C;&#x61;&#x73;&#x73;&#x3D;&#x22;&#x73;&#x65;&#x61;&#x72;&#x63;&#x68;&#x2D;&#x68;&#x69;&#x67;&#x68;&#x6C;&#x69;&#x67;&#x68;&#x74;&#x22;&#x3E;',
+    post: '<em class="search-highlight">'
+  }, {
+    // highlight tag close
+    pre: '&#x3C;&#x2F;&#x65;&#x6D;&#x3E;',
+    post: '</em>'
+  }];
+
   /**
    * Adds html line breaks to a plaintext with line breaks (incl carriage return)
    *
@@ -55,16 +65,24 @@ define(['DOMPurify', 'he'], function (DOMPurify, he) {
   };
 
   /**
-  * Runs a given dirty body through he, thereby encoding everything
-  * as HTML entities.
-  *
-  * @param  {string} dirtyBody The unsanitized string
-  * @return {string} Safe-to-display HTML string
-  */
+   * Runs a given dirty body through he, thereby encoding everything
+   * as HTML entities.
+   *
+   * @param  {string} dirtyBody The unsanitized string
+   * @return {string} Safe-to-display HTML string
+   */
   sanitizer.purifyText = function (dirtyBody) {
-    return he.encode(dirtyBody, {
+    var escapedBody = he.encode(dirtyBody, {
       encodeEverything: true
     });
+
+    this.whitelist.forEach(function(entry) {
+      while (escapedBody.indexOf(entry.pre) > -1) {
+        escapedBody = escapedBody.replace(entry.pre, entry.post);
+      }
+    });
+
+    return escapedBody;
   };
 
   /**
diff --git a/web-ui/app/js/mail_list/ui/mail_list.js b/web-ui/app/js/mail_list/ui/mail_list.js
index 18d36049..0f6c4fb5 100644
--- a/web-ui/app/js/mail_list/ui/mail_list.js
+++ b/web-ui/app/js/mail_list/ui/mail_list.js
@@ -81,7 +81,6 @@ define(
       this.renderMails = function (mails) {
         _.each(mails, this.appendMail, this);
         this.trigger(document, events.search.highlightResults, {where: '#mail-list'});
-        this.trigger(document, events.search.highlightResults, {where: '.bodyArea'});
         this.trigger(document, events.search.highlightResults, {where: '.subjectArea'});
         this.trigger(document, events.search.highlightResults, {where: '.msg-header .recipients'});
       };
diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js
index dfc57585..d952fed7 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -71,9 +71,52 @@ define(
           attachments: attachments
         }));
 
-        this.$node.find('.bodyArea').html(viewHelpers.formatMailBody(data.mail));
+        var $iframe = $("#read-sandbox");
+        var iframe = $iframe[0];
+
+        var content = viewHelpers.formatMailBody(data.mail);
+
+        iframe.onload = function() {
+          // use iframe-resizer to dynamically adapt iframe size to its content
+          var config = {
+            resizedCallback: scaleToFit,
+            checkOrigin: false
+          };
+          $iframe.iFrameResize(config);
+
+          // transform scale iframe to fit container width
+          // necessary if iframe is wider than container
+          function scaleToFit() {
+              var parentWidth = $iframe.parent().width();
+              var w = $iframe.width();
+              var scale = 'none';
+
+              // only scale html mails
+              var mail = data.mail;
+              if (mail && mail.htmlBody && (w > parentWidth)) {
+                  scale = parentWidth / w;
+                  scale = 'scale(' + scale + ',' + scale + ')';
+              }
+
+              $iframe.css({
+                  '-webkit-transform-origin': '0 0',
+                  '-moz-transform-origin': '0 0',
+                  '-ms-transform-origin': '0 0',
+                  'transform-origin': '0 0',
+                  '-webkit-transform': scale,
+                  '-moz-transform': scale,
+                  '-ms-transform': scale,
+                  'transform': scale
+              });
+          }
+
+          iframe.contentWindow.postMessage({
+            html: content
+          }, '*');
+        };
+
+
 
-        this.trigger(document, events.search.highlightResults, {where: '.bodyArea'});
         this.trigger(document, events.search.highlightResults, {where: '.subjectArea'});
         this.trigger(document, events.search.highlightResults, {where: '.msg-header .recipients'});
         this.trigger(document, events.ui.replyBox.showReplyContainer);
@@ -214,9 +257,17 @@ define(
         this.trigger(events.mail.want, {mail: this.attr.ident, caller: this});
       };
 
+      this.highlightMailContent = function (event, data) {
+        // we can't directly manipulate the iFrame to highlight the content
+        // so we need to take an indirection where we directly manipulate
+        // the mail content to accomodate the highlighting
+        this.trigger(document, events.mail.highlightMailContent, data);
+      };
+
       this.after('initialize', function () {
-        this.on(this, events.mail.here, this.displayMail);
         this.on(this, events.mail.notFound, this.openNoMessageSelectedPane);
+        this.on(this, events.mail.here, this.highlightMailContent);
+        this.on(document, events.mail.display, this.displayMail);
         this.on(document, events.dispatchers.rightPane.clear, this.teardown);
         this.on(document, events.mail.tags.updated, this.tagsUpdated);
         this.on(document, events.mail.deleted, this.mailDeleted);
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index 7a0dbf9d..ad15e76e 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -121,6 +121,8 @@ define(function () {
     mail: {
       here: 'mail:here',
       want: 'mail:want',
+      display: 'mail:display',
+      highlightMailContent: 'mail:highlightMailContent',
       send: 'mail:send',
       send_failed: 'mail:send_failed',
       sent: 'mail:sent',
diff --git a/web-ui/app/js/sandbox.js b/web-ui/app/js/sandbox.js
new file mode 100644
index 00000000..f9e708d6
--- /dev/null
+++ b/web-ui/app/js/sandbox.js
@@ -0,0 +1,9 @@
+(function () {
+  'use strict';
+
+  window.onmessage = function (e) {
+    if (e.data.html) {
+      document.body.innerHTML = e.data.html;
+    }
+  };
+})();
diff --git a/web-ui/app/js/search/results_highlighter.js b/web-ui/app/js/search/results_highlighter.js
index 9e3ba167..831be0cd 100644
--- a/web-ui/app/js/search/results_highlighter.js
+++ b/web-ui/app/js/search/results_highlighter.js
@@ -40,6 +40,7 @@ define(
         var domIdent = data.where;
         if(this.attr.keywords) {
           _.each(this.attr.keywords, function (keyword) {
+            keyword = escapeRegExp(keyword);
             $(domIdent).highlightRegex(new RegExp(keyword, 'i'), {
               tagType:   'em',
               className: 'search-highlight'
@@ -57,12 +58,40 @@ define(
         });
       };
 
+      this.highlightString = function (string) {
+        _.each(this.attr.keywords, function (keyword) {
+          keyword = escapeRegExp(keyword);
+          var regex = new RegExp('(' + keyword + ')', 'ig');
+          string = string.replace(regex, '<em class="search-highlight">$1</em>');
+        });
+        return string;
+      };
+
+      /*
+       * Alter data.mail.textPlainBody to highlight each of this.attr.keywords
+       * and pass it back to the mail_view when done
+       */
+      this.highlightMailContent = function(ev, data){
+        var mail = data.mail;
+        mail.textPlainBody = this.highlightString(mail.textPlainBody);
+        this.trigger(document, events.mail.display, data);
+      };
+
+      /*
+       * Escapes the special charaters used regular expressions that
+       * would cause problems with strings in the RegExp constructor
+       */
+      function escapeRegExp(string){
+        return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      }
+
       this.after('initialize', function () {
         this.on(document, events.search.perform, this.getKeywordsSearch);
         this.on(document, events.ui.tag.select, this.clearHighlights);
         this.on(document, events.search.resetHighlight, this.clearHighlights);
 
         this.on(document, events.search.highlightResults, this.highlightResults);
+        this.on(document, events.mail.highlightMailContent, this.highlightMailContent);
       });
     }
 });
diff --git a/web-ui/app/sandbox.html b/web-ui/app/sandbox.html
new file mode 100644
index 00000000..13a86f25
--- /dev/null
+++ b/web-ui/app/sandbox.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link href="css/opensans.css" rel="stylesheet" type="text/css">
+  <link href="css/sandbox.css" rel="stylesheet" type="text/css">
+
+  <!--usemin_start-->
+  <script src="js/sandbox.js"></script>
+  <script src="bower_components/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>
+  <!--usemin_end-->
+</head>
+
+<body></body>
+
+</html>
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index 2c079408..236a7c7c 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -66,6 +66,13 @@
 
 .bodyArea {
   padding: 10px 30px 0 30px;
+  box-sizing: border-box;
+
+  iframe {
+    box-sizing: inherit;
+    border: none;
+    width: 100%;
+  }
 }
 
 .attachmentsAreaWrap {
diff --git a/web-ui/app/scss/sandbox.scss b/web-ui/app/scss/sandbox.scss
new file mode 100644
index 00000000..3cb4c441
--- /dev/null
+++ b/web-ui/app/scss/sandbox.scss
@@ -0,0 +1,20 @@
+$search-highlight: #FFEF29;
+
+body {
+    font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
+    font-size: 13px;
+    line-height: 1.2em;
+    background: white;
+    color: #333;
+    padding: 0;
+    margin: 0;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+    font-style: normal;
+    box-sizing: border-box;
+    word-wrap: break-word;
+}
+
+.search-highlight {
+  background-color: $search-highlight;
+}
diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs
index f9ec084a..3ff109e9 100644
--- a/web-ui/app/templates/mails/full_view.hbs
+++ b/web-ui/app/templates/mails/full_view.hbs
@@ -64,6 +64,7 @@
     </header>
 
     <div class="bodyArea column large-12">
+        <iframe id="read-sandbox" sandbox="allow-popups allow-scripts" src="sandbox/sandbox.html" scrolling="no"></iframe>
     </div>
 
     {{#if attachments}}
diff --git a/web-ui/app/templates/search/search_trigger.hbs b/web-ui/app/templates/search/search_trigger.hbs
index 2261d154..f2c410a4 100644
--- a/web-ui/app/templates/search/search_trigger.hbs
+++ b/web-ui/app/templates/search/search_trigger.hbs
@@ -1,3 +1,3 @@
 <form>
-  <input type="search" placeholder="{{t 'search-placeholder'}}"></input>
+  <input type="search" pattern="[a-zA-Z0-9\s]{3,}" placeholder="{{t 'search-placeholder'}}"></input>
 </form>