moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-12-23 07:48:48 -05:00
Code Issues Releases Wiki Activity

[WO-323] Render HTML content in sandboxed iframe

Browse Source
This commit is contained in:
Tankred Hase 2014-05-08 16:32:46 +02:00
parent 4fc4b02c26
commit c272b4f937
3 changed files with 49 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/js/controller/read.js
View File

@ -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($parse, $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);
});
}
});
};
});

27
src/sass/views/_read.scss
View File

@ -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;

37
src/tpl/read.html
View File

@ -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">
<!-- Render conversation as recursive text nodes -->
<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>
<!-- 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.loadingBody === true || state.mailList.selected.body === undefined || state.mailList.selected.body === null) ? 'Loading...' : 'Decrypting...'"></strong>
<strong ng-bind="(state.mailList.selected.decryptingBody) ? 'Decrypting...' : 'Loading...' "></strong>
</div><!--/.working-->
</div><!--/.working-wrapper-->
<!-- 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><!--/.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-->
</div><!--/.view-read-->