vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #4235 - For BlockUI

Browse source
This commit is contained in:
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
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() { block() {
let styleClass = 'p-blockui p-component-overlay p-component-overlay-enter'; 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) { if (this.fullScreen) {
styleClass += ' p-blockui-document'; 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); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
document.activeElement.blur(); document.activeElement.blur();
} else { } 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); this.$refs.container.appendChild(this.mask);
} }
@ -63,18 +77,21 @@ export default {
}, },
unblock() { unblock() {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave'); !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(); this.removeMask();
}); }
}, },
removeMask() { removeMask() {
ZIndexUtils.clear(this.mask); ZIndexUtils.clear(this.mask);
if (this.fullScreen) { if (this.fullScreen) {
if (!this.isUnstyled) { document.body.removeChild(this.mask);
document.body.removeChild(this.mask); DomHandler.removeClass(document.body, 'p-overflow-hidden');
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
} else { } else {
this.$refs.container.removeChild(this.mask); this.$refs.container.removeChild(this.mask);
} }