1 line
14 KiB
Plaintext
1 line
14 KiB
Plaintext
{"version":3,"sources":["webpack:///./src/components/widgets/ImageCarousel/Index.vue?7c0d","webpack:///./src/components/widgets/ImageCarousel/Index.vue","webpack:///./src/components/widgets/ImageCarousel/Index.vue?0f1d","webpack:///./src/components/widgets/ImageCarousel/Index.vue?cfe7"],"names":["class","ref","images","length","src","imgURL","alt","style","_showDate","_showTime","_showWeather","show-icon","_showWeatherIcon","show-summary","_showWeatherSummary","show-temperature","_showTemperature","icon-color","weatherIconColor","icon-size","weatherIconSize","animate","_animateWeatherIcon","show-date","show-time","show-seconds","_showSeconds","name","components","Weather","DateTime","Loading","mixins","Utils","props","imgDir","type","String","required","refreshSeconds","Number","default","showDate","Boolean","showTime","showSeconds","showWeather","showTemperature","showWeatherIcon","showWeatherSummary","animateWeatherIcon","data","currentImage","undefined","loading","computed","port","this","$root","config","window","location","hostname","parseBoolean","methods","refresh","request","directory","extensions","shuffleImages","pop","onNewImage","$refs","img","background","width","height","ratio","i","j","Math","floor","random","x","mounted","addEventListener","setInterval","round","render","__scopeId"],"mappings":"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","file":"static/js/chunk-f0cefcde.8bf9c8a1.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Index.vue?vue&type=style&index=0&id=8830e3f6&lang=scss&scoped=true\"","<template>\n <div class=\"image-carousel\">\n <Loading v-if=\"!images.length\" />\n <div ref=\"background\" class=\"background\" />\n <img ref=\"img\" :src=\"imgURL\" alt=\"Your carousel images\"\n :style=\"{display: !images.length ? 'none' : 'block'}\">\n\n <div class=\"row info-container\" v-if=\"_showDate || _showTime\">\n <div class=\"col-6 weather-container\">\n <span v-if=\"!_showWeather\"> </span>\n <Weather :show-icon=\"_showWeatherIcon\" :show-summary=\"_showWeatherSummary\" :show-temperature=\"_showTemperature\"\n :icon-color=\"weatherIconColor\" :icon-size=\"weatherIconSize\" :animate=\"_animateWeatherIcon\" v-else />\n </div>\n\n <div class=\"col-6 date-time-container\">\n <DateTime :show-date=\"_showDate\" :show-time=\"_showTime\" :show-seconds=\"_showSeconds\"\n v-if=\"_showTime || _showDate\" />\n </div>\n </div>\n </div>\n</template>\n\n<script>\nimport Utils from \"@/Utils\";\nimport Loading from \"@/components/Loading\";\nimport DateTime from \"@/components/widgets/DateTime/Index\";\nimport Weather from \"@/components/widgets/Weather/Index\";\n\nexport default {\n name: \"ImageCarousel\",\n components: {Weather, DateTime, Loading},\n mixins: [Utils],\n props: {\n // Images directory\n imgDir: {\n type: String,\n required: true,\n },\n\n // Refresh interval in seconds.\n refreshSeconds: {\n type: Number,\n required: false,\n default: 15,\n },\n\n // Show the current date on top of the images\n showDate: {\n type: Boolean,\n required: false,\n default: false,\n },\n\n // Show the current time on top of the images\n showTime: {\n type: Boolean,\n required: false,\n default: false,\n },\n\n // If false then don't display the seconds.\n showSeconds: {\n type: Boolean,\n required: false,\n default: false,\n },\n\n // If false then don't display weather info.\n showWeather: {\n type: Boolean,\n required: false,\n default: false,\n },\n\n // If false then temperature won't be displayed.\n showTemperature: {\n type: Boolean,\n required: false,\n default: true,\n },\n\n // If false then don't display the weather state icon.\n showWeatherIcon: {\n type: Boolean,\n required: false,\n default: true,\n },\n\n // If false then don't display the weather summary text.\n showWeatherSummary: {\n type: Boolean,\n required: false,\n default: true,\n },\n\n // Weather con color.\n weatherIconColor: {\n type: String,\n required: false,\n default: 'white',\n },\n\n // Size of the weather icon in pixels.\n weatherIconSize: {\n type: Number,\n required: false,\n default: 40,\n },\n\n // If false then the weather icon will be animated.\n // Otherwise, it will be a static image.\n animateWeatherIcon: {\n required: false,\n default: true,\n },\n },\n\n data() {\n return {\n images: [],\n currentImage: undefined,\n loading: false,\n }\n },\n\n computed: {\n imgURL() {\n let port = 8008\n if ('backend.http' in this.$root.config && 'port' in this.$root.config['backend.http']) {\n port = this.$root.config['backend.http'].port\n }\n\n return '//' + window.location.hostname + ':' + port + this.currentImage\n },\n\n _showDate() {\n return this.parseBoolean(this.showDate)\n },\n\n _showTime() {\n return this.parseBoolean(this.showTime)\n },\n\n _showSeconds() {\n return this.parseBoolean(this.showSeconds)\n },\n\n _showTemperature() {\n return this.parseBoolean(this.showTemperature)\n },\n\n _showWeather() {\n return this.parseBoolean(this.showWeather)\n },\n\n _showWeatherIcon() {\n return this.parseBoolean(this.showWeatherIcon)\n },\n\n _showWeatherSummary() {\n return this.parseBoolean(this.showWeatherSummary)\n },\n\n _animateWeatherIcon() {\n return this.parseBoolean(this.animateWeatherIcon)\n }\n },\n\n methods: {\n async refresh() {\n if (!this.images.length) {\n this.loading = true\n\n try {\n this.images = await this.request('utils.search_web_directory', {\n directory: this.imgDir,\n extensions: ['.jpg', '.jpeg', '.png'],\n })\n\n this.shuffleImages()\n } finally {\n this.loading = false\n }\n }\n\n if (this.images.length) {\n this.currentImage = this.images.pop()\n }\n },\n\n onNewImage() {\n if (!this.$refs.img)\n return\n\n this.$refs.background.style['background-image'] = 'url(' + this.imgURL + ')'\n this.$refs.img.style.width = 'auto'\n\n if (this.$refs.img.width > this.$refs.img.height) {\n const ratio = this.$refs.img.width / this.$refs.img.height\n if (4/3 <= ratio <= 16/9) {\n this.$refs.img.style.width = '100%'\n }\n\n if (ratio <= 4/3) {\n this.$refs.img.style.height = '100%'\n }\n }\n },\n\n shuffleImages() {\n for (let i=this.images.length-1; i > 0; i--) {\n let j = Math.floor(Math.random() * (i+1))\n let x = this.images[i]\n this.images[i] = this.images[j]\n this.images[j] = x\n }\n },\n },\n\n mounted() {\n this.$refs.img.addEventListener('load', this.onNewImage)\n this.$refs.img.addEventListener('error', this.refresh)\n\n this.refresh()\n setInterval(this.refresh, Math.round(this.refreshSeconds * 1000))\n },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.image-carousel {\n width: calc(100% + 1.5em);\n height: calc(100% + 1.5em);\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: black;\n margin: -0.75em 0.75em 0.75em -0.75em !important;\n\n .background {\n position: absolute;\n top: 0;\n width: 100%;\n height: 100vh;\n background-color: black;\n background-position: center;\n background-size: cover;\n background-repeat: no-repeat;\n filter: blur(13px);\n -webkit-filter: blur(13px);\n }\n\n img {\n position: absolute;\n max-height: 100%;\n z-index: 2;\n }\n}\n\n.info-container {\n width: 100%;\n position: absolute;\n bottom: 0;\n display: flex;\n align-items: flex-end;\n z-index: 10;\n color: white;\n text-shadow: 3px 3px 4px black;\n font-size: 1.25em;\n margin: 0.5em;\n padding: 0 1em;\n\n .date-time {\n text-align: right;\n }\n}\n</style>\n\n<style lang=\"scss\">\n.image-carousel {\n .info-container {\n .weather-container {\n margin-bottom: 0.5em;\n\n h1 {\n justify-content: left;\n margin-bottom: -0.5em;\n font-size: 0.8em;\n }\n }\n\n .date-time {\n .date {\n font-size: 2em;\n }\n\n .time {\n font-size: 4em;\n }\n }\n }\n}\n</style>\n","import { render } from \"./Index.vue?vue&type=template&id=8830e3f6&scoped=true&bindings={\\\"imgDir\\\":\\\"props\\\",\\\"refreshSeconds\\\":\\\"props\\\",\\\"showDate\\\":\\\"props\\\",\\\"showTime\\\":\\\"props\\\",\\\"showSeconds\\\":\\\"props\\\",\\\"showWeather\\\":\\\"props\\\",\\\"showTemperature\\\":\\\"props\\\",\\\"showWeatherIcon\\\":\\\"props\\\",\\\"showWeatherSummary\\\":\\\"props\\\",\\\"weatherIconColor\\\":\\\"props\\\",\\\"weatherIconSize\\\":\\\"props\\\",\\\"animateWeatherIcon\\\":\\\"props\\\",\\\"images\\\":\\\"data\\\",\\\"currentImage\\\":\\\"data\\\",\\\"loading\\\":\\\"data\\\",\\\"imgURL\\\":\\\"options\\\",\\\"_showDate\\\":\\\"options\\\",\\\"_showTime\\\":\\\"options\\\",\\\"_showSeconds\\\":\\\"options\\\",\\\"_showTemperature\\\":\\\"options\\\",\\\"_showWeather\\\":\\\"options\\\",\\\"_showWeatherIcon\\\":\\\"options\\\",\\\"_showWeatherSummary\\\":\\\"options\\\",\\\"_animateWeatherIcon\\\":\\\"options\\\",\\\"refresh\\\":\\\"options\\\",\\\"onNewImage\\\":\\\"options\\\",\\\"shuffleImages\\\":\\\"options\\\"}\"\nimport script from \"./Index.vue?vue&type=script&lang=js\"\nexport * from \"./Index.vue?vue&type=script&lang=js\"\n\nimport \"./Index.vue?vue&type=style&index=0&id=8830e3f6&lang=scss&scoped=true\"\nimport \"./Index.vue?vue&type=style&index=1&lang=scss\"\nscript.render = render\nscript.__scopeId = \"data-v-8830e3f6\"\n\nexport default script","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Index.vue?vue&type=style&index=1&lang=scss\""],"sourceRoot":""} |