From 5d63a7b79ffd1da5d54c53c08110b1b51b66fe9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?= Date: Sat, 13 Jan 2024 09:58:27 +0100 Subject: [PATCH 1/2] chorer(NcBreadcrumbs): use splice instead of slice and concat MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Raimund Schlüßler --- .../NcBreadcrumbs/NcBreadcrumbs.vue | 152 +++++++++--------- 1 file changed, 72 insertions(+), 80 deletions(-) diff --git a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue index 49ce8a4214..7d570ab7b9 100644 --- a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue +++ b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue @@ -529,92 +529,84 @@ export default { })) // The array of all created VNodes - let crumbs = [] - - if (!this.hiddenIndices.length) { - // We don't hide any breadcrumbs. - crumbs = breadcrumbs - } else { + const crumbs = [...breadcrumbs] + if (this.hiddenIndices.length) { /** * We show the first half of the breadcrumbs before the Actions dropdown menu * which shows the hidden breadcrumbs. */ - // Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary. - crumbs = breadcrumbs.slice(0, Math.round(breadcrumbs.length / 2)) - - // The Actions menu - // Use a breadcrumb component for the hidden breadcrumbs - crumbs.push(h(NcBreadcrumb, { - class: 'dropdown', - ...this.menuBreadcrumbProps, - // Hide the dropdown menu from screen-readers, - // since the crumbs in the menu are still in the list. - 'aria-hidden': true, - // Add a ref to the Actions menu - ref: 'actionsBreadcrumb', - key: 'actions-breadcrumb-1', - // Add handlers so the Actions menu opens on hover - onDragenter: () => { this.menuBreadcrumbProps.open = true }, - onDragleave: this.closeActions, - // Make sure we keep the same open state - // as the Actions component - 'onUpdate:open': (open) => { - this.menuBreadcrumbProps.open = open - }, - // Add all hidden breadcrumbs as ActionRouter or ActionLink - }, { - default: () => this.hiddenIndices.map(index => { - const crumb = breadcrumbs[index] - const { - // Get the parameters from the breadcrumb component props - to, - href, - disableDrop, - name, - // Props to forward - ...propsToForward - } = crumb.props - // Do not forward the ref, otherwise it will be null if the hidden crumb gets destroyed - delete propsToForward.ref - - // Decide whether to show the breadcrumbs as ActionButton, ActionRouter or ActionLink - let element = NcActionButton - let path = '' - if (href) { - element = NcActionLink - path = href - } - if (to) { - element = NcActionRouter - path = to - } - const folderIcon = h(IconFolder, { - size: 20, - }) - return h(element, { - ...propsToForward, - class: crumbClass, - href: href || null, - to: to || null, - // Prevent the breadcrumbs from being draggable - draggable: false, - // Add the drag and drop handlers - onDragstart: this.dragStart, - onDrop: ($event) => this.dropped($event, path, disableDrop), - onDragover: this.dragOver, - onDragenter: ($event) => this.dragEnter($event, disableDrop), - onDragleave: ($event) => this.dragLeave($event, disableDrop), + crumbs.splice(Math.round(breadcrumbs.length / 2), 0, + + // The Actions menu + // Use a breadcrumb component for the hidden breadcrumbs + h(NcBreadcrumb, { + class: 'dropdown', + ...this.menuBreadcrumbProps, + // Hide the dropdown menu from screen-readers, + // since the crumbs in the menu are still in the list. + 'aria-hidden': true, + // Add a ref to the Actions menu + ref: 'actionsBreadcrumb', + key: 'actions-breadcrumb-1', + // Add handlers so the Actions menu opens on hover + onDragenter: () => { this.menuBreadcrumbProps.open = true }, + onDragleave: this.closeActions, + // Make sure we keep the same open state + // as the Actions component + 'onUpdate:open': (open) => { + this.menuBreadcrumbProps.open = open }, - { - default: () => name, - icon: () => folderIcon, - }) + // Add all hidden breadcrumbs as ActionRouter or ActionLink + }, { + default: () => this.hiddenIndices.map(index => { + const crumb = breadcrumbs[index] + const { + // Get the parameters from the breadcrumb component props + to, + href, + disableDrop, + name, + // Props to forward + ...propsToForward + } = crumb.props + // Do not forward the ref, otherwise it will be null if the hidden crumb gets destroyed + delete propsToForward.ref + + // Decide whether to show the breadcrumbs as ActionButton, ActionRouter or ActionLink + let element = NcActionButton + let path = '' + if (href) { + element = NcActionLink + path = href + } + if (to) { + element = NcActionRouter + path = to + } + const folderIcon = h(IconFolder, { + size: 20, + }) + return h(element, { + ...propsToForward, + class: crumbClass, + href: href || null, + to: to || null, + // Prevent the breadcrumbs from being draggable + draggable: false, + // Add the drag and drop handlers + onDragstart: this.dragStart, + onDrop: ($event) => this.dropped($event, path, disableDrop), + onDragover: this.dragOver, + onDragenter: ($event) => this.dragEnter($event, disableDrop), + onDragleave: ($event) => this.dragLeave($event, disableDrop), + }, + { + default: () => name, + icon: () => folderIcon, + }) + }), }), - })) - - // The second half of the breadcrumbs - const crumbs2 = breadcrumbs.slice(Math.round(breadcrumbs.length / 2)) - crumbs = crumbs.concat(crumbs2) + ) } const wrapper = [h('nav', { 'aria-label': this.ariaLabel }, [h('ul', { class: 'breadcrumb__crumbs' }, [crumbs])])] From a57a912ca31c89fec7f2681fd6d73849bb4101b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?= Date: Sun, 14 Jan 2024 14:16:20 +0100 Subject: [PATCH 2/2] chorer(NcBreadcrumbs): make breadcrumbsRefs an array MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Raimund Schlüßler --- .../NcBreadcrumbs/NcBreadcrumbs.vue | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue index 7d570ab7b9..b167d3e40d 100644 --- a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue +++ b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue @@ -202,7 +202,7 @@ export default { // Is the menu open or not open: false, }, - breadcrumbsRefs: {}, + breadcrumbsRefs: [], } }, created() { @@ -262,13 +262,11 @@ export default { if (!this.$refs.container) { return } - // All breadcrumb components passed into the default slot - const breadcrumbs = Object.values(this.breadcrumbsRefs) - const nrCrumbs = breadcrumbs.length + const nrCrumbs = this.breadcrumbsRefs.length const hiddenIndices = [] const availableWidth = this.$refs.container.offsetWidth - let totalWidth = this.getTotalWidth(breadcrumbs) + let totalWidth = this.getTotalWidth() // If we have breadcrumbs actions, we have to take their width into account too. if (this.$refs.breadcrumb__actions) { totalWidth += this.$refs.breadcrumb__actions.offsetWidth @@ -284,7 +282,7 @@ export default { // We hide elements alternating to the left and right const currentIndex = startIndex + ((i % 2) ? i + 1 : i) / 2 * Math.pow(-1, i + (nrCrumbs % 2)) // Calculate the remaining overflow width after hiding this breadcrumb - overflow -= this.getWidth(breadcrumbs[currentIndex]?.$el, currentIndex === (breadcrumbs.length - 1)) + overflow -= this.getWidth(this.breadcrumbsRefs[currentIndex]?.$el, currentIndex === (this.breadcrumbsRefs.length - 1)) hiddenIndices.push(currentIndex) i++ } @@ -317,11 +315,10 @@ export default { /** * Calculates the total width of all breadcrumbs * - * @param {Array} breadcrumbs All breadcrumbs * @return {number} The total width */ - getTotalWidth(breadcrumbs) { - return breadcrumbs.reduce((width, crumb, index) => width + this.getWidth(crumb?.$el, index === (breadcrumbs.length - 1)), 0) + getTotalWidth() { + return this.breadcrumbsRefs.reduce((width, crumb, index) => width + this.getWidth(crumb.$el, index === (this.breadcrumbsRefs.length - 1)), 0) }, /** * Calculates the width of the provided element @@ -464,8 +461,7 @@ export default { * add it to the array of all crumbs. */ hideCrumbs() { - const crumbs = Object.values(this.breadcrumbsRefs) - crumbs.forEach((crumb, i) => { + this.breadcrumbsRefs.forEach((crumb, i) => { if (crumb?.$el?.classList) { if (this.hiddenIndices.includes(i)) { crumb.$el.classList.add(`${crumbClass}--hidden`) @@ -520,7 +516,7 @@ export default { * and don't write to this.breadcrumbsRefs directly * to not trigger a myriad of re-renders. */ - const breadcrumbsRefs = {} + const breadcrumbsRefs = [] // Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary. breadcrumbs = breadcrumbs.map((crumb, index) => cloneVNode(crumb, { ref: (crumb) => {