{"version":3,"file":"display-hero-DykzhRQw.js","sources":["../../../app/javascript/photos/display-label.vue","../../../app/javascript/photos/label-list-item.vue","../../../app/javascript/photos/display-hero.vue"],"sourcesContent":["<template>\n  <div\n    class=\"label\"\n    :style=\"\n      '\\\n      top: ' +\n      label.boundingBox.top * 100 +\n      '%; \\\n      left: ' +\n      label.boundingBox.left * 100 +\n      '%; \\\n      width: ' +\n      label.boundingBox.width * 100 +\n      '%; \\\n      height: ' +\n      label.boundingBox.height * 100 +\n      '%;'\n    \"\n  >\n    <p>{{ label.name }}</p>\n  </div>\n</template>\n\n<script setup>\nimport { ref, toRef, watch } from \"vue\";\n\nconst props = defineProps({\n  label: {\n    type: Object,\n    required: true,\n  },\n  highlighted: {\n    type: Boolean,\n    required: false,\n  },\n});\n\nconst opacity = ref(0);\nwatch(toRef(props, \"highlighted\"), (newHighlighted) => {\n  opacity.value = newHighlighted ? 1 : 0;\n});\n</script>\n\n<style scoped>\n.label {\n  border: 1px solid black;\n  position: absolute;\n  outline: 1px solid rgba(255, 255, 255, 0.9);\n  transition: 0.3s;\n  opacity: v-bind(opacity);\n  z-index: 30;\n}\n.label > p {\n  position: absolute;\n  font-size: 10px;\n  background: rgba(255, 255, 255, 0.9);\n  padding: 4px;\n  margin: -26px 0 0 0;\n  white-space: nowrap;\n  min-width: 100%;\n  outline: 2px solid rgba(255, 255, 255, 0.9);\n}\n</style>\n","<template>\n  <div\n    :class=\"[\n      'tag has-background-grey-lighter',\n      { 'label-list-item-hoverable': hoverable },\n    ]\"\n    @mouseover=\"hoverable && hovered(true)\"\n    @mouseout=\"hoverable && hovered(false)\"\n  >\n    {{ label.name }} ({{ Math.ceil(label.confidence) }}%)\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  label: {\n    type: Object,\n    required: true,\n  },\n  hoverable: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n});\n\nconst emit = defineEmits([\"highlightLabel\", \"unHighlightLabel\"]);\n\nconst hovered = (state) => {\n  if (state) {\n    emit(\"highlightLabel\", props.label);\n  } else {\n    emit(\"unHighlightLabel\", props.label);\n  }\n};\n</script>\n\n<style scoped>\n.label-list-item-hoverable {\n  cursor: pointer;\n}\n</style>\n","<template>\n  <div class=\"hero is-dark mb-3\">\n    <div id=\"label-list\" v-if=\"showLabels\">\n      <span class=\"label-list-title\">Labels</span>\n      <LabelListItem\n        v-for=\"label in photo.labels\"\n        @highlight-label=\"$emit('highlightLabel', $event)\"\n        @un-highlight-label=\"$emit('unHighlightLabel', $event)\"\n        :label=\"label\"\n        :hoverable=\"true\"\n        :key=\"label.id\"\n      />\n    </div>\n    <div class=\"hero-body pt-4 pb-4\" style=\"text-align: center\">\n      <div id=\"image-wrapper\">\n        <router-link\n          v-if=\"isHomepage\"\n          :to=\"{ name: 'photos-show', params: { id: photo.id } }\"\n        >\n          <img :src=\"photo.extralargeImageUrl\" />\n        </router-link>\n        <img v-else :src=\"photo.extralargeImageUrl\" />\n        <div v-if=\"photo.labels\" class=\"labels\">\n          <DisplayLabel\n            v-for=\"label in photo.labels\"\n            :label=\"label\"\n            :highlighted=\"labelHighlights[label.id]\"\n            :key=\"label.id\"\n          />\n        </div>\n        <div v-if=\"isHomepage\" class=\"overlay\">\n          <div class=\"level p-2\">\n            <div class=\"level-left pl-3\">\n              <p class=\"is-size-4\">\n                Latest photo:\n                <router-link\n                  :to=\"{ name: 'photos-show', params: { id: photo.id } }\"\n                >\n                  {{ photo.title }}\n                </router-link>\n              </p>\n            </div>\n            <div class=\"level-right has-text-right pr-3\">\n              <router-link :to=\"{ name: 'photos-index' }\" class=\"button\">\n                See all photos...\n              </router-link>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from \"vue\";\nimport DisplayLabel from \"./display-label.vue\";\nimport LabelListItem from \"./label-list-item.vue\";\nimport { useApplicationStore } from \"@/stores/application\";\n\nconst props = defineProps({\n  photo: {\n    type: Object,\n    required: true,\n  },\n  labelHighlights: {\n    type: Object,\n    required: false,\n  },\n  isHomepage: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  loading: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n});\n\nconst emit = defineEmits([\"highlightLabel\", \"unHighlightLabel\"]);\n\nconst applicationStore = useApplicationStore();\n\nconst showLabels = computed(() => {\n  return (\n    applicationStore.showLabelsOnHero &&\n    !props.loading &&\n    props.photo.labels?.length > 0\n  );\n});\n</script>\n\n<style scoped lang=\"scss\">\n#image-wrapper {\n  margin: 0 auto;\n  display: inline-block;\n  position: relative;\n}\n\n#image-wrapper img {\n  max-height: calc(100vh - 150px);\n  width: 100%;\n  border-radius: 2px;\n  object-fit: contain;\n  display: inline-block;\n  vertical-align: top;\n\n  @media (min-width: 1024px) {\n    min-height: 400px;\n  }\n}\n\n/* remove padding from hero-body when on mobile */\n@media (max-width: 1023px) {\n  .hero-body {\n    padding: 0 !important;\n  }\n}\n\n.overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.hero {\n  position: relative;\n}\n\n#label-list {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 100;\n  background: rgba(0, 0, 0, 0.3);\n  margin: 0.5rem 0.5rem 0 0;\n  padding: 0.3em;\n  width: auto;\n  display: flex;\n  flex-direction: column;\n  border-radius: 5px;\n  overflow: auto;\n  max-height: calc(100% - 15px);\n}\n\n.label-list-title {\n  font-size: 0.8rem;\n  margin: 0 0.2rem 0.2rem;\n  font-weight: bold;\n}\n\n#label-list .tag {\n  text-align: left;\n  margin: 0.2rem;\n}\n\n// #image-wrapper > .overlay {\n//   position: absolute;\n//   top: 0;\n//   left: 0;\n//   width: 100%;\n//   height: 100%;\n//   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));\n//   display: flex;\n//   align-items: center;\n//   justify-content: center;\n// }\n</style>\n"],"names":["props","__props","opacity","ref","watch","toRef","newHighlighted","emit","__emit","hovered","state","applicationStore","useApplicationStore","showLabels","computed","_a"],"mappings":"0UA0BA,MAAMA,EAAQC,EAWRC,EAAUC,EAAI,CAAC,EACrB,OAAAC,EAAMC,EAAML,EAAO,aAAa,EAAIM,GAAmB,CACrDJ,EAAQ,MAAQI,EAAiB,EAAI,CACvC,CAAC,kfC1BD,MAAMN,EAAQC,EAYRM,EAAOC,EAEPC,EAAWC,GAAU,CAEvBH,EADEG,EACG,iBAEA,mBAFkBV,EAAM,KAAK,CAItC,84BC0BA,MAAMA,EAAQC,EAuBRU,EAAmBC,EAAmB,EAEtCC,EAAaC,EAAS,IAAM,OAChC,OACEH,EAAiB,kBACjB,CAACX,EAAM,WACPe,EAAAf,EAAM,MAAM,SAAZ,YAAAe,EAAoB,QAAS,CAEjC,CAAC"}