From 350d5c21a700223d08524616685e7230fac785b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Fri, 9 Jun 2023 15:44:26 +0300 Subject: [PATCH] Refactor #3965 - Update for unstyled check and data-* attributes --- components/lib/blockui/BlockUI.vue | 2 +- components/lib/colorpicker/ColorPicker.vue | 8 ++-- components/lib/confirmpopup/ConfirmPopup.vue | 3 +- components/lib/datatable/DataTable.vue | 40 ++++++++++++++----- components/lib/galleria/Galleria.vue | 3 ++ .../lib/galleria/GalleriaThumbnails.vue | 3 ++ components/lib/overlaypanel/OverlayPanel.vue | 1 + components/lib/scrollpanel/ScrollPanel.vue | 11 +++++ components/lib/sidebar/Sidebar.vue | 8 ++-- components/lib/treetable/TreeTable.vue | 6 ++- 10 files changed, 64 insertions(+), 21 deletions(-) diff --git a/components/lib/blockui/BlockUI.vue b/components/lib/blockui/BlockUI.vue index 99edde770..e940ec349 100755 --- a/components/lib/blockui/BlockUI.vue +++ b/components/lib/blockui/BlockUI.vue @@ -65,7 +65,7 @@ export default { if (this.fullScreen) { if (!this.isUnstyled) { document.body.removeChild(this.mask); - DomHandler.removeClass(document.body, 'p-overflow-hidden'); + !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden'); } } else { this.$refs.container.removeChild(this.mask); diff --git a/components/lib/colorpicker/ColorPicker.vue b/components/lib/colorpicker/ColorPicker.vue index d1f06d326..d82b85698 100755 --- a/components/lib/colorpicker/ColorPicker.vue +++ b/components/lib/colorpicker/ColorPicker.vue @@ -444,7 +444,8 @@ export default { this.colorDragging = true; this.pickColor(event); - DomHandler.addClass(this.$el, 'p-colorpicker-dragging'); + this.$el.setAttribute('p-colorpicker-dragging', 'true'); + !this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging'); event.preventDefault(); }, onDrag(event) { @@ -461,7 +462,8 @@ export default { onDragEnd() { this.colorDragging = false; this.hueDragging = false; - DomHandler.removeClass(this.$el, 'p-colorpicker-dragging'); + this.$el.setAttribute('p-colorpicker-dragging', 'false'); + !this.isUnstyled && DomHandler.removeClass(this.$el, 'p-colorpicker-dragging'); this.unbindDragListeners(); }, onHueMousedown(event) { @@ -479,7 +481,7 @@ export default { this.hueDragging = true; this.pickHue(event); - DomHandler.addClass(this.$el, 'p-colorpicker-dragging'); + !this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging'); }, isInputClicked(event) { return this.$refs.input && this.$refs.input.isSameNode(event.target); diff --git a/components/lib/confirmpopup/ConfirmPopup.vue b/components/lib/confirmpopup/ConfirmPopup.vue index c442f0f4b..4cbb16366 100644 --- a/components/lib/confirmpopup/ConfirmPopup.vue +++ b/components/lib/confirmpopup/ConfirmPopup.vue @@ -183,7 +183,8 @@ export default { this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`); if (containerOffset.top < targetOffset.top) { - DomHandler.addClass(this.container, 'p-confirm-popup-flipped'); + this.container.setAttribute('data-p-confirm-popup-flipped', 'true'); + !this.isUnstyled && DomHandler.addClass(this.container, 'p-confirm-popup-flipped'); } }, bindOutsideClickListener() { diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue index d7d4c6b05..4070b57fb 100755 --- a/components/lib/datatable/DataTable.vue +++ b/components/lib/datatable/DataTable.vue @@ -1201,7 +1201,8 @@ export default { onColumnResize(event) { let containerLeft = DomHandler.getOffset(this.$el).left; - DomHandler.addClass(this.$el, 'p-unselectable-text'); + this.$el.setAttribute('data-p-unselectable-text', 'true'); + !this.isUnstyled && DomHandler.addClass(this.$el, 'p-unselectable-text'); this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px'; this.$refs.resizeHelper.style.top = 0 + 'px'; this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px'; @@ -1250,7 +1251,8 @@ export default { this.$refs.resizeHelper.style.display = 'none'; this.resizeColumn = null; - DomHandler.removeClass(this.$el, 'p-unselectable-text'); + this.$el.setAttribute('data-p-unselectable-text', 'true'); + !this.isUnstyled && DomHandler.removeClass(this.$el, 'p-unselectable-text'); this.unbindColumnResizeEvents(); @@ -1455,17 +1457,30 @@ export default { let prevRowElement = rowElement.previousElementSibling; if (pageY < rowMidY) { - DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); + rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); + !this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); this.droppedRowIndex = index; - if (prevRowElement) DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom'); - else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); + + if (prevRowElement) { + prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true'); + !this.isUnstyled && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom'); + } else { + rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true'); + !this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); + } } else { - if (prevRowElement) DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); - else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); + if (prevRowElement) { + prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); + !this.isUnstyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); + } else { + rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true'); + !this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); + } this.droppedRowIndex = index + 1; - DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom'); + rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true'); + !this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom'); } event.preventDefault(); @@ -1476,11 +1491,14 @@ export default { let prevRowElement = rowElement.previousElementSibling; if (prevRowElement) { - DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); + prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); + !this.isUnstyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); } - DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); - DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top'); + rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); + !this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); + rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false'); + !this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top'); }, onRowDragEnd(event) { this.rowDragging = false; diff --git a/components/lib/galleria/Galleria.vue b/components/lib/galleria/Galleria.vue index 77eed30e7..cffab71f0 100755 --- a/components/lib/galleria/Galleria.vue +++ b/components/lib/galleria/Galleria.vue @@ -35,6 +35,7 @@ export default { }, beforeUnmount() { if (this.fullScreen) { + document.body.setAttribute('data-p-overflow-hidden', 'false'); !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden'); } @@ -51,6 +52,7 @@ export default { }, onEnter(el) { this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1); + document.body.setAttribute('data-p-overflow-hidden', 'true'); !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden'); this.focus(); }, @@ -60,6 +62,7 @@ export default { onAfterLeave(el) { ZIndexUtils.clear(el); this.containerVisible = false; + document.body.setAttribute('data-p-overflow-hidden', 'false'); !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden'); }, onActiveItemChange(index) { diff --git a/components/lib/galleria/GalleriaThumbnails.vue b/components/lib/galleria/GalleriaThumbnails.vue index dbbb5ccbf..2f696da87 100755 --- a/components/lib/galleria/GalleriaThumbnails.vue +++ b/components/lib/galleria/GalleriaThumbnails.vue @@ -178,6 +178,7 @@ export default { this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`; if (this.d_oldActiveItemIndex !== this.d_activeIndex) { + document.body.setAttribute('data-p-items-hidden', 'false'); !this.isUnstyled && DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden'); this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s'; } @@ -214,6 +215,7 @@ export default { } if (this.$refs.itemsContainer) { + document.body.setAttribute('data-p-items-hidden', 'false'); !this.isUnstyled && DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden'); this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`; this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s'; @@ -378,6 +380,7 @@ export default { }, onTransitionEnd() { if (this.$refs.itemsContainer) { + document.body.setAttribute('data-p-items-hidden', 'true'); !this.isUnstyled && DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden'); this.$refs.itemsContainer.style.transition = ''; } diff --git a/components/lib/overlaypanel/OverlayPanel.vue b/components/lib/overlaypanel/OverlayPanel.vue index 8410a89ae..24246b7c4 100755 --- a/components/lib/overlaypanel/OverlayPanel.vue +++ b/components/lib/overlaypanel/OverlayPanel.vue @@ -155,6 +155,7 @@ export default { this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`); if (containerOffset.top < targetOffset.top) { + this.container.setAttribute('data-p-overlaypanel-flipped', 'true'); !this.isUnstyled && DomHandler.addClass(this.container, 'p-overlaypanel-flipped'); } }, diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue index 19e4b748d..d77cf6d1d 100644 --- a/components/lib/scrollpanel/ScrollPanel.vue +++ b/components/lib/scrollpanel/ScrollPanel.vue @@ -117,15 +117,19 @@ export default { this.frame = this.requestAnimationFrame(() => { if (this.scrollXRatio >= 1) { + this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true'); !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden'); } else { + this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false'); !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden'); this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;'; } if (this.scrollYRatio >= 1) { + this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true'); !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden'); } else { + this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false'); !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden'); this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;'; } @@ -135,7 +139,9 @@ export default { this.isYBarClicked = true; this.$refs.yBar.focus(); this.lastPageY = e.pageY; + this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'true'); !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed'); + document.body.setAttribute('data-p-scrollpanel-grabbed', 'true'); !this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed'); this.bindDocumentMouseListeners(); @@ -145,7 +151,9 @@ export default { this.isXBarClicked = true; this.$refs.xBar.focus(); this.lastPageX = e.pageX; + this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false'); !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed'); + document.body.setAttribute('data-p-scrollpanel-grabbed', 'false'); !this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed'); this.bindDocumentMouseListeners(); @@ -274,8 +282,11 @@ export default { } }, onDocumentMouseUp() { + this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false'); !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed'); + this.$refs.xBar.setAttribute('data-p-scrollpanel-grabbed', 'false'); !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed'); + document.body.setAttribute('data-p-scrollpanel-grabbed', 'false'); !this.isUnstyled && DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed'); this.unbindDocumentMouseListeners(); diff --git a/components/lib/sidebar/Sidebar.vue b/components/lib/sidebar/Sidebar.vue index 36258a213..f59471965 100755 --- a/components/lib/sidebar/Sidebar.vue +++ b/components/lib/sidebar/Sidebar.vue @@ -78,7 +78,7 @@ export default { }, onBeforeLeave() { if (this.modal) { - DomHandler.addClass(this.mask, 'p-component-overlay-leave'); + !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave'); } }, onLeave() { @@ -121,14 +121,16 @@ export default { } if (this.blockScroll) { - DomHandler.addClass(document.body, 'p-overflow-hidden'); + document.body.setAttribute('data-p-overflow-hidden', 'true'); + !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden'); } }, disableDocumentSettings() { this.unbindOutsideClickListener(); if (this.blockScroll) { - DomHandler.removeClass(document.body, 'p-overflow-hidden'); + document.body.setAttribute('data-p-overflow-hidden', 'false'); + !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden'); } }, onKeydown(event) { diff --git a/components/lib/treetable/TreeTable.vue b/components/lib/treetable/TreeTable.vue index f34324820..155c77632 100755 --- a/components/lib/treetable/TreeTable.vue +++ b/components/lib/treetable/TreeTable.vue @@ -602,7 +602,8 @@ export default { onColumnResize(event) { let containerLeft = DomHandler.getOffset(this.$el).left; - DomHandler.addClass(this.$el, 'p-unselectable-text'); + this.$el.setAttribute('data-p-unselectable-text', 'true'); + !this.isUnstyled && DomHandler.addClass(this.$el, 'p-unselectable-text'); this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px'; this.$refs.resizeHelper.style.top = 0 + 'px'; this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px'; @@ -646,7 +647,8 @@ export default { this.$refs.resizeHelper.style.display = 'none'; this.resizeColumn = null; - DomHandler.removeClass(this.$el, 'p-unselectable-text'); + this.$el.setAttribute('data-p-unselectable-text', 'false'); + !this.isUnstyled && DomHandler.removeClass(this.$el, 'p-unselectable-text'); this.unbindColumnResizeEvents(); },