From b512200aef602afba340321a2ae89fa9293dde73 Mon Sep 17 00:00:00 2001 From: Caio Carrara Date: Tue, 29 Mar 2016 18:09:03 -0300 Subject: Issue #622 - hide reply buttons It changes the trigger of event which show the reply container to after the iframe received the message with email body. --- web-ui/app/js/mail_view/ui/mail_view.js | 54 ++-------------- web-ui/app/js/mixins/with_mail_sandbox.js | 78 +++++++++++++++++++++++ web-ui/app/js/sandbox.js | 5 ++ web-ui/test/spec/mail_view/ui/mail_view.spec.js | 6 -- web-ui/test/spec/mixins/with_mail_sandbox.spec.js | 14 ++++ 5 files changed, 101 insertions(+), 56 deletions(-) create mode 100644 web-ui/app/js/mixins/with_mail_sandbox.js create mode 100644 web-ui/test/spec/mixins/with_mail_sandbox.spec.js diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js index 6f21b96c..6f57236e 100644 --- a/web-ui/app/js/mail_view/ui/mail_view.js +++ b/web-ui/app/js/mail_view/ui/mail_view.js @@ -23,14 +23,15 @@ define( 'helpers/view_helper', 'mixins/with_hide_and_show', 'mixins/with_mail_tagging', + 'mixins/with_mail_sandbox', 'page/events', 'views/i18n' ], - function (defineComponent, templates, mailActions, viewHelpers, withHideAndShow, withMailTagging, events, i18n) { + function (defineComponent, templates, mailActions, viewHelpers, withHideAndShow, withMailTagging, withMailSandbox, events, i18n) { 'use strict'; - return defineComponent(mailView, mailActions, withHideAndShow, withMailTagging); + return defineComponent(mailView, mailActions, withHideAndShow, withMailTagging, withMailSandbox); function mailView() { this.defaultAttrs({ @@ -71,54 +72,7 @@ define( attachments: attachments })); - var $iframe = $("#read-sandbox"); - var iframe = $iframe[0]; - - var content = viewHelpers.formatMailBody(data.mail); - - iframe.onload = function() { - // use iframe-resizer to dynamically adapt iframe size to its content - var config = { - resizedCallback: scaleToFit, - checkOrigin: false - }; - $iframe.iFrameResize(config); - - // transform scale iframe to fit container width - // necessary if iframe is wider than container - function scaleToFit() { - var parentWidth = $iframe.parent().width(); - var w = $iframe.width(); - var scale = 'none'; - - // only scale html mails - var mail = data.mail; - if (mail && mail.htmlBody && (w > parentWidth)) { - scale = parentWidth / w; - scale = 'scale(' + scale + ',' + scale + ')'; - } - - $iframe.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 - }); - } - - iframe.contentWindow.postMessage({ - html: content - }, '*'); - }; - - - - this.trigger(document, events.search.highlightResults, {where: '.mail-read-view__header'}); - this.trigger(document, events.ui.replyBox.showReplyContainer); + this.showMailOnSandbox(this.attr.mail); this.attachTagCompletion(this.attr.mail); diff --git a/web-ui/app/js/mixins/with_mail_sandbox.js b/web-ui/app/js/mixins/with_mail_sandbox.js new file mode 100644 index 00000000..a156e691 --- /dev/null +++ b/web-ui/app/js/mixins/with_mail_sandbox.js @@ -0,0 +1,78 @@ +/* + * Copyright (c) 2014 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see . + */ +define( + ['helpers/view_helper', 'page/events'], + function(viewHelpers, events) { + 'use strict'; + + function withMailSandbox() { + this.showMailOnSandbox = function(mail) { + var that = this; + var $iframe = $("#read-sandbox"); + var iframe = $iframe[0]; + var content = viewHelpers.formatMailBody(mail); + + window.addEventListener('message', function(e) { + if (e.origin === 'null' && e.source === iframe.contentWindow) { + that.trigger(document, events.ui.replyBox.showReplyContainer); + that.trigger(document, events.search.highlightResults, {where: '.mail-read-view__header'}); + } + }); + + iframe.onload = function() { + // use iframe-resizer to dynamically adapt iframe size to its content + var config = { + resizedCallback: scaleToFit, + checkOrigin: false + }; + $iframe.iFrameResize(config); + + // transform scale iframe to fit container width + // necessary if iframe is wider than container + function scaleToFit() { + var parentWidth = $iframe.parent().width(); + var w = $iframe.width(); + var scale = 'none'; + + // only scale html mails + if (mail && mail.htmlBody && (w > parentWidth)) { + scale = parentWidth / w; + scale = 'scale(' + scale + ',' + scale + ')'; + } + + $iframe.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 + }); + } + + iframe.contentWindow.postMessage({ + html: content + }, '*'); + }; + }; + }; + + return withMailSandbox; + } +); diff --git a/web-ui/app/js/sandbox.js b/web-ui/app/js/sandbox.js index f9e708d6..63ce94b2 100644 --- a/web-ui/app/js/sandbox.js +++ b/web-ui/app/js/sandbox.js @@ -1,6 +1,11 @@ (function () { 'use strict'; + window.addEventListener('message', function(e) { + var mainWindow = e.source; + mainWindow.postMessage('data ok', e.origin); + }); + window.onmessage = function (e) { if (e.data.html) { document.body.innerHTML = e.data.html; diff --git a/web-ui/test/spec/mail_view/ui/mail_view.spec.js b/web-ui/test/spec/mail_view/ui/mail_view.spec.js index 850687be..f44d71ee 100644 --- a/web-ui/test/spec/mail_view/ui/mail_view.spec.js +++ b/web-ui/test/spec/mail_view/ui/mail_view.spec.js @@ -35,12 +35,6 @@ describeComponent('mail_view/ui/mail_view', function () { expect(openNoMessageSelectedEvent).toHaveBeenTriggeredOn(document); }); - it('should open reply container', function () { - var showContainerEvent = spyOnEvent(document, Pixelated.events.ui.replyBox.showReplyContainer); - this.component.displayMail({}, testData); - expect(showContainerEvent).toHaveBeenTriggeredOn(document); - }); - it('removes the tag from the mail when the tag label is clicked', function() { var updateSpy = spyOnEvent(document, Pixelated.events.mail.tags.update); diff --git a/web-ui/test/spec/mixins/with_mail_sandbox.spec.js b/web-ui/test/spec/mixins/with_mail_sandbox.spec.js new file mode 100644 index 00000000..7f5c39a3 --- /dev/null +++ b/web-ui/test/spec/mixins/with_mail_sandbox.spec.js @@ -0,0 +1,14 @@ +describeMixin('mixins/with_mail_sandbox', function() { + 'use strict'; + + beforeEach(function() { + this.setupComponent(); + }); + + it('should open reply container', function () { + var showContainerEvent = spyOnEvent(document, Pixelated.events.ui.replyBox.showReplyContainer); + this.component.showMailOnSandbox(Pixelated.testData().parsedMail.html); + expect(showContainerEvent).toHaveBeenTriggeredOn(document); + }); + +}); -- cgit v1.2.3