Fix styling and clean up registration API

Signed-off-by: Julius Härtl <[email protected]>

src/References.vue → src/ReferenceList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="{'icon-loading': loading }">
+	<div class="widgets--list" :class="{'icon-loading': loading }">
 		<div v-for="reference in displayedReferences" :key="reference.openGraphObject.id">
 			<ReferenceWidget :reference="reference" />
 		</div>
@@ -9,9 +9,9 @@
 import ReferenceWidget from './ReferenceWidget.vue'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
-
+import { isWidgetRegistered } from './widgets.js'
 export default {
-	name: 'References',
+	name: 'ReferenceList',
 	components: { ReferenceWidget },
 	props: {
 		text: {
@@ -20,7 +20,7 @@ export default {
 		},
 		referenceData: {
 			type: Object,
-			default: null,
+			default: null
 		},
 		limit: {
 			type: Number,
@@ -41,7 +41,7 @@ export default {
 			return this.references ? Object.values(this.references).slice(0, this.limit) : null
 		},
 		hasCustomWidget() {
-			return (reference) => !!widgets[reference.richObjectType]
+			return (reference) => isWidgetRegistered(reference.richObjectType)
 		},
 		noAccess() {
 			return (reference) => reference && !reference.accessible
@@ -70,9 +70,15 @@ export default {
 				this.references = response.data.ocs.data.references
 				this.loading = false
 			}).catch((error) => {
+				console.error('Failed to extract references', error)
 				this.loading = false
 			})
 		}
 	}
 }
-</script>
+</script>
+<style lang="scss" scoped>
+.widgets--list {
+	min-height: 44px;
+}
+</style>

src/ReferenceWidget.vue

@@ -1,23 +1,21 @@
 <template>
 	<div>
-		<div v-if="noAccess" class="widget-default">
-			<p>You may not have access to this reference!</p>
+		<div v-if="reference && hasCustomWidget" class="widget-custom">
+			<div ref="customWidget" />
 		</div>
 
-		<div v-else-if="reference && hasCustomWidget" ref="customWidget" class="widget-custom" />
+		<div v-else-if="noAccess" class="widget-access">
+			<p>You may not have access to this reference!</p>
+		</div>
 
-		<div v-else-if="reference && reference.openGraphObject && !hasCustomWidget" class="widget-default">
+		<a v-else-if="reference && reference.openGraphObject && !hasCustomWidget" :href="reference.openGraphObject.link" class="widget-default">
 			<div v-if="reference.openGraphObject.thumb" class="widget-default--image" :style="{ 'backgroundImage': 'url(' + reference.openGraphObject.thumb + ')' }" />
-			<p class="widget-default--title">
-				<strong>{{ reference.openGraphObject.name }}</strong>
-			</p>
-			<p class="widget-default--description">
-				{{ reference.openGraphObject.description }}
-			</p>
-			<p class="widget-default--link">
-				<a :href="reference.openGraphObject.link" target="_blank">{{ reference.openGraphObject.link }}</a>
-			</p>
-		</div>
+			<div class="widget-default--details">
+				<p class="widget-default--title">{{ reference.openGraphObject.name }}</p>
+				<p class="widget-default--description">{{ reference.openGraphObject.description }}</p>
+				<p class="widget-default--link">{{ reference.openGraphObject.link }}</p>
+			</div>
+		</a>
 	</div>
 </template>
 <script>
@@ -55,36 +53,69 @@ export default {
 			}
 			this.$nextTick(() => {
 				// Waiting for the ref to become available
-				renderWidget(this.reference.richObjectType, this.reference.richObject, this.$refs.customWidget)
+				renderWidget(this.$refs.customWidget, this.reference)
 			})
 		}
 	}
 }
 </script>
 <style lang="scss" scoped>
-.widget-custom {
-	max-width: 500px;
+
+@mixin widget {
+	width: 100%;
 	margin: auto;
-	margin-bottom: 10px;
-	padding: 12px;
+	margin-bottom: 12px;
+	margin-top: 12px;
+	overflow: hidden;
+	border: 2px solid var(--color-border);
 	border-radius: var(--border-radius-large);
-	background-color: var(--color-primary-light);
+	background-color: transparent;
+	display: flex;
 }
 
-.widget-default {
-	max-width: 500px;
-	margin: auto;
-	margin-bottom: 10px;
+.widget-custom {
+	@include widget;
+}
+
+.widget-access {
+	@include widget;
 	padding: 12px;
-	border-radius: var(--border-radius-large);
-	background-color: var(--color-background-dark);
+}
+
+.widget-default {
+	@include widget;
 
 	&--image {
-		// FIXME: open graph images are likely 1.91:1 ratio
-		height: 260px;
-		width: 500px;
+		width: 40%;
 		background-position: center;
 		background-size: cover;
+		background-repeat: no-repeat;
+	}
+
+	&--title {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: bold;
+	}
+
+	&--details {
+		padding: 12px;
+		width: 60%;
+
+		p {
+			margin: 0;
+			padding: 0;
+		}
+	}
+
+	&--description {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		line-clamp: 3;
+		-webkit-box-orient: vertical;
 	}
 
 	&--link a {

src/RichText.vue

@@ -23,7 +23,7 @@
 
 <script>
 import { unified } from 'unified'
-import References from './References.vue'
+import ReferenceList from './ReferenceList.vue'
 import markdown from 'remark-parse'
 import breaks from 'remark-breaks'
 import remark2rehype from 'remark-rehype'
@@ -36,7 +36,7 @@ import { remarkPlaceholder, prepareTextNode } from './placeholder.js'
 export default {
 	name: 'RichText',
 	components: {
-		References
+		ReferenceList
 	},
 	props: {
 		text: {
@@ -55,7 +55,8 @@ export default {
 		},
 		/** Provide data upfront to avoid extra http request */
 		references: {
-			type: Object
+			type: Object,
+			default: null
 		},
 		markdownCssClasses: {
 			type: Object,
@@ -118,7 +119,7 @@ export default {
 				h('div', {}, placeholders.flat()),
 				this.referenceLimit > 0
 					? h('div', { class: 'rich-text--reference-widget' }, [
-						h(References, { props: { text: this.text, referenceData: this.references } })
+						h(ReferenceList, { props: { text: this.text, referenceData: this.references } })
 					])
 					: null
 			])
@@ -178,7 +179,7 @@ export default {
 				renderedMarkdown,
 				this.referenceLimit > 0
 					? h('div', { class: 'rich-text--reference-widget' }, [
-						h(References, { props: { text: this.text, referenceData: this.references } })
+						h(ReferenceList, { props: { text: this.text, referenceData: this.references } })
 					])
 					: null
 			])

src/package.js

@@ -1,16 +1,16 @@
 import RichText from './RichText.vue'
 import { registerWidget, renderWidget, isWidgetRegistered } from './widgets'
-import References from './References.vue'
+import ReferenceList from './ReferenceList.vue'
 import ReferenceWidget from './ReferenceWidget.vue'
 
 export default RichText
 
 export {
-    RichText,
-    References,
-    ReferenceWidget,
+	RichText,
+	ReferenceList,
+	ReferenceWidget,
 
-    registerWidget,
-    renderWidget,
-    isWidgetRegistered,
-}
+	registerWidget,
+	renderWidget,
+	isWidgetRegistered
+}

src/widgets.js

@@ -19,17 +19,17 @@ const registerWidget = (id, callback) => {
 	}
 }
 
-const renderWidget = (id, richObjectData, el) => {
-	if (id === 'open-graph') {
+const renderWidget = (el, { richObjectType, richObject, accessible }) => {
+	if (richObjectType === 'open-graph') {
 		return
 	}
 
-	if (!window._vue_richtext_widgets[id]) {
-		console.error('Widget for id ' + id + ' not registered')
+	if (!window._vue_richtext_widgets[richObjectType]) {
+		console.error('Widget for rich object type ' + richObjectType + ' not registered')
 		return
 	}
 
-	window._vue_richtext_widgets[id].callback(richObjectData, el)
+	window._vue_richtext_widgets[richObjectType].callback(el, { richObjectType, richObject, accessible })
 }
 
 window._registerWidget = registerWidget