{"version":3,"file":"ChannelImageSelector-ebc62667.js","sources":["../../../app/javascript/components/chat/ChannelImageSelector.vue"],"sourcesContent":["<template>\n  <div class=\"relative mb-1 flex items-center justify-center rounded-full\" @drop.prevent=\"onDrop\">\n    <div class=\"flex-col space-y-2 text-xs\">\n      <input type=\"file\" ref=\"file\" accept=\"image/png, image/jpeg\" style=\"display: none\" @change=\"onFileChange\" />\n      <ChatImage\n        size=\"xl\"\n        class=\"my-4\"\n        :item=\"channel.cid ? (imageUrl ? { image: imageUrl } : channel) : channel\"\n        :channel-name=\"channelName\"\n        :show-online=\"channel.cid ? false : true\"\n        :class=\"editMode ? 'opacity-30' : ''\"\n      >\n      </ChatImage>\n      <div\n        v-if=\"editMode\"\n        class=\"absolute top-0 flex h-full w-20 cursor-pointer items-center justify-center text-sm font-medium hover:underline\"\n        @click=\"editMode ? triggerFileSelector() : ''\"\n      >\n        Edit\n      </div>\n    </div>\n  </div>\n  <span\n    v-if=\"imageError && imageError.length > 0\"\n    class=\"flex items-center justify-center text-center text-xs text-red-400\"\n  >\n    {{ imageError }}\n  </span>\n</template>\n<script setup>\nimport ChatImage from './ChatImage.vue';\nimport { ref, reactive, onMounted, onUnmounted, watch } from 'vue';\n\nconst props = defineProps({\n  channel: { type: Object, default: () => {} },\n  channelName: { type: String, default: null },\n  editMode: { type: Boolean, default: false }\n});\nconst $emit = defineEmits(['selected-image']);\n\n// IMAGE\nconst imageError = ref('');\nconst imageUrl = ref('');\nconst acceptabelImageTypes = reactive(['image/png', 'image/jpeg']);\nonMounted(() => {\n  imageUrl.value = props.channel.image;\n});\n\n// FILE\nconst file = ref(null);\n\nfunction setFile(file) {\n  if (file.size > 5242880) {\n    imageError.value = 'Image should be less than 5 MB.';\n  } else if (!acceptabelImageTypes.includes(file.type)) {\n    imageError.value = 'Invalid file format.';\n  } else {\n    imageError.value = '';\n    imageUrl.value = URL.createObjectURL(file);\n    $emit('selected-image', { imageUrl: imageUrl.value, file: file });\n  }\n}\n\nfunction onFileChange(e) {\n  const file = e.target.files[0];\n  setFile(file);\n}\n\nfunction onDrop(e) {\n  setFile([...e.dataTransfer.files][0]);\n}\n\nfunction triggerFileSelector() {\n  if (file.value) {\n    file.value.click();\n  }\n}\n\n// EVENTS\nconst events = reactive(['dragenter', 'dragover', 'dragleave', 'drop']);\n\nfunction preventDefaults(e) {\n  e.preventDefault();\n}\n\nonMounted(() => {\n  events.forEach(eventName => {\n    document.body.addEventListener(eventName, preventDefaults);\n  });\n});\n\nonUnmounted(() => {\n  events.forEach(eventName => {\n    document.body.removeEventListener(eventName, preventDefaults);\n  });\n});\n\n// OTHER\nwatch(\n  () => props.editMode,\n  (newVal, oldVal) => {\n    if (newVal == false) {\n      imageUrl.value = '';\n      imageError.value = '';\n      file.value = null;\n    }\n  }\n);\n</script>\n"],"names":["imageError","ref","imageUrl","acceptabelImageTypes","reactive","onMounted","props","file","setFile","$emit","onFileChange","onDrop","triggerFileSelector","events","preventDefaults","eventName","onUnmounted","watch","newVal","oldVal"],"mappings":"4qBAyCMA,EAAaC,EAAI,EAAE,EACnBC,EAAWD,EAAI,EAAE,EACjBE,EAAuBC,EAAS,CAAC,YAAa,YAAY,CAAC,EACjEC,EAAU,IAAM,CACdH,EAAS,MAAQI,EAAM,QAAQ,KACjC,CAAC,EAGD,MAAMC,EAAON,EAAI,IAAI,EAErB,SAASO,EAAQD,EAAM,CACjBA,EAAK,KAAO,QACdP,EAAW,MAAQ,kCACTG,EAAqB,SAASI,EAAK,IAAI,GAGjDP,EAAW,MAAQ,GACnBE,EAAS,MAAQ,IAAI,gBAAgBK,CAAI,EACzCE,EAAM,iBAAkB,CAAE,SAAUP,EAAS,MAAO,KAAMK,CAAI,CAAE,GAJhEP,EAAW,MAAQ,sBAMvB,CAEA,SAASU,EAAa,EAAG,CACvB,MAAMH,EAAO,EAAE,OAAO,MAAM,CAAC,EAC7BC,EAAQD,CAAI,CACd,CAEA,SAASI,EAAO,EAAG,CACjBH,EAAQ,CAAC,GAAG,EAAE,aAAa,KAAK,EAAE,CAAC,CAAC,CACtC,CAEA,SAASI,GAAsB,CACzBL,EAAK,OACPA,EAAK,MAAM,OAEf,CAGA,MAAMM,EAAST,EAAS,CAAC,YAAa,WAAY,YAAa,MAAM,CAAC,EAEtE,SAASU,EAAgB,EAAG,CAC1B,EAAE,eAAc,CAClB,CAEA,OAAAT,EAAU,IAAM,CACdQ,EAAO,QAAQE,GAAa,CAC1B,SAAS,KAAK,iBAAiBA,EAAWD,CAAe,CAC7D,CAAG,CACH,CAAC,EAEDE,EAAY,IAAM,CAChBH,EAAO,QAAQE,GAAa,CAC1B,SAAS,KAAK,oBAAoBA,EAAWD,CAAe,CAChE,CAAG,CACH,CAAC,EAGDG,EACE,IAAMX,EAAM,SACZ,CAACY,EAAQC,IAAW,CACdD,GAAU,KACZhB,EAAS,MAAQ,GACjBF,EAAW,MAAQ,GACnBO,EAAK,MAAQ,KAEhB,CACH"}