vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #4589 - Improve block/unblockScroll architecture

pull/4591/head^2
mertsincan 2023-10-10 23:36:20 +01:00
parent b85876be95
commit 4fa7741923
9 changed files with 36 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/blockui/BlockUI.vue
View File

@ -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', {
@ -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);
}

6
components/lib/calendar/Calendar.vue
View File

@ -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() {
@ -1691,8 +1690,7 @@ export default {
}
if (!hasBlockerMasks) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
DomHandler.unblockBodyScroll();
}
},
updateCurrentMetaData() {

14
components/lib/dialog/Dialog.vue
View File

@ -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) {

9
components/lib/galleria/Galleria.vue
View File

@ -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;
@ -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() {
@ -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) {

9
components/lib/image/Image.vue
View File

@ -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;
@ -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) {
@ -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: {

6
components/lib/sidebar/Sidebar.vue
View File

@ -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) {

14
components/lib/utils/DomHandler.js
View File

@ -564,6 +564,10 @@ export default {
return scrollbarWidth;
},
calculateBodyScrollbarWidth() {
return window.innerWidth - document.documentElement.offsetWidth;
},
getBrowser() {
if (!this.browser) {
let matched = this.resolveUserAgent();
@ -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
components/lib/utils/Utils.d.ts vendored
View File

@ -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;
@ -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 {

12
layouts/default.vue
View File

@ -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();
}
}
@ -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;