@abi-software/gallery 0.1.3-alpha.9 → 0.1.5-beta.0

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/jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest"
-};
+  preset: '@vue/cli-plugin-unit-jest',
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/gallery",
-  "version": "0.1.3-alpha.9",
+  "version": "0.1.5-beta.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/hsorby/mapcore-gallery.git"
@@ -18,6 +18,8 @@
   "dependencies": {
     "@abi-software/svg-sprite": "^0.1.11",
     "@babel/code-frame": "^7.12.11",
+    "axios": "^0.26.1",
+    "babel-plugin-component": "^1.1.1",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.0",
     "vue": "^2.6.11"

package/src/App.vue

@@ -16,7 +16,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

package/src/assets/logo-sparc-wave-primary.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/src/components/Card.vue

@@ -1,37 +1,69 @@
 <template>
-  <el-card :style="{ padding: '0px' }" class="card">
-    <img :src="data.thumbnail" alt="thumbnail missing" :style="`max-width: ${width}rem; height: ${imageHeight}rem`" />
-    <div v-if="false" class="image-overlay">
-      <div
-        class="triangle-right-corner"
-        :style="`border-left-width: ${triangleHeight * 1.2}rem; border-top-width: ${triangleHeight}rem;`"
-        @click="$emit('view')"
-      ></div>
-      <el-tooltip class="item" :content="`View ${data.type}`" placement="left">
-        <img
-          class="triangle-icon"
-          :style="`height: ${triangleHeight * 0.25}rem;top: ${triangleHeight * 0.15}rem;right: ${triangleHeight * 0.15}rem`"
-          :src="typeIcon"
-          @click="$emit('view')"
+  <el-card :shadow="shadow" :body-style="bodyStyle" :style="{ padding: '0px', maxWidth: width + 'rem' }" class="card">
+    <div v-loading="!isReady">
+      <div :style="imageStyle">
+        <img :src="thumbnail" alt="thumbnail loading ..." :style="imageStyle" />
+      </div>
+      <div v-if="false" class="image-overlay">
+        <div
+          class="triangle-right-corner"
+          :style="`border-left-width: ${triangleHeight * 1.2}rem; border-top-width: ${triangleHeight}rem;`"
+          @click="openLinkInNewTab"
         />
-      </el-tooltip>
-    </div>
-    <div v-if="showCardDetails" class="details" :style="`margin: ${marginDetails}rem`">
-      <p>
-        <b>{{ data.type }}</b
-        ><br />{{ data.title }}
-      </p>
-      <el-button @click.prevent="$emit('view')">View {{ data.type }}</el-button>
+        <el-tooltip class="item" :content="`View ${data.type}`" placement="left">
+          <img
+            class="triangle-icon"
+            :style="`height: ${triangleHeight * 0.25}rem;top: ${triangleHeight * 0.15}rem;right: ${triangleHeight * 0.15}rem`"
+            :src="typeIcon"
+            @click="openLinkInNewTab"
+          />
+        </el-tooltip>
+      </div>
+      <div v-if="showCardDetails" class="details">
+        <p>
+          <b>{{ data.type }}</b>
+        </p>
+        <el-popover ref="galleryPopover" :content="data.title" placement="top" trigger="hover" popper-class="gallery-popper" />
+        <p class="title" v-popover:galleryPopover>
+          {{ data.title }}
+        </p>
+        <el-button class="button" @click.prevent="cardClicked"> View {{ data.type }}</el-button>
+      </div>
     </div>
   </el-card>
 </template>
 
 <script>
 // import { SvgIcon } from '@abi-software/svg-sprite'
+import axios from 'axios'
+import Vue from 'vue'
+import { Button, Card, Popover } from 'element-ui'
+Vue.use(Button)
+Vue.use(Card)
+Vue.use(Popover)
+
+function isValidHttpUrl(string) {
+  let url = undefined
+
+  try {
+    url = new URL(string)
+  } catch (_) {
+    return false
+  }
+  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',
-  // components: { SvgIcon },
   props: {
     data: {
       type: Object,
@@ -48,16 +80,41 @@ export default {
     showCardDetails: {
       type: Boolean,
     },
+    bodyStyle: {
+      type: Object,
+      default: () => {
+        return { padding: '20px', background: '#ffffff' }
+      },
+    },
+    imageStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    shadow: {
+      type: String,
+      default: 'always',
+    },
   },
   data() {
     return {
+      ro: null,
       triangleSize: 4,
+      thumbnail: undefined,
+      defaultImg: require('../assets/logo-sparc-wave-primary.svg'),
     }
   },
   computed: {
+    isReady() {
+      return this.data.title && this.thumbnail && (this.data.link || this.data.userData)
+    },
     imageHeight() {
       return this.showCardDetails ? this.height * 0.525 : this.height
     },
+    imageWidth() {
+      return this.width - 2 * this.marginDetails
+    },
     triangleHeight() {
       return this.height * 0.237
     },
@@ -65,24 +122,89 @@ export default {
       return this.height * 0.076
     },
     typeIcon() {
-      if (this.data.type == '3D Image') {
-        return require('../assets/3d_image_icon.svg')
-      } else if (this.data.type == '3D Scaffold') {
-        return require('../assets/scaffold_image_icon.svg')
+      // if (this.data.type == '3D Image') {
+      //   return require('../assets/3d_image_icon.svg')
+      // } else if (this.data.type == '3D Scaffold') {
+      //   return require('../assets/scaffold_image_icon.svg')
+      // }
+      return undefined // require('@/assets/data-icon.png')
+    },
+  },
+  methods: {
+    cardClicked: function () {
+      if (this.data.link) {
+        const link = document.createElement('a')
+        link.href = this.data.link
+        link.target = '_blank'
+        document.body.appendChild(link)
+        link.click()
+        link.remove()
       }
-      return require('../assets/2d_image_icon.svg')
+      if (this.data.userData) {
+        this.$emit('card-clicked', this.data.userData)
+      }
+    },
+    downloadThumbnail: function (url, info) {
+      getRequest(url, {}, 11000).then(
+        (response) => {
+          let data = response.data
+          if (data.startsWith('data:')) {
+            this.thumbnail = response.data
+          } else {
+            if (this.data.mimetype) {
+              this.thumbnail = `data:${this.data.mimetype};base64,${response.data}`
+            } else {
+              this.thumbnail = response.data
+            }
+          }
+        },
+        (reason) => {
+          if (reason.message.includes('timeout') && reason.message.includes('exceeded') && info.fetchAttempts < 3) {
+            info.fetchAttempts += 1
+            this.downloadThumbnail(url, info)
+          } else {
+            this.thumbnail = this.defaultImg
+          }
+        }
+      )
     },
   },
+  created() {
+    //Check if thumbnail is set as url and mimetype is also set
+    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.thumbnail = this.defaultImg
+    }
+  },
 }
 </script>
 
 <style scoped>
-.card.old {
-  box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.25);
-  border: solid 0.0625rem var(--pale-grey);
-  background-color: #ffffff;
-  display: inline-block;
-  position: relative;
+.button {
+  z-index: 10;
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  background-color: #8300bf;
+  border: #8300bf;
+  color: white;
+  cursor: pointer;
+  margin-top: 8px;
+}
+
+.button:hover {
+  background: #8300bf;
+  box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, 0.25);
+  color: #fff;
 }
 
 .card {
@@ -92,6 +214,12 @@ export default {
   text-align: left;
 }
 
+.title {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 p.bold {
   font-weight: bold;
 }
@@ -113,3 +241,22 @@ p.bold {
   border-top: solid #8300bf;
 }
 </style>
+
+<style>
+.gallery-popper {
+  background: #f3ecf6 !important;
+  border: 1px solid #8300bf;
+  border-radius: 4px;
+  color: #303133 !important;
+  font-size: 12px;
+  line-height: 1rem;
+  height: 1rem;
+  padding: 10px;
+}
+.gallery-popper.el-popper[x-placement^='top'] .popper__arrow {
+  border-top-color: #8300bf !important;
+}
+.gallery-popper.el-popper[x-placement^='top'] .popper__arrow:after {
+  border-top-color: #f3ecf6 !important;
+}
+</style>

package/src/components/Gallery.vue

@@ -1,10 +1,11 @@
 <template>
   <div ref="myButton" class="gallery">
     <div class="gallery-strip">
-      <a href="#" :class="['oval', 'prev', { disabled: !isPrevPossible }]" @click.prevent="goPrev">
+      <a v-if="items.length > 1" href="#" :class="['oval', 'prev', { disabled: !isPrevPossible }]" @click.prevent="goPrev">
         <span class="progress-button">&lsaquo;</span>
       </a>
-      <div class="filler"></div>
+      <div v-else style="width: 2rem" />
+      <div class="filler" />
       <div class="card-line">
         <span
           v-for="(item, index) in items"
@@ -12,36 +13,27 @@
           :style="{ display: displayState(index) }"
           :class="['key-image-span', { active: isActive(index) }]"
         >
-          <card :data="item" :width="cardWidth" :height="cardHeight" :show-card-details="showCardDetails" @view="onView" />
-          <!-- <nuxt-link  :style="`width: ${cardLineWidth}rem`"
-            v-slot="{ href }"
-            :to="{
-              name: getThumbnailLinkName(thumbnail_image),
-              params: getThumbnailLinkParams(thumbnail_image),
-              query: getThumbnailLinkQuery(thumbnail_image),
-            }"
-          >
-            <a target="_blank" :href="href" rel="noopener noreferrer">
-              <img
-                :ref="'key_image_' + thumbnail_image.id"
-                :src="thumbnail_image.img"
-                alt="thumbnail missing"
-                class="thumbnail thumbnail-100"
-                :height="slideNaturalHeight"
-                :width="slideNaturalWidth"
-              />
-            </a>
-          </nuxt-link> -->
-          <!-- <div class="overlay" :style="`background-color: ${imageOverlayColour(index)}`" /> -->
+          <card
+            v-if="isVisible(index)"
+            :data="item"
+            :body-style="bodyStyle"
+            :image-style="imageStyle"
+            :width="cardWidth"
+            :height="cardHeight"
+            :shadow="shadow"
+            :show-card-details="showCardDetails"
+            @card-clicked="cardClicked"
+          />
         </span>
       </div>
-      <div class="filler"></div>
-      <a href="#" :class="['oval', 'next', { disabled: !isNextPossible }]" @click.prevent="goNext">
+      <div class="filler" />
+      <a v-if="items.length > 1" href="#" :class="['oval', 'next', { disabled: !isNextPossible }]" @click.prevent="goNext">
         <span class="progress-button">&rsaquo;</span>
       </a>
+      <div v-else style="width: 2rem" />
     </div>
-    <div v-if="showIndicatorBar" class="bottom-spacer"></div>
-    <index-indicator v-if="showIndicatorBar" :count="itemCount" :current="currentIndex" />
+    <div v-if="showIndicatorBar && items.length > 1" :style="bottomSpacer" />
+    <index-indicator v-if="showIndicatorBar && items.length > 1" :count="itemCount" :current="currentIndex" @clicked="indicatorClicked" />
   </div>
 </template>
 
@@ -50,10 +42,10 @@ import IndexIndicator from './IndexIndicator'
 import Card from './Card'
 
 function convertRemToPixels(rem) {
-  // console.log('0000 0000')
-  // console.log(window)
-  // console.log(window.document)
-  return rem * 16 //parseFloat(window.getComputedStyle(window.document.documentElement).fontSize)
+  if (typeof window !== 'undefined') {
+    return rem * parseFloat(window.getComputedStyle(document.documentElement).fontSize)
+  }
+  return rem * 16
 }
 
 export default {
@@ -68,7 +60,11 @@ export default {
     },
     maxWidth: {
       type: Number,
-      default: 3,
+      required: true,
+    },
+    cardWidth: {
+      type: Number,
+      default: 13.8,
     },
     showIndicatorBar: {
       type: Boolean,
@@ -82,6 +78,24 @@ export default {
       type: Boolean,
       default: true,
     },
+    bodyStyle: {
+      type: Object,
+      default: () => {
+        return { padding: '20px', background: '#ffffff' }
+      },
+    },
+    imageStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    bottomSpacer: {
+      type: Object,
+      default: () => {
+        return { minHeight: '4rem' }
+      },
+    },
     metaData: {
       type: Object,
       default: () => {
@@ -95,6 +109,10 @@ export default {
       type: String,
       default: '',
     },
+    shadow: {
+      type: String,
+      default: 'always',
+    },
   },
   data() {
     return {
@@ -102,7 +120,7 @@ export default {
       currentIndex: 0,
       controlHeight: 2,
       controlWidth: 2,
-      cardWidth: 21,
+      visibleIndecies: [],
     }
   },
   computed: {
@@ -125,32 +143,24 @@ export default {
     numberOfItemsVisible() {
       // The maximum width we are allowed minus two buttons for next and previous
       // divided by the width of a card.
-      const n = this.itemCount - 1
+      // const n = this.itemCount - 1
       const cardSpacingPx = convertRemToPixels(0.5)
       const buttonPx = convertRemToPixels(2)
       const cardWidthPx = convertRemToPixels(this.cardWidth)
-      let itemsVisibleRough = 1
-      let i = 0
-      while (i < n) {
-        const roomRequired = itemsVisibleRough * cardWidthPx + 2 * buttonPx + itemsVisibleRough * cardSpacingPx
-        if (roomRequired < this.maxWidth) {
-          itemsVisibleRough += 1
-        } else {
-          i = n
-        }
-        i += 1
-      }
-
-      return itemsVisibleRough
+      const cardItems = (this.maxWidth - 2 * buttonPx - 2 * cardSpacingPx) / (1.1 * cardWidthPx)
+      return Math.max(1, Math.floor(cardItems))
     },
   },
   methods: {
-    onView() {
-      console.log('view in viewer.')
+    cardClicked(payload) {
+      this.$emit('card-clicked', payload)
     },
     isActive(index) {
       return this.currentIndex === index && this.highlightActive
     },
+    isVisible(index) {
+      return this.visibleIndecies.includes(index)
+    },
     goNext() {
       this.currentIndex += 1
     },
@@ -158,32 +168,46 @@ export default {
       this.currentIndex -= 1
     },
     displayState(index) {
-      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()
+      return this.visibleIndecies.includes(index) ? undefined : 'none'
+    },
+    indicatorClicked(index) {
+      if (this.currentIndex !== index) {
+        this.currentIndex = index
       }
-      let indecies = []
-      for (let v of rawIndicies) {
-        if (v < 0) {
-          indecies.push(v + this.numberOfItemsVisible)
-        } else if (v >= this.itemCount) {
-          indecies.push(v - this.numberOfItemsVisible)
-        } else {
-          indecies.push(v)
+    },
+  },
+  created() {
+    this._visibleIndecies = []
+  },
+  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)
         }
-      }
 
-      return indecies.includes(index) ? undefined : 'none'
+        if (!oddImagesVisible) {
+          rawIndicies.pop()
+        }
+        this.visibleIndecies = []
+        for (let v of rawIndicies) {
+          if (v < 0) {
+            this.visibleIndecies.push(v + this.numberOfItemsVisible)
+          } else if (v >= this.itemCount) {
+            this.visibleIndecies.push(v - this.numberOfItemsVisible)
+          } else {
+            this.visibleIndecies.push(v)
+          }
+        }
+      },
+      immediate: true,
     },
   },
 }
@@ -198,6 +222,9 @@ export default {
   border: solid 1px var(--pale-grey);
   background-color: #ffffff;
   border-radius: 1rem;
+  display: flex;
+  justify-content: center;
+  user-select: none;
 }
 
 .gallery-strip,
@@ -215,10 +242,7 @@ export default {
 .progress-button {
   font-size: 1.5rem;
   font-weight: bold;
-}
-
-.bottom-spacer {
-  min-height: 4rem;
+  color: #8300bf;
 }
 
 .filler {
@@ -233,12 +257,6 @@ a.prev:not(.underline),
 a.next:not(.underline) {
   text-decoration: none;
 }
-a.prev {
-  justify-content: flex-start;
-}
-a.next {
-  justify-content: flex-end;
-}
 
 .disabled {
   opacity: 0.5;

package/src/components/IndexIndicator.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="indicator-container">
-    <div v-for="(number, index) in count" :key="'indicator_' + number" :class="['indicator', { active: current === index }]" />
+    <div
+      v-for="(number, index) in count"
+      :key="'indicator_' + number"
+      :class="['indicator', { active: current === index }]"
+      @click="$emit('clicked', index)"
+    />
   </div>
 </template>
 
@@ -26,13 +31,15 @@ export default {
   justify-content: center;
 }
 .indicator {
-  width: 2rem;
-  height: 0.125rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background-color: #e4e7ed;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
-  background-color: #cccccc;
 }
+
 .indicator.active {
-  background-color: #484848;
+  background-color: #8300bf;
 }
 </style>

package/src/index.js

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