{"version":3,"file":"photo-item-CR-s4ZUG.js","sources":["../../../app/javascript/stores/selection.js","../../../app/javascript/shared/item-checkbox.vue","../../../app/javascript/shared/photo-item.vue"],"sourcesContent":["import { defineStore } from \"pinia\";\nimport { ref, watch } from \"vue\";\n\nexport const useSelectionStore = defineStore(\"selection\", () => {\n  const selectedPhotos = ref(\n    JSON.parse(localStorage.getItem(\"selectedPhotos\") || \"[]\")\n  );\n  const deselectedPhotos = ref(\n    JSON.parse(localStorage.getItem(\"deselectedPhotos\") || \"[]\")\n  );\n  const showRemoveNotification = ref(true);\n\n  watch(\n    selectedPhotos,\n    (newValue) => {\n      localStorage.setItem(\"selectedPhotos\", JSON.stringify(newValue));\n    },\n    { deep: true }\n  );\n\n  watch(\n    deselectedPhotos,\n    (newValue) => {\n      localStorage.setItem(\"deselectedPhotos\", JSON.stringify(newValue));\n    },\n    { deep: true }\n  );\n\n  const addPhoto = (photo) => {\n    // add to selectedPhotos if not already there\n    if (!selectedPhotos.value.find((item) => item.id === photo.id)) {\n      selectedPhotos.value.push(photo);\n    }\n    // remove from deselectedPhotos if there\n    deselectedPhotos.value = deselectedPhotos.value.filter(\n      (item) => item.id !== photo.id\n    );\n  };\n\n  const removePhoto = (photo) => {\n    // remove from selectedPhotos if there\n    selectedPhotos.value = selectedPhotos.value.filter(\n      (item) => item.id !== photo.id\n    );\n    // add to deselectedPhotos if not already there\n    if (!deselectedPhotos.value.find((item) => item.id === photo.id)) {\n      deselectedPhotos.value.push(photo);\n    }\n  };\n\n  const clearSelectedPhotos = () => {\n    selectedPhotos.value = new Array();\n  };\n\n  const clearDeselectedPhotos = () => {\n    deselectedPhotos.value = new Array();\n  };\n\n  const clearPhotoSelection = () => {\n    clearSelectedPhotos();\n    clearDeselectedPhotos();\n  };\n\n  const addPhotos = (photos) => {\n    let newSelectedPhotos = selectedPhotos.value;\n    photos.forEach((photo) => {\n      if (!newSelectedPhotos.find((item) => item.id === photo.id)) {\n        newSelectedPhotos.push(photo);\n      }\n    });\n    selectedPhotos.value = newSelectedPhotos;\n  };\n\n  const removePhotos = (photos) => {\n    selectedPhotos.value = selectedPhotos.value.filter(\n      (item) => !photos.find((photo) => photo.id === item.id)\n    );\n  };\n\n  return {\n    selectedPhotos,\n    deselectedPhotos,\n    showRemoveNotification,\n    addPhoto,\n    removePhoto,\n    clearSelectedPhotos,\n    clearDeselectedPhotos,\n    clearPhotoSelection,\n    addPhotos,\n    removePhotos,\n  };\n});\n","<template>\n  <div class=\"item-checkbox-container\">\n    <div\n      :class=\"['item-checkbox', { 'checked': props.checked }]\"\n    >\n      <div\n        v-if=\"props.checked\"\n        class=\"item-checkmark\"\n      >\n        &nbsp;\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\n  const props = defineProps({\n    checked: {\n      type: Boolean,\n      required: true,\n      default: false\n    }\n  })\n</script>\n\n<style>\n  .item-checkbox-container {\n    position: absolute;\n    top: 1.25em;\n    right: 0.75em;\n  }\n\n  .item-checkbox {\n    display: inline-block;\n    width: 1.5em;\n    height: 1.5em;\n    background-color: #fff;\n    border-radius: 3px;\n    border: 1px solid #ccc;\n  }\n\n  .item-checkbox:hover {\n    border-color: #00d1b2;\n  }\n\n  .item-checkmark {\n    display: inline-block;\n    position: absolute;\n    width: .375rem;\n    height: .6rem;\n    top: .4rem;\n    left: .6rem;\n    box-sizing: border-box;\n    transform: translateY(0) rotate(45deg);\n    border-width: .2rem;\n    border-top-width: 0.2rem;\n    border-left-width: 0.2rem;\n    border-style: solid;\n    border-top-style: solid;\n    border-left-style: solid;\n    border-color: white;\n    border-top-color: white;\n    border-left-color: white;\n    border-top: 0;\n    border-left: 0;\n  }\n\n  .item-checkbox.checked {\n    background-color: #00d1b2;\n    border-color: #00d1b2;\n  }\n</style>\n","<template>\n  <div class=\"column is-one-quarter is-relative\">\n    <router-link\n      v-if=\"!applicationStore.selectionMode\"\n      :to=\"{ name: 'photos-show', params: { id: photo.id } }\"\n    >\n      <ItemImage :photo=\"photo\" />\n      {{ photo.title }}\n    </router-link>\n    <div v-else>\n      <div class=\"selectable-item is-clickable\" @click=\"toggleSelection()\">\n        <ItemImage :photo=\"photo\" />\n        <ItemCheckbox\n          v-if=\"userStore.signedIn && userStore.uploader && photo.canEdit\"\n          :checked=\"selected\"\n        />\n      </div>\n      <router-link :to=\"{ name: 'photos-show', params: { id: photo.id } }\">\n        {{ photo.title }}\n      </router-link>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from \"vue\";\n\nimport { useUserStore } from \"@/stores/user\";\nimport { useApplicationStore } from \"@/stores/application\";\nimport { useSelectionStore } from \"@/stores/selection\";\n\nimport ItemImage from \"@/shared/item-image.vue\";\nimport ItemCheckbox from \"@/shared/item-checkbox.vue\";\n\nconst userStore = useUserStore();\nconst applicationStore = useApplicationStore();\nconst selectionStore = useSelectionStore();\n\nconst props = defineProps({\n  photo: {\n    type: Object,\n    required: true,\n  },\n});\n\nconst selected = computed(() => {\n  return selectionStore.selectedPhotos.some(\n    (photo) => photo.id === props.photo.id,\n  );\n});\n\nconst toggleSelection = () => {\n  if (selected.value) {\n    selectionStore.removePhoto(props.photo);\n  } else {\n    selectionStore.addPhoto(props.photo);\n  }\n};\n</script>\n\n<style>\n.selectable-item:hover .item-checkbox {\n  border-color: #00d1b2;\n}\n</style>\n"],"names":["useSelectionStore","defineStore","selectedPhotos","ref","deselectedPhotos","showRemoveNotification","watch","newValue","addPhoto","photo","item","removePhoto","clearSelectedPhotos","clearDeselectedPhotos","photos","newSelectedPhotos","props","__props","userStore","useUserStore","applicationStore","useApplicationStore","selectionStore","selected","computed","toggleSelection"],"mappings":"0NAGY,MAACA,EAAoBC,EAAY,YAAa,IAAM,CAC9D,MAAMC,EAAiBC,EACrB,KAAK,MAAM,aAAa,QAAQ,gBAAgB,GAAK,IAAI,CAC1D,EACKC,EAAmBD,EACvB,KAAK,MAAM,aAAa,QAAQ,kBAAkB,GAAK,IAAI,CAC5D,EACKE,EAAyBF,EAAI,EAAI,EAEvCG,EACEJ,EACCK,GAAa,CACZ,aAAa,QAAQ,iBAAkB,KAAK,UAAUA,CAAQ,CAAC,CAChE,EACD,CAAE,KAAM,EAAI,CACb,EAEDD,EACEF,EACCG,GAAa,CACZ,aAAa,QAAQ,mBAAoB,KAAK,UAAUA,CAAQ,CAAC,CAClE,EACD,CAAE,KAAM,EAAI,CACb,EAED,MAAMC,EAAYC,GAAU,CAErBP,EAAe,MAAM,KAAMQ,GAASA,EAAK,KAAOD,EAAM,EAAE,GAC3DP,EAAe,MAAM,KAAKO,CAAK,EAGjCL,EAAiB,MAAQA,EAAiB,MAAM,OAC7CM,GAASA,EAAK,KAAOD,EAAM,EAC7B,CACF,EAEKE,EAAeF,GAAU,CAE7BP,EAAe,MAAQA,EAAe,MAAM,OACzCQ,GAASA,EAAK,KAAOD,EAAM,EAC7B,EAEIL,EAAiB,MAAM,KAAMM,GAASA,EAAK,KAAOD,EAAM,EAAE,GAC7DL,EAAiB,MAAM,KAAKK,CAAK,CAEpC,EAEKG,EAAsB,IAAM,CAChCV,EAAe,MAAQ,IAAI,KAC5B,EAEKW,EAAwB,IAAM,CAClCT,EAAiB,MAAQ,IAAI,KAC9B,EAuBD,MAAO,CACL,eAAAF,EACA,iBAAAE,EACA,uBAAAC,EACA,SAAAG,EACA,YAAAG,EACA,oBAAAC,EACA,sBAAAC,EACA,oBA7B0B,IAAM,CAChCD,EAAqB,EACrBC,EAAuB,CACxB,EA2BC,UAzBiBC,GAAW,CAC5B,IAAIC,EAAoBb,EAAe,MACvCY,EAAO,QAASL,GAAU,CACnBM,EAAkB,KAAML,GAASA,EAAK,KAAOD,EAAM,EAAE,GACxDM,EAAkB,KAAKN,CAAK,CAEpC,CAAK,EACDP,EAAe,MAAQa,CACxB,EAkBC,aAhBoBD,GAAW,CAC/BZ,EAAe,MAAQA,EAAe,MAAM,OACzCQ,GAAS,CAACI,EAAO,KAAML,GAAUA,EAAM,KAAOC,EAAK,EAAE,CACvD,CACF,CAaA,CACH,CAAC,kbC3EC,MAAMM,EAAQC,4QCkBhB,MAAMC,EAAYC,EAAc,EAC1BC,EAAmBC,EAAqB,EACxCC,EAAiBtB,EAAmB,EAEpCgB,EAAQC,EAORM,EAAWC,EAAS,IACjBF,EAAe,eAAe,KAClCb,GAAUA,EAAM,KAAOO,EAAM,MAAM,EACrC,CACF,EAEKS,EAAkB,IAAM,CACxBF,EAAS,MACXD,EAAe,YAAYN,EAAM,KAAK,EAEtCM,EAAe,SAASN,EAAM,KAAK,CAEvC"}