From 0d0b767b368674481c66410f78c1565accb6451e Mon Sep 17 00:00:00 2001
From: Felix Hammerl <mail@felixhammerl.com>
Date: Wed, 25 Jun 2014 17:20:55 +0200
Subject: [PATCH] [WO-409] show images only on user request

---
 src/js/controller/read.js | 38 ++++++++++++++++++++++++++++++++------
 src/sandbox.js            | 14 +++++++++++++-
 src/sass/views/_read.scss | 11 +++++++++++
 src/tpl/read.html         |  4 ++++
 4 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/src/js/controller/read.js b/src/js/controller/read.js
index 1332112..ef346ef 100644
--- a/src/js/controller/read.js
+++ b/src/js/controller/read.js
@@ -338,14 +338,40 @@ define(function(require) {
     ngModule.directive('frameLoad', function($sce, $timeout) {
         return function(scope, elm, attrs) {
             scope.$watch(attrs.frameLoad, function(value) {
+                var html = value;
                 scope.html = undefined;
-                if (value) {
-                    $timeout(function() {
-                        scope.html = true;
-                        var iframe = elm[0];
-                        iframe.contentWindow.postMessage(value, '*');
-                    });
+                var iframe = elm[0];
+
+                if (!html) {
+                    return;
                 }
+
+                // if there are image tags in the html?
+                var hasImages = /<img[^>]+\bsrc=['"][^'">]+['"]/ig.test(html);
+                scope.showImageButton = hasImages;
+
+                // inital loading
+                $timeout(function() {
+                    scope.html = true;
+                    iframe.contentWindow.postMessage({
+                        html: html,
+                        removeImages: hasImages // avoids doing unnecessary work on the html
+                    }, '*');
+                });
+
+                // no need to add a scope function to reload the html if there are no images
+                if (!hasImages) {
+                    return;
+                }
+
+                // reload WITH images
+                scope.displayImages = function() {
+                    scope.showImageButton = false;
+                    iframe.contentWindow.postMessage({
+                        html: html,
+                        removeImages: false
+                    }, '*');
+                };
             });
         };
     });
diff --git a/src/sandbox.js b/src/sandbox.js
index f0674e6..fa4ae07 100644
--- a/src/sandbox.js
+++ b/src/sandbox.js
@@ -3,6 +3,18 @@
 
     // set listener for event from main window
     window.addEventListener('message', function(e) {
-        document.body.innerHTML = e.data.replace(/<a /g, '<a target="_blank" ');
+        var html = e.data.html;
+
+        // make links open in a new window
+        html = html.replace(/<a /g, '<a target="_blank" ');
+
+        // remove sources where necessary
+        if (e.data.removeImages) {
+            html = html.replace(/(<img[^>]+\b)src=['"][^'">]+['"]/ig, function(match, prefix) {
+                return prefix;
+            });
+        }
+
+        document.body.innerHTML = html;
     }, false);
 })();
\ No newline at end of file
diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss
index 1a31449..bef31aa 100644
--- a/src/sass/views/_read.scss
+++ b/src/sass/views/_read.scss
@@ -114,6 +114,17 @@
         }
     }
 
+    .showImages {
+        flex-shrink: 0;
+        padding: 1em;
+        text-align: center;
+
+        a {
+            text-decoration: none;
+            color: $color-blue;
+        }
+    }
+
     iframe {
         flex-grow: 1;
         margin-top: 1.75em;
diff --git a/src/tpl/read.html b/src/tpl/read.html
index 7070be8..6045d75 100644
--- a/src/tpl/read.html
+++ b/src/tpl/read.html
@@ -53,6 +53,10 @@
     </div><!--/.working-->
   </div><!--/.working-wrapper-->
 
+  <div class="showImages" ng-show="html && showImageButton">
+    <a href='#' ng-click="displayImages(); $event.preventDefault()">Display images</a>
+  </div>
+
   <!-- Render html body in sandboxed iframe -->
   <iframe ng-show="html" sandbox="allow-popups allow-scripts" src="sandbox.html" 
     frame-load="state.mailList.selected.html">