From 3ec95973719e9b7f4f7fb5e7b4766cde955d6497 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Mon, 22 Sep 2014 17:33:06 +0200 Subject: [PATCH 1/3] fit to scale container width in read view --- src/js/controller/mail-list.js | 24 ++++++------- src/js/controller/read-sandbox.js | 28 ++++++++++++++- src/js/controller/read.js | 59 ++++++++++++++++++++++++------- src/sass/read-sandbox.scss | 5 +++ 4 files changed, 91 insertions(+), 25 deletions(-) diff --git a/src/js/controller/mail-list.js b/src/js/controller/mail-list.js index 193eb65..ed81585 100644 --- a/src/js/controller/mail-list.js +++ b/src/js/controller/mail-list.js @@ -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 = '

Hello there

'; + // 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 = '

Hello there' + Math.random() + '

'; this.encrypted = true; this.decrypted = true; }; diff --git a/src/js/controller/read-sandbox.js b/src/js/controller/read-sandbox.js index 70ef5eb..b7a3b81 100644 --- a/src/js/controller/read-sandbox.js +++ b/src/js/controller/read-sandbox.js @@ -7,7 +7,7 @@ if (e.data.html) { // display html mail body - html = e.data.html; + 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,6 +26,8 @@ } document.body.innerHTML = html; + + scaleToFit(); }; /** @@ -187,4 +189,28 @@ return '
' + body + '
'; } + /** + * 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; + } + })(); \ No newline at end of file diff --git a/src/js/controller/read.js b/src/js/controller/read.js index 058ee7a..d763e3f 100644 --- a/src/js/controller/read.js +++ b/src/js/controller/read.js @@ -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 + }); } }; }); diff --git a/src/sass/read-sandbox.scss b/src/sass/read-sandbox.scss index 3d55c19..505b421 100644 --- a/src/sass/read-sandbox.scss +++ b/src/sass/read-sandbox.scss @@ -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; From 320686f5901ed80d32727f111d20f5ddc9f76927 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Tue, 23 Sep 2014 12:06:18 +0200 Subject: [PATCH 2/3] trigger read content scaling on window resize --- src/js/controller/read-sandbox.js | 2 ++ src/js/controller/read.js | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/js/controller/read-sandbox.js b/src/js/controller/read-sandbox.js index b7a3b81..af2da14 100644 --- a/src/js/controller/read-sandbox.js +++ b/src/js/controller/read-sandbox.js @@ -30,6 +30,8 @@ scaleToFit(); }; + window.addEventListener('resize', scaleToFit); + /** * Parse email body and generate conversation nodes * @param {Object} email The email object diff --git a/src/js/controller/read.js b/src/js/controller/read.js index d763e3f..fdb7547 100644 --- a/src/js/controller/read.js +++ b/src/js/controller/read.js @@ -207,7 +207,7 @@ define(function(require) { }; }); - ngModule.directive('frameLoad', function($timeout) { + ngModule.directive('frameLoad', function($timeout, $window) { return function(scope, elm) { var iframe = elm[0]; @@ -220,6 +220,8 @@ define(function(require) { } }); + $window.addEventListener('resize', scaleToFit); + iframe.onload = function() { // set listeners scope.$watch('state.mailList.selected.body', displayText); From 3156a20664af58b1340a92c55c1ce374933ac623 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Tue, 23 Sep 2014 12:09:00 +0200 Subject: [PATCH 3/3] fix jshint --- src/js/controller/read-sandbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/controller/read-sandbox.js b/src/js/controller/read-sandbox.js index af2da14..7a778e1 100644 --- a/src/js/controller/read-sandbox.js +++ b/src/js/controller/read-sandbox.js @@ -7,7 +7,7 @@ if (e.data.html) { // display html mail body - html = '
' + e.data.html + '
';; + html = '
' + e.data.html + '
'; } else if (e.data.text) { // diplay text mail body by with colored conversation nodes html = renderNodes(parseConversation(e.data.text));