{"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/Card.vue?vue&type=style&index=1&id=b72f7c44&prod&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/gallery/src/components/Card.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:Ci5nYWxsZXJ5LXBvcHBlciB7CiAgYmFja2dyb3VuZDogI2YzZWNmNiAhaW1wb3J0YW50OwogIGJvcmRlcjogMXB4IHNvbGlkICRhcHAtcHJpbWFyeS1jb2xvcjsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgY29sb3I6ICMzMDMxMzMgIWltcG9ydGFudDsKICBmb250LXNpemU6IDEycHg7CiAgbGluZS1oZWlnaHQ6IDFyZW07CiAgaGVpZ2h0OiAxcmVtOwogIHBhZGRpbmc6IDEwcHg7Cn0KLmdhbGxlcnktcG9wcGVyLmVsLXBvcHBlclt4LXBsYWNlbWVudF49J3RvcCddIC5wb3BwZXJfX2Fycm93IHsKICBib3JkZXItdG9wLWNvbG9yOiAkYXBwLXByaW1hcnktY29sb3IgIWltcG9ydGFudDsKfQouZ2FsbGVyeS1wb3BwZXIuZWwtcG9wcGVyW3gtcGxhY2VtZW50Xj0ndG9wJ10gLnBvcHBlcl9fYXJyb3c6YWZ0ZXIgewogIGJvcmRlci10b3AtY29sb3I6ICNmM2VjZjYgIWltcG9ydGFudDsKfQo="},{"version":3,"sources":["Card.vue"],"names":[],"mappings":";AA2TA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Card.vue","sourceRoot":"node_modules/@abi-software/gallery/src/components","sourcesContent":["<template>\n  <el-card :shadow=\"shadow\" :body-style=\"bodyStyle\" :style=\"{ padding: '0px', maxWidth: width + 'rem' }\" class=\"card\">\n    <div v-loading=\"!isReady\">\n      <div class=\"cursor-pointer\" :style=\"imageContainerStyle\" @click.prevent=\"cardClicked\">\n        <img v-if=\"useDefaultImg\" src=\"../assets/logo-sparc-wave-primary.svg\" svg-inline :style=\"imageStyle\" />\n        <img v-else :src=\"thumbnail\" alt=\"thumbnail loading ...\" :style=\"imageStyle\" />\n      </div>\n      <div v-if=\"false\" class=\"image-overlay\">\n        <div\n          class=\"triangle-right-corner\"\n          :style=\"`border-left-width: ${triangleHeight * 1.2}rem; border-top-width: ${triangleHeight}rem;`\"\n          @click=\"openLinkInNewTab\"\n        />\n        <el-tooltip class=\"item\" :content=\"`View ${data.type}`\" placement=\"left\">\n          <img\n            class=\"triangle-icon\"\n            :style=\"`height: ${triangleHeight * 0.25}rem;top: ${triangleHeight * 0.15}rem;right: ${triangleHeight * 0.15}rem`\"\n            :src=\"typeIcon\"\n            @click=\"openLinkInNewTab\"\n          />\n        </el-tooltip>\n      </div>\n      <div v-if=\"showCardDetails\" class=\"details\">\n        <p v-if=\"!data.hideType\">\n          <b>{{ data.type }}</b>\n        </p>\n        <el-popover\n          ref=\"galleryPopover\"\n          :disabled=\"disableTooltip\"\n          :content=\"data.title\"\n          placement=\"top\"\n          trigger=\"hover\"\n          popper-class=\"gallery-popper\"\n        />\n        <!--use v-show here to make sure el popover always have a starting location -->\n        <p v-show=\"!data.hideTitle\" ref=\"titleText\" v-popover:galleryPopover class=\"title\">\n          {{ data.title }}\n        </p>\n        <p v-show=\"data.hideTitle\" class=\"title text-placeholder\" />\n        <el-button class=\"button\" @click.prevent=\"cardClicked\"> View {{ data.type }}</el-button>\n      </div>\n    </div>\n  </el-card>\n</template>\n\n<script>\n// import { SvgIcon } from '@abi-software/svg-sprite'\nimport Vue from 'vue'\nimport { Button, Card, Popover, Tooltip, Loading } from 'element-ui'\nimport GalleryHelper from '../mixins/GalleryHelpers'\nVue.use(Button)\nVue.use(Card)\nVue.use(Popover)\nVue.use(Tooltip)\nVue.use(Loading)\n\nfunction isValidHttpUrl(string) {\n  let url = undefined\n\n  try {\n    url = new URL(string)\n  } catch (_) {\n    return false\n  }\n  return url.protocol === 'http:' || url.protocol === 'https:'\n}\n\nexport default {\n  name: 'GalleryCard',\n  mixins: [GalleryHelper],\n  props: {\n    data: {\n      type: Object,\n      required: true,\n    },\n    width: {\n      type: Number,\n      default: 3,\n    },\n    height: {\n      type: Number,\n      default: 3,\n    },\n    showCardDetails: {\n      type: Boolean,\n    },\n    bodyStyle: {\n      type: Object,\n      default: () => {\n        return { padding: '20px', background: '#ffffff' }\n      },\n    },\n    imageStyle: {\n      type: Object,\n      default: () => {\n        return {}\n      },\n    },\n    imageContainerStyle: {\n      type: Object,\n      default: () => {\n        return {}\n      },\n    },\n    shadow: {\n      type: String,\n      default: 'always',\n    },\n  },\n  data() {\n    return {\n      ro: null,\n      triangleSize: 4,\n      thumbnail: undefined,\n      useDefaultImg: false,\n      disableTooltip: false,\n      tooltipCalculated: false,\n    }\n  },\n  computed: {\n    isReady() {\n      return this.data.title && (this.thumbnail || this.useDefaultImg) && (this.data.link || this.data.userData)\n    },\n    imageHeight() {\n      return this.showCardDetails ? this.height * 0.525 : this.height\n    },\n    imageWidth() {\n      return this.width - 2 * this.marginDetails\n    },\n    triangleHeight() {\n      return this.height * 0.237\n    },\n    marginDetails() {\n      return this.height * 0.076\n    },\n    typeIcon() {\n      return undefined\n    },\n  },\n  watch: {\n    data: {\n      deep: true,\n      immediate: true,\n      handler: function () {\n        this.thumbnail = undefined\n        this.useDefaultImg = false\n        this.tooltipCalculated = false\n        this.disableTooltip = false\n        if (this.data.thumbnail) {\n          if (isValidHttpUrl(this.data.thumbnail) && this.data.mimetype) {\n            this.downloadThumbnail(this.data.thumbnail, { fetchAttempts: 0 })\n          } else {\n            this.thumbnail = this.data.thumbnail\n          }\n        } else {\n          this.useDefaultImg = true\n        }\n        //Dynamically check title length to determine if popover should be shown\n        this.$nextTick(() => {\n          this.calculateShowTooltip()\n        })\n      },\n    },\n  },\n  methods: {\n    /**\n     * Open a new link if link is provide.\n     * Fire an event if userData is provide.\n     */\n    cardClicked: function () {\n      if (this.data.link) {\n        const link = document.createElement('a')\n        link.href = this.data.link\n        link.target = '_blank'\n        document.body.appendChild(link)\n        link.click()\n        link.remove()\n      }\n      if (this.data.userData) {\n        this.$emit('card-clicked', this.data.userData)\n      }\n    },\n    /**\n     * handle thumbnail downloading,, it will use a default svg image if fails\n     */\n    downloadThumbnail: function (url, info) {\n      this.getRequest(url, {}, 11000).then(\n        (response) => {\n          let data = response.data\n          if (typeof data === 'string' && data.startsWith('data:')) {\n            this.thumbnail = response.data\n          } else {\n            if (this.data.mimetype) {\n              this.thumbnail = `data:${this.data.mimetype};base64,${response.data}`\n            } else {\n              this.thumbnail = response.data\n            }\n          }\n        },\n        (reason) => {\n          if (reason.message.includes('timeout') && reason.message.includes('exceeded') && info.fetchAttempts < 3) {\n            info.fetchAttempts += 1\n            this.downloadThumbnail(url, info)\n          } else {\n            this.useDefaultImg = true\n          }\n        }\n      )\n    },\n    //dynamically calculate if tooltip is required\n    calculateShowTooltip: function () {\n      if (this.data.hideTitle) {\n        this.disableTooltip = true\n        this.tooltipCalculated = true\n      } else {\n        const ele = this.$refs.titleText\n        //Check if title text is rendered yet\n        if (ele && ele.offsetParent) {\n          this.tooltipCalculated = true\n          if (ele.offsetWidth >= ele.scrollWidth) this.disableTooltip = true\n          else this.disableTooltip = false\n        } else {\n          //text not rendered yet\n          if (this.data.title.length > 20) this.disableTooltip = false\n          else this.disableTooltip = true\n        }\n      }\n    },\n  },\n  updated: function () {\n    if (!this.tooltipCalculated) {\n      this.$nextTick(() => {\n        this.calculateShowTooltip()\n      })\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n\n@import \"~element-ui/packages/theme-chalk/src/button\";\n@import \"~element-ui/packages/theme-chalk/src/card\";\n@import \"~element-ui/packages/theme-chalk/src/loading\";\n@import \"~element-ui/packages/theme-chalk/src/popover\";\n@import \"~element-ui/packages/theme-chalk/src/tooltip\";\n\n.button,\n.button:hover,\n.button:focus {\n  z-index: 10;\n  font-family: Asap;\n  font-size: 14px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: normal;\n  letter-spacing: normal;\n  background-color: $app-primary-color;\n  border: $app-primary-color;\n  color: white;\n  cursor: pointer;\n  margin-top: 8px;\n}\n\n.button:hover {\n  background: $app-primary-color;\n  box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, 0.25);\n  color: #fff;\n}\n\n.card {\n  position: relative;\n}\n.details {\n  text-align: left;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.text-placeholder {\n  height: 1rem;\n}\n\n.title {\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\np.bold {\n  font-weight: bold;\n}\n\n.image-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n.triangle-icon {\n  position: absolute;\n}\n\n.triangle-right-corner {\n  width: 0;\n  height: 0;\n  border-left: solid transparent;\n  border-top: solid $app-primary-color;\n}\n</style>\n\n<style lang=\"scss\">\n.gallery-popper {\n  background: #f3ecf6 !important;\n  border: 1px solid $app-primary-color;\n  border-radius: 4px;\n  color: #303133 !important;\n  font-size: 12px;\n  line-height: 1rem;\n  height: 1rem;\n  padding: 10px;\n}\n.gallery-popper.el-popper[x-placement^='top'] .popper__arrow {\n  border-top-color: $app-primary-color !important;\n}\n.gallery-popper.el-popper[x-placement^='top'] .popper__arrow:after {\n  border-top-color: #f3ecf6 !important;\n}\n</style>\n"]}]}