{"version":3,"sources":["webpack:///./src/components/UploadablePicture.vue?3e04","webpack:///./src/components/UploadablePicture.vue","webpack:///src/components/UploadablePicture.vue","webpack:///./src/components/UploadablePicture.vue?b073","webpack:///./src/components/UploadablePicture.vue?85df"],"names":["render","_vm","this","_c","_self","staticClass","style","maxWidth","maxHeight","attrs","displayPicture","on","triggerFileInput","ref","handleFileUpload","staticRenderFns","name","props","value","type","File","default","illustrated","Object","String","required","data","methods","$refs","hiddenFileInput","click","reader","FileReader","onload","e","target","result","readAsDataURL","files","$emit","updateDisplayPicture","pictureSrc","watch","val","mounted","component"],"mappings":"yIAAA,W,2CCAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACA,EAAG,MAAM,CAACE,YAAY,iBAAiB,CAACF,EAAG,MAAM,CAACE,YAAY,YAAYC,MAAO,CAACC,SAAUN,EAAIM,YAAcN,EAAIO,UAAY,CAAC,aAAc,UAAW,aAAcP,EAAIO,WAAa,IAAMC,MAAM,CAAC,IAAMR,EAAIS,eAAe,IAAM,WAAWP,EAAG,MAAM,CAACE,YAAY,WAAW,CAACF,EAAG,IAAI,CAACE,YAAY,OAAOI,MAAM,CAAC,GAAK,gBAAgB,MAAQ,qBAAqBE,GAAG,CAAC,MAAQV,EAAIW,mBAAmB,CAACT,EAAG,oBAAoB,CAACE,YAAY,cAAcI,MAAM,CAAC,KAAO,CAAC,MAAO,cAAc,OAAON,EAAG,QAAQ,CAACU,IAAI,kBAAkBR,YAAY,SAASI,MAAM,CAAC,KAAO,QAAQE,GAAG,CAAC,OAASV,EAAIa,uBAE5oBC,EAAkB,G,YCgBtB,GACAC,KAAA,oBACAC,MAAA,CACAC,MAAA,CACAC,KAAAC,KACAC,YAAA,MAEAC,YAAA,CACAH,KAAAI,OACAF,YAAA,MAEAF,KAAA,CACAA,KAAAK,OACAC,UAAA,GAEAlB,SAAA,CACAY,KAAAK,OACAH,QAAA,SAEAb,UAAA,CACAW,KAAAK,OACAH,QAAA,OAGAK,UAAA,CACAhB,eAAA,OAEAiB,QAAA,CACAf,mBACA,KAAAgB,MAAAC,gBAAAC,SAEAhB,mBACA,IAAAiB,EAAA,IAAAC,WAEAD,EAAAE,OAAAC,IACA,KAAAxB,eAAAwB,EAAAC,OAAAC,QAGAL,EAAAM,cAAA,KAAAT,MAAAC,gBAAAS,MAAA,IACA,KAAAC,MAAA,aAAAX,MAAAC,gBAAAS,MAAA,KAEAE,uBACA,KAAA9B,eAAA,KAAAY,YACAmB,eAAA,KAAAnB,YAAA,KAAAH,MACA,aAAAA,KAAA,iBAGAuB,MAAA,CACApB,YAAAqB,GACA,KAAArB,YAAAqB,EACA,KAAAH,yBAGAI,UACA,KAAAJ,yBCxE0V,I,wBCQtVK,EAAY,eACd,EACA7C,EACAe,GACA,EACA,KACA,WACA,MAIa,aAAA8B,E","file":"build/js/chunk-4aefaf1a.17eb57fa.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UploadablePicture.vue?vue&type=style&index=0&id=38b3605e&prod&scoped=true&lang=css\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('div',{staticClass:\"img-container\"},[_c('img',{staticClass:\"img-fluid\",style:({maxWidth: _vm.maxWidth, ...(_vm.maxHeight ? {'object-fit': 'contain', 'max-height': _vm.maxHeight} : {})}),attrs:{\"src\":_vm.displayPicture,\"alt\":\"Image\"}}),_c('div',{staticClass:\"overlay\"},[_c('a',{staticClass:\"icon\",attrs:{\"id\":\"uploadPicLink\",\"title\":\"Choisir une image\"},on:{\"click\":_vm.triggerFileInput}},[_c('font-awesome-icon',{staticClass:\"camera-icon\",attrs:{\"icon\":['fas', 'camera']}})],1)])]),_c('input',{ref:\"hiddenFileInput\",staticClass:\"d-none\",attrs:{\"type\":\"file\"},on:{\"change\":_vm.handleFileUpload}})])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div>\n        <div class=\"img-container\">\n            <img :src=\"displayPicture\" alt=\"Image\" class=\"img-fluid\"\n                 :style=\"{maxWidth: maxWidth, ...(maxHeight ? {'object-fit': 'contain', 'max-height': maxHeight} : {})}\"/>\n            <div class=\"overlay\">\n                <a id=\"uploadPicLink\" class=\"icon\" title=\"Choisir une image\" @click=\"triggerFileInput\">\n                    <font-awesome-icon :icon=\"['fas', 'camera']\" class=\"camera-icon\"/>\n                </a>\n            </div>\n        </div>\n        <input type=\"file\" ref=\"hiddenFileInput\" class=\"d-none\" @change=\"handleFileUpload\"/>\n    </div>\n</template>\n\n<script>\n    import {pictureSrc} from '@/util/image';\n\n    export default {\n        name: \"UploadablePicture\",\n        props: {\n            value: {\n                type: File,\n                default: () => null\n            },\n            illustrated: {\n                type: Object,\n                default: () => null\n            },\n            type: {\n                type: String,\n                required: true\n            },\n            maxWidth: {\n                type: String,\n                default: '256px'\n            },\n            maxHeight: {\n                type: String,\n                default: null\n            }\n        },\n        data: () => ({\n            displayPicture: null,\n        }),\n        methods: {\n            triggerFileInput() {\n                this.$refs.hiddenFileInput.click();\n            },\n            handleFileUpload() {\n                let reader = new FileReader();\n\n                reader.onload = e => {\n                    this.displayPicture = e.target.result;\n                };\n\n                reader.readAsDataURL(this.$refs.hiddenFileInput.files[0]);\n                this.$emit('input', this.$refs.hiddenFileInput.files[0]);\n            },\n            updateDisplayPicture() {\n                this.displayPicture = this.illustrated\n                    ? pictureSrc(this.illustrated, this.type)\n                    : ('/img/' + this.type + '/default.png');\n            }\n        },\n        watch: {\n            illustrated(val) {\n                this.illustrated = val;\n                this.updateDisplayPicture();\n            }\n        },\n        mounted() {\n            this.updateDisplayPicture();\n        }\n    }\n</script>\n\n<style scoped>\n    img {\n        width: 50%;\n        filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.33));\n    }\n\n    /* Container needed to position the overlay. Adjust the width as needed */\n    .img-container {\n        position: relative;\n        width: 100%;\n        margin-bottom: 20px;\n    }\n\n    /* The overlay effect (full height and width) - lays on top of the container and over the image */\n    .overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        height: 100%;\n        width: 100%;\n        opacity: 0;\n        transition: .3s ease;\n    }\n\n    /* When you mouse over the container, fade in the overlay icon*/\n    .img-container:hover .overlay {\n        opacity: 0.5;\n    }\n\n    /* The icon inside the overlay is positioned in the middle vertically and horizontally */\n    .icon {\n        color: white;\n        font-size: 150px;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        -ms-transform: translate(-50%, -50%);\n        text-align: center;\n        filter: drop-shadow(0 0 0.5rem black);\n    }\n\n    .camera-icon {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        height: 100%;\n        width: 100%;\n    }\n\n    #uploadPicLink {\n        cursor: pointer;\n        color: white;\n    }\n</style>","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UploadablePicture.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UploadablePicture.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./UploadablePicture.vue?vue&type=template&id=38b3605e&scoped=true\"\nimport script from \"./UploadablePicture.vue?vue&type=script&lang=js\"\nexport * from \"./UploadablePicture.vue?vue&type=script&lang=js\"\nimport style0 from \"./UploadablePicture.vue?vue&type=style&index=0&id=38b3605e&prod&scoped=true&lang=css\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"38b3605e\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}