feat: Implement full width support for widgets

Signed-off-by: Julius Härtl <[email protected]>
nextcloud-libraries · Mar 4, 2024 · f720350 · f720350
1 parent 3a87840
commit f720350
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/src/components/NcRichText/NcReferenceList.vue b/src/components/NcRichText/NcReferenceList.vue
@@ -127,6 +127,10 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.widget--list {
+	width: var(--widget-full-width, 100%);
+}
+
 .widgets--list.icon-loading {
 	min-height: 44px;
 }

diff --git a/src/components/NcRichText/NcReferenceWidget.vue b/src/components/NcRichText/NcReferenceWidget.vue
@@ -1,6 +1,9 @@
 <template>
 	<div :class="{'toggle-interactive': hasInteractiveView && !isInteractive }">
-		<div v-if="reference && hasCustomWidget" ref="customWidget" class="widget-custom" />
+		<div v-if="reference && hasCustomWidget"
+			ref="customWidget"
+			class="widget-custom"
+			:class="{ 'full-width': hasFullWidth }" />
 
 		<component :is="referenceWidgetLinkComponent"
 			v-else-if="!noAccess && reference && reference.openGraphObject && !hasCustomWidget"
@@ -29,7 +32,7 @@
 import { RouterLink } from 'vue-router'
 
 import { getRoute } from './autolink.js'
-import { renderWidget, isWidgetRegistered, destroyWidget, hasInteractiveView } from './../../functions/reference/widgets.ts'
+import { renderWidget, isWidgetRegistered, destroyWidget, hasInteractiveView, hasFullWidth } from './../../functions/reference/widgets.ts'
 import { useIntersectionObserver, useResizeObserver } from '@vueuse/core'
 import NcButton from '../../components/NcButton/index.js'
 import { t } from '../../l10n.js'
@@ -66,6 +69,9 @@ export default {
 		isInteractive() {
 			return (!this.interactiveOptIn && this.interactive) || this.showInteractive
 		},
+		hasFullWidth() {
+			return hasFullWidth(this.reference.richObjectType)
+		},
 		hasCustomWidget() {
 			return isWidgetRegistered(this.reference.richObjectType)
 		},
@@ -195,6 +201,12 @@ export default {
 
 .widget-custom {
 	@include widget;
+
+	&.full-width {
+		width: var(--widget-full-width, 100%) !important;
+		left: calc( (var(--widget-full-width, 100%) - 100%) / 2 * -1);
+		position: relative;
+	}
 }
 
 .widget-access {

diff --git a/src/functions/reference/widgets.ts b/src/functions/reference/widgets.ts
@@ -11,12 +11,14 @@ type widgetDestroyCallback = (el: HTMLElement) => void;
 interface WidgetProps {
 	id: string;
 	hasInteractiveView: boolean;
+	fullWidth: boolean;
 	callback: widgetRenderCallback;
 	onDestroy: widgetDestroyCallback;
 }
 
 interface WidgetPropsOptional {
 	hasInteractiveView?: boolean;
+	fullWidth?: boolean;
 }
 
 declare global {
@@ -38,10 +40,15 @@ const hasInteractiveView = (id: string) => {
 	return !!window._vue_richtext_widgets[id]?.hasInteractiveView
 }
 
+export const hasFullWidth = (id: string) => {
+	return !!window._vue_richtext_widgets[id]?.fullWidth ?? false
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const registerWidget = (id: string, callback: widgetRenderCallback, onDestroy = (el: HTMLElement) => {}, props: WidgetPropsOptional) => {
 	const propsWithDefaults = {
 		hasInteractiveView: true,
+		fullWidth: false,
 		...props,
 	}