@abi-software/gallery 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/gallery",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/hsorby/mapcore-gallery.git"

package/src/components/Card.vue

@@ -24,10 +24,19 @@
         <p v-if="!data.hideType">
           <b>{{ data.type }}</b>
         </p>
-        <el-popover ref="galleryPopover" :content="data.title" placement="top" trigger="hover" popper-class="gallery-popper" />
-        <p v-if="!data.hideTitle" class="title" v-popover:galleryPopover>
+        <el-popover
+          ref="galleryPopover"
+          :disabled="disableTooltip"
+          :content="data.title"
+          placement="top"
+          trigger="hover"
+          popper-class="gallery-popper"
+        />
+        <!--use v-show here to make sure el popover always have a starting location -->
+        <p v-show="!data.hideTitle" ref="titleText" class="title" v-popover:galleryPopover>
           {{ data.title }}
         </p>
+        <p v-show="data.hideTitle" class="title text-placeholder" />
         <el-button class="button" @click.prevent="cardClicked"> View {{ data.type }}</el-button>
       </div>
     </div>
@@ -102,6 +111,8 @@ export default {
       triangleSize: 4,
       thumbnail: undefined,
       useDefaultImg: false,
+      disableTooltip: false,
+      tooltipCalculated: false,
     }
   },
   computed: {
@@ -131,6 +142,8 @@ export default {
       handler: function () {
         this.thumbnail = undefined
         this.useDefaultImg = false
+        this.tooltipCalculated = false
+        this.disableTooltip = false
         if (this.data.thumbnail) {
           if (isValidHttpUrl(this.data.thumbnail) && this.data.mimetype) {
             this.downloadThumbnail(this.data.thumbnail, { fetchAttempts: 0 })
@@ -140,6 +153,10 @@ export default {
         } else {
           this.useDefaultImg = true
         }
+        //Dynamically check title length to determine if popover should be shown
+        this.$nextTick(() => {
+          this.calculateShowTooltip()
+        })
       },
     },
   },
@@ -188,6 +205,32 @@ export default {
         }
       )
     },
+    //dynamically calculate if tooltip is required
+    calculateShowTooltip: function () {
+      if (this.data.hideTitle) {
+        this.disableTooltip = true
+        this.tooltipCalculated = true
+      } else {
+        const ele = this.$refs.titleText
+        //Check if title text is rendered yet
+        if (ele && ele.offsetParent) {
+          this.tooltipCalculated = true
+          if (ele.offsetWidth >= ele.scrollWidth) this.disableTooltip = true
+          else this.disableTooltip = false
+        } else {
+          //text not rendered yet
+          if (this.data.title.length > 20) this.disableTooltip = false
+          else this.disableTooltip = true
+        }
+      }
+    },
+  },
+  updated: function () {
+    if (!this.tooltipCalculated) {
+      this.$nextTick(() => {
+        this.calculateShowTooltip()
+      })
+    }
   },
 }
 </script>
@@ -224,6 +267,10 @@ export default {
   text-align: left;
 }
 
+.text-placeholder {
+  height: 1rem;
+}
+
 .title {
   overflow-x: hidden;
   text-overflow: ellipsis;

package/src/components/Gallery.vue

@@ -9,6 +9,7 @@
       <div class="card-line">
         <span v-for="(item, index) in windowedItems" :key="'card_' + index" :class="['key-image-span', { active: isActive(index) }]">
           <card
+            v-if="item"
             :data="item"
             :body-style="bodyStyle"
             :image-container-style="imageContainerStyle"
@@ -27,7 +28,7 @@
       </a>
       <div v-else style="width: 2rem" />
     </div>
-    <div v-if="canShowIndicatorBar" :style="bottomSpacer" />
+    <div :style="bottomSpacer" />
     <index-indicator v-if="canShowIndicatorBar" :count="itemCount" :current="currentIndex" @clicked="indicatorClicked" />
   </div>
 </template>