{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/gallery/src/components/Gallery.vue?vue&type=style&index=0&id=2e8ba0eb&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/gallery/src/components/Gallery.vue","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/sass-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ci5vdmFsIHsKICB3aWR0aDogMnJlbTsKICBoZWlnaHQ6IDJyZW07CiAgbGluZS1oZWlnaHQ6IDJyZW07CiAgYm94LXNoYWRvdzogMCAwLjEyNXJlbSAwLjI1cmVtIDAgcmdiYSgwLCAwLCAwLCAwLjI1KTsKICBib3JkZXI6IHNvbGlkIDFweCB2YXIoLS1wYWxlLWdyZXkpOwogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgYm9yZGVyLXJhZGl1czogMXJlbTsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIHVzZXItc2VsZWN0OiBub25lOwp9CgouZ2FsbGVyeS1zdHJpcCwKLmNhcmQtbGluZSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IG5vd3JhcDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9CgouY2FyZC1saW5lIHsKICBmbGV4LWdyb3c6IDI7Cn0KCi5wcm9ncmVzcy1idXR0b24gewogIGZvbnQtc2l6ZTogMS41cmVtOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIGNvbG9yOiAkYXBwLXByaW1hcnktY29sb3I7Cn0KCi5maWxsZXIgewogIGZsZXgtZ3JvdzogMTsKfQoKLmtleS1pbWFnZS1zcGFuLmFjdGl2ZSB7CiAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpOwp9CgphLnByZXY6bm90KC51bmRlcmxpbmUpLAphLm5leHQ6bm90KC51bmRlcmxpbmUpIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7Cn0KCi5kaXNhYmxlZCB7CiAgb3BhY2l0eTogMC41OwogIHBvaW50ZXItZXZlbnRzOiBub25lOwp9Cg=="},{"version":3,"sources":["Gallery.vue"],"names":[],"mappings":";AAyMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"Gallery.vue","sourceRoot":"node_modules/@abi-software/gallery/src/components","sourcesContent":["<template>\n  <div ref=\"myButton\" class=\"gallery\">\n    <div class=\"gallery-strip\">\n      <a v-if=\"items.length > 1\" href=\"#\" :class=\"['oval', 'prev', { disabled: !isPrevPossible }]\" @click.prevent=\"goPrev\">\n        <span class=\"progress-button\">&lsaquo;</span>\n      </a>\n      <div v-else style=\"width: 2rem\" />\n      <div class=\"filler\" />\n      <div class=\"card-line\">\n        <span v-for=\"(item, index) in windowedItems\" :key=\"'card_' + index\" :class=\"['key-image-span', { active: isActive(index) }]\">\n          <card\n            v-if=\"item\"\n            :data=\"item\"\n            :body-style=\"bodyStyle\"\n            :image-container-style=\"imageContainerStyle\"\n            :image-style=\"imageStyle\"\n            :width=\"cardWidth\"\n            :height=\"cardHeight\"\n            :shadow=\"shadow\"\n            :show-card-details=\"showCardDetails\"\n            @card-clicked=\"cardClicked\"\n          />\n        </span>\n      </div>\n      <div class=\"filler\" />\n      <a v-if=\"items.length > 1\" href=\"#\" :class=\"['oval', 'next', { disabled: !isNextPossible }]\" @click.prevent=\"goNext\">\n        <span class=\"progress-button\">&rsaquo;</span>\n      </a>\n      <div v-else style=\"width: 2rem\" />\n    </div>\n    <div :style=\"bottomSpacer\" />\n    <index-indicator v-if=\"canShowIndicatorBar\" :count=\"itemCount\" :current=\"currentIndex\" @clicked=\"indicatorClicked\" />\n  </div>\n</template>\n\n<script>\nimport IndexIndicator from './IndexIndicator'\nimport Card from './Card'\n\nfunction convertRemToPixels(rem) {\n  if (typeof window !== 'undefined') {\n    return rem * parseFloat(window.getComputedStyle(document.documentElement).fontSize)\n  }\n  return rem * 16\n}\n\nexport default {\n  name: 'Gallery',\n  components: { IndexIndicator, Card },\n  props: {\n    items: {\n      type: Array,\n      default: () => {\n        return []\n      },\n    },\n    maxWidth: {\n      type: Number,\n      default: 3,\n    },\n    cardWidth: {\n      type: Number,\n      default: 13.8,\n    },\n    showIndicatorBar: {\n      type: Boolean,\n      default: true,\n    },\n    highlightActive: {\n      type: Boolean,\n      default: true,\n    },\n    showCardDetails: {\n      type: Boolean,\n      default: true,\n    },\n    bodyStyle: {\n      type: Object,\n      default: () => {\n        return { padding: '20px', background: '#ffffff' }\n      },\n    },\n    bottomSpacer: {\n      type: Object,\n      default: () => {\n        return { minHeight: '4rem' }\n      },\n    },\n    imageContainerStyle: {\n      type: Object,\n      default: () => {\n        return {}\n      },\n    },\n    imageStyle: {\n      type: Object,\n      default: () => {\n        return {}\n      },\n    },\n    metaData: {\n      type: Object,\n      default: () => {\n        return {\n          datasetVersion: -1,\n          datasetId: -1,\n        }\n      },\n    },\n    description: {\n      type: String,\n      default: '',\n    },\n    shadow: {\n      type: String,\n      default: 'always',\n    },\n  },\n  data() {\n    return {\n      count: 0,\n      currentIndex: 0,\n      controlHeight: 2,\n      controlWidth: 2,\n    }\n  },\n  computed: {\n    itemCount() {\n      return this.items.length\n    },\n    isPrevPossible() {\n      return this.currentIndex > 0\n    },\n    isNextPossible() {\n      return this.currentIndex < this.itemCount - 1\n    },\n    cardHeight() {\n      return 0.78 * this.cardWidth\n    },\n    cardLineWidth() {\n      const cardSpacing = 0.25\n      return this.itemCount * (this.cardWidth + cardSpacing) - cardSpacing\n    },\n    numberOfItemsVisible() {\n      // The maximum width we are allowed minus two buttons for next and previous\n      // divided by the width of a card.\n      // const n = this.itemCount - 1\n      const cardSpacingPx = convertRemToPixels(0.5)\n      const buttonPx = convertRemToPixels(2)\n      const cardWidthPx = convertRemToPixels(this.cardWidth)\n      const cardItems = (this.maxWidth - 2 * buttonPx - 2 * cardSpacingPx) / (1.1 * cardWidthPx)\n      //Display at least one item\n      return Math.max(1, Math.floor(cardItems))\n    },\n    canShowIndicatorBar() {\n      const indicatorWidth = convertRemToPixels(1)\n      const indicatorAllowance = this.maxWidth / (indicatorWidth * this.itemCount)\n      return this.showIndicatorBar && indicatorAllowance > 0.1 && this.itemCount > 1\n    },\n    valueAdjustment() {\n      const halfWindow = Math.floor(this.numberOfItemsVisible / 2)\n      let valueAdjust = this.currentIndex - halfWindow\n      if (valueAdjust < 0) {\n        valueAdjust = 0\n      } else if (valueAdjust + this.numberOfItemsVisible > this.itemCount) {\n        valueAdjust = this.itemCount - this.numberOfItemsVisible\n      }\n\n      return valueAdjust\n    },\n    windowedItems() {\n      let myArray = []\n      for (let i = 0; i < this.numberOfItemsVisible; i++) {\n        myArray.push(this.items[i + this.valueAdjustment])\n      }\n      return myArray\n    },\n  },\n  methods: {\n    cardClicked(payload) {\n      this.$emit('card-clicked', payload)\n    },\n    isActive(index) {\n      return this.currentIndex - this.valueAdjustment === index && this.highlightActive\n    },\n    goNext() {\n      this.currentIndex += 1\n    },\n    goPrev() {\n      this.currentIndex -= 1\n    },\n    indicatorClicked(index) {\n      if (this.currentIndex !== index) {\n        this.currentIndex = index\n      }\n    },\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n.oval {\n  width: 2rem;\n  height: 2rem;\n  line-height: 2rem;\n  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.25);\n  border: solid 1px var(--pale-grey);\n  background-color: #ffffff;\n  border-radius: 1rem;\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n.gallery-strip,\n.card-line {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.card-line {\n  flex-grow: 2;\n}\n\n.progress-button {\n  font-size: 1.5rem;\n  font-weight: bold;\n  color: $app-primary-color;\n}\n\n.filler {\n  flex-grow: 1;\n}\n\n.key-image-span.active {\n  transform: scale(1.1);\n}\n\na.prev:not(.underline),\na.next:not(.underline) {\n  text-decoration: none;\n}\n\n.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n</style>\n"]}]}