Merge pull request #8101 from jonboiser/text-truncator-flashes

learningequality · May 25, 2021 · 85cbd75 · 85cbd75
2 parents c7e8771 + af26355
commit 85cbd75
Showing 1 changed file with 19 additions and 13 deletions.
diff --git a/kolibri/core/assets/src/views/TextTruncator.vue b/kolibri/core/assets/src/views/TextTruncator.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div>
+  <div :style="{ maxHeight: `${maxHeight - 16}px` }" :class="{ truncated: !shaveDone }">
     <div v-if="viewAllText">
       {{ text }}
     </div>
@@ -53,14 +53,13 @@
     data() {
       return {
         textIsTruncated: false,
+        shaveDone: false,
         viewAllText: false,
       };
     },
     computed: {
       currentDimensions() {
         return {
-          text: this.text,
-          maxHeight: this.maxHeight,
           elementWidth: this.elementWidth,
           elementHeight: this.elementHeight,
         };
@@ -74,6 +73,9 @@
         this.debouncedHandleUpdate();
       },
     },
+    beforeDestroy() {
+      this.debouncedHandleUpdate.cancel();
+    },
     methods: {
       titleIsShaved() {
         return Boolean(this.$el.querySelector('.js-shave'));
@@ -88,20 +90,24 @@
           return $shaveEl.clientWidth < $shaveEl.scrollWidth;
         }
       },
+      updateTitle() {
+        // Set title attribute as full text if the visible text is truncated
+        if (this.textIsTruncated && !this.$refs.shaveEl.title) {
+          this.$refs.shaveEl.setAttribute('title', this.text);
+        } else if (!this.textIsTruncated && this.$refs.shaveEl.title) {
+          // Remove if text is fully visible after a resize
+          this.$refs.shaveEl.removeAttribute('title');
+        }
+      },
       handleUpdate() {
         // TODO make "View Less" disappear when user expands window
-        // and text isn't truncated any more.
+        // and text isn't truncated anymore.
         shave(this.$refs.shaveEl, this.maxHeight, { spaces: false });
-        this.$nextTick(() => {
+        this.$nextTick().then(() => {
           this.textIsTruncated = this.titleIsShaved() || this.titleIsOverflowing();
-          // set title attribute for shaved text but
-          // skip if a title already exists
-          if (this.textIsTruncated && !this.$refs.shaveEl.title)
-            this.$refs.shaveEl.setAttribute('title', this.text);
-          // if the text is not shaved and a title has been previously set,
-          // remove it
-          else if (!this.textIsTruncated && this.$refs.shaveEl.title)
-            this.$refs.shaveEl.removeAttribute('title');
+          this.updateTitle();
+          // Removes temporary truncated styling from main div
+          this.shaveDone = true;
         });
       },
     },