From 5db54b6a62ab74e0f30982e8e000c128caf6e310 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <git@imaniti.org> Date: Wed, 11 Oct 2023 16:02:54 +0200 Subject: [PATCH] move images to localstorage --- frontend/package-lock.json | 6 --- frontend/package.json | 1 - frontend/src/components/inputs/ImageInput.vue | 10 +++- .../components/reload/AutoReloadCheckbox.vue | 3 +- frontend/src/main.js | 2 - frontend/src/utils.js | 52 +++++++++++++++---- .../basic_photo_banner/BasicPhotoBanner.vue | 15 ++++-- .../src/views/basic_photo_banner/canvas.js | 2 + .../views/facebook_survey/FacebookSurvey.vue | 13 +++-- .../NewspaperQuoteBottom.vue | 13 +++-- .../NewspaperQuoteMiddle.vue | 13 +++-- frontend/src/views/text_banner/TextBanner.vue | 21 +++++--- frontend/src/views/text_banner/canvas.js | 6 +-- .../views/twitter_banner/TwitterBanner.vue | 13 +++-- .../UrgentBasicPhotoBanner.vue | 13 +++-- .../urgent_text_banner/UrgentTextBanner.vue | 21 +++++--- .../src/views/urgent_text_banner/canvas.js | 5 +- 17 files changed, 147 insertions(+), 62 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0941da17..f8f447cf 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,7 +11,6 @@ "alertifyjs": "^1.13.1", "fabric": "^5.3.0", "vue": "^3.2.47", - "vue-cookies": "^1.8.3", "vue-meta": "^3.0.0-alpha.2", "vue-router": "^4.1.6", "vue-select": "^4.0.0-beta.6" @@ -4485,11 +4484,6 @@ "@vue/shared": "3.2.47" } }, - "node_modules/vue-cookies": { - "version": "1.8.3", - "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.3.tgz", - "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA==" - }, "node_modules/vue-eslint-parser": { "version": "9.2.1", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.2.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 1ec6074e..fa3c2117 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,7 +13,6 @@ "alertifyjs": "^1.13.1", "fabric": "^5.3.0", "vue": "^3.2.47", - "vue-cookies": "^1.8.3", "vue-meta": "^3.0.0-alpha.2", "vue-router": "^4.1.6", "vue-select": "^4.0.0-beta.6" diff --git a/frontend/src/components/inputs/ImageInput.vue b/frontend/src/components/inputs/ImageInput.vue index 1f5802be..d6541400 100644 --- a/frontend/src/components/inputs/ImageInput.vue +++ b/frontend/src/components/inputs/ImageInput.vue @@ -51,7 +51,13 @@ export default { this.$emit('update:modelValue', image) } - image.src = window.URL.createObjectURL(file) + const reader = new FileReader() + + reader.onloadend = () => { + image.src = reader.result + } + + reader.readAsDataURL(file) }, setSelectedImage (value) { this.selectedImage = value @@ -84,7 +90,7 @@ export default { } }, mounted () { - if (this.selectedImage) { + if (this.selectedImage && !this.modelValue) { this.setSelectedImage(this.selectedImage) } } diff --git a/frontend/src/components/reload/AutoReloadCheckbox.vue b/frontend/src/components/reload/AutoReloadCheckbox.vue index 679a8082..ca04a46e 100644 --- a/frontend/src/components/reload/AutoReloadCheckbox.vue +++ b/frontend/src/components/reload/AutoReloadCheckbox.vue @@ -11,7 +11,8 @@ id="auto-reload-checkbox" name="auto-reload-checkbox" type="checkbox" - @input="$emit('update:modelValue', $event.target.value)" + :checked="modelValue" + @input="$emit('update:modelValue', $event.target.checked)" > <label for="auto-reload-checkbox" diff --git a/frontend/src/main.js b/frontend/src/main.js index ef906641..e30ce3c7 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -3,11 +3,9 @@ import './index.css' import { createApp } from 'vue' import router from './router' import App from './App.vue' -import VueCookies from 'vue-cookies' const app = createApp(App) app.use(router) -app.use(VueCookies, {}) app.mount('#app') diff --git a/frontend/src/utils.js b/frontend/src/utils.js index f08cd252..5c0f2ecb 100644 --- a/frontend/src/utils.js +++ b/frontend/src/utils.js @@ -25,25 +25,55 @@ const clearNullsFromArray = (originalArray) => { } -const loadDataFromCookie = (cookies, data) => { - if (cookies.isKey("canvas_properties")) { - let dataCookie = {} - - try { - dataCookie = cookies.get("canvas_properties") - } catch (exception) { - cookies.remove("canvas_properties") - } +const updateAutoRedrawStorage = (autoRedraw) => { + window.sessionStorage.setItem("auto_redraw", JSON.stringify(autoRedraw)) +} + - for (const [key, value] of Object.entries(dataCookie)) { +const loadCanvasStorage = (data) => { + const canvasProperties = JSON.parse(window.sessionStorage.getItem("canvas_properties")) + const autoRedraw = JSON.parse(window.sessionStorage.getItem("auto_redraw")) + + if (canvasProperties) { + for (const [key, value] of Object.entries(canvasProperties)) { if (!(key in data)) { continue } + if (key.toLowerCase().endsWith("image") && value) { + const image = new Image() + image.src = value + + data[key] = image + + continue + } + data[key] = value } } + + if (autoRedraw) { + data.autoRedraw = autoRedraw + } +} + + +const setCanvasStorage = (data) => { + let processedData = {} + + for (const [key, value] of Object.entries(data)) { + if (key.toLowerCase().endsWith("image") && value) { + processedData[key] = value.src + + continue + } + + processedData[key] = value + } + + window.sessionStorage.setItem("canvas_properties", JSON.stringify(processedData)) } -export { loadFonts, clearNullsFromArray, loadDataFromCookie } +export { loadFonts, clearNullsFromArray, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } diff --git a/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue b/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue index bcefd5ba..af93b6d3 100644 --- a/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue +++ b/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue @@ -5,7 +5,7 @@ import COLORS from '../../colors' import PEOPLE from '../../people' import TEMPLATES from '../../templates' import { generateDefaultLogos } from '../../logos' -import { loadFonts, loadDataFromCookie } from '../../utils' +import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils' import Canvas from '../../components/canvas/Canvas.vue' import redraw from './canvas' @@ -75,7 +75,7 @@ export default { autoRedraw: false } - loadDataFromCookie($cookies, data) + loadCanvasStorage(data) return data }, @@ -94,7 +94,7 @@ export default { await this.$refs.canvas.redraw(canvasProperties) delete canvasProperties.colors - $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0) + setCanvasStorage(canvasProperties) } }, mounted () { @@ -118,7 +118,14 @@ export default { deep: true } ) - } + + this.$watch( + vm => [vm.autoRedraw], + async (value) => { + updateAutoRedrawStorage(this.autoRedraw) + } + ) + }, } </script> diff --git a/frontend/src/views/basic_photo_banner/canvas.js b/frontend/src/views/basic_photo_banner/canvas.js index 83781443..4b698169 100644 --- a/frontend/src/views/basic_photo_banner/canvas.js +++ b/frontend/src/views/basic_photo_banner/canvas.js @@ -319,6 +319,8 @@ const redraw = async (canvas, options) => { /* BEGIN Main image render */ + console.log(options.mainImage, mainImage, options.mainImage.src) + if ( options.mainImage !== null && ( diff --git a/frontend/src/views/facebook_survey/FacebookSurvey.vue b/frontend/src/views/facebook_survey/FacebookSurvey.vue index 8d24795b..c8164f15 100644 --- a/frontend/src/views/facebook_survey/FacebookSurvey.vue +++ b/frontend/src/views/facebook_survey/FacebookSurvey.vue @@ -4,7 +4,7 @@ import { watch, ref } from 'vue' import COLORS from '../../colors' import TEMPLATES from '../../templates' import { generateDefaultLogos } from '../../logos' -import { loadFonts, loadDataFromCookie } from '../../utils' +import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils' import Canvas from '../../components/canvas/Canvas.vue' import redraw from './canvas' @@ -75,7 +75,7 @@ export default { autoRedraw: false } - loadDataFromCookie($cookies, data) + loadCanvasStorage(data) return data }, @@ -96,7 +96,7 @@ export default { await this.$refs.canvas.redraw(canvasProperties) delete canvasProperties.colors - $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0) + setCanvasStorage(canvasProperties) } }, mounted () { @@ -122,6 +122,13 @@ export default { deep: true } ) + + this.$watch( + vm => [vm.autoRedraw], + async (value) => { + updateAutoRedrawStorage(this.autoRedraw) + } + ) } } </script> diff --git a/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue b/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue index 7ad84bc5..e622aae3 100644 --- a/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue +++ b/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue @@ -6,7 +6,7 @@ import PEOPLE from '../../people' import TEMPLATES from '../../templates' import { generateDefaultLogos } from '../../logos' import { SOURCE_IMAGES } from '../utils/newspaper_quotes' -import { loadFonts, loadDataFromCookie } from '../../utils' +import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils' import Canvas from '../../components/canvas/Canvas.vue' import redraw from './canvas'; @@ -85,7 +85,7 @@ export default { autoRedraw: false } - loadDataFromCookie($cookies, data) + loadCanvasStorage(data) return data }, @@ -104,7 +104,7 @@ export default { await this.$refs.canvas.redraw(canvasProperties) delete canvasProperties.colors - $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0) + setCanvasStorage(canvasProperties) } }, mounted () { @@ -128,6 +128,13 @@ export default { deep: true } ) + + this.$watch( + vm => [vm.autoRedraw], + async (value) => { + updateAutoRedrawStorage(this.autoRedraw) + } + ) } } </script> diff --git a/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue b/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue index fdbbcc87..bc36a096 100644 --- a/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue +++ b/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue @@ -6,7 +6,7 @@ import PEOPLE from '../../people' import TEMPLATES from '../../templates' import { generateDefaultLogos } from '../../logos' import { SOURCE_IMAGES } from '../utils/newspaper_quotes' -import { loadFonts, loadDataFromCookie } from '../../utils' +import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils' import Canvas from '../../components/canvas/Canvas.vue' import redraw from './canvas'; @@ -90,7 +90,7 @@ export default { autoRedraw: false } - loadDataFromCookie($cookies, data) + loadCanvasStorage(data) return data }, @@ -108,7 +108,7 @@ export default { await this.$refs.canvas.redraw(canvasProperties) delete canvasProperties.colors - $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0) + setCanvasStorage(canvasProperties) } }, mounted () { @@ -131,6 +131,13 @@ export default { deep: true } ) + + this.$watch( + vm => [vm.autoRedraw], + async (value) => { + updateAutoRedrawStorage(this.autoRedraw) + } + ) } } </script> diff --git a/frontend/src/views/text_banner/TextBanner.vue b/frontend/src/views/text_banner/TextBanner.vue index 9b7d3748..012f3e84 100644 --- a/frontend/src/views/text_banner/TextBanner.vue +++ b/frontend/src/views/text_banner/TextBanner.vue @@ -4,7 +4,7 @@ import { watch, ref } from 'vue'; import COLORS from '../../colors'; import TEMPLATES from '../../templates' import { generateDefaultLogos } from '../../logos' -import { loadFonts, loadDataFromCookie } from '../../utils' +import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils' import Canvas from '../../components/canvas/Canvas.vue'; import redraw from './canvas'; @@ -45,7 +45,7 @@ export default { } let data = { - text: null, + mainText: null, logoImage: null, colorLabels: { background: 'PozadÃ', @@ -60,14 +60,14 @@ export default { autoRedraw: false } - loadDataFromCookie($cookies, data) + loadCanvasStorage(data) return data }, methods: { async reloadCanvasProperties () { const canvasProperties = { - text: this.text, + mainText: this.mainText, logoImage: this.logoImage, colors: this.colors } @@ -75,13 +75,13 @@ export default { await this.$refs.canvas.redraw(canvasProperties) delete canvasProperties.colors - $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0) + setCanvasStorage(canvasProperties) } }, mounted () { this.$watch( vm => [ - vm.text, + vm.mainText, vm.logoImage, vm.colors ], @@ -95,6 +95,13 @@ export default { deep: true } ) + + this.$watch( + vm => [vm.autoRedraw], + async (value) => { + updateAutoRedrawStorage(this.autoRedraw) + } + ) } } </script> @@ -126,7 +133,7 @@ export default { /> <LongTextInput name="Text" - v-model="text" + v-model="mainText" :important="true" :highlightable="true" zIndex="10" diff --git a/frontend/src/views/text_banner/canvas.js b/frontend/src/views/text_banner/canvas.js index 3c614fd3..65dd4ae4 100644 --- a/frontend/src/views/text_banner/canvas.js +++ b/frontend/src/views/text_banner/canvas.js @@ -91,11 +91,11 @@ const redraw = async (canvas, options) => { /* END Logo render */ - if (options.text !== null) { + if (options.mainText !== null) { /* BEGIN Text render */ const highlightedData = transformHighlightedText( - options.text, + options.mainText, textSize, textBoxWidth, 'Bebas Neue', @@ -163,7 +163,7 @@ const redraw = async (canvas, options) => { left: ( arrowMarginLeft + ( - (options.text[0] === "*") ? + (options.mainText[0] === "*") ? arrowMarginLeftExtra : 0 ) ), diff --git a/frontend/src/views/twitter_banner/TwitterBanner.vue b/frontend/src/views/twitter_banner/TwitterBanner.vue index 3d9742dc..9ae28dce 100644 --- a/frontend/src/views/twitter_banner/TwitterBanner.vue +++ b/frontend/src/views/twitter_banner/TwitterBanner.vue @@ -4,7 +4,7 @@ import { watch, ref } from 'vue' import COLORS from '../../colors' import TEMPLATES from '../../templates' import { generateDefaultLogos } from '../../logos' -import { loadFonts, loadDataFromCookie } from '../../utils' +import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils' import defaultDarkLogoImage from '../../assets/logos/default-dark.png' @@ -89,7 +89,7 @@ export default { autoRedraw: false } - loadDataFromCookie($cookies, data) + loadCanvasStorage(data) return data }, @@ -108,7 +108,7 @@ export default { await this.$refs.canvas.redraw(canvasProperties) delete canvasProperties.colors - $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0) + setCanvasStorage(canvasProperties) } }, mounted () { @@ -132,6 +132,13 @@ export default { deep: true } ) + + this.$watch( + vm => [vm.autoRedraw], + async (value) => { + updateAutoRedrawStorage(this.autoRedraw) + } + ) } } </script> diff --git a/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue b/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue index 35907f72..c9ee6447 100644 --- a/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue +++ b/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue @@ -5,7 +5,7 @@ import COLORS from '../../colors' import PEOPLE from '../../people' import TEMPLATES from '../../templates' import { generateDefaultLogos } from '../../logos' -import { loadFonts, loadDataFromCookie } from '../../utils' +import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils' import Canvas from '../../components/canvas/Canvas.vue' import redraw from '../basic_photo_banner/canvas' @@ -75,7 +75,7 @@ export default { autoRedraw: false } - loadDataFromCookie($cookies, data) + loadCanvasStorage(data) return data }, @@ -94,7 +94,7 @@ export default { await this.$refs.canvas.redraw(canvasProperties) delete canvasProperties.colors - $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0) + setCanvasStorage(canvasProperties) } }, mounted () { @@ -118,6 +118,13 @@ export default { deep: true } ) + + this.$watch( + vm => [vm.autoRedraw], + async (value) => { + updateAutoRedrawStorage(this.autoRedraw) + } + ) } } </script> diff --git a/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue b/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue index 0b1ddded..8b63b48d 100644 --- a/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue +++ b/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue @@ -4,7 +4,7 @@ import { watch, ref } from 'vue'; import COLORS from '../../colors'; import TEMPLATES from '../../templates' import { LOGOS } from '../../logos' -import { loadFonts, loadDataFromCookie } from '../../utils' +import { loadFonts, loadCanvasStorage, setCanvasStorage, updateAutoRedrawStorage } from '../../utils' import Canvas from '../../components/canvas/Canvas.vue'; import redraw from './canvas'; @@ -47,7 +47,7 @@ export default { } let data = { - text: null, + mainText: null, logoImage: null, colorLabels: { background: 'PozadÃ', @@ -66,14 +66,14 @@ export default { autoRedraw: false } - loadDataFromCookie($cookies, data) + loadCanvasStorage(data) return data }, methods: { async reloadCanvasProperties () { const canvasProperties = { - text: this.text, + mainText: this.mainText, logoImage: this.logoImage, colors: this.colors } @@ -81,13 +81,13 @@ export default { await this.$refs.canvas.redraw(canvasProperties) await delete canvasProperties.colors - $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0) + setCanvasStorage(canvasProperties) } }, mounted () { this.$watch( vm => [ - vm.text, + vm.mainText, vm.logoImage, vm.colors ], @@ -101,6 +101,13 @@ export default { deep: true } ) + + this.$watch( + vm => [vm.autoRedraw], + async (value) => { + updateAutoRedrawStorage(this.autoRedraw) + } + ) } } </script> @@ -132,7 +139,7 @@ export default { /> <LongTextInput name="Text" - v-model="text" + v-model="mainText" :important="true" :highlightable="false" zIndex="10" diff --git a/frontend/src/views/urgent_text_banner/canvas.js b/frontend/src/views/urgent_text_banner/canvas.js index 9059a4e1..300d2173 100644 --- a/frontend/src/views/urgent_text_banner/canvas.js +++ b/frontend/src/views/urgent_text_banner/canvas.js @@ -87,13 +87,12 @@ const redraw = async (canvas, options) => { /* END Logo render */ - /* BEGIN Text render */ - if (options.text !== null) { + if (options.mainText !== null) { textBox = new fabric.Textbox( transformTextLineBreaks( - options.text, + options.mainText, textSize, 'Bebas Neue', textBoxWidth -- GitLab