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); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
document.activeElement.blur(); document.activeElement.blur();
} else { } else {
this.mask = DomHandler.createElement('div', { this.mask = DomHandler.createElement('div', {
@ -92,8 +91,7 @@ export default {
if (this.fullScreen) { if (this.fullScreen) {
document.body.removeChild(this.mask); document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} else { } else {
this.$refs.container.removeChild(this.mask); 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); this.mask.addEventListener('click', this.maskClickListener);
document.body.appendChild(this.mask); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} }
}, },
disableModality() { disableModality() {
@ -1691,8 +1690,7 @@ export default {
} }
if (!hasBlockerMasks) { if (!hasBlockerMasks) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} }
}, },
updateCurrentMetaData() { updateCurrentMetaData() {

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

@ -203,25 +203,17 @@ export default {
} }
if (!this.modal) { if (!this.modal) {
if (this.maximized) { this.maximized ? DomHandler.blockBodyScroll() : DomHandler.unblockBodyScroll();
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');
}
} }
}, },
enableDocumentSettings() { enableDocumentSettings() {
if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) { if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} }
}, },
unbindDocumentState() { unbindDocumentState() {
if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) { if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} }
}, },
onKeyDown(event) { onKeyDown(event) {

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

@ -35,8 +35,7 @@ export default {
}, },
beforeUnmount() { beforeUnmount() {
if (this.fullScreen) { if (this.fullScreen) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} }
this.mask = null; this.mask = null;
@ -52,8 +51,7 @@ export default {
}, },
onEnter(el) { onEnter(el) {
this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1); this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
this.focus(); this.focus();
}, },
onBeforeLeave() { onBeforeLeave() {
@ -62,8 +60,7 @@ export default {
onAfterLeave(el) { onAfterLeave(el) {
ZIndexUtils.clear(el); ZIndexUtils.clear(el);
this.containerVisible = false; this.containerVisible = false;
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
}, },
onActiveItemChange(index) { onActiveItemChange(index) {
if (this.activeIndex !== index) { if (this.activeIndex !== index) {

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

@ -93,8 +93,7 @@ export default {
}, },
onImageClick() { onImageClick() {
if (this.preview) { if (this.preview) {
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
this.maskVisible = true; this.maskVisible = true;
setTimeout(() => { setTimeout(() => {
this.previewVisible = true; this.previewVisible = true;
@ -164,8 +163,7 @@ export default {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave'); !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
}, },
onLeave() { onLeave() {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
this.$emit('hide'); this.$emit('hide');
}, },
onAfterLeave(el) { onAfterLeave(el) {
@ -183,8 +181,7 @@ export default {
this.previewVisible = false; this.previewVisible = false;
this.rotate = 0; this.rotate = 0;
this.scale = 1; this.scale = 1;
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} }
}, },
computed: { computed: {

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

@ -124,16 +124,14 @@ export default {
} }
if (this.blockScroll) { if (this.blockScroll) {
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} }
}, },
disableDocumentSettings() { disableDocumentSettings() {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
if (this.blockScroll) { if (this.blockScroll) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} }
}, },
onKeydown(event) { onKeydown(event) {

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

@ -564,6 +564,10 @@ export default {
return scrollbarWidth; return scrollbarWidth;
}, },
calculateBodyScrollbarWidth() {
return window.innerWidth - document.documentElement.offsetWidth;
},
getBrowser() { getBrowser() {
if (!this.browser) { if (!this.browser) {
let matched = this.resolveUserAgent(); let matched = this.resolveUserAgent();
@ -755,5 +759,15 @@ export default {
window.open(encodeURI(csv)); 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 clearSelection(): void;
static getSelection(): string | null; static getSelection(): string | null;
static calculateScrollbarWidth(): number; static calculateScrollbarWidth(): number;
static calculateBodyScrollbarWidth(): number;
static getBrowser(): object; static getBrowser(): object;
static resolveUserAgent(): { browser: string; version: string }; static resolveUserAgent(): { browser: string; version: string };
static isVisible(el: HTMLElement): boolean; static isVisible(el: HTMLElement): boolean;
@ -64,6 +65,8 @@ export declare class DomHandler {
static hasCSSAnimation(el: HTMLElement): boolean; static hasCSSAnimation(el: HTMLElement): boolean;
static hasCSSTransition(el: HTMLElement): boolean; static hasCSSTransition(el: HTMLElement): boolean;
static exportCSV(csv: any, filename: string): void; static exportCSV(csv: any, filename: string): void;
static blockBodyScroll(className?: string): void;
static unblockBodyScroll(className?: string): void;
} }
export declare class ObjectUtils { export declare class ObjectUtils {

12
layouts/default.vue
View File

@ -42,8 +42,7 @@ export default {
} }
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll'); DomHandler.unblockBodyScroll('blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
this.$toast.removeAllGroups(); this.$toast.removeAllGroups();
} }
} }
@ -61,18 +60,15 @@ export default {
onMenuButtonClick() { onMenuButtonClick() {
if (this.sidebarActive) { if (this.sidebarActive) {
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll'); DomHandler.unblockBodyScroll('blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
} else { } else {
this.sidebarActive = true; this.sidebarActive = true;
DomHandler.addClass(document.body, 'blocked-scroll'); DomHandler.blockBodyScroll('blocked-scroll');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} }
}, },
onMaskClick() { onMaskClick() {
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll'); DomHandler.unblockBodyScroll('blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
}, },
hideNews(event) { hideNews(event) {
this.$appState.newsActive = false; this.$appState.newsActive = false;