recalculate indicator tab when parent changes

Author: marcosmoura

src/components/mdTabs/mdTabs.vue

@@ -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.navigationObserver) {
-        this.navigationObserver.disconnect();
+      if (this.parentObserver) {
+        this.parentObserver.disconnect();
       }
 
-      window.removeEventListener('resize', this.calculateOnWatch);
+      window.removeEventListener('resize', this.calculateOnResize);
     }
   };
 </script>