moparisthebest
/
mail
mirror of https://github.com/moparisthebest/mail
1
0
Fork 0
Code Issues Releases Wiki Activity

fit to scale container width in read view

This commit is contained in:
Mario Volke 2014-09-22 17:33:06 +02:00
parent 909bca2da5
commit 3ec9597371
4 changed files with 91 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.sentDate = new Date('Thu Sep 19 2013 20:41:23 GMT+0200 (CEST)');
this.subject = 'Getting started'; // Subject line
this.body = 'And a good day to you too sir. \n' +
'\n' +
'Thursday, Apr 24, 2014 3:33 PM safewithme.testuser@gmail.com wrote:\n' +
'> adsfadfasdfasdfasfdasdfasdfas\n' +
'\n' +
'http://example.com\n' +
'\n' +
'> Tuesday, Mar 25, 2014 4:19 PM gianniarcore@gmail.com wrote:\n' +
'>> from 0.7.0.1\n' +
'>>\n' +
'>> God speed!'; // plaintext body
//this.html = '<!DOCTYPE html><html><head></head><body><h1>Hello there</h1></body></html>';
// this.body = 'And a good day to you too sir. \n' +
// '\n' +
// 'Thursday, Apr 24, 2014 3:33 PM safewithme.testuser@gmail.com wrote:\n' +
// '> adsfadfasdfasdfasfdasdfasdfas\n' +
// '\n' +
// 'http://example.com\n' +
// '\n' +
// '> Tuesday, Mar 25, 2014 4:19 PM gianniarcore@gmail.com wrote:\n' +
// '>> 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.encrypted = true;
this.decrypted = true;
};

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

@ -7,7 +7,7 @@
if (e.data.html) {
// display html mail body
html = e.data.html;
html = '<div class="scale-body">' + e.data.html + '</div>';;
} else if (e.data.text) {
// diplay text mail body by with colored conversation nodes
html = renderNodes(parseConversation(e.data.text));
@ -26,6 +26,8 @@
}
document.body.innerHTML = html;
scaleToFit();
};
/**
@ -187,4 +189,28 @@
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;
}
})();

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

@ -66,6 +66,11 @@ define(function(require) {
function checkPublicKey(user) {
user.secure = undefined;
if(!keychain) {
return;
}
keychain.getReceiverPublicKey(user.address, function(err, pubkey) {
if (err) {
$scope.onError(err);
@ -202,10 +207,19 @@ define(function(require) {
};
});
ngModule.directive('frameLoad', function() {
ngModule.directive('frameLoad', function($timeout) {
return function(scope, elm) {
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);
}
});
iframe.onload = function() {
// set listeners
scope.$watch('state.mailList.selected.body', displayText);
@ -224,6 +238,8 @@ define(function(require) {
iframe.contentWindow.postMessage({
text: body
}, '*');
$timeout(scaleToFit, 0);
}
function displayHtml(html) {
@ -240,19 +256,38 @@ define(function(require) {
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;
// only add a scope function to reload the html if there are images
if (hasImages) {
// reload WITH images
scope.displayImages = function() {
scope.showImageButton = false;
iframe.contentWindow.postMessage({
html: html,
removeImages: false
}, '*');
};
}
// reload WITH images
scope.displayImages = function() {
scope.showImageButton = false;
iframe.contentWindow.postMessage({
html: html,
removeImages: false
}, '*');
};
$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;
}
.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;