@abi-software/gallery 0.3.0-beta.5 → 0.3.1

package/dist/img/logo-sparc-wave-primary.8ed83a51.svg

@@ -0,0 +1 @@
+<svg id="logo-sparc-wave-primary" data-name="logo-sparc-wave-primary" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 190.5854"><defs><linearGradient id="linear-gradient" y1="96.3505" x2="400" y2="96.3505" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0b00bf"/><stop offset="1" stop-color="#bc00fc"/></linearGradient></defs><title>SPARC Logo</title><path d="M396.6976,128.6248l-146.2735-3.38a6.5358,6.5358,0,0,0-6.1378,3.9236l-.0612.1407-13.673,31.4482L202.9416,9.5333l-.01-.0685a8.9823,8.9823,0,0,0-17.6624-.0114L163.673,125.3819,3.298,129.2886a3.38,3.38,0,0,0,.0269,6.7592L169.34,138.7635a6.5939,6.5939,0,0,0,6.5373-5.1457l.0571-.2546,17.8534-79.5649L221.26,185.1237l.0256.1243A6.7593,6.7593,0,0,0,234.092,186.52L254.9005,138.66l141.7971-3.2762a3.3805,3.3805,0,0,0,0-6.7592Z" style="fill:url(#linear-gradient)"/><path d="M25.6793,0C41.3957,0,51.057,10.0926,51.057,26.0972v9.5162H36.2053V26.0972c0-7.3532-3.8945-11.8219-10.526-11.8219-6.7768,0-10.6691,4.4687-10.6691,11.8219,0,3.8945,1.2982,7.3533,5.4786,11.3908l19.754,18.601C46.5861,62.1441,52.21,68.7778,52.21,79.88c0,16.0047-9.95,26.0973-25.9543,26.0973C10.108,105.9776.1585,95.885.1585,79.88V70.362H15.01V79.88c0,7.3533,4.0375,11.822,11.2455,11.822,7.065,0,11.1025-4.4687,11.1025-11.822,0-4.4709-2.1628-8.6514-6.0551-12.2576L11.1158,48.7357C3.043,41.2372.1585,34.8939.1585,25.666.1585,10.0926,9.82,0,25.6793,0Z" style="fill:#0e0e19"/><path d="M99.7971,69.7856v35.1821H84.9454V1.01h25.3755c16.0047,0,26.0973,10.0926,26.0973,26.0973V43.6883c0,16.15-10.0926,26.0973-26.0973,26.0973Zm10.3808-13.9849c7.2081,0,11.3908-4.3257,11.3908-11.6789V26.6759c0-7.21-4.1827-11.6811-11.3908-11.6811H99.7971V55.8007Z" style="fill:#0e0e19"/><path d="M278.5812,108.147H263.73V4.1893h26.0972c16.0047,0,26.0973,10.0926,26.0973,26.0972v14.13c0,9.95-4.3257,17.7363-11.3908,22.205,4.1827,12.6889,10.0926,29.9917,13.8418,41.5254h-15.14L290.6914,70.3708h-12.11Zm11.1-51.7632c7.21,0,11.3907-4.3257,11.3907-11.5338V29.8553c0-7.21-4.18-11.6812-11.3907-11.6812h-11.1v38.21Z" style="fill:#0e0e19"/><path d="M399.844,73.5414V83.06c0,16.0047-9.9474,26.0973-25.9521,26.0973-16.15,0-26.0972-10.0926-26.0972-26.0973V29.2766c0-16.0046,9.9473-26.0972,26.0972-26.0972,16.0047,0,25.9521,10.0926,25.9521,26.0972v9.5161h-14.85V29.2766c0-7.3532-4.0374-11.822-11.1025-11.822-7.21,0-11.2477,4.4688-11.2477,11.822V83.06c0,7.3533,4.0375,11.822,11.2477,11.822,7.0651,0,11.1025-4.4687,11.1025-11.822V73.5414Z" style="fill:#0e0e19"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/gallery",
-  "version": "0.3.0-beta.5",
+  "version": "0.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/hsorby/mapcore-gallery.git"
@@ -19,6 +19,7 @@
     "@babel/code-frame": "^7.12.11",
     "axios": "^0.26.1",
     "babel-plugin-component": "^1.1.1",
+    "base64-inline-loader": "^2.0.1",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.0",
     "vue": "^2.6.11"

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>
@@ -36,9 +45,9 @@
 
 <script>
 // import { SvgIcon } from '@abi-software/svg-sprite'
-import axios from 'axios'
 import Vue from 'vue'
 import { Button, Card, Popover } from 'element-ui'
+import GalleryHelper from '../mixins/GalleryHelpers'
 Vue.use(Button)
 Vue.use(Card)
 Vue.use(Popover)
@@ -54,17 +63,9 @@ function isValidHttpUrl(string) {
   return url.protocol === 'http:' || url.protocol === 'https:'
 }
 
-const getRequest = async (url, params, timeout) => {
-  return await axios({
-    method: 'get',
-    url,
-    params,
-    timeout,
-  })
-}
-
 export default {
   name: 'GalleryCard',
+  mixins: [GalleryHelper],
   props: {
     data: {
       type: Object,
@@ -110,6 +111,8 @@ export default {
       triangleSize: 4,
       thumbnail: undefined,
       useDefaultImg: false,
+      disableTooltip: false,
+      tooltipCalculated: false,
     }
   },
   computed: {
@@ -132,6 +135,31 @@ export default {
       return undefined
     },
   },
+  watch: {
+    data: {
+      deep: true,
+      immediate: true,
+      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 })
+          } else {
+            this.thumbnail = this.data.thumbnail
+          }
+        } else {
+          this.useDefaultImg = true
+        }
+        //Dynamically check title length to determine if popover should be shown
+        this.$nextTick(() => {
+          this.calculateShowTooltip()
+        })
+      },
+    },
+  },
   methods: {
     /**
      * Open a new link if link is provide.
@@ -154,7 +182,7 @@ export default {
      * handle thumbnail downloading,, it will use a default svg image if fails
      */
     downloadThumbnail: function (url, info) {
-      getRequest(url, {}, 11000).then(
+      this.getRequest(url, {}, 11000).then(
         (response) => {
           let data = response.data
           if (data.startsWith('data:')) {
@@ -177,26 +205,33 @@ export default {
         }
       )
     },
-  },
-  watch: {
-    data: {
-      deep: true,
-      immediate: true,
-      handler: function () {
-        this.thumbnail = undefined
-        this.useDefaultImg = false
-        if (this.data.thumbnail) {
-          if (isValidHttpUrl(this.data.thumbnail) && this.data.mimetype) {
-            this.downloadThumbnail(this.data.thumbnail, { fetchAttempts: 0 })
-          } else {
-            this.thumbnail = this.data.thumbnail
-          }
+    //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 {
-          this.useDefaultImg = true
+          //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>
 
@@ -232,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>
@@ -194,27 +195,6 @@ export default {
       }
     },
   },
-  watch: {
-    currentIndex: {
-      handler: function () {
-        const oddImagesVisible = this.numberOfItemsVisible % 2 === 1
-        let halfVisible = this.numberOfItemsVisible / 2
-        if (oddImagesVisible) {
-          halfVisible = (this.numberOfItemsVisible - 1) / 2
-        }
-        let rawIndicies = [this.currentIndex]
-        for (let i = 1; i <= halfVisible; i++) {
-          rawIndicies.push(this.currentIndex + i)
-          rawIndicies.push(this.currentIndex - i)
-        }
-
-        if (!oddImagesVisible) {
-          rawIndicies.pop()
-        }
-      },
-      immediate: true,
-    },
-  },
 }
 </script>
 

package/src/mixins/GalleryHelpers.js

@@ -1,14 +1,5 @@
 import axios from 'axios'
 
-const getRequest = async (url, params, timeout) => {
-  return await axios({
-    method: "get",
-    url,
-    params,
-    timeout
-  })
-}
-
 export default {
   //this mixin is not used by this code base but it can be used by other
   //projects to get a handle to various resources
@@ -18,6 +9,14 @@ export default {
     }
   },
   methods: {
+    async getRequest(url, params, timeout) {
+      return await axios({
+        method: 'get',
+        url,
+        params,
+        timeout,
+      })
+    },
     /**
      * Returns a file path for S3.
      * @param {String} dataset_id dataset id.
@@ -35,29 +34,28 @@ export default {
     findEntryWithPathInArray(array, path) {
       if (path && array) {
         for (let i = 0; i < array.length; i++) {
-          if (path === array[i].dataset.path)
-            return array[i];
+          if (path === array[i].dataset.path) return array[i]
         }
       }
-      return undefined;
+      return undefined
     },
     getThumbnailForPlot(plot, thumbnails) {
       if (thumbnails && plot) {
-        return this.findEntryWithPathInArray(thumbnails, plot.datacite.isSourceOf.path[0]);
+        return this.findEntryWithPathInArray(thumbnails, plot.datacite.isSourceOf.path[0])
       }
-      return undefined;
+      return undefined
     },
     /**
      * Use the scaffoldViews to help with finding the correct thumbnails.
      * Use the index if the workflow stated above fails.
      */
     getThumbnailForScaffold(scaffold, scaffoldViews, thumbnails, index) {
-      if (thumbnails && (thumbnails.length > 0)) {
-        let thumbnail = undefined;
+      if (thumbnails && thumbnails.length > 0) {
+        let thumbnail = undefined
         if (scaffold && scaffoldViews) {
           const view = this.findEntryWithPathInArray(scaffoldViews, scaffold.datacite.isSourceOf.path[0])
           if (view) {
-            thumbnail = this.findEntryWithPathInArray(thumbnails, view.datacite.isSourceOf.path[0]);
+            thumbnail = this.findEntryWithPathInArray(thumbnails, view.datacite.isSourceOf.path[0])
           }
         }
         if (thumbnail) {
@@ -66,7 +64,7 @@ export default {
           return thumbnails[index]
         }
       }
-      return undefined;
+      return undefined
     },
     getImageURLFromS3(apiEndpoint, info) {
       return `${apiEndpoint}/s3-resource/${info.datasetId}/${info.datasetVersion}/files/${info.file_path}?encodeBase64=true`
@@ -79,33 +77,28 @@ export default {
       return endpoint
     },
     getThumbnailURLFromBiolucida(apiEndpoint, info) {
-      return`${apiEndpoint}/thumbnail/${info.id}`
+      return `${apiEndpoint}/thumbnail/${info.id}`
     },
     getImageInfoFromBiolucida(apiEndpoint, items, info) {
       const endpoint = `${apiEndpoint}/image/${info.id}`
-      const params = { }
-      getRequest(endpoint, params, 20000)
-        .then(
-          response => {
-            let item = items.find(x => x.id === info.id)
-            const name = response.name
-            if (name) {
-              item.title = name
-            }
-          },
-          reason => {
-            if (
-              reason.message.includes('timeout') &&
-              reason.message.includes('exceeded') &&
-              info.fetchAttempts < 3
-            ) {
-              info.fetchAttempts += 1
-              this.getImageInfoFromBiolucida(apiEndpoint, items, info)
-            }
-
-            return Promise.reject('Maximum iterations reached.')
+      const params = {}
+      this.getRequest(endpoint, params, 20000).then(
+        (response) => {
+          let item = items.find((x) => x.id === info.id)
+          const name = response.name
+          if (name) {
+            item.title = name
           }
-        )
-    }
-  }
-};
+        },
+        (reason) => {
+          if (reason.message.includes('timeout') && reason.message.includes('exceeded') && info.fetchAttempts < 3) {
+            info.fetchAttempts += 1
+            this.getImageInfoFromBiolucida(apiEndpoint, items, info)
+          }
+
+          return Promise.reject('Maximum iterations reached.')
+        }
+      )
+    },
+  },
+}

package/vue.config.js

@@ -7,5 +7,17 @@ module.exports = {
       .use('vue-svg-inline-loader')
         .loader('vue-svg-inline-loader')
         .end()
-  },
+    const fontsRule = config.module.rule('fonts')
+    fontsRule.uses.clear()
+    config.module
+      .rule('fonts')
+      .test(/\.(ttf|otf|eot|woff|woff2)$/)
+      .use('base64-inline-loader')
+      .loader('base64-inline-loader')
+      .tap(options => {
+        // modify the options...    
+        return options
+      })
+      .end()
+  }
 }