@abi-software/gallery 0.3.1 → 0.3.2

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@abi-software/gallery",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "repository": {
     "type": "git",
-    "url": "https://github.com/hsorby/mapcore-gallery.git"
+    "url": "https://github.com/ABI-Software/mapcore-gallery.git"
   },
   "license": "Apache-2.0",
   "private": false,
   "scripts": {
+    "serve-no-lint": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
-    "build-bundle": "vue-cli-service build --target lib --name gallery src/main.js",
+    "build-bundle": "vue-cli-service build --target lib --name gallery src/main-bundle.js --skip-plugins @vue/cli-plugin-eslint",
     "lint": "vue-cli-service lint"
   },
   "main": "dist/gallery.common.js",

package/src/App.vue

@@ -1,28 +1,42 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <gallery :items="dataInput" @card-clicked="cardClicked" />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
+import Gallery from './components/Gallery'
 export default {
   name: 'App',
   components: {
-    HelloWorld,
+    Gallery,
+  },
+  data: function () {
+    return {
+      dataInput: [
+        {
+          title: 'test1',
+          type: 'data',
+          link: 'https://sparc.science/',
+        },
+        {
+          title: 'test2',
+          type: 'data',
+          link: 'https://sparc.science/',
+        },
+        {
+          title: 'test3',
+          type: 'data',
+          link: 'https://sparc.science/',
+        },
+      ],
+    }
+  },
+  methods: {
+    cardClicked: function (data) {
+      console.log('card-clicked', data)
+    },
   },
 }
 </script>
-
-<style scoped>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

package/src/components/Card.vue

@@ -1,7 +1,7 @@
 <template>
   <el-card :shadow="shadow" :body-style="bodyStyle" :style="{ padding: '0px', maxWidth: width + 'rem' }" class="card">
     <div v-loading="!isReady">
-      <div :style="imageContainerStyle">
+      <div class="cursor-pointer" :style="imageContainerStyle" @click.prevent="cardClicked">
         <img v-if="useDefaultImg" src="../assets/logo-sparc-wave-primary.svg" svg-inline :style="imageStyle" />
         <img v-else :src="thumbnail" alt="thumbnail loading ..." :style="imageStyle" />
       </div>
@@ -33,7 +33,7 @@
           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>
+        <p v-show="!data.hideTitle" ref="titleText" v-popover:galleryPopover class="title">
           {{ data.title }}
         </p>
         <p v-show="data.hideTitle" class="title text-placeholder" />
@@ -46,11 +46,13 @@
 <script>
 // import { SvgIcon } from '@abi-software/svg-sprite'
 import Vue from 'vue'
-import { Button, Card, Popover } from 'element-ui'
+import { Button, Card, Popover, Tooltip, Loading } from 'element-ui'
 import GalleryHelper from '../mixins/GalleryHelpers'
 Vue.use(Button)
 Vue.use(Card)
 Vue.use(Popover)
+Vue.use(Tooltip)
+Vue.use(Loading)
 
 function isValidHttpUrl(string) {
   let url = undefined
@@ -185,7 +187,7 @@ export default {
       this.getRequest(url, {}, 11000).then(
         (response) => {
           let data = response.data
-          if (data.startsWith('data:')) {
+          if (typeof data === 'string' && data.startsWith('data:')) {
             this.thumbnail = response.data
           } else {
             if (this.data.mimetype) {
@@ -267,6 +269,10 @@ export default {
   text-align: left;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .text-placeholder {
   height: 1rem;
 }

package/src/components/Gallery.vue

@@ -56,7 +56,7 @@ export default {
     },
     maxWidth: {
       type: Number,
-      required: true,
+      default: 3,
     },
     cardWidth: {
       type: Number,

package/src/main-bundle.js

@@ -0,0 +1,2 @@
+import Gallery from './components/Gallery.vue'
+export default Gallery

package/src/main.js

@@ -1,2 +1,8 @@
-import Gallery from './components/Gallery.vue'
-export default Gallery
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: (h) => h(App),
+}).$mount('#app')

package/src/mixins/GalleryHelpers.js

@@ -67,13 +67,20 @@ export default {
       return undefined
     },
     getImageURLFromS3(apiEndpoint, info) {
-      return `${apiEndpoint}/s3-resource/${info.datasetId}/${info.datasetVersion}/files/${info.file_path}?encodeBase64=true`
+      let url = `${apiEndpoint}/s3-resource/${info.datasetId}/${info.datasetVersion}/files/${info.file_path}?encodeBase64=true`
+      if (info.s3Bucket) {
+        url = url + `&s3BucketName=${info.s3Bucket}`
+      }
+      return url
     },
     getSegmentationThumbnailURL(apiEndpoint, info) {
       let endpoint = `${apiEndpoint}/thumbnail/neurolucida`
       endpoint = endpoint + `?datasetId=${info.datasetId}`
       endpoint = endpoint + `&version=${info.datasetVersion}`
       endpoint = endpoint + `&path=files/${info.segmentationFilePath}`
+      if (info.s3Bucket) {
+        endpoint = endpoint + `&s3BucketName=${info.s3Bucket}`
+      }
       return endpoint
     },
     getThumbnailURLFromBiolucida(apiEndpoint, info) {

package/vue.config.js

@@ -1,12 +1,8 @@
 // vue.config.js
 module.exports = {
-  chainWebpack: config => {
+  chainWebpack: (config) => {
     // vue svg inline loader for default svg
-    config.module
-      .rule('vue')
-      .use('vue-svg-inline-loader')
-        .loader('vue-svg-inline-loader')
-        .end()
+    config.module.rule('vue').use('vue-svg-inline-loader').loader('vue-svg-inline-loader').end()
     const fontsRule = config.module.rule('fonts')
     fontsRule.uses.clear()
     config.module
@@ -14,10 +10,10 @@ module.exports = {
       .test(/\.(ttf|otf|eot|woff|woff2)$/)
       .use('base64-inline-loader')
       .loader('base64-inline-loader')
-      .tap(options => {
-        // modify the options...    
+      .tap((options) => {
+        // modify the options...
         return options
       })
       .end()
-  }
+  },
 }