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

Refactor #4235 - For BlockUI

pull/4243/head
Tuğçe Küçükoğlu 2023-08-04 13:40:59 +03:00
parent c7c71e213f
commit 3d612c8622
1 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,24 +33,38 @@ export default {
block() {
let styleClass = 'p-blockui p-component-overlay p-component-overlay-enter';
this.mask = document.createElement('div');
this.mask.setAttribute('data-pc-section', 'mask');
DomHandler.addStyles(this.mask, {
position: 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%'
});
if (this.fullScreen) {
styleClass += ' p-blockui-document';
!this.isUnstyled && this.mask.setAttribute('class', styleClass);
this.mask = DomHandler.createElement('div', {
'data-pc-section': 'mask',
style: {
position: 'fixed',
top: '0',
left: '0',
width: '100%',
height: '100%'
},
class: !this.isUnstyled && styleClass,
'p-bind': this.ptm('mask')
});
document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.activeElement.blur();
} else {
!this.isUnstyled && this.mask.setAttribute('class', styleClass);
this.mask = DomHandler.createElement('div', {
'data-pc-section': 'mask',
style: {
position: 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%'
},
class: !this.isUnstyled && styleClass,
'p-bind': this.ptm('mask')
});
this.$refs.container.appendChild(this.mask);
}
@ -63,18 +77,21 @@ export default {
},
unblock() {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
this.mask.addEventListener('animationend', () => {
if (DomHandler.hasCSSAnimation(this.mask) > 0) {
this.mask.addEventListener('animationend', () => {
this.removeMask();
});
} else {
this.removeMask();
});
}
},
removeMask() {
ZIndexUtils.clear(this.mask);
if (this.fullScreen) {
if (!this.isUnstyled) {
document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden');
} else {
this.$refs.container.removeChild(this.mask);
}