Skip to content

Commit

Permalink
Fixed #4589 - Improve block/unblockScroll architecture
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Oct 10, 2023
1 parent b85876b commit 4fa7741
Show file tree
Hide file tree
Showing 9 changed files with 36 additions and 43 deletions.
6 changes: 2 additions & 4 deletions components/lib/blockui/BlockUI.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,7 @@ export default {
});
document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
DomHandler.blockBodyScroll();
document.activeElement.blur();
} else {
this.mask = DomHandler.createElement('div', {
Expand Down Expand Up @@ -92,8 +91,7 @@ export default {
if (this.fullScreen) {
document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll();
} else {
this.$refs.container.removeChild(this.mask);
}
Expand Down
6 changes: 2 additions & 4 deletions components/lib/calendar/Calendar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1656,8 +1656,7 @@ export default {
this.mask.addEventListener('click', this.maskClickListener);
document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
DomHandler.blockBodyScroll();
}
},
disableModality() {
Expand Down Expand Up @@ -1691,8 +1690,7 @@ export default {
}
if (!hasBlockerMasks) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll();
}
},
updateCurrentMetaData() {
Expand Down
14 changes: 3 additions & 11 deletions components/lib/dialog/Dialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,25 +203,17 @@ export default {
}
if (!this.modal) {
if (this.maximized) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} else {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
}
this.maximized ? DomHandler.blockBodyScroll() : DomHandler.unblockBodyScroll();
}
},
enableDocumentSettings() {
if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
DomHandler.blockBodyScroll();
}
},
unbindDocumentState() {
if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll();
}
},
onKeyDown(event) {
Expand Down
9 changes: 3 additions & 6 deletions components/lib/galleria/Galleria.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@ export default {
},
beforeUnmount() {
if (this.fullScreen) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll();
}
this.mask = null;
Expand All @@ -52,8 +51,7 @@ export default {
},
onEnter(el) {
this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
DomHandler.blockBodyScroll();
this.focus();
},
onBeforeLeave() {
Expand All @@ -62,8 +60,7 @@ export default {
onAfterLeave(el) {
ZIndexUtils.clear(el);
this.containerVisible = false;
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll();
},
onActiveItemChange(index) {
if (this.activeIndex !== index) {
Expand Down
9 changes: 3 additions & 6 deletions components/lib/image/Image.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,7 @@ export default {
},
onImageClick() {
if (this.preview) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
DomHandler.blockBodyScroll();
this.maskVisible = true;
setTimeout(() => {
this.previewVisible = true;
Expand Down Expand Up @@ -164,8 +163,7 @@ export default {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
},
onLeave() {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll();
this.$emit('hide');
},
onAfterLeave(el) {
Expand All @@ -183,8 +181,7 @@ export default {
this.previewVisible = false;
this.rotate = 0;
this.scale = 1;
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll();
}
},
computed: {
Expand Down
6 changes: 2 additions & 4 deletions components/lib/sidebar/Sidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,16 +124,14 @@ export default {
}
if (this.blockScroll) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
DomHandler.blockBodyScroll();
}
},
disableDocumentSettings() {
this.unbindOutsideClickListener();
if (this.blockScroll) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll();
}
},
onKeydown(event) {
Expand Down
14 changes: 14 additions & 0 deletions components/lib/utils/DomHandler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,6 +564,10 @@ export default {
return scrollbarWidth;
},

calculateBodyScrollbarWidth() {
return window.innerWidth - document.documentElement.offsetWidth;
},

getBrowser() {
if (!this.browser) {
let matched = this.resolveUserAgent();
Expand Down Expand Up @@ -755,5 +759,15 @@ export default {
window.open(encodeURI(csv));
}
}
},

blockBodyScroll(className = 'p-overflow-hidden') {
document.body.style.setProperty('--scrollbar-width', this.calculateBodyScrollbarWidth() + 'px');
this.addClass(document.body, className);
},

unblockBodyScroll(className = 'p-overflow-hidden') {
document.body.style.removeProperty('--scrollbar-width');
this.removeClass(document.body, className);
}
};
3 changes: 3 additions & 0 deletions components/lib/utils/Utils.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export declare class DomHandler {
static clearSelection(): void;
static getSelection(): string | null;
static calculateScrollbarWidth(): number;
static calculateBodyScrollbarWidth(): number;
static getBrowser(): object;
static resolveUserAgent(): { browser: string; version: string };
static isVisible(el: HTMLElement): boolean;
Expand All @@ -64,6 +65,8 @@ export declare class DomHandler {
static hasCSSAnimation(el: HTMLElement): boolean;
static hasCSSTransition(el: HTMLElement): boolean;
static exportCSV(csv: any, filename: string): void;
static blockBodyScroll(className?: string): void;
static unblockBodyScroll(className?: string): void;
}

export declare class ObjectUtils {
Expand Down
12 changes: 4 additions & 8 deletions layouts/default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,7 @@ export default {
}
this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll('blocked-scroll');
this.$toast.removeAllGroups();
}
}
Expand All @@ -61,18 +60,15 @@ export default {
onMenuButtonClick() {
if (this.sidebarActive) {
this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll('blocked-scroll');
} else {
this.sidebarActive = true;
DomHandler.addClass(document.body, 'blocked-scroll');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
DomHandler.blockBodyScroll('blocked-scroll');
}
},
onMaskClick() {
this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll('blocked-scroll');
},
hideNews(event) {
this.$appState.newsActive = false;
Expand Down

0 comments on commit 4fa7741

Please sign in to comment.