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

Merge pull request #131 from whiteout-io/dev/reader-zoom-to-fit

Browse Source 
Zoom to fit content in read view
This commit is contained in:
Tankred Hase 2014-09-23 18:01:48 +02:00
commit 3bfc3ad66b
4 changed files with 95 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/js/controller/mail-list.js
View File

@ -570,18 +570,18 @@ define(function(require) {
this.answered = answered; this.answered = answered;
this.sentDate = new Date('Thu Sep 19 2013 20:41:23 GMT+0200 (CEST)'); this.sentDate = new Date('Thu Sep 19 2013 20:41:23 GMT+0200 (CEST)');
this.subject = 'Getting started'; // Subject line this.subject = 'Getting started'; // Subject line
this.body = 'And a good day to you too sir. \n' + // this.body = 'And a good day to you too sir. \n' +
'\n' + // '\n' +
'Thursday, Apr 24, 2014 3:33 PM safewithme.testuser@gmail.com wrote:\n' + // 'Thursday, Apr 24, 2014 3:33 PM safewithme.testuser@gmail.com wrote:\n' +
'> adsfadfasdfasdfasfdasdfasdfas\n' + // '> adsfadfasdfasdfasfdasdfasdfas\n' +
'\n' + // '\n' +
'http://example.com\n' + // 'http://example.com\n' +
'\n' + // '\n' +
'> Tuesday, Mar 25, 2014 4:19 PM gianniarcore@gmail.com wrote:\n' + // '> Tuesday, Mar 25, 2014 4:19 PM gianniarcore@gmail.com wrote:\n' +
'>> from 0.7.0.1\n' + // '>> from 0.7.0.1\n' +
'>>\n' + // '>>\n' +
'>> God speed!'; // plaintext body // '>> God speed!'; // plaintext body
//this.html = '<!DOCTYPE html><html><head></head><body><h1>Hello there</h1></body></html>'; this.html = '<!DOCTYPE html><html><head></head><body><h1 style="border: 1px solid red; width: 500px;">Hello there' + Math.random() + '</h1></body></html>';
this.encrypted = true; this.encrypted = true;
this.decrypted = true; this.decrypted = true;
}; };

30
src/js/controller/read-sandbox.js
View File

@ -7,7 +7,7 @@
if (e.data.html) { if (e.data.html) {
// display html mail body // display html mail body
html = e.data.html; html = '<div class="scale-body">' + e.data.html + '</div>';
} else if (e.data.text) { } else if (e.data.text) {
// diplay text mail body by with colored conversation nodes // diplay text mail body by with colored conversation nodes
html = renderNodes(parseConversation(e.data.text)); html = renderNodes(parseConversation(e.data.text));
@ -26,8 +26,12 @@
} }
document.body.innerHTML = html; document.body.innerHTML = html;
scaleToFit();
}; };
window.addEventListener('resize', scaleToFit);
/** /**
* Parse email body and generate conversation nodes * Parse email body and generate conversation nodes
* @param {Object} email The email object * @param {Object} email The email object
@ -187,4 +191,28 @@
return '<div class="view-read-body">' + body + '</div>'; 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;
}
})(); })();

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

@ -66,6 +66,11 @@ define(function(require) {
function checkPublicKey(user) { function checkPublicKey(user) {
user.secure = undefined; user.secure = undefined;
if(!keychain) {
return;
}
keychain.getReceiverPublicKey(user.address, function(err, pubkey) { keychain.getReceiverPublicKey(user.address, function(err, pubkey) {
if (err) { if (err) {
$scope.onError(err); $scope.onError(err);
@ -190,10 +195,21 @@ define(function(require) {
}; };
}); });
ngModule.directive('frameLoad', function() { ngModule.directive('frameLoad', function($timeout, $window) {
return function(scope, elm) { return function(scope, elm) {
var iframe = elm[0]; var iframe = elm[0];
scope.$watch('state.read.open', function(open) {
if(open) {
// trigger rendering of iframe
// otherwise scale to fit would not compute correct dimensions on mobile
displayText(scope.state.mailList.selected ? scope.state.mailList.selected.body : undefined);
displayHtml(scope.state.mailList.selected ? scope.state.mailList.selected.html : undefined);
}
});
$window.addEventListener('resize', scaleToFit);
iframe.onload = function() { iframe.onload = function() {
// set listeners // set listeners
scope.$watch('state.mailList.selected.body', displayText); scope.$watch('state.mailList.selected.body', displayText);
@ -212,6 +228,8 @@ define(function(require) {
iframe.contentWindow.postMessage({ iframe.contentWindow.postMessage({
text: body text: body
}, '*'); }, '*');
$timeout(scaleToFit, 0);
} }
function displayHtml(html) { function displayHtml(html) {
@ -228,11 +246,8 @@ define(function(require) {
removeImages: hasImages // avoids doing unnecessary work on the 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 // only add a scope function to reload the html if there are images
if (!hasImages) { if (hasImages) {
return;
}
// reload WITH images // reload WITH images
scope.displayImages = function() { scope.displayImages = function() {
scope.showImageButton = false; scope.showImageButton = false;
@ -242,6 +257,28 @@ define(function(require) {
}, '*'); }, '*');
}; };
} }
$timeout(scaleToFit, 0);
}
// transform scale iframe (necessary on iOS) to fit container width
function scaleToFit() {
var parentWidth = elm.parent().width();
var w = elm.width();
var scale = '';
if(w > parentWidth) {
scale = parentWidth / w;
scale = 'scale(' + scale + ',' + scale + ')';
}
elm.css({
'-webkit-transform-origin': '0 0',
'transform-origin': '0 0',
'-webkit-transform': scale,
'transform': scale
});
}
}; };
}); });

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

@ -19,6 +19,11 @@ body {
margin: 0; margin: 0;
} }
.scale-body {
// necessary to compute overflowing content width in JS
float: left;
}
.view-read-body { .view-read-body {
font-family: $font-family-base; font-family: $font-family-base;
font-size: $font-size-base; font-size: $font-size-base;