From 6ed3b922989daabecada6cd12ba4a03061f78bc9 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Thu, 24 Nov 2016 14:35:54 +0100 Subject: [PATCH] Work in progress of mail external image handler: - Fix styling - Add handler for mobile and display --- api/src/Html/HtmLawed.php | 3 +- mail/js/app.js | 96 ++++++++++-------------------- mail/templates/default/preview.css | 54 +++++++++++++++++ 3 files changed, 85 insertions(+), 68 deletions(-) diff --git a/api/src/Html/HtmLawed.php b/api/src/Html/HtmLawed.php index 3c8f86c012..6cbd051a92 100644 --- a/api/src/Html/HtmLawed.php +++ b/api/src/Html/HtmLawed.php @@ -399,8 +399,7 @@ function hl_email_tag_transform($element, $attribute_array=0) } if (!preg_match('/^cid:.*/',$attribute_array['src'])) { - $url = preg_replace('/^(http|https):\/\//','',$attribute_array['src']); - $url = explode('/', $url); + $url = explode('/', preg_replace('/^(http|https):\/\//','',$attribute_array['src'])); if (!in_array($url[0], $GLOBALS['egw_info']['user']['preferences']['mail']['allowExternalIMGs'])) { //the own webserver url is not external, so it should be allowed diff --git a/mail/js/app.js b/mail/js/app.js index e0fbfd30a1..4bb0c2887e 100644 --- a/mail/js/app.js +++ b/mail/js/app.js @@ -198,7 +198,7 @@ app.classes.mail = AppJS.extend( // encrypt body if mailvelope is available self.mailvelopeAvailable(self.mailvelopeDisplay); self.mail_prepare_print(); - + self.resolveExternalImages(this.contentWindow.document); // Trigger print command if the mail oppend for printing porpuse // load event fires twice in IE and the first time the content is not ready // Check if the iframe content is loaded then trigger the print command @@ -1036,29 +1036,8 @@ app.classes.mail = AppJS.extend( if (external_images.length > 0 && jQuery(_node).find('.mail_externalImagesMsg').length == 0) { var container = jQuery(document.createElement('div')) - .addClass('mail_externalImagesMsg') - .css({ - "display": 'block', - "position": 'fixed', - "height": '50px', - "width": '100%', - "top": '0', - "left": '0', - "background":'#ffe5a5', - "border-top": '1px solid #8f8b8b', - "box-shadow": '0px 1px 13px 2px #8f8b8b' - }); - var button_style = { - "float": "right", - "margin": "15px", - "display": "inline-block", - "background-color": "transparent", - "border": "none", - "font-weight": "bold", - "color": "#30558c", - "cursor": "pointer", - "text-decoration": "underline" - }; + .click(function(){jQuery(this).remove();}) + .addClass('mail_externalImagesMsg'); var getUrlParts = function (_rawUrl) { var u = _rawUrl.split('[blocked external image:'); u = u[1].replace(']',''); @@ -1073,10 +1052,27 @@ app.classes.mail = AppJS.extend( } var host = getUrlParts(external_images[0].alt); - var showImages = function (_images) + var showImages = function (_images, _save) { - _images.each(function(i, node){ + var save = _save || false; + _images.each(function(i, node) { var parts = getUrlParts (node.alt); + if (save) + { + if (pref && pref.length) + { + if (pref.indexOf(parts.domain) == -1) + { + pref.push(parts.domain); + egw.set_preference( 'mail', 'allowExternalIMGs', pref); + } + } + else + { + pref = [parts.domain]; + egw.set_preference( 'mail', 'allowExternalIMGs', pref); + } + } node.src = parts.url; }); } @@ -1088,56 +1084,24 @@ app.classes.mail = AppJS.extend( return; } - var text = jQuery(document.createElement('p')) - .css({ - "display": 'inline-block', - "width":'60%', - "font-size":'11pt', - "margin": '15px', - "color": '#1f1f1f' - }) + jQuery(document.createElement('p')) .text(egw.lang('In order to protect your privacy all external sources within this email are blocked.')) .appendTo(container); - var closeBtn = jQuery(document.createElement('button')) - .css ({ - "float":'right', - "background-image":'url(pixelegg/images/close.png)', - "height": '50px', - "width": '50px', - "background-repeat": 'no-repeat', - "background-position": 'center', - "background-size": '22px', - "background-color": 'transparent', - "border": 'none', - "cursor": 'pointer', - "display": 'inline-block' - }) + jQuery(document.createElement('button')) + .addClass ('closeBtn') .click (function (){ container.remove(); }) .appendTo(container); - var alwaysBtn = jQuery(document.createElement('button')) - .css(button_style) + jQuery(document.createElement('button')) .text(egw.lang('Allow')) .attr ('title', egw.lang('Always allow external sources from %1', host.domain)) .click (function (){ - - - if (pref && pref.length) - { - pref.push(host.domain); - } - else - { - pref = [host.domain]; - } - egw.set_preference( 'mail', 'allowExternalIMGs', pref); - showImages(external_images); + showImages(external_images, true); container.remove(); }) .appendTo(container); - var alwaysBtn = jQuery(document.createElement('button')) - .css(button_style) + jQuery(document.createElement('button')) .text(egw.lang('Show')) .attr ('title', egw.lang('Show them this time only')) .click(function(){ @@ -1145,8 +1109,7 @@ app.classes.mail = AppJS.extend( container.remove(); }) .appendTo(container); - container.appendTo(_node.body); - + container.appendTo(_node.body? _node.body:_node); } }, @@ -5527,6 +5490,7 @@ app.classes.mail = AppJS.extend( } else { + self.resolveExternalImages(this.contentWindow.document) // Use prepare print function to copy iframe content into div // as we don't want to show content in iframe (scrolling problem). self.mail_prepare_print(jQuery(this)); diff --git a/mail/templates/default/preview.css b/mail/templates/default/preview.css index 197500b549..c47126b37b 100644 --- a/mail/templates/default/preview.css +++ b/mail/templates/default/preview.css @@ -63,3 +63,57 @@ blockquote blockquote blockquote blockquote blockquote blockquote{ #divAppboxHeader { display: none; } + +.mail_externalImagesMsg { + display: block; + position: fixed; + height: 30px; + width: 100%; + top: 0px; + left: 0px; + background: rgb(255, 229, 165); + border-top: 1px solid rgb(143, 139, 139); + box-shadow: rgb(143, 139, 139) 0px 1px 13px 2px; +} + +.mail_externalImagesMsg button { + float: right; + margin: 7px; + display: inline-block; + background-color: transparent; + border: none; + font-weight: bold; + color: rgb(48, 85, 140); + cursor: pointer; + text-decoration: underline; +} +.mail_externalImagesMsg button:hover { + color: rgb(20, 48, 88); +} + +.mail_externalImagesMsg p { + display: inline-block; + width: 60%; + font-size: 11pt; + margin: 7px 7px 7px 10px; + color: rgb(31, 31, 31); +} + +.mail_externalImagesMsg button.closeBtn { + float: right; + background-image: url(../../../pixelegg/images/close.png); + height: 30px; + width: 50px; + background-repeat: no-repeat; + background-position: center center; + background-size: 22px; + background-color: transparent; + border: none; + cursor: pointer; + display: inline-block; + margin: 0; + opacity:0.6; +} +.mail_externalImagesMsg button.closeBtn:hover { + opacity: 1; +} \ No newline at end of file