mirror of
https://github.com/moparisthebest/mail
synced 2024-12-24 16:28:49 -05:00
Merge pull request #131 from whiteout-io/dev/reader-zoom-to-fit
Zoom to fit content in read view
This commit is contained in:
commit
3bfc3ad66b
@ -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;
|
||||||
};
|
};
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
})();
|
})();
|
@ -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,19 +246,38 @@ 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
|
||||||
|
scope.displayImages = function() {
|
||||||
|
scope.showImageButton = false;
|
||||||
|
iframe.contentWindow.postMessage({
|
||||||
|
html: html,
|
||||||
|
removeImages: false
|
||||||
|
}, '*');
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// reload WITH images
|
$timeout(scaleToFit, 0);
|
||||||
scope.displayImages = function() {
|
}
|
||||||
scope.showImageButton = false;
|
|
||||||
iframe.contentWindow.postMessage({
|
// transform scale iframe (necessary on iOS) to fit container width
|
||||||
html: html,
|
function scaleToFit() {
|
||||||
removeImages: false
|
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
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user