Merge pull request #8695 from nextcloud-libraries/backport/8665/main

feat(NcReferenceWidget): allow to enable resizable widget height

Author: mejo-

l10n/messages.pot

@@ -586,6 +586,9 @@ msgstr ""
 msgid "White"
 msgstr ""
 
+msgid "Widget height"
+msgstr ""
+
 msgid "Write a message …"
 msgstr ""
 

src/components/NcRichText/NcReferenceWidget.vue

@@ -4,14 +4,16 @@
 -->
 
 <script setup lang="ts">
+import type { Ref } from 'vue'
 import type { ReferenceWidgetObject } from './../../functions/reference/widgets.ts'
 
 import { useElementSize, useIntersectionObserver } from '@vueuse/core'
 import { computed, inject, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 import { routerKey, RouterLink } from 'vue-router'
 import NcButton from '../../components/NcButton/NcButton.vue'
 import { t } from '../../l10n.ts'
-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.ts'
 
 const props = withDefaults(defineProps<{
@@ -34,13 +36,18 @@ const props = withDefaults(defineProps<{
 
 /* 3 minutes outside of viewport before widget is removed from the DOM */
 const IDLE_TIMEOUT = 3 * 60 * 1000
+const RESIZE_KEYBOARD_STEP = 10
 
 const router = inject(routerKey, null)
 
+const widgetId = `nc-reference-widget-${createElementId()}`
+
 const isVisible = ref(false)
 const customWidget = useTemplateRef('customWidget')
+const customWidgetContent = useTemplateRef('customWidgetContent')
 const widgetRoot = useTemplateRef('widgetRoot')
 const { width } = useElementSize(widgetRoot)
+const { height: customWidgetHeight } = useElementSize(customWidget)
 
 useIntersectionObserver(widgetRoot, ([entry]) => {
 	nextTick(() => {
@@ -51,6 +58,12 @@ useIntersectionObserver(widgetRoot, ([entry]) => {
 const showInteractive = ref(false)
 const rendered = ref(false)
 let idleTimeout: NodeJS.Timeout | null = null
+const isResizing = ref(false)
+const resizedHeight: Ref<number | null> = ref(null)
+const resizeStartY = ref(0)
+const resizeStartHeight = ref(0)
+const resizeMinHeight = ref(100)
+const resizeMaxHeight = ref(window.innerHeight - 120)
 
 const isInteractive = computed(() => {
 	return (!props.interactiveOptIn && props.interactive) || showInteractive.value
@@ -60,10 +73,25 @@ const referenceHasFullWidth = computed(() => {
 	return hasFullWidth(props.reference.richObjectType)
 })
 
+const isWidgetResizable = computed(() => {
+	return isResizable(props.reference.richObjectType)
+})
+
 const hasCustomWidget = computed(() => {
 	return isWidgetRegistered(props.reference.richObjectType)
 })
 
+const customWidgetStyle = computed(() => {
+	if (!resizedHeight.value) {
+		return null
+	}
+	return { height: `${resizedHeight.value}px !important` }
+})
+
+const ariaValueNow = computed(() => {
+	return Math.round(resizedHeight.value ?? customWidgetHeight.value)
+})
+
 const referenceHasInteractiveView = computed(() => {
 	return hasCustomWidget.value && hasInteractiveView(props.reference.richObjectType)
 })
@@ -142,6 +170,11 @@ watch(isVisible, (val) => {
 }, { immediate: true })
 
 onBeforeUnmount(() => {
+	if (idleTimeout) {
+		clearTimeout(idleTimeout)
+		idleTimeout = null
+	}
+	stopResize()
 	destroyReferenceWidget()
 })
 
@@ -157,20 +190,20 @@ function enableInteractive() {
  * Render the reference widget
  */
 function renderReferenceWidget() {
-	if (!customWidget.value) {
+	if (!customWidgetContent.value) {
 		return
 	}
 
 	if (props.reference.richObjectType === 'open-graph') {
 		return
 	}
 
-	customWidget.value.innerHTML = ''
+	customWidgetContent.value.innerHTML = ''
 
 	// create a separate element so we can rerender on the ref again
 	const widget = document.createElement('div')
 	widget.style.width = '100%'
-	customWidget.value.appendChild(widget)
+	customWidgetContent.value.appendChild(widget)
 	nextTick(() => {
 		// Waiting for the ref to become available
 		renderWidget(widget, {
@@ -190,15 +223,115 @@ function destroyReferenceWidget() {
 		rendered.value = false
 	}
 }
+
+/**
+ * Initialize resize limits
+ */
+function initResizeLimits() {
+	// Use min/max height from rendered widget element if set
+	const widgetEl = customWidgetContent.value?.firstElementChild
+	if (widgetEl) {
+		const computedStyle = window.getComputedStyle(widgetEl)
+		const parsedMin = parseFloat(computedStyle.minHeight)
+		const parsedMax = parseFloat(computedStyle.maxHeight)
+		resizeMinHeight.value = parsedMin > 0 ? parsedMin : 100
+		resizeMaxHeight.value = Number.isFinite(parsedMax) && parsedMax > 0 ? parsedMax : (window.innerHeight - 120)
+	} else {
+		resizeMinHeight.value = 100
+		resizeMaxHeight.value = window.innerHeight - 120
+	}
+}
+
+/**
+ * Start resize via dragging
+ *
+ * @param event - the pointer event
+ */
+function startResize(event: PointerEvent) {
+	if (!isWidgetResizable.value || !customWidget.value) {
+		return
+	}
+
+	initResizeLimits()
+	isResizing.value = true
+	resizeStartY.value = event.clientY
+	resizeStartHeight.value = customWidget.value.getBoundingClientRect().height
+
+	window.addEventListener('pointermove', onResize)
+	window.addEventListener('pointerup', stopResize)
+}
+
+/**
+ * Resize via keydown
+ *
+ * @param delta - the resize delta
+ */
+function onResizeKeydown(delta: number) {
+	if (!isWidgetResizable.value || !customWidget.value) {
+		return
+	}
+
+	// Establish limits once per interaction
+	initResizeLimits()
+
+	const currentHeight = resizedHeight.value ?? resizeStartHeight.value
+	const next = currentHeight + delta
+	resizedHeight.value = Math.min(resizeMaxHeight.value, Math.max(resizeMinHeight.value, next))
+}
+
+/**
+ * Resize via dragging
+ *
+ * @param event - the pointer event
+ */
+function onResize(event: PointerEvent) {
+	if (!isResizing.value || !customWidget.value) {
+		return
+	}
+
+	const deltaY = event.clientY - resizeStartY.value
+	resizedHeight.value = Math.min(resizeMaxHeight.value, Math.max(resizeMinHeight.value, resizeStartHeight.value + deltaY))
+}
+
+/**
+ * Stop resize via dragging
+ */
+function stopResize() {
+	if (!isResizing.value) {
+		return
+	}
+
+	isResizing.value = false
+	window.removeEventListener('pointermove', onResize)
+	window.removeEventListener('pointerup', stopResize)
+}
 </script>
 
 <template>
 	<div ref="widgetRoot" :class="{ 'toggle-interactive': referenceHasInteractiveView && !isInteractive }">
 		<div
 			v-if="reference && hasCustomWidget"
+			:id="widgetId"
 			ref="customWidget"
 			class="widget-custom"
-			:class="{ 'full-width': referenceHasFullWidth }" />
+			:class="{ 'full-width': referenceHasFullWidth }"
+			:style="customWidgetStyle">
+			<div ref="customWidgetContent" class="widget-custom__content" />
+			<div
+				v-if="isWidgetResizable"
+				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"
@@ -241,12 +374,52 @@ function destroyReferenceWidget() {
 
 .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

@@ -32,6 +32,7 @@ export interface ReferenceWidgetProps {
 	id: string
 	hasInteractiveView: boolean
 	fullWidth: boolean
+	isResizable: boolean
 	callback: ReferenceWidgetRenderCallback
 	onDestroy: ReferenceWidgetDestroyCallback
 }
@@ -47,7 +48,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,
@@ -58,6 +62,7 @@ export function registerWidget(
 	const propsWithDefaults = {
 		hasInteractiveView: true,
 		fullWidth: false,
+		isResizable: false,
 		...props,
 	}
 
@@ -138,3 +143,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
+}