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

Merge pull request #298 from whiteout-io/dev/wo-897

Browse Source 
Use iframe-resizer
This commit is contained in:
Felix Hammerl 2015-02-19 12:45:40 +01:00
commit 9aebecd45f
11 changed files with 314 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -265,6 +265,7 @@ module.exports = function(grunt) {
'src/lib/angular/angular-animate.js',
'src/lib/ngtagsinput/ng-tags-input.min.js',
'node_modules/ng-infinite-scroll/build/ng-infinite-scroll.min.js',
'node_modules/iframe-resizer/js/iframeResizer.min.js',
'src/lib/fastclick/fastclick.js',
'src/lib/lawnchair/lawnchair-git.js',
'src/lib/lawnchair/lawnchair-adapter-webkit-sqlite-git.js',
@ -283,6 +284,7 @@ module.exports = function(grunt) {
readSandbox: {
src: [
'node_modules/dompurify/purify.js',
'node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js',
'src/js/controller/app/read-sandbox.js'
],
dest: 'dist/js/read-sandbox.min.js'

1
package.json
View File

@ -62,6 +62,7 @@
"grunt-string-replace": "~1.0.0",
"grunt-svgmin": "~1.0.0",
"grunt-svgstore": "~0.3.4",
"iframe-resizer": "^2.8.3",
"imap-client": "~0.11.0",
"jquery": "~2.1.1",
"mailreader": "~0.4.0",

4
res/aws_release.sh
View File

@ -14,8 +14,8 @@ fi
# switch branch
git checkout $2
git branch release/$1
git checkout release/$1
git branch -D release/$1
git checkout -b release/$1
git merge $2 --no-edit
# build and test

54
src/js/controller/app/read-sandbox.js
View File

@ -6,7 +6,7 @@ window.onmessage = function(e) {
if (e.data.html) {
// display html mail body
html = '<div class="scale-body">' + e.data.html + '</div>';
html = e.data.html;
} else if (e.data.text) {
// diplay text mail body by with colored conversation nodes
html = renderNodes(parseConversation(e.data.text));
@ -26,10 +26,34 @@ window.onmessage = function(e) {
document.body.innerHTML = html;
scaleToFit();
attachClickHandlers();
};
window.addEventListener('resize', scaleToFit);
/**
* Send a message to the main window when email address is clicked
*/
function attachClickHandlers() {
var elements = document.getElementsByTagName('a');
for (var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = handle;
}
function handle(e) {
var text = e.target.textContent || e.target.innerText;
if (checkEmailAddress(text)) {
e.preventDefault();
window.parentIFrame.sendMessage({
type: 'email',
address: text
});
}
}
function checkEmailAddress(text) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(text);
}
}
/**
* Parse email body and generate conversation nodes
@ -189,27 +213,3 @@ function renderNodes(root) {
return '<div class="view-read-body">' + body + '</div>';
}
/**
* Transform scale content to fit iframe width
*/
function scaleToFit() {
var view = document.getElementsByClassName('scale-body').item(0);
if (!view) {
return;
}
var parentWidth = view.parentNode.offsetWidth;
var w = view.offsetWidth;
var scale = '';
if (w > parentWidth) {
scale = parentWidth / w;
scale = 'scale(' + scale + ',' + scale + ')';
}
view.style['-webkit-transform-origin'] = '0 0';
view.style.transformOrigin = '0 0';
view.style['-webkit-transform'] = scale;
view.style.transform = scale;
}

2
src/js/controller/app/write.js
View File

@ -158,7 +158,7 @@ var WriteCtrl = function($scope, $window, $filter, $q, appConfig, auth, keychain
if (forward) {
$scope.subject = 'Fwd: ' + re.subject;
} else {
$scope.subject = 'Re: ' + ((re.subject) ? re.subject.replace('Re: ', '') : '');
$scope.subject = re.subject ? 'Re: ' + re.subject.replace('Re: ', '') : '';
}
// fill text body

53
src/js/directive/read.js
View File

@ -45,7 +45,7 @@ ngModule.directive('replySelection', function() {
};
});
ngModule.directive('frameLoad', function($timeout, $window) {
ngModule.directive('frameLoad', function($window) {
return function(scope, elm) {
var iframe = elm[0];
@ -58,7 +58,29 @@ ngModule.directive('frameLoad', function($timeout, $window) {
}
});
$window.addEventListener('resize', scaleToFit);
scope.$on('$destroy', function() {
$window.removeEventListener('resize', resetWidth);
$window.removeEventListener('orientationchange', resetWidth);
});
$window.addEventListener('resize', resetWidth);
$window.addEventListener('orientationchange', resetWidth);
// use iframe-resizer to dynamically adapt iframe size to its content
elm.iFrameResize({
enablePublicMethods: true,
sizeWidth: true,
resizedCallback: scaleToFit,
messageCallback: function(e) {
if (e.message.type === 'email') {
scope.state.writer.write({
from: [{
address: e.message.address
}]
});
}
}
});
iframe.onload = function() {
// set listeners
@ -74,12 +96,12 @@ ngModule.directive('frameLoad', function($timeout, $window) {
return;
}
resetWidth();
// send text body for rendering in iframe
iframe.contentWindow.postMessage({
text: body
}, '*');
$timeout(scaleToFit, 0);
}
function displayHtml(html) {
@ -87,6 +109,8 @@ ngModule.directive('frameLoad', function($timeout, $window) {
return;
}
resetWidth();
// if there are image tags in the html?
var hasImages = /<img[^>]+\bsrc=['"][^'">]+['"]/ig.test(html);
scope.showImageButton = hasImages;
@ -107,25 +131,36 @@ ngModule.directive('frameLoad', function($timeout, $window) {
}, '*');
};
}
$timeout(scaleToFit, 0);
}
// transform scale iframe (necessary on iOS) to fit container width
// reset the iframe width to the original (min-width:100%)
// usually required before a new scaleToFit event
function resetWidth() {
elm.css('width', '');
}
// transform scale iframe to fit container width
// necessary if iframe is wider than container
function scaleToFit() {
var parentWidth = elm.parent().width();
var w = elm.width();
var scale = '';
var scale = 'none';
if (w > parentWidth) {
// only scale html mails
var mail = scope.state.mailList.selected;
if (mail && mail.html && (w > parentWidth)) {
scale = parentWidth / w;
scale = 'scale(' + scale + ',' + scale + ')';
}
elm.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
});
}

2
src/js/util/dummy.js
View File

@ -101,7 +101,7 @@ Dummy.prototype.listMails = function() {
'>> from 0.7.0.1\n' +
'>>\n' +
'>> God speed!'; // plaintext body
//this.html = '<!DOCTYPE html><html><head></head><body><h1 style="border: 1px solid red; width: 500px;">Hello there' + Math.random() + '</h1></body></html>';
this.html = '<!DOCTYPE html><html><head></head><body><h1 style="border: 1px solid red; width: 500px; margin:0;">Hello there' + Math.random() + '</h1></body></html>';
this.encrypted = true;
this.decrypted = true;
};

70
src/sass/blocks/views/_read.scss
View File

@ -23,11 +23,32 @@
display: none;
}
}
&__working {
position: relative;
flex-grow: 1;
padding: 0 $padding-horizontal;
& > div {
@include scut-vcenter-tt;
width: 100%;
text-align: center;
font-size: $font-size-bigger;
strong {
color: $color-text-light;
vertical-align: middle;
}
}
}
&__content {
flex-grow: 1;
overflow: auto;
// allow scrolling on iOS
-webkit-overflow-scrolling: touch;
}
// Header components
&__header {
flex-shrink: 0;
margin-bottom: 1em;
padding: $padding-vertical $padding-horizontal 0;
@ -41,15 +62,28 @@
}
&__controls {
display: none;
float: right;
margin-left: 1em;
.btn-icon-light {
position: absolute;
top: 0;
right: $scrollbar-width; // don't cover scrollbar
padding: $padding-vertical $padding-horizontal;
background-color: $color-white;
.btn-icon-light + .btn-icon-light {
margin-left: 1.4em;
}
@include respond-to(md) {
display: block;
}
}
&__controls__dummy {
display: none;
float: right;
// the size of the real controls
width: 242px;
height: 39px;
@include respond-to(md) {
display: block;
}
}
&__subject {
font-weight: normal;
color: $color-text;
@ -103,7 +137,6 @@
// Content components
&__signature-status {
flex-shrink: 0;
margin-top: 0;
margin-bottom: 0.5em;
text-align: center;
@ -111,40 +144,17 @@
padding: 0 $padding-horizontal;
}
&__display-images {
flex-shrink: 0;
margin-bottom: 0.5em;
text-align: center;
padding: 0 $padding-horizontal;
}
&__working {
position: relative;
flex-grow: 1;
padding: 0 $padding-horizontal;
& > div {
@include scut-vcenter-tt;
width: 100%;
text-align: center;
font-size: $font-size-bigger;
strong {
color: $color-text-light;
vertical-align: middle;
}
}
}
&__body {
flex-grow: 1;
display: flex;
flex-direction: column;
// allow scrolling on iOS
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 0 $padding-horizontal $padding-vertical;
overflow: hidden; // necessary due to iframe scaling via transitions
iframe {
flex-grow: 1;
border: none;
width: 100%;
min-width: 100%;
}
}

13
src/sass/read-sandbox.scss
View File

@ -5,24 +5,11 @@
// Mixins
@import "mixins/responsive";
@import "mixins/scrollbar";
@include scrollbar();
html {
// use overflow auto and not scroll otherwise IE shows scrollbars always
overflow: auto;
}
body {
margin: 0;
}
.scale-body {
// necessary to compute overflowing content width in JS
float: left;
}
.view-read-body {
font-family: $font-family-base;
font-size: $font-size-base;

2
src/tpl/create-account.html
View File

@ -5,7 +5,7 @@
</header>
<main class="page__main">
<h2 class="typo-title">Create Whiteout account</h2>
<p class="typo-paragraph">Sign up for an encrypted mailbox hosted in Germany.<br>Already have an account? <a href="#" wo-touch="$event.preventDefault(); loginToExisting()">Log in here</a>.</p>
<p class="typo-paragraph">Sign up for an encrypted mailbox hosted in Germany. Already have an account? <a href="#" wo-touch="$event.preventDefault(); loginToExisting()">Log in here</a>.</p>
<form class="form" name="form">
<p class="form__error-message" ng-show="errMsg">{{errMsg}}</p>
<div class="form__row">

38
src/tpl/read.html
View File

@ -13,7 +13,6 @@
</div>
</div><!--/read__folder-toolbar-->
<header class="read__header">
<div class="read__controls">
<span class="u-hidden-lg" ng-controller="ActionBarCtrl">
<button wo-touch="flagMessage(state.mailList.selected, !state.mailList.selected.flagged)" class="btn-icon-light" title="{{state.mailList.selected.flagged ? 'Remove Star' : 'Add Star'}}">
@ -41,6 +40,20 @@
</span>
</div><!--/read__controls-->
<!-- working spinner -->
<div class="read__working"
ng-if="state.mailList.selected && state.mailList.selected.html === undefined && (state.mailList.selected.body === undefined || (state.mailList.selected.encrypted && !state.mailList.selected.decrypted))">
<div>
<span class="spinner"></span>
<strong ng-bind="(state.mailList.selected.decryptingBody) ? 'Decrypting...' : 'Loading...' "></strong>
</div>
</div><!--/read__working-->
<div class="read__content"
ng-show="state.mailList.selected && (!state.mailList.selected.encrypted && (state.mailList.selected.body || state.mailList.selected.html)) || (state.mailList.selected.encrypted && state.mailList.selected.decrypted)">
<header class="read__header">
<div class="read__controls__dummy"></div>
<h2 class="read__subject" wo-touch="notStripped = !notStripped">
<button ng-hide="notStripped" class="btn-icon-very-light">
<svg><use xlink:href="#icon-dropdown" /><title>More</title></svg>
@ -86,7 +99,7 @@
</span>
</span>
</div>
</div>
</div><!--/read__addresses-->
<ul class="attachments" ng-show="state.mailList.selected.attachments !== undefined && state.mailList.selected.attachments.length > 0">
<li ng-repeat="attachment in state.mailList.selected.attachments"
@ -98,15 +111,6 @@
</ul>
</header><!--/read__header-->
<!-- working spinner -->
<div class="read__working"
ng-if="state.mailList.selected && state.mailList.selected.html === undefined && (state.mailList.selected.body === undefined || (state.mailList.selected.encrypted && !state.mailList.selected.decrypted))">
<div>
<span class="spinner"></span>
<strong ng-bind="(state.mailList.selected.decryptingBody) ? 'Decrypting...' : 'Loading...' "></strong>
</div>
</div>
<p class="read__signature-status"
ng-show="(state.mailList.selected.body || state.mailList.selected.html) && state.mailList.selected.signed && !state.mailList.selected.signaturesValid">
Invalid PGP signature. This message could have been tampered with.
@ -116,13 +120,11 @@
<button class="btn btn--light" wo-touch="displayImages()">Display images</button>
</div>
<div class="read__body">
<!-- Render html body in sandboxed iframe -->
<div class="read__body"
ng-show="state.mailList.selected && (!state.mailList.selected.encrypted && (state.mailList.selected.body || state.mailList.selected.html)) || (state.mailList.selected.encrypted && state.mailList.selected.decrypted)">
<iframe sandbox="allow-popups allow-scripts" src="tpl/read-sandbox.html"
frame-load>
</iframe>
</div><!--/read__body-->
<iframe sandbox="allow-popups allow-scripts" src="tpl/read-sandbox.html" scrolling="no" frame-load></iframe>
</div>
</div><!--/read__content-->
<div class="read__action-toolbar" ng-controller="ActionBarCtrl">
<div class="toolbar">
@ -179,4 +181,4 @@
</li>
</ul><!--/dropdown-->
</div>
</div><!--/read-->