Merge pull request #57 from whiteout-io/dev/wo-323

Dev/wo 323

src/js/controller/mail-list.js

@@ -17,57 +17,6 @@ define(function(require) {
         outboxBo = appController._outboxBo;
         emailSync = appController._emailSync;
 
-        emailDao.onNeedsSync = function(error, folder) {
-            if (error) {
-                $scope.onError(error);
-                return;
-            }
-
-            $scope.synchronize({
-                folder: folder
-            });
-        };
-
-        emailSync.onIncomingMessage = function(msgs) {
-            var popupId, popupTitle, popupMessage, unreadMsgs;
-
-            unreadMsgs = msgs.filter(function(msg) {
-                return msg.unread;
-            });
-
-            if (unreadMsgs.length === 0) {
-                return;
-            }
-
-            popupId = '' + unreadMsgs[0].uid;
-            if (unreadMsgs.length > 1) {
-                popupTitle = unreadMsgs.length + ' new messages';
-                popupMessage = _.pluck(unreadMsgs, 'subject').join('\n');
-            } else {
-                popupTitle = unreadMsgs[0].from[0].name || unreadMsgs[0].from[0].address;
-                popupMessage = unreadMsgs[0].subject;
-            }
-
-            notification.create({
-                id: popupId,
-                title: popupTitle,
-                message: popupMessage
-            });
-        };
-
-        notification.setOnClickedListener(function(uidString) {
-            var uid = parseInt(uidString, 10);
-
-            if (isNaN(uid)) {
-                return;
-            }
-
-            $scope.select(_.findWhere(currentFolder().messages, {
-                uid: uid
-            }));
-        });
-
-
         //
         // scope functions
         //
@@ -294,6 +243,60 @@ define(function(require) {
         function currentFolder() {
             return $scope.state.nav.currentFolder;
         }
+
+        if (!emailDao || !emailSync) {
+            return; // development mode
+        }
+
+        emailDao.onNeedsSync = function(error, folder) {
+            if (error) {
+                $scope.onError(error);
+                return;
+            }
+
+            $scope.synchronize({
+                folder: folder
+            });
+        };
+
+        emailSync.onIncomingMessage = function(msgs) {
+            var popupId, popupTitle, popupMessage, unreadMsgs;
+
+            unreadMsgs = msgs.filter(function(msg) {
+                return msg.unread;
+            });
+
+            if (unreadMsgs.length === 0) {
+                return;
+            }
+
+            popupId = '' + unreadMsgs[0].uid;
+            if (unreadMsgs.length > 1) {
+                popupTitle = unreadMsgs.length + ' new messages';
+                popupMessage = _.pluck(unreadMsgs, 'subject').join('\n');
+            } else {
+                popupTitle = unreadMsgs[0].from[0].name || unreadMsgs[0].from[0].address;
+                popupMessage = unreadMsgs[0].subject;
+            }
+
+            notification.create({
+                id: popupId,
+                title: popupTitle,
+                message: popupMessage
+            });
+        };
+
+        notification.setOnClickedListener(function(uidString) {
+            var uid = parseInt(uidString, 10);
+
+            if (isNaN(uid)) {
+                return;
+            }
+
+            $scope.select(_.findWhere(currentFolder().messages, {
+                uid: uid
+            }));
+        });
     };
 
     function createDummyMails() {
@@ -415,6 +418,7 @@ define(function(require) {
                 '>> from 0.7.0.1\n' +
                 '>>\n' +
                 '>> God speed!'; // plaintext body
+            this.html = '<h1>HTML content</h1>';
             this.encrypted = true;
             this.decrypted = true;
         };

src/js/controller/read.js

@@ -330,11 +330,15 @@ define(function(require) {
         };
     });
 
-    ngModule.directive('frameLoad', function() {
-        return function(scope, elm) {
-            elm.bind('load', function() {
-                var frame = elm[0];
-                frame.height = frame.contentWindow.document.body.scrollHeight + 'px';
+    ngModule.directive('frameLoad', function($sce, $timeout) {
+        return function(scope, elm, attrs) {
+            scope.$watch(attrs.frameLoad, function(value) {
+                scope.html = undefined;
+                if (value) {
+                    $timeout(function() {
+                        scope.html = $sce.trustAsHtml(value);
+                    });
+                }
             });
         };
     });

src/sass/views/_read.scss

@@ -87,13 +87,9 @@
         }
     }
 
-    .body {
+    .working-wrapper {
         flex-grow: 1;
         position: relative;
-        margin-top: 1.75em;
-        line-height: 1.5em;
-        overflow-y: scroll;
-        user-select: text;
 
         .working {
             @include scut-vcenter-tt;
@@ -106,6 +102,22 @@
                 vertical-align: middle;
             }
         }
+    }
+
+    iframe {
+        flex-grow: 1;
+        margin-top: 1.75em;
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+
+    .body {
+        flex-grow: 1;
+        margin-top: 1.75em;
+        line-height: 1.5em;
+        overflow-y: scroll;
+        user-select: text;
 
         .line {
             cursor: text;
@@ -147,11 +159,6 @@
         }
     }
 
-    iframe {
-        flex-grow: 1;
-        width: 100%;
-    }
-
     .reply-selection {
         .popover-content {
             padding: 0;

src/tpl/read.html

@@ -1,4 +1,5 @@
 <div class="view-read" ng-controller="ReadCtrl">
+
   <div class="headers">
     <div class="controls">
       <button ng-click="state.mailList.remove(state.mailList.selected)" class="btn-icon" title="Delete mail">&#xe005;</button>
@@ -43,21 +44,28 @@
     <div ng-switch-default class="seperator-line"></div>
   </div><!--/.attachments-wrapper-->
 
-  <div class="body" ng-switch="state.mailList.selected === undefined || (state.mailList.selected.encrypted === false && state.mailList.selected.body !== undefined) || (state.mailList.selected.encrypted === true && state.mailList.selected.decrypted === true)">
-    <div ng-switch-when="true">
+  <!-- Show working spinner -->
+  <div class="working-wrapper"
+    ng-if="!html && state.mailList.selected !== undefined && (state.mailList.selected.body === undefined || (state.mailList.selected.encrypted && !state.mailList.selected.decrypted))">
+    <div class="working">
+      <span class="spinner"></span>
+      <strong ng-bind="(state.mailList.selected.decryptingBody) ? 'Decrypting...' : 'Loading...' "></strong>
+    </div><!--/.working-->
+  </div><!--/.working-wrapper-->
 
-      <!-- Render conversation as recursive text nodes -->
+  <!-- Render html body in sandboxed iframe -->
+  <iframe ng-show="html" sandbox srcdoc="{{html}}"
+    frame-load="state.mailList.selected.html">
+  </iframe>
+
+  <!-- Render text body as colored conversation in recursive text nodes -->
+  <div class="body"
+    ng-if="!html && (state.mailList.selected === undefined || (state.mailList.selected.encrypted === false && state.mailList.selected.body !== undefined) || (state.mailList.selected.encrypted === true && state.mailList.selected.decrypted === true))">
     <div ng-include="'tpl/text-node.html'"
       ng-if="node !== undefined"
       ng-repeat="child in node.children track by $index"
       onload="node = child">
     </div>
-
-    </div><!--/ng-switch-when-->
-    <div class="working" ng-switch-default>
-      <span class="spinner"></span>
-      <strong ng-bind="(state.mailList.selected.loadingBody === true || state.mailList.selected.body === undefined || state.mailList.selected.body === null) ? 'Loading...' : 'Decrypting...'"></strong>
-    </div><!--/.working-->
   </div><!--/.body-->
 
   <!-- popovers -->
@@ -74,4 +82,5 @@
       <li><button data-icon="&#xe015;" ng-click="state.writer.write(state.mailList.selected, null, true)">Forward</button></li>
     </ul>
   </div><!--/.reply-selection-->
+
 </div><!--/.view-read-->