summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
authorChristoph <c@kluenter.de>2016-03-09 15:37:18 +0100
committerChristoph <c@kluenter.de>2016-03-09 15:37:18 +0100
commit3994188a0e4d9468518132f179eb56fab7760fbe (patch)
tree224e5d536b9a6c4859671b2cff57f1f60236ef9f /web-ui
parent281f88ba668e38883e822ea5bd96134ad3a3aa6c (diff)
parent23b175742f20d96e5b5d3d9cfcc0ed7067197f92 (diff)
Merge pull request #636 from pixelated/dev/sandbox
Dev/sandbox
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/app/index.html1
-rw-r--r--web-ui/app/js/helpers/sanitizer.js32
-rw-r--r--web-ui/app/js/mail_list/ui/mail_list.js1
-rw-r--r--web-ui/app/js/mail_view/ui/mail_view.js57
-rw-r--r--web-ui/app/js/page/events.js2
-rw-r--r--web-ui/app/js/sandbox.js9
-rw-r--r--web-ui/app/js/search/results_highlighter.js29
-rw-r--r--web-ui/app/sandbox.html17
-rw-r--r--web-ui/app/scss/_read.scss7
-rw-r--r--web-ui/app/scss/sandbox.scss20
-rw-r--r--web-ui/app/templates/mails/full_view.hbs1
-rw-r--r--web-ui/app/templates/search/search_trigger.hbs2
-rw-r--r--web-ui/bower.json3
-rw-r--r--web-ui/config/package.sh20
-rw-r--r--web-ui/package.json1
-rw-r--r--web-ui/test/spec/helpers/sanitizer.spec.js6
-rw-r--r--web-ui/test/spec/mail_view/ui/mail_view.spec.js6
-rw-r--r--web-ui/test/spec/search/results_highlighter.spec.js14
18 files changed, 210 insertions, 18 deletions
diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 2d35662c..107e9102 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -100,6 +100,7 @@
<script src="assets/bower_components/foundation/js/foundation/foundation.reveal.js" ></script>
<script src="assets/bower_components/foundation/js/foundation/foundation.offcanvas.js"></script>
<script src="assets/js/foundation/initialize_foundation.js"></script>
+<script src="assets/bower_components/iframe-resizer/js/iframeResizer.min.js"></script>
<script src="assets/bower_components/requirejs/require.js" data-main="assets/js/main.js"></script>
<!--usemin_end-->
diff --git a/web-ui/app/js/helpers/sanitizer.js b/web-ui/app/js/helpers/sanitizer.js
index eea1f0f7..443e8602 100644
--- a/web-ui/app/js/helpers/sanitizer.js
+++ b/web-ui/app/js/helpers/sanitizer.js
@@ -23,6 +23,16 @@ define(['DOMPurify', 'he'], function (DOMPurify, he) {
*/
var sanitizer = {};
+ sanitizer.whitelist = [{
+ // highlight tag open
+ pre: '&#x3C;&#x65;&#x6D;&#x20;&#x63;&#x6C;&#x61;&#x73;&#x73;&#x3D;&#x22;&#x73;&#x65;&#x61;&#x72;&#x63;&#x68;&#x2D;&#x68;&#x69;&#x67;&#x68;&#x6C;&#x69;&#x67;&#x68;&#x74;&#x22;&#x3E;',
+ post: '<em class="search-highlight">'
+ }, {
+ // highlight tag close
+ pre: '&#x3C;&#x2F;&#x65;&#x6D;&#x3E;',
+ post: '</em>'
+ }];
+
/**
* Adds html line breaks to a plaintext with line breaks (incl carriage return)
*
@@ -55,16 +65,24 @@ define(['DOMPurify', 'he'], function (DOMPurify, he) {
};
/**
- * Runs a given dirty body through he, thereby encoding everything
- * as HTML entities.
- *
- * @param {string} dirtyBody The unsanitized string
- * @return {string} Safe-to-display HTML string
- */
+ * Runs a given dirty body through he, thereby encoding everything
+ * as HTML entities.
+ *
+ * @param {string} dirtyBody The unsanitized string
+ * @return {string} Safe-to-display HTML string
+ */
sanitizer.purifyText = function (dirtyBody) {
- return he.encode(dirtyBody, {
+ var escapedBody = he.encode(dirtyBody, {
encodeEverything: true
});
+
+ this.whitelist.forEach(function(entry) {
+ while (escapedBody.indexOf(entry.pre) > -1) {
+ escapedBody = escapedBody.replace(entry.pre, entry.post);
+ }
+ });
+
+ return escapedBody;
};
/**
diff --git a/web-ui/app/js/mail_list/ui/mail_list.js b/web-ui/app/js/mail_list/ui/mail_list.js
index 18d36049..0f6c4fb5 100644
--- a/web-ui/app/js/mail_list/ui/mail_list.js
+++ b/web-ui/app/js/mail_list/ui/mail_list.js
@@ -81,7 +81,6 @@ define(
this.renderMails = function (mails) {
_.each(mails, this.appendMail, this);
this.trigger(document, events.search.highlightResults, {where: '#mail-list'});
- this.trigger(document, events.search.highlightResults, {where: '.bodyArea'});
this.trigger(document, events.search.highlightResults, {where: '.subjectArea'});
this.trigger(document, events.search.highlightResults, {where: '.msg-header .recipients'});
};
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 dfc57585..d952fed7 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -71,9 +71,52 @@ define(
attachments: attachments
}));
- this.$node.find('.bodyArea').html(viewHelpers.formatMailBody(data.mail));
+ 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: '.bodyArea'});
this.trigger(document, events.search.highlightResults, {where: '.subjectArea'});
this.trigger(document, events.search.highlightResults, {where: '.msg-header .recipients'});
this.trigger(document, events.ui.replyBox.showReplyContainer);
@@ -214,9 +257,17 @@ define(
this.trigger(events.mail.want, {mail: this.attr.ident, caller: this});
};
+ this.highlightMailContent = function (event, data) {
+ // we can't directly manipulate the iFrame to highlight the content
+ // so we need to take an indirection where we directly manipulate
+ // the mail content to accomodate the highlighting
+ this.trigger(document, events.mail.highlightMailContent, data);
+ };
+
this.after('initialize', function () {
- this.on(this, events.mail.here, this.displayMail);
this.on(this, events.mail.notFound, this.openNoMessageSelectedPane);
+ this.on(this, events.mail.here, this.highlightMailContent);
+ this.on(document, events.mail.display, this.displayMail);
this.on(document, events.dispatchers.rightPane.clear, this.teardown);
this.on(document, events.mail.tags.updated, this.tagsUpdated);
this.on(document, events.mail.deleted, this.mailDeleted);
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index 7a0dbf9d..ad15e76e 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -121,6 +121,8 @@ define(function () {
mail: {
here: 'mail:here',
want: 'mail:want',
+ display: 'mail:display',
+ highlightMailContent: 'mail:highlightMailContent',
send: 'mail:send',
send_failed: 'mail:send_failed',
sent: 'mail:sent',
diff --git a/web-ui/app/js/sandbox.js b/web-ui/app/js/sandbox.js
new file mode 100644
index 00000000..f9e708d6
--- /dev/null
+++ b/web-ui/app/js/sandbox.js
@@ -0,0 +1,9 @@
+(function () {
+ 'use strict';
+
+ window.onmessage = function (e) {
+ if (e.data.html) {
+ document.body.innerHTML = e.data.html;
+ }
+ };
+})();
diff --git a/web-ui/app/js/search/results_highlighter.js b/web-ui/app/js/search/results_highlighter.js
index 9e3ba167..831be0cd 100644
--- a/web-ui/app/js/search/results_highlighter.js
+++ b/web-ui/app/js/search/results_highlighter.js
@@ -40,6 +40,7 @@ define(
var domIdent = data.where;
if(this.attr.keywords) {
_.each(this.attr.keywords, function (keyword) {
+ keyword = escapeRegExp(keyword);
$(domIdent).highlightRegex(new RegExp(keyword, 'i'), {
tagType: 'em',
className: 'search-highlight'
@@ -57,12 +58,40 @@ define(
});
};
+ this.highlightString = function (string) {
+ _.each(this.attr.keywords, function (keyword) {
+ keyword = escapeRegExp(keyword);
+ var regex = new RegExp('(' + keyword + ')', 'ig');
+ string = string.replace(regex, '<em class="search-highlight">$1</em>');
+ });
+ return string;
+ };
+
+ /*
+ * Alter data.mail.textPlainBody to highlight each of this.attr.keywords
+ * and pass it back to the mail_view when done
+ */
+ this.highlightMailContent = function(ev, data){
+ var mail = data.mail;
+ mail.textPlainBody = this.highlightString(mail.textPlainBody);
+ this.trigger(document, events.mail.display, data);
+ };
+
+ /*
+ * Escapes the special charaters used regular expressions that
+ * would cause problems with strings in the RegExp constructor
+ */
+ function escapeRegExp(string){
+ return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+ }
+
this.after('initialize', function () {
this.on(document, events.search.perform, this.getKeywordsSearch);
this.on(document, events.ui.tag.select, this.clearHighlights);
this.on(document, events.search.resetHighlight, this.clearHighlights);
this.on(document, events.search.highlightResults, this.highlightResults);
+ this.on(document, events.mail.highlightMailContent, this.highlightMailContent);
});
}
});
diff --git a/web-ui/app/sandbox.html b/web-ui/app/sandbox.html
new file mode 100644
index 00000000..13a86f25
--- /dev/null
+++ b/web-ui/app/sandbox.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <link href="css/opensans.css" rel="stylesheet" type="text/css">
+ <link href="css/sandbox.css" rel="stylesheet" type="text/css">
+
+ <!--usemin_start-->
+ <script src="js/sandbox.js"></script>
+ <script src="bower_components/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>
+ <!--usemin_end-->
+</head>
+
+<body></body>
+
+</html>
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index 2c079408..236a7c7c 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -66,6 +66,13 @@
.bodyArea {
padding: 10px 30px 0 30px;
+ box-sizing: border-box;
+
+ iframe {
+ box-sizing: inherit;
+ border: none;
+ width: 100%;
+ }
}
.attachmentsAreaWrap {
diff --git a/web-ui/app/scss/sandbox.scss b/web-ui/app/scss/sandbox.scss
new file mode 100644
index 00000000..3cb4c441
--- /dev/null
+++ b/web-ui/app/scss/sandbox.scss
@@ -0,0 +1,20 @@
+$search-highlight: #FFEF29;
+
+body {
+ font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
+ font-size: 13px;
+ line-height: 1.2em;
+ background: white;
+ color: #333;
+ padding: 0;
+ margin: 0;
+ font-weight: normal;
+ -webkit-font-smoothing: antialiased;
+ font-style: normal;
+ box-sizing: border-box;
+ word-wrap: break-word;
+}
+
+.search-highlight {
+ background-color: $search-highlight;
+}
diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs
index f9ec084a..3ff109e9 100644
--- a/web-ui/app/templates/mails/full_view.hbs
+++ b/web-ui/app/templates/mails/full_view.hbs
@@ -64,6 +64,7 @@
</header>
<div class="bodyArea column large-12">
+ <iframe id="read-sandbox" sandbox="allow-popups allow-scripts" src="sandbox/sandbox.html" scrolling="no"></iframe>
</div>
{{#if attachments}}
diff --git a/web-ui/app/templates/search/search_trigger.hbs b/web-ui/app/templates/search/search_trigger.hbs
index 2261d154..f2c410a4 100644
--- a/web-ui/app/templates/search/search_trigger.hbs
+++ b/web-ui/app/templates/search/search_trigger.hbs
@@ -1,3 +1,3 @@
<form>
- <input type="search" placeholder="{{t 'search-placeholder'}}"></input>
+ <input type="search" pattern="[a-zA-Z0-9\s]{3,}" placeholder="{{t 'search-placeholder'}}"></input>
</form>
diff --git a/web-ui/bower.json b/web-ui/bower.json
index 263ac2e4..018a57c4 100644
--- a/web-ui/bower.json
+++ b/web-ui/bower.json
@@ -17,7 +17,8 @@
"jquery-file-upload": "~9.11.2",
"jquery-ui": "~1.11.4",
"DOMPurify": "~0.7.4",
- "he": "~0.5.0"
+ "he": "~0.5.0",
+ "iframe-resizer": "~3.5.3"
},
"devDependencies": {
"handlebars": "2.0.0",
diff --git a/web-ui/config/package.sh b/web-ui/config/package.sh
index 9b6bc66c..0bd82367 100644
--- a/web-ui/config/package.sh
+++ b/web-ui/config/package.sh
@@ -28,16 +28,24 @@ mkdir -p dist
./go handlebars
./go imagemin
./go minify_html
+./go minify_sandbox
./go add_git_version
./go buildmain
# copy files
cd app
-cp --parents 404.html fonts/* locales/**/* bower_components/font-awesome/css/font-awesome.min.css bower_components/jquery-file-upload/css/jquery.fileupload.css bower_components/font-awesome/fonts/* ../dist
+cp --parents \
+404.html \
+fonts/* \
+locales/**/* \
+bower_components/font-awesome/css/font-awesome.min.css \
+bower_components/jquery-file-upload/css/jquery.fileupload.css \
+bower_components/font-awesome/fonts/* \
+../dist
cd -
-# concat js files and minify
+# concat js files and minify for app.min.js
cat \
app/bower_components/modernizr/modernizr.js \
app/bower_components/lodash/dist/lodash.js \
@@ -51,6 +59,14 @@ app/bower_components/foundation/js/foundation.js \
app/bower_components/foundation/js/foundation/foundation.reveal.js \
app/bower_components/foundation/js/foundation/foundation.offcanvas.js \
app/js/foundation/initialize_foundation.js \
+app/bower_components/iframe-resizer/js/iframeResizer.min.js \
.tmp/app.concatenated.js > dist/app.js
node_modules/.bin/minify dist/app.js > dist/app.min.js
rm dist/app.js
+
+# concat js files and minify for sandbox.min.js
+cat \
+app/js/sandbox.js \
+app/bower_components/iframe-resizer/js/iframeResizer.contentWindow.min.js > dist/sandbox.js
+node_modules/.bin/minify dist/sandbox.js > dist/sandbox.min.js
+rm dist/sandbox.js
diff --git a/web-ui/package.json b/web-ui/package.json
index a49e32d1..0e8b9262 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -38,6 +38,7 @@
"package": "/bin/bash config/package.sh",
"imagemin": "node config/imagemin.js",
"minify_html": "node_modules/.bin/html-minifier app/index.html --collapse-whitespace | sed 's|<!--usemin_start-->.*<!--usemin_end-->|<script src=\"assets/app.min.js\" type=\"text/javascript\"></script>|' > dist/index.html",
+ "minify_sandbox": "node_modules/.bin/html-minifier app/sandbox.html --collapse-whitespace | sed 's|<!--usemin_start-->.*<!--usemin_end-->|<script src=\"sandbox.min.js\" type=\"text/javascript\"></script>|' > dist/sandbox.html",
"add_git_version": "/bin/bash config/add_git_version.sh"
}
}
diff --git a/web-ui/test/spec/helpers/sanitizer.spec.js b/web-ui/test/spec/helpers/sanitizer.spec.js
index acd4b2b2..b553583e 100644
--- a/web-ui/test/spec/helpers/sanitizer.spec.js
+++ b/web-ui/test/spec/helpers/sanitizer.spec.js
@@ -25,6 +25,12 @@ define(['helpers/sanitizer'], function (sanitizer) {
var output = sanitizer.purifyText('123<a>asd</a>');
expect(output).toEqual(expectedOutput);
});
+
+ it('should leave highlighted text untouched', function () {
+ var expectedOutput = '<em class="search-highlight">&#x31;&#x32;&#x33;&#x3C;&#x61;&#x3E;&#x61;&#x73;&#x64;&#x3C;&#x2F;&#x61;&#x3E;</em>';
+ var output = sanitizer.purifyText('<em class="search-highlight">123<a>asd</a></em>');
+ expect(output).toEqual(expectedOutput);
+ });
});
describe('sanitizer.sanitize', function () {
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 9ed56023..9f1114a7 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
@@ -21,6 +21,12 @@ describeComponent('mail_view/ui/mail_view', function () {
expect(spyEvent.mostRecentCall.data.mail).toEqual(1);
});
+ it('triggers mail.highlightMailContent when receiving mail.here', function () {
+ var hightlightEvent = spyOnEvent(document,Pixelated.events.mail.highlightMailContent);
+ this.component.trigger(this.component, Pixelated.events.mail.here);
+ expect(hightlightEvent).toHaveBeenTriggeredOn(document);
+ });
+
it('triggers dispatchers.rightPane.openNoMessageSelected when getting mail.notFound', function () {
var openNoMessageSelectedEvent = spyOnEvent(document, Pixelated.events.dispatchers.rightPane.openNoMessageSelected);
diff --git a/web-ui/test/spec/search/results_highlighter.spec.js b/web-ui/test/spec/search/results_highlighter.spec.js
index cfb61e9c..13131a8e 100644
--- a/web-ui/test/spec/search/results_highlighter.spec.js
+++ b/web-ui/test/spec/search/results_highlighter.spec.js
@@ -1,9 +1,11 @@
describeComponent('search/results_highlighter', function () {
'use strict';
- it('highlights words or parts of words that match with the keywords given', function () {
+ beforeEach(function () {
this.setupComponent('<div id="text">Any one seeing too many open bugs</div>');
+ });
+ it('highlights words or parts of words that match with the keywords given', function () {
this.component.attr = {keywords: ['any']};
this.component.highlightResults(event, {where: '#text'});
@@ -12,9 +14,15 @@ describeComponent('search/results_highlighter', function () {
expect(highlightedWords).toEqual(2);
});
- it('resets highlights when a new search is performed', function() {
- this.setupComponent('<div id="text">Any one seeing too many open bugs</div>');
+ it('highlights a string with the keywords given', function () {
+ this.component.attr = {keywords: ['foo']};
+ var expectedString = 'the <em class="search-highlight">foo</em> bar';
+ var string = this.component.highlightString('the foo bar');
+
+ expect(string).toEqual(expectedString);
+ });
+ it('resets highlights when a new search is performed', function() {
this.component.attr = {keywords: ['any']};
this.component.highlightResults(event, {where: '#text'});
$(document).trigger(Pixelated.events.search.resetHighlight);