display open-graphopen-graph

Signed-off-by: Maxence Lange <maxence@nextcloud.com>

2 files changed, 55 insertions, 0 deletions

diff --git a/css/style.css b/css/style.css
index 5028bb09..e11c589f 100755
--- a/css/style.css
+++ b/css/style.css
@@ -225,3 +225,45 @@
 	position: relative;
 	cursor: pointer;
 }
+
+.opengraph {
+	margin: 10px;
+	max-width: 700px;
+	height: 125px;
+	position: relative;
+	border: 1px solid #ddd;
+	padding-right: 15px;
+}
+
+.opengraph-name {
+	font-size: 15px;
+	padding-left: 5px;
+	font-weight: bold;
+	margin: 10px 5px 5px 5px;
+}
+
+.opengraph-description {
+	padding-left: 10px;
+}
+
+.opengraph-thumb {
+	width: 160px;
+	height: 119px;
+	margin: 3px 15px 5px 3px;
+	position: absolute;
+	background: #eee center no-repeat;
+	background-size: 220px;
+}
+
+.opengraph-with-thumb {
+	margin-left: 175px;
+}
+
+.opengraph-website {
+	position: absolute;
+	right: 10px;
+	bottom: 0;
+	font-size: 10px;
+	text-transform: uppercase;
+	color: #999;
+}
diff --git a/js/richObjectStringParser.js b/js/richObjectStringParser.js
index 8c01c70b..5bf768d0 100644
--- a/js/richObjectStringParser.js
+++ b/js/richObjectStringParser.js
@@ -23,6 +23,12 @@
 		_userLocalTemplate: '<span class="avatar-name-wrapper" data-user="{{id}}"><div class="avatar" data-user="{{id}}" data-user-display-name="{{name}}"></div><strong>{{name}}</strong></span>',
 		_userRemoteTemplate: '<strong>{{name}}</strong>',
 
+		_openGraphTemplate: '{{#if link}}<a href="{{link}}">{{/if}}<div id="opengraph-{{id}}" class="opengraph">' +
+		'{{#if thumb}}<div class="opengraph-thumb" style="background-image: url(\'{{thumb}}\')"></div>{{/if}}' +
+		'<div class="opengraph-name {{#if thumb}}opengraph-with-thumb{{/if}}">{{name}}</div>' +
+		'<div class="opengraph-description {{#if thumb}}opengraph-with-thumb{{/if}}">{{description}}</div>' +
+		'<span class="opengraph-website">{{website}}</span></div>{{#if link}}</a>{{/if}}',
+
 		_unknownTemplate: '<strong>{{name}}</strong>',
 		_unknownLinkTemplate: '<a href="{{link}}">{{name}}</a>',
 
@@ -81,6 +87,13 @@
 
 					return this.emailTemplate(parameter);
 
+				case 'open-graph':
+					if (!this.openGraphTemplate) {
+						this.openGraphTemplate = Handlebars.compile(this._openGraphTemplate);
+					}
+
+					return this.openGraphTemplate(parameter);
+
 				case 'user':
 					if (_.isUndefined(parameter.server)) {
 						if (!this.userLocalTemplate) {