From e1cbbf574d9c9fde796a1ef3fe90e6d8cc81e2b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= Date: Fri, 30 Dec 2022 15:33:42 +0300 Subject: [PATCH 1/5] after changing position mask not removed issue fixed --- components/sidebar/Sidebar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/sidebar/Sidebar.vue b/components/sidebar/Sidebar.vue index 952015997..3de123e81 100755 --- a/components/sidebar/Sidebar.vue +++ b/components/sidebar/Sidebar.vue @@ -97,7 +97,7 @@ export default { onLeave() { this.$emit('hide'); - if (this.modal && !this.fullScreen) { + if (this.modal) { this.disableModality(); } }, From 80e3981e92a39980c48241c8495151223d3d1575 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= Date: Tue, 3 Jan 2023 17:29:54 +0300 Subject: [PATCH 2/5] Reimplement sidebar completed --- components/sidebar/Sidebar.vue | 333 ++++++++++++++++++++------------- 1 file changed, 198 insertions(+), 135 deletions(-) diff --git a/components/sidebar/Sidebar.vue b/components/sidebar/Sidebar.vue index 3de123e81..4d38ae9d2 100755 --- a/components/sidebar/Sidebar.vue +++ b/components/sidebar/Sidebar.vue @@ -1,20 +1,22 @@ @@ -26,7 +28,6 @@ import { DomHandler, ZIndexUtils } from 'primevue/utils'; export default { name: 'Sidebar', - inheritAttrs: false, emits: ['update:visible', 'show', 'hide'], props: { visible: { @@ -60,51 +61,65 @@ export default { modal: { type: Boolean, default: true + }, + blockScroll: { + type: Boolean, + default: false } }, - mask: null, maskClickListener: null, container: null, content: null, headerContainer: null, closeButton: null, - beforeUnmount() { - this.destroyModal(); + outsideClickListener: null, + data() { + return { + maskVisible: false + }; + }, + watch: { + visible(val) { + this.maskVisible = val; + } + }, + beforeUnmount() { if (this.container && this.autoZIndex) { ZIndexUtils.clear(this.container); } + this.unbindOutsideClickListener(); this.container = null; }, methods: { hide() { this.$emit('update:visible', false); + this.outsideClickListener && this.unbindOutsideClickListener(); }, - onEnter(el) { + onEnter() { this.$emit('show'); if (this.autoZIndex) { - ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal); + ZIndexUtils.set('modal', this.$refs.mask, this.baseZIndex || this.$primevue.config.zIndex.modal); } + this.maskVisible = true; this.focus(); - - if (this.modal && !this.fullScreen) { - this.enableModality(); - } }, onLeave() { - this.$emit('hide'); + DomHandler.addClass(this.$refs.mask, 'p-component-overlay-leave'); - if (this.modal) { - this.disableModality(); + this.$emit('hide'); + this.unbindOutsideClickListener(); + }, + onAfterLeave() { + if (this.autoZIndex) { + ZIndexUtils.clear(this.mask); } }, - onAfterLeave(el) { - if (this.autoZIndex) { - ZIndexUtils.clear(el); - } + onAfterEnter() { + this.bindOutsideClickListener(); }, focus() { const findFocusableElement = (container) => { @@ -123,54 +138,14 @@ export default { focusTarget && focusTarget.focus(); }, - enableModality() { - if (!this.mask) { - this.mask = document.createElement('div'); - this.mask.setAttribute('class', 'p-sidebar-mask p-component-overlay p-component-overlay-enter'); - this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1); - - if (this.dismissable) { - this.bindMaskClickListener(); - } - - document.body.appendChild(this.mask); - DomHandler.addClass(document.body, 'p-overflow-hidden'); - } - }, - disableModality() { - if (this.mask) { - DomHandler.addClass(this.mask, 'p-component-overlay-leave'); - this.mask.addEventListener('animationend', () => { - this.destroyModal(); - }); - } - }, - bindMaskClickListener() { - if (!this.maskClickListener) { - this.maskClickListener = () => { - this.hide(); - }; - - this.mask.addEventListener('click', this.maskClickListener); - } - }, onKeydown(event) { if (event.code === 'Escape') { this.hide(); } }, - unbindMaskClickListener() { - if (this.maskClickListener) { - this.mask.removeEventListener('click', this.maskClickListener); - this.maskClickListener = null; - } - }, - destroyModal() { - if (this.mask) { - this.unbindMaskClickListener(); - document.body.removeChild(this.mask); - DomHandler.removeClass(document.body, 'p-overflow-hidden'); - this.mask = null; + onMaskClick(event) { + if (this.dismissable && this.modal && this.$refs.mask === event.target) { + this.hide(); } }, containerRef(el) { @@ -184,16 +159,43 @@ export default { }, closeButtonRef(el) { this.closeButton = el; + }, + getPositionClass() { + const positions = ['left', 'right', 'top', 'bottom']; + const pos = positions.find((item) => item === this.position); + + return pos ? `p-sidebar-${pos}` : ''; + }, + bindOutsideClickListener() { + if (!this.outsideClickListener) { + this.outsideClickListener = (event) => { + if (!this.modal && this.isOutsideClicked(event) && this.dismissable) { + this.hide(); + } + }; + + document.addEventListener('click', this.outsideClickListener); + } + }, + unbindOutsideClickListener() { + if (this.outsideClickListener) { + document.removeEventListener('click', this.outsideClickListener); + this.outsideClickListener = null; + } + }, + isOutsideClicked(event) { + return this.container && !this.container.contains(event.target); } }, computed: { containerClass() { return [ - 'p-sidebar p-component p-sidebar-' + this.position, + 'p-sidebar p-component', + this.getPositionClass(), { - 'p-sidebar-active': this.visible, 'p-input-filled': this.$primevue.config.inputStyle === 'filled', - 'p-ripple-disabled': this.$primevue.config.ripple === false + 'p-ripple-disabled': this.$primevue.config.ripple === false, + 'p-sidebar-full': this.fullScreen } ]; }, @@ -202,6 +204,18 @@ export default { }, closeAriaLabel() { return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined; + }, + maskClasses() { + return [ + 'p-sidebar-mask', + this.getPositionClass(), + { + 'p-component-overlay p-component-overlay-enter': this.modal, + 'p-sidebar-mask-scrollblocker': this.blockScroll, + 'p-sidebar-visible': this.maskVisible, + 'p-sidebar-full': this.fullScreen + } + ]; } }, directives: { @@ -215,134 +229,183 @@ export default {