Refactor #500 - For ColorPicker

pull/525/head
mertsincan 2020-09-27 19:25:44 +03:00
parent aaadcd5770
commit d386eff647
1 changed files with 25 additions and 2 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="containerClass"> <div ref="container" :class="containerClass">
<input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled" <input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled"
@click="onInputClick" @keydown="onInputKeydown" v-if="!inline" :aria-labelledby="ariaLabelledBy"/> @click="onInputClick" @keydown="onInputKeydown" v-if="!inline" :aria-labelledby="ariaLabelledBy"/>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
@ -20,6 +20,7 @@
</template> </template>
<script> <script>
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
import DomHandler from '../utils/DomHandler'; import DomHandler from '../utils/DomHandler';
export default { export default {
@ -70,6 +71,7 @@ export default {
outsideClickListener: null, outsideClickListener: null,
documentMouseMoveListener: null, documentMouseMoveListener: null,
documentMouseUpListener: null, documentMouseUpListener: null,
scrollHandler: null,
hueDragging: null, hueDragging: null,
colorDragging: null, colorDragging: null,
selfUpdate: null, selfUpdate: null,
@ -82,6 +84,8 @@ export default {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindDocumentMouseMoveListener(); this.unbindDocumentMouseMoveListener();
this.unbindDocumentMouseUpListener(); this.unbindDocumentMouseUpListener();
this.unbindScrollListener();
this.scrollHandler = null;
this.clearRefs(); this.clearRefs();
}, },
mounted() { mounted() {
@ -323,6 +327,7 @@ export default {
this.updateUI(); this.updateUI();
this.alignOverlay(); this.alignOverlay();
this.bindOutsideClickListener(); this.bindOutsideClickListener();
this.bindScrollListener();
if (this.autoZIndex) { if (this.autoZIndex) {
this.picker.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex()); this.picker.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
@ -330,6 +335,7 @@ export default {
}, },
onOverlayLeave() { onOverlayLeave() {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindScrollListener();
this.clearRefs(); this.clearRefs();
}, },
alignOverlay() { alignOverlay() {
@ -402,6 +408,23 @@ export default {
this.outsideClickListener = null; this.outsideClickListener = null;
} }
}, },
bindScrollListener() {
if (!this.scrollHandler) {
const { id } = this.$attrs;
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
if (this.overlayVisible) {
this.overlayVisible = false;
}
});
}
this.scrollHandler.bindScrollListener();
},
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
},
bindDocumentMouseMoveListener() { bindDocumentMouseMoveListener() {
if (!this.documentMouseMoveListener) { if (!this.documentMouseMoveListener) {
this.documentMouseMoveListener = (event) => { this.documentMouseMoveListener = (event) => {