Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-15 02:33:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

recalculate indicator tab when parent changes

Browse source
This commit is contained in:
Marcos Moura 2017-01-08 17:12:05 -02:00
parent ea8e425ed2
commit 5d6915c9c6
1 changed files with 19 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/components/mdTabs/mdTabs.vue
View file

@ -33,6 +33,7 @@
<script>
import theme from '../../core/components/mdTheme/mixin';
import throttle from '../../core/utils/throttle';
export default {
props: {
@ -56,6 +57,7 @@
hasIcons: false,
hasLabel: false,
transitionControl: null,
transitionOff: false,
contentHeight: '0px',
contentWidth: '0px'
}),
@ -120,31 +122,24 @@
}
},
observeElementChanges() {
this.contentObserver = new MutationObserver(this.calculateOnWatch);
this.navigationObserver = new MutationObserver(this.calculateOnWatch);
this.contentObserver.observe(this.$refs.tabContent, {
this.parentObserver = new MutationObserver(throttle(this.calculateOnWatch, 50));
this.parentObserver.observe(this.$refs.tabContent, {
childList: true,
attributes: true,
characterData: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
});
this.navigationObserver.observe(this.$refs.tabNavigation.$el, {
attributes: true
subtree: true
});
},
getTabIndex(id) {
let idList = Object.keys(this.tabList);
const idList = Object.keys(this.tabList);
return idList.indexOf(id);
},
calculateIndicatorPos() {
if (this.$refs.tabHeader && this.$refs.tabHeader[this.activeTabNumber]) {
let tabsWidth = this.$el.offsetWidth;
let activeTab = this.$refs.tabHeader[this.activeTabNumber];
let left = activeTab.offsetLeft;
let right = tabsWidth - left - activeTab.offsetWidth;
const tabsWidth = this.$el.offsetWidth;
const activeTab = this.$refs.tabHeader[this.activeTabNumber];
const left = activeTab.offsetLeft;
const right = tabsWidth - left - activeTab.offsetWidth;
this.$refs.indicator.style.left = left + 'px';
this.$refs.indicator.style.right = right + 'px';
@ -157,7 +152,7 @@
this.contentWidth = width * this.activeTabNumber + 'px';
for (const tabId in this.tabList) {
let tab = this.tabList[tabId];
const tab = this.tabList[tabId];
tab.ref.width = width + 'px';
tab.ref.left = width * index + 'px';
@ -188,10 +183,13 @@
}, 200);
},
calculateOnWatch() {
this.transitionOff = true;
this.calculatePosition();
this.debounceTransition();
},
calculateOnResize() {
this.transitionOff = true;
this.calculateOnWatch();
},
setActiveTab(tabData) {
this.hasIcons = !!tabData.icon;
this.hasLabel = !!tabData.label;
@ -204,7 +202,7 @@
mounted() {
this.$nextTick(() => {
this.observeElementChanges();
window.addEventListener('resize', this.calculateOnWatch);
window.addEventListener('resize', this.calculateOnResize);
if (Object.keys(this.tabList).length && !this.activeTab) {
let firstTab = Object.keys(this.tabList)[0];
@ -214,15 +212,11 @@
});
},
beforeDestroy() {
if (this.contentObserver) {
this.contentObserver.disconnect();
if (this.parentObserver) {
this.parentObserver.disconnect();
}
if (this.navigationObserver) {
this.navigationObserver.disconnect();
}
window.removeEventListener('resize', this.calculateOnWatch);
window.removeEventListener('resize', this.calculateOnResize);
}
};
</script>