Refactor #500 - For TieredMenu
parent
792ca3372f
commit
87d9a2a59e
|
@ -1,17 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
|
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
|
||||||
<div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true">
|
<div :ref="containerRef" :id="containerId" :class="containerClass" v-if="popup ? visible : true">
|
||||||
<TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/>
|
<TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
|
||||||
|
import UniqueComponentId from '../utils/UniqueComponentId';
|
||||||
import DomHandler from '../utils/DomHandler';
|
import DomHandler from '../utils/DomHandler';
|
||||||
import TieredMenuSub from './TieredMenuSub';
|
import TieredMenuSub from './TieredMenuSub';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
id: null,
|
||||||
popup: {
|
popup: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
@ -36,6 +39,7 @@ export default {
|
||||||
target: null,
|
target: null,
|
||||||
container: null,
|
container: null,
|
||||||
outsideClickListener: null,
|
outsideClickListener: null,
|
||||||
|
scrollHandler: null,
|
||||||
resizeListener: null,
|
resizeListener: null,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -46,6 +50,8 @@ export default {
|
||||||
this.restoreAppend();
|
this.restoreAppend();
|
||||||
this.unbindResizeListener();
|
this.unbindResizeListener();
|
||||||
this.unbindOutsideClickListener();
|
this.unbindOutsideClickListener();
|
||||||
|
this.unbindScrollListener();
|
||||||
|
this.scrollHandler = null;
|
||||||
this.target = null;
|
this.target = null;
|
||||||
this.container = null;
|
this.container = null;
|
||||||
},
|
},
|
||||||
|
@ -76,6 +82,7 @@ export default {
|
||||||
this.alignOverlay();
|
this.alignOverlay();
|
||||||
this.bindOutsideClickListener();
|
this.bindOutsideClickListener();
|
||||||
this.bindResizeListener();
|
this.bindResizeListener();
|
||||||
|
this.bindScrollListener();
|
||||||
|
|
||||||
if (this.autoZIndex) {
|
if (this.autoZIndex) {
|
||||||
this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
|
this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
|
||||||
|
@ -84,6 +91,7 @@ export default {
|
||||||
onLeave() {
|
onLeave() {
|
||||||
this.unbindOutsideClickListener();
|
this.unbindOutsideClickListener();
|
||||||
this.unbindResizeListener();
|
this.unbindResizeListener();
|
||||||
|
this.unbindScrollListener();
|
||||||
},
|
},
|
||||||
alignOverlay() {
|
alignOverlay() {
|
||||||
DomHandler.absolutePosition(this.container, this.target);
|
DomHandler.absolutePosition(this.container, this.target);
|
||||||
|
@ -104,6 +112,22 @@ export default {
|
||||||
this.outsideClickListener = null;
|
this.outsideClickListener = null;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
bindScrollListener() {
|
||||||
|
if (!this.scrollHandler) {
|
||||||
|
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, this.containerId, () => {
|
||||||
|
if (this.visible) {
|
||||||
|
this.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scrollHandler.bindScrollListener();
|
||||||
|
},
|
||||||
|
unbindScrollListener() {
|
||||||
|
if (this.scrollHandler) {
|
||||||
|
this.scrollHandler.unbindScrollListener();
|
||||||
|
}
|
||||||
|
},
|
||||||
bindResizeListener() {
|
bindResizeListener() {
|
||||||
if (!this.resizeListener) {
|
if (!this.resizeListener) {
|
||||||
this.resizeListener = () => {
|
this.resizeListener = () => {
|
||||||
|
@ -149,6 +173,9 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
containerId() {
|
||||||
|
return this.id || UniqueComponentId();
|
||||||
|
},
|
||||||
containerClass() {
|
containerClass() {
|
||||||
return ['p-tieredmenu p-component', {
|
return ['p-tieredmenu p-component', {
|
||||||
'p-tieredmenu-overlay': this.popup
|
'p-tieredmenu-overlay': this.popup
|
||||||
|
|
Loading…
Reference in New Issue