diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0941da175dc402eb12e61388faea0cc1adcfcca5..f8f447cfb1abcfcd48166bba9730c1ee946c80a1 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 1ec6074e4be9871b23ba1938ebaca363614413c0..fa3c2117a6000f973a158aba63313cea54df63b3 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 1f5802be9949b0d85f54d34524c84e6c35e4fe3f..d65414000ed24e78853161691a3f3f94878cc877 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 679a8082b4e05aa63dba8e92e7bfe263bf736f04..ca04a46ed67435777a58906eabfd5d81709f94a8 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 ef90664136ab0537b971f01cd50b29bfb2c9a629..e30ce3c75e4f40e2812fffed80718db0c5b1dffe 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 f08cd25284c75cb886c95d3468f3a6916bbcdd48..5c0f2ecbe89968d44edd87967ebbbc12c76d2ef6 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 bcefd5ba7617cca12d62322ab2f023b0c50449db..af93b6d3b09fef9edc0a7ad407d9a5829159e2b8 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 8378144352c178e02e1700af96c399f9d448f94a..4b6981695d78cb3dd5e8a662713f828ca46dd642 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 8d24795bf8b6a1e8a2907356a97f03a546bba582..c8164f15ca83ce98bf4c88c81ba4e737a73ca839 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 7ad84bc5755bebb4d59bf5dcd0927a114b4055e8..e622aae39379671ce5ea7403a3f1d15ac97dd581 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 fdbbcc87c620d5cfb3c7e8565b1d1530c8f4d8cf..bc36a096d52719d410f4a511be8613cd164d8907 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 9b7d37483d0dcd54479bd33466a9044a862a6435..012f3e843076ceacb64100a3d98c1a11d656be41 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 3c614fd3ad2af5b5650e3456037be18af1f7b512..65dd4ae4a44d48f8e7fc700930619898f699d416 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 3d9742dcf2dc3b729c0e4752cfd865c5624b38f3..9ae28dce1c86ea4cd2f2326a9273b6f24a90ec07 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 35907f72fc0937a6fa17a29f1d2571993138773e..c9ee6447a64158254cef94f48a19b325a07b2444 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 0b1ddded05beae4eb8060c0f18f5936860aa6ac0..8b63b48dfcdc1652bcb0d6376988fd62f73e287d 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 9059a4e1bee77f19cd9cb30e889557c7ea6ed0af..300d2173bf830479ccfdf4724636029ab9ecb9df 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