Merge pull request #8665 from nextcloud-libraries/feat/stable8/resize_custom_widget_height

[stable8] feat(NcReferenceWidget): allow to enable resizable widget height

Author: susnux

l10n/messages.pot

@@ -493,5 +493,8 @@ msgstr ""
 msgid "White"
 msgstr ""
 
+msgid "Widget height"
+msgstr ""
+
 msgid "Write a message …"
 msgstr ""

src/components/NcRichText/NcReferenceWidget.vue

@@ -7,9 +7,29 @@
 	<div ref="widgetRoot" :class="{ 'toggle-interactive': hasInteractiveView && !isInteractive }">
 		<div
 			v-if="reference && hasCustomWidget"
+			:id="widgetId"
 			ref="customWidget"
 			class="widget-custom"
-			:class="{ 'full-width': hasFullWidth }" />
+			:class="{
+				'full-width': hasFullWidth,
+			}"
+			:style="customWidgetStyle">
+			<div ref="customWidgetContent" class="widget-custom__content" />
+			<div
+				v-if="isResizable"
+				class="widget-custom__resize-handle"
+				role="slider"
+				tabindex="0"
+				aria-orientation="vertical"
+				:aria-label="t('Widget height')"
+				:aria-valuenow="ariaValueNow"
+				:aria-valuemin="resizeMinHeight"
+				:aria-valuemax="resizeMaxHeight"
+				:aria-controls="widgetId"
+				@pointerdown.stop.prevent="startResize"
+				@keydown.up.stop.prevent="onResizeKeydown(-RESIZE_KEYBOARD_STEP)"
+				@keydown.down.stop.prevent="onResizeKeydown(RESIZE_KEYBOARD_STEP)" />
+		</div>
 
 		<component
 			:is="referenceWidgetLinkComponent"
@@ -42,10 +62,12 @@ import { nextTick, ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import NcButton from '../../components/NcButton/index.js'
 import { t } from '../../l10n.js'
-import { destroyWidget, hasFullWidth, hasInteractiveView, isWidgetRegistered, renderWidget } from './../../functions/reference/widgets.ts'
+import { createElementId } from '../../utils/createElementId.ts'
+import { destroyWidget, hasFullWidth, hasInteractiveView, isResizable, isWidgetRegistered, renderWidget } from './../../functions/reference/widgets.ts'
 import { getRoute } from './autolink.js'
 
 const IDLE_TIMEOUT = 3 * 60 * 1000 // 3 minutes outside of viewport before widget is removed from the DOM
+const RESIZE_KEYBOARD_STEP = 10
 
 export default {
 	name: 'NcReferenceWidget',
@@ -73,10 +95,14 @@ export default {
 	},
 
 	setup() {
+		const widgetId = `nc-reference-widget-${createElementId()}`
+
 		const isVisible = ref(false)
 		// This is the widget root node
 		const widgetRoot = ref()
+		const customWidget = ref()
 		const { width } = useElementSize(widgetRoot)
+		const { height: customWidgetHeight } = useElementSize(customWidget)
 
 		useIntersectionObserver(widgetRoot, ([entry]) => {
 			nextTick(() => {
@@ -88,6 +114,10 @@ export default {
 			width,
 			isVisible,
 			widgetRoot,
+			customWidget,
+			customWidgetHeight,
+			widgetId,
+			RESIZE_KEYBOARD_STEP,
 		}
 	},
 
@@ -96,6 +126,12 @@ export default {
 			showInteractive: false,
 			rendered: false,
 			idleTimeout: null,
+			isResizing: false,
+			resizedHeight: null,
+			resizeStartY: 0,
+			resizeStartHeight: 0,
+			resizeMinHeight: 100,
+			resizeMaxHeight: window.innerHeight - 120,
 		}
 	},
 
@@ -108,10 +144,25 @@ export default {
 			return hasFullWidth(this.reference.richObjectType)
 		},
 
+		isResizable() {
+			return isResizable(this.reference.richObjectType)
+		},
+
 		hasCustomWidget() {
 			return isWidgetRegistered(this.reference.richObjectType)
 		},
 
+		customWidgetStyle() {
+			if (!this.resizedHeight) {
+				return null
+			}
+			return { height: `${this.resizedHeight}px !important` }
+		},
+
+		ariaValueNow() {
+			return Math.round(this.resizedHeight ?? this.customWidgetHeight)
+		},
+
 		hasInteractiveView() {
 			return isWidgetRegistered(this.reference.richObjectType) && hasInteractiveView(this.reference.richObjectType)
 		},
@@ -197,6 +248,11 @@ export default {
 	},
 
 	beforeDestroy() {
+		if (this.idleTimeout) {
+			clearTimeout(this.idleTimeout)
+			this.idleTimout = null
+		}
+		this.stopResize()
 		this.destroyWidget()
 	},
 
@@ -209,20 +265,20 @@ export default {
 		},
 
 		renderWidget() {
-			if (!this.$refs.customWidget) {
+			if (!this.$refs.customWidgetContent) {
 				return
 			}
 
 			if (this?.reference?.richObjectType === 'open-graph') {
 				return
 			}
 
-			this.$refs.customWidget.innerHTML = ''
+			this.$refs.customWidgetContent.innerHTML = ''
 
 			// create a separate element so we can rerender on the ref again
 			const widget = document.createElement('div')
 			widget.style = 'width: 100%;'
-			this.$refs.customWidget.appendChild(widget)
+			this.$refs.customWidgetContent.appendChild(widget)
 			this.$nextTick(() => {
 				// Waiting for the ref to become available
 				renderWidget(widget, {
@@ -239,6 +295,67 @@ export default {
 				this.rendered = false
 			}
 		},
+
+		initResizeLimits() {
+			// Use min/max height from rendered widget element if set
+			const widgetEl = this.$refs.customWidgetContent?.firstElementChild
+			if (widgetEl) {
+				const computedStyle = window.getComputedStyle(widgetEl)
+				const parsedMin = parseFloat(computedStyle.minHeight)
+				const parsedMax = parseFloat(computedStyle.maxHeight)
+				this.resizeMinHeight = parsedMin > 0 ? parsedMin : 100
+				this.resizeMaxHeight = Number.isFinite(parsedMax) && parsedMax > 0 ? parsedMax : (window.innerHeight - 120)
+			} else {
+				this.resizeMinHeight = 100
+				this.resizeMaxHeight = window.innerHeight - 120
+			}
+		},
+
+		startResize(event) {
+			if (!this.isResizable || !this.$refs.customWidget) {
+				return
+			}
+
+			this.initResizeLimits()
+			this.isResizing = true
+			this.resizeStartY = event.clientY
+			this.resizeStartHeight = this.$refs.customWidget.getBoundingClientRect().height
+
+			window.addEventListener('pointermove', this.onResize)
+			window.addEventListener('pointerup', this.stopResize)
+		},
+
+		onResizeKeydown(delta) {
+			if (!this.isResizable || !this.$refs.customWidget) {
+				return
+			}
+
+			// Establish limits once per interaction
+			this.initResizeLimits()
+
+			const currentHeight = this.resizedHeight ?? this.resizeStartHeight
+			const next = currentHeight + delta
+			this.resizedHeight = Math.min(this.resizeMaxHeight, Math.max(this.resizeMinHeight, next))
+		},
+
+		onResize(event) {
+			if (!this.isResizing || !this.$refs.customWidget) {
+				return
+			}
+
+			const deltaY = event.clientY - this.resizeStartY
+			this.resizedHeight = Math.min(this.resizeMaxHeight, Math.max(this.resizeMinHeight, this.resizeStartHeight + deltaY))
+		},
+
+		stopResize() {
+			if (!this.isResizing) {
+				return
+			}
+
+			this.isResizing = false
+			window.removeEventListener('pointermove', this.onResize)
+			window.removeEventListener('pointerup', this.stopResize)
+		},
 	},
 }
 </script>
@@ -259,12 +376,52 @@ export default {
 
 .widget-custom {
 	@include widget;
+	position: relative;
 
 	&.full-width {
 		width: var(--widget-full-width, 100%) !important;
 		inset-inline-start: calc( (var(--widget-full-width, 100%) - 100%) / 2 * -1);
 		position: relative;
 	}
+
+	&__content {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__resize-handle {
+		position: absolute;
+		bottom: 0;
+		inset-inline-start: 0;
+		width: 100%;
+		height: calc(var(--default-grid-baseline) * 2);
+		border-top: 1px solid var(--color-border);
+		margin-top: -1px;
+		cursor: row-resize;
+		touch-action: none;
+
+		&::before, &::after {
+			content: '';
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			background-color: var(--color-border);
+			margin-top: 1px;
+			transform: translateX(-50%);
+			width: 30px;
+			height: 1px;
+		}
+
+		&::before {
+			margin-top: -2px;
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--color-primary-element);
+			outline-offset: -4px;
+		}
+	}
 }
 
 .widget-access {

src/functions/reference/widgets.ts

@@ -19,6 +19,7 @@ export interface ReferenceWidgetProps {
 	id: string
 	hasInteractiveView: boolean
 	fullWidth: boolean
+	isResizable: boolean
 	callback: ReferenceWidgetRenderCallback
 	onDestroy: ReferenceWidgetDestroyCallback
 }
@@ -34,7 +35,10 @@ window._registerWidget ??= (id: string, callback: ReferenceWidgetRenderCallback,
  * @param id - Id tof the widget
  * @param callback - Render callback
  * @param onDestroy - Cleanup callback
- * @param props - Widget props
+ * @param props - Widget props (all optional)
+ * @param props.hasInteractiveView - Whether the widget exposes an interactive view (default: true)
+ * @param props.fullWidth - Whether the widget renders at full container width (default: false)
+ * @param props.isResizable - Whether the user can drag-resize the widget height (default: false)
  */
 export function registerWidget(
 	id: string,
@@ -45,6 +49,7 @@ export function registerWidget(
 	const propsWithDefaults = {
 		hasInteractiveView: true,
 		fullWidth: false,
+		isResizable: false,
 		...props,
 	}
 
@@ -125,3 +130,12 @@ export function hasInteractiveView(id: string): boolean {
 export function hasFullWidth(id: string): boolean {
 	return !!window._vue_richtext_widgets[id]?.fullWidth
 }
+
+/**
+ * Check if the widget is resizable.
+ *
+ * @param id - Id of the widget
+ */
+export function isResizable(id: string): boolean {
+	return !!window._vue_richtext_widgets[id]?.isResizable
+}