Permalink
Browse files

feat(tooltip popover): Better DOM change observation in component ver…

…sions
  • Loading branch information...
tmorehouse committed Sep 14, 2017
1 parent 75e92d3 commit f723807abc75d34501073e7dd8442db1b7ac1823
Showing with 38 additions and 16 deletions.
  1. +38 −16 lib/mixins/toolpop.js
@@ -15,6 +15,14 @@ const PLACEMENTS = {
auto: 'auto'
};
const OBSERVER_CONFIG = {
subtree: true,
childList: true,
characterData: true,
attributes: true,
attributeFilter: ['class', 'style']
};
export default {
props: {
target: {
@@ -42,6 +50,8 @@ export default {
created() {
// Create non-reactive property
this._toolpop = null;
this._obs_title = null;
this._obs_content = null;
},
mounted() {
// We do this in a $nextTick in hopes that the target element is in the DOM
@@ -53,22 +63,7 @@ export default {
// Listen to close signals from others
this.$on('close', this.onClose);
// Observe content Child changes so we can notify popper of possible size change
if (this.$refs.title) {
observeDom(this.$refs.title, this.updatePosition.bind(this), {
subtree: true,
childList: true,
attributes: true,
attributeFilter: ['class', 'style']
});
}
if (this.$refs.content) {
observeDom(this.$refs.content, this.updatePosition.bind(this), {
subtree: true,
childList: true,
attributes: true,
attributeFilter: ['class', 'style']
});
}
this.setObservers(true);
}
});
},
@@ -78,14 +73,20 @@ export default {
this._toolpop.updateConfig(this.getConfig());
}
},
activated() {
// Called when component is inside a <keep-alive> and component brought offline
this.setObservers(true);
},
deactivated() {
// Called when component is inside a <keep-alive> and component taken offline
if (this._toolpop) {
this.setObservers(false);
this._toolpop.hide();
}
},
beforeDestroy() {
this.$off('close', this.onClose);
this.setObservers(false);
if (this._toolpop) {
this._toolpop.destroy();
this._toolpop = null;
@@ -171,12 +172,14 @@ export default {
this.$emit('show', evt);
},
onShown(evt) {
this.setObservers(true);
this.$emit('shown', evt);
},
onHide(evt) {
this.$emit('hide', evt)
},
onHidden(evt) {
this.setObservers(false);
// bring our content back if needed to keep Vue happy
// Tooltip class will move it back to tip when shown again
this.bringItBack();
@@ -190,6 +193,25 @@ export default {
if (this.$el && this.$refs.content) {
this.$el.appendChild(this.$refs.content);
}
},
setObservers(on) {
if (on) {
if (this.$refs.title) {
this._obs_title = observeDom(this.$refs.title, this.updatePosition.bind(this), OBSERVER_CONFIG);
}
if (this.$refs.content) {
this._obs_content = observeDom(this.$refs.content, this.updatePosition.bind(this), OBSERVER_CONFIG);
}
} else {
if (this._obs_title) {
this._obs_title.disconnect();
this._obs_title = null;
}
if (this._obs_content) {
this._obs_content.disconnect();
this._obs_content = null;
}
}
}
}
};

0 comments on commit f723807

Please sign in to comment.