Skip to content

Commit

Permalink
Fixed #514
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Sep 29, 2020
1 parent edfe9e8 commit 79d94c4
Show file tree
Hide file tree
Showing 11 changed files with 437 additions and 15 deletions.
45 changes: 45 additions & 0 deletions src/components/autocomplete/AutoComplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
</template>

<script>
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
import ObjectUtils from '../utils/ObjectUtils';
import DomHandler from '../utils/DomHandler';
import Button from '../button/Button';
Expand Down Expand Up @@ -82,6 +83,8 @@ export default {
},
timeout: null,
outsideClickListener: null,
resizeListener: null,
scrollHandler: null,
data() {
return {
searching: false,
Expand All @@ -106,16 +109,26 @@ export default {
beforeDestroy() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
},
methods: {
onOverlayEnter() {
this.$refs.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
},
alignOverlay() {
let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
Expand All @@ -134,6 +147,38 @@ export default {
document.addEventListener('click', this.outsideClickListener);
}
},
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$el, () => {
if (this.overlayVisible) {
this.hideOverlay();
}
});
}
this.scrollHandler.bindScrollListener();
},
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.hideOverlay();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
},
isOutsideClicked(event) {
return !this.$refs.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
},
Expand Down
55 changes: 50 additions & 5 deletions src/components/calendar/Calendar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@
</template>

<script>
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
import InputText from '../inputtext/InputText';
import Button from '../button/Button';
import DomHandler from '../utils/DomHandler';
Expand Down Expand Up @@ -310,6 +311,13 @@ export default {
}
},
navigationState: null,
scrollHandler: null,
outsideClickListener: null,
maskClickListener: null,
resizeListener: null,
mask: null,
timePickerTimer: null,
isKeydown: false,
created() {
this.updateCurrentMetaData();
},
Expand Down Expand Up @@ -342,6 +350,12 @@ export default {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
},
data() {
return {
Expand All @@ -355,11 +369,6 @@ export default {
overlayVisible: false
}
},
outsideClickListener: null,
maskClickListener: null,
mask: null,
timePickerTimer: null,
isKeydown: false,
watch: {
value() {
this.updateCurrentMetaData();
Expand Down Expand Up @@ -537,9 +546,13 @@ export default {
},
onOverlayEnterComplete() {
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
if (this.mask) {
this.disableModality();
}
Expand Down Expand Up @@ -640,6 +653,38 @@ export default {
this.outsideClickListener = null;
}
},
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$el, () => {
if (this.overlayVisible) {
this.overlayVisible = false;
}
});
}
this.scrollHandler.bindScrollListener();
},
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.overlayVisible = false;
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
},
isOutsideClicked(event) {
return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) ||
this.$el.contains(event.target) || (this.$refs.overlay && this.$refs.overlay.contains(event.target)));
Expand Down
46 changes: 46 additions & 0 deletions src/components/colorpicker/ColorPicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
</template>

<script>
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
import DomHandler from '../utils/DomHandler';
export default {
Expand Down Expand Up @@ -70,13 +71,22 @@ export default {
outsideClickListener: null,
documentMouseMoveListener: null,
documentMouseUpListener: null,
scrollHandler: null,
resizeListener: null,
hueDragging: null,
colorDragging: null,
selfUpdate: null,
beforeDestroy() {
this.unbindOutsideClickListener();
this.unbindDocumentMouseMoveListener();
this.unbindDocumentMouseUpListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
},
mounted() {
this.updateUI();
Expand Down Expand Up @@ -317,13 +327,17 @@ export default {
this.updateUI();
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
if (this.autoZIndex) {
this.$refs.picker.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
}
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
},
alignOverlay() {
DomHandler.relativePosition(this.$refs.picker, this.$refs.input);
Expand Down Expand Up @@ -395,6 +409,38 @@ export default {
this.outsideClickListener = null;
}
},
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$el, () => {
if (this.overlayVisible) {
this.overlayVisible = false;
}
});
}
this.scrollHandler.bindScrollListener();
},
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.overlayVisible = false;
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
},
bindDocumentMouseMoveListener() {
if (!this.documentMouseMoveListener) {
this.documentMouseMoveListener = (event) => {
Expand Down
45 changes: 45 additions & 0 deletions src/components/dropdown/Dropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
</template>

<script>
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
import ObjectUtils from '../utils/ObjectUtils';
import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple';
Expand Down Expand Up @@ -83,13 +84,21 @@ export default {
};
},
outsideClickListener: null,
scrollHandler: null,
resizeListener: null,
searchTimeout: null,
currentSearchChar: null,
previousSearchChar: null,
searchValue: null,
beforeDestroy() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
},
updated() {
if (this.overlayVisible && this.filterValue) {
Expand Down Expand Up @@ -305,6 +314,8 @@ export default {
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
if (this.filter) {
this.$refs.filterInput.focus();
Expand All @@ -314,6 +325,8 @@ export default {
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
this.$emit('hide');
},
alignOverlay() {
Expand Down Expand Up @@ -344,6 +357,38 @@ export default {
this.outsideClickListener = null;
}
},
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$el, () => {
if (this.overlayVisible) {
this.hide();
}
});
}
this.scrollHandler.bindScrollListener();
},
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.hide();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
},
search(event) {
if (!this.visibleOptions) {
return;
Expand Down
Loading

0 comments on commit 79d94c4

Please sign in to comment.