{"version":3,"sources":["webpack:///./src/components/ImageContent.vue?0899","webpack:///./src/components/ImageContent.vue?9fdb","webpack:///src/components/ImageContent.vue","webpack:///./src/components/ImageContent.vue?ffd8","webpack:///./src/components/ImageContent.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","imageMinHeight","imagesExpanded","contentData","expandable","authenticated","_e","toggleSections","on","expandNextSection","style","attrs","index","backgroundImage","$event","onLoad","mobileBackgroundImage","onMobileLoad","_v","ref","dropzoneOptions","uploadedFile","dropzoneMobileOptions","uploadedMobileFile","directives","name","rawName","value","expression","domProps","Array","isArray","_i","$$a","$$el","target","$$c","checked","$$v","$$i","$set","concat","slice","modifiers","composing","_n","$forceUpdate","staticRenderFns","component"],"mappings":"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","file":"js/chunk-1260f500.62fcc8d9.js","sourcesContent":["import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageContent.vue?vue&type=style&index=0&id=423ebc50&scoped=true&lang=css&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageContent.vue?vue&type=style&index=0&id=423ebc50&scoped=true&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"position-relative\",class:{imageMinHeight: _vm.imagesExpanded || !_vm.contentData.expandable}},[(!_vm.authenticated)?_c('div',[_c('a',{class:{'clickableImage': _vm.contentData.toggleSections},on:{\"click\":_vm.expandNextSection}},[(_vm.imagesExpanded || !_vm.contentData.expandable)?_c('div',{staticClass:\"d-none d-sm-block\",style:(_vm.backgroundSize)},[_c('img',{staticClass:\"img-fluid\",attrs:{\"id\":'content'+_vm.index,\"src\":_vm.backgroundImage,\"alt\":\"Responsive image\"},on:{\"load\":function($event){return _vm.onLoad(_vm.index)}}}),_c('div',{staticClass:\"loading\",attrs:{\"id\":'loader'+_vm.index}},[_c('i',{staticClass:\"fa fa-spinner fa-pulse fa-5x\"})])]):_vm._e(),(_vm.imagesExpanded || !_vm.contentData.expandable)?_c('div',{staticClass:\"d-block d-sm-none\",style:(_vm.backgroundSize)},[_c('img',{staticClass:\"img-fluid\",attrs:{\"id\":'mobilecontent'+_vm.index,\"src\":_vm.mobileBackgroundImage,\"alt\":\"Responsive image\"},on:{\"load\":function($event){return _vm.onMobileLoad(_vm.index)}}}),_c('div',{staticClass:\"loading\",attrs:{\"id\":'mobileloader'+_vm.index}},[_c('i',{staticClass:\"fa fa-spinner fa-pulse fa-5x\"})])]):_vm._e()])]):_vm._e(),(_vm.authenticated)?_c('div',[_c('div',{staticClass:\"row m-2\"},[_c('div',{staticClass:\"col-sm\"},[_c('label',[_vm._v(\"Desktop picture\")]),_c('vue-dropzone',{ref:\"computerDropzone\",attrs:{\"id\":\"dropzone\",\"options\":_vm.dropzoneOptions},on:{\"vdropzone-success\":_vm.uploadedFile}})],1),_c('div',{staticClass:\"col-sm\"},[_c('label',[_vm._v(\"Mobile picture\")]),_c('vue-dropzone',{ref:\"mobileDropzone\",attrs:{\"id\":\"dropzonemobile\",\"options\":_vm.dropzoneMobileOptions},on:{\"vdropzone-success\":_vm.uploadedMobileFile}})],1)]),_c('div',{staticClass:\"row m-2\"},[_c('div',{staticClass:\"col\"},[_c('div',{staticClass:\"form-check\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.contentData.expandable),expression:\"contentData.expandable\"}],staticClass:\"form-check-input\",attrs:{\"type\":\"checkbox\",\"id\":\"exampleCheck1\"},domProps:{\"checked\":Array.isArray(_vm.contentData.expandable)?_vm._i(_vm.contentData.expandable,null)>-1:(_vm.contentData.expandable)},on:{\"change\":function($event){var $$a=_vm.contentData.expandable,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.$set(_vm.contentData, \"expandable\", $$a.concat([$$v])))}else{$$i>-1&&(_vm.$set(_vm.contentData, \"expandable\", $$a.slice(0,$$i).concat($$a.slice($$i+1))))}}else{_vm.$set(_vm.contentData, \"expandable\", $$c)}}}}),_c('label',{staticClass:\"form-check-label\",attrs:{\"for\":\"exampleCheck1\"}},[_vm._v(\"Make image expandable\")])]),_c('div',{staticClass:\"form-group\"},[_c('label',{attrs:{\"for\":\"exampleCheck1\"}},[_vm._v(\"Toggle sections\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.contentData.toggleSections),expression:\"contentData.toggleSections\",modifiers:{\"number\":true}}],staticClass:\"form-control\",attrs:{\"type\":\"number\",\"id\":\"exampleCheck1\"},domProps:{\"value\":(_vm.contentData.toggleSections)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.$set(_vm.contentData, \"toggleSections\", _vm._n($event.target.value))},\"blur\":function($event){return _vm.$forceUpdate()}}})])])])]):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n\t<div class=\"position-relative\" :class=\"{imageMinHeight: imagesExpanded || !contentData.expandable}\">\r\n        <div v-if=\"!authenticated\">\r\n            <a @click=\"expandNextSection\" :class=\"{'clickableImage': contentData.toggleSections}\">\r\n                <div v-if=\"imagesExpanded || !contentData.expandable\" class=\"d-none d-sm-block\" v-bind:style=\"backgroundSize\">\r\n                    <img v-bind:id=\"'content'+index\" v-bind:src=\"backgroundImage\" v-on:load=\"onLoad(index)\" class=\"img-fluid\" alt=\"Responsive image\">\r\n                    <div class=\"loading\" v-bind:id=\"'loader'+index\">\r\n                        <i class=\"fa fa-spinner fa-pulse fa-5x\"></i>\r\n                    </div>\r\n                </div>\r\n                <div v-if=\"imagesExpanded || !contentData.expandable\" class=\"d-block d-sm-none\" v-bind:style=\"backgroundSize\">\r\n                    <img v-bind:id=\"'mobilecontent'+index\" v-bind:src=\"mobileBackgroundImage\" v-on:load=\"onMobileLoad(index)\" class=\"img-fluid\" alt=\"Responsive image\">\r\n                    <div class=\"loading\" v-bind:id=\"'mobileloader'+index\">\r\n                        <i class=\"fa fa-spinner fa-pulse fa-5x\"></i>\r\n                    </div>\r\n                </div>\r\n            </a>\r\n        </div>\r\n\t\t<div v-if=\"authenticated\">\r\n\t\t\t<div class=\"row m-2\">\r\n\t\t\t\t<div class=\"col-sm\">\r\n\t\t\t\t\t<label>Desktop picture</label>\r\n\t\t\t\t\t<vue-dropzone ref=\"computerDropzone\" id=\"dropzone\" :options=\"dropzoneOptions\" v-on:vdropzone-success=\"uploadedFile\" />\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"col-sm\">\r\n\t\t\t\t\t<label>Mobile picture</label>\r\n\t\t\t\t\t<vue-dropzone ref=\"mobileDropzone\" id=\"dropzonemobile\" :options=\"dropzoneMobileOptions\" v-on:vdropzone-success=\"uploadedMobileFile\" />\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"row m-2\">\r\n                <div class=\"col\">\r\n                    <div class=\"form-check\">\r\n                        <input type=\"checkbox\" v-model=\"contentData.expandable\" class=\"form-check-input\" id=\"exampleCheck1\">\r\n                        <label class=\"form-check-label\" for=\"exampleCheck1\">Make image expandable</label>\r\n                    </div>\r\n\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t<label for=\"exampleCheck1\">Toggle sections</label>\r\n\t\t\t\t\t\t<input type=\"number\" v-model.number=\"contentData.toggleSections\" class=\"form-control\" id=\"exampleCheck1\">\r\n\t\t\t\t\t</div>\r\n                </div>\r\n\t\t\t</div>\r\n\t\t</div>  \r\n\t</div>\r\n</template>\r\n\r\n<script>import $ from 'jquery';\r\n\r\n    export default {\r\n        name: 'imagecontent-component',\r\n        props: ['contentData', 'index', 'hide', 'dragging', 'authenticated', 'imagesExpanded'],\r\n        data() {\r\n            return {\r\n                dropzoneOptions: {\r\n                    url: \"/api/file/uploadfiles\",\r\n                    thumbnailWidth: 100,\r\n                    thumbnailHeight: 100,\r\n                    maxFilesize: 1\r\n                },\r\n                dropzoneMobileOptions: {\r\n                    url: \"/api/file/uploadfiles\",\r\n                    thumbnailWidth: 100,\r\n                    thumbnailHeight: 100,\r\n                    maxFilesize: 0.7\r\n                },\r\n                loaded: false,\r\n                backgroundImage: '',\r\n                mobileBackgroundImage: ''\r\n            }\r\n        },\r\n        computed: {\r\n            backgroundSize() {\r\n                if (this.loaded)\r\n                    return {\r\n                        'background-color': '#1d2124'\r\n                    };\r\n                else\r\n                    return {\r\n                        minHeight: (this.contentData.backgroundImageHeight / this.contentData.backgroundImageWidth * 100) + 'vw',\r\n                        'background-color': '#1d2124'\r\n                    };\r\n            },\r\n            mobileBackground() {\r\n\r\n            }\r\n        },\r\n        mounted() {\r\n            var self = this;\r\n\r\n            setTimeout(function(){\r\n                self.backgroundImage = self.contentData.backgroundImage;\r\n                self.mobileBackgroundImage = self.contentData.mobileBackgroundImage;\r\n            }, 200);\r\n\r\n            if (this.$refs.computerDropzone) {\r\n                this.$refs.computerDropzone.removeAllFiles();\r\n\r\n                if (this.contentData.backgroundImage) {\r\n                    var mockFile = { id: 1, name: \"Computer image\", size: 150 };\r\n                    this.$refs.computerDropzone.manuallyAddFile(mockFile, this.contentData.backgroundImage);\r\n                }\r\n            }\r\n\r\n            if (this.$refs.mobileDropzone) {\r\n                this.$refs.mobileDropzone.removeAllFiles();\r\n\r\n                if (this.contentData.mobileBackgroundImage) {\r\n                    var mockMobileFile = { id: 1, name: \"Mobile image\", size: 150 };\r\n                    this.$refs.mobileDropzone.manuallyAddFile(mockMobileFile, this.contentData.mobileBackgroundImage);\r\n                }\r\n            }\r\n        },\r\n        methods: {\r\n            onLoad(index) {\r\n                $('#content' + index).fadeIn();\r\n                $('#loader' + index).fadeOut();\r\n                this.loaded = true;\r\n            },\r\n            onMobileLoad(index) {\r\n                $('#mobilecontent' + index).fadeIn();\r\n                $('#mobileloader' + index).fadeOut();\r\n                this.loaded = true;\r\n            },\r\n            uploadedFile: function (file, response) {\r\n                if (this.$refs.computerDropzone.dropzone.files.length > 1)\r\n                    this.$refs.computerDropzone.removeFile(this.$refs.computerDropzone.dropzone.files[0])\r\n\r\n                this.contentData.backgroundImage = response.url;\r\n                this.contentData.backgroundImageWidth = file.width;\r\n                this.contentData.backgroundImageHeight = file.height;\r\n            },\r\n            uploadedMobileFile: function (file, response) {\r\n                if (this.$refs.mobileDropzone.dropzone.files.length > 1)\r\n                    this.$refs.mobileDropzone.removeFile(this.$refs.mobileDropzone.dropzone.files[0])\r\n\r\n                this.contentData.mobileBackgroundImage = response.url;\r\n                this.contentData.mobileBackgroundImageWidth = file.width;\r\n                this.contentData.mobileBackgroundImageHeight = file.height;\r\n            },\r\n            expandNextSection() {\r\n                if (!this.contentData.toggleSections)\r\n                    return;\r\n\r\n                //if ($(this.$el).parent().next().is(\":visible\") == false)\r\n                //    $('html, body').animate({\r\n                //        scrollTop: $(this.$el).parent().next().offset().top - 50\r\n                //    }, 500);\r\n\r\n\t\t\t\t$(this.$el).parent().nextAll().slice(0, this.contentData.toggleSections).slideToggle();\r\n            }\r\n        }\r\n    };</script>\r\n\r\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\r\n<style scoped>\r\n\t.img-fluid {\r\n\t\twidth: 100%;\r\n\t}\r\n\r\n\t.bottom-right {\r\n\t\tposition: absolute;\r\n\t\tbottom: 16px;\r\n\t\tright: 16px;\r\n\t}\r\n\r\n\t.loading {\r\n\t\tz-index: 1001;\r\n\t\tposition: absolute;\r\n\t\tleft: 50%;\r\n\t\ttop: 50%;\r\n\t\ttransform: translate(-50%, -50%);\r\n\t\tcolor: #fff;\r\n\t}\r\n\r\n    .imageMinHeight {\r\n        min-height: 100px\r\n    }\r\n\r\n    .clickableImage div {\r\n        margin: 10px;\r\n    }\r\n\r\n    .clickableImage div:active {\r\n        opacity: 0.75;\r\n    }\r\n\r\n    @media only screen and (min-width : 992px) {\r\n        .clickableImage {\r\n            cursor: pointer;\r\n        }\r\n\r\n        .clickableImage div:hover {\r\n            opacity: 0.75;\r\n        }\r\n    }\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageContent.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageContent.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ImageContent.vue?vue&type=template&id=423ebc50&scoped=true&\"\nimport script from \"./ImageContent.vue?vue&type=script&lang=js&\"\nexport * from \"./ImageContent.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ImageContent.vue?vue&type=style&index=0&id=423ebc50&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  \"423ebc50\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}