diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f8f447cfb1abcfcd48166bba9730c1ee946c80a1..0941da175dc402eb12e61388faea0cc1adcfcca5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,7 @@
"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"
@@ -4484,6 +4485,11 @@
"@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 fa3c2117a6000f973a158aba63313cea54df63b3..1ec6074e4be9871b23ba1938ebaca363614413c0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
"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/main.js b/frontend/src/main.js
index e30ce3c75e4f40e2812fffed80718db0c5b1dffe..ef90664136ab0537b971f01cd50b29bfb2c9a629 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,9 +3,11 @@ 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 9f00d80b65bd6f0a7676f3afb8f00d3d5547e602..f08cd25284c75cb886c95d3468f3a6916bbcdd48 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -25,4 +25,25 @@ const clearNullsFromArray = (originalArray) => {
}
-export { loadFonts, clearNullsFromArray }
+const loadDataFromCookie = (cookies, data) => {
+ if (cookies.isKey("canvas_properties")) {
+ let dataCookie = {}
+
+ try {
+ dataCookie = cookies.get("canvas_properties")
+ } catch (exception) {
+ cookies.remove("canvas_properties")
+ }
+
+ for (const [key, value] of Object.entries(dataCookie)) {
+ if (!(key in data)) {
+ continue
+ }
+
+ data[key] = value
+ }
+ }
+}
+
+
+export { loadFonts, clearNullsFromArray, loadDataFromCookie }
diff --git a/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue b/frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue
index 6fd923c177830daa79ac02191c787f68409db5fe..18b47cefea108f710ff5a63f78ecf632e80567fe 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 } from '../../utils'
+import { loadFonts, loadDataFromCookie } from '../../utils'
import Canvas from '../../components/canvas/Canvas.vue'
import redraw from './canvas'
@@ -55,7 +55,7 @@ export default {
}
}
- return {
+ let data = {
mainImage: null,
mainText: null,
personName: null,
@@ -74,20 +74,27 @@ export default {
predefinedLogoImages: generateDefaultLogos('defaultLight'),
autoRedraw: false
}
+
+ loadDataFromCookie($cookies, data)
+
+ return data
},
methods: {
reloadCanvasProperties () {
- this.$refs.canvas.redraw(
- {
- mainImage: this.mainImage,
- mainText: this.mainText,
- personName: this.personName,
- personPosition: this.personPosition,
- logoImage: this.logoImage,
- gradientHeightMultiplier: this.gradientHeightMultiplier,
- colors: this.colors
- }
- )
+ const canvasProperties = {
+ mainImage: this.mainImage,
+ mainText: this.mainText,
+ personName: this.personName,
+ personPosition: this.personPosition,
+ logoImage: this.logoImage,
+ gradientHeightMultiplier: this.gradientHeightMultiplier,
+ colors: this.colors
+ }
+
+ this.$refs.canvas.redraw(canvasProperties)
+
+ delete canvasProperties.colors
+ $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
}
},
mounted () {
diff --git a/frontend/src/views/facebook_survey/FacebookSurvey.vue b/frontend/src/views/facebook_survey/FacebookSurvey.vue
index 4bcab6024be31c161f7cfec39e198e249a407b1c..d12256b274e11f78fbab2ba5db79eae4d7da1178 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 } from '../../utils'
+import { loadFonts, loadDataFromCookie } from '../../utils'
import Canvas from '../../components/canvas/Canvas.vue'
import redraw from './canvas'
@@ -53,7 +53,7 @@ export default {
}
}
- return {
+ let data = {
mainImage: null,
mainText: null,
logoImage: null,
@@ -74,22 +74,29 @@ export default {
predefinedLogoImages: generateDefaultLogos('defaultDark'),
autoRedraw: false
}
+
+ loadDataFromCookie($cookies, data)
+
+ return data
},
methods: {
reloadCanvasProperties () {
- this.$refs.canvas.redraw(
- {
- mainImage: this.mainImage,
- mainText: this.mainText,
- logoImage: this.logoImage,
- colors: this.colors,
- firstEmojiImage: this.firstEmojiImage,
- secondEmojiImage: this.secondEmojiImage,
- firstEmojiText: this.firstEmojiText,
- secondEmojiText: this.secondEmojiText,
- gradientHeightMultiplier: this.gradientHeightMultiplier
- }
- )
+ const canvasProperties = {
+ mainImage: this.mainImage,
+ mainText: this.mainText,
+ logoImage: this.logoImage,
+ colors: this.colors,
+ firstEmojiImage: this.firstEmojiImage,
+ secondEmojiImage: this.secondEmojiImage,
+ firstEmojiText: this.firstEmojiText,
+ secondEmojiText: this.secondEmojiText,
+ gradientHeightMultiplier: this.gradientHeightMultiplier
+ }
+
+ this.$refs.canvas.redraw(canvasProperties)
+
+ delete canvasProperties.colors
+ $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
}
},
mounted () {
diff --git a/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue b/frontend/src/views/newspaper_quote_bottom/NewspaperQuoteBottom.vue
index 3fe3be7a22d0db062448e322980e4107086a6d2e..7ad84bc5755bebb4d59bf5dcd0927a114b4055e8 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 } from '../../utils'
+import { loadFonts, loadDataFromCookie } from '../../utils'
import Canvas from '../../components/canvas/Canvas.vue'
import redraw from './canvas';
@@ -64,7 +64,7 @@ export default {
}
}
- return {
+ let data = {
mainImage: null,
sourceImage: null,
mainText: null,
@@ -84,20 +84,27 @@ export default {
predefinedSourceImages: SOURCE_IMAGES,
autoRedraw: false
}
+
+ loadDataFromCookie($cookies, data)
+
+ return data
},
methods: {
async reloadCanvasProperties () {
- await this.$refs.canvas.redraw(
- {
- mainImage: this.mainImage,
- sourceImage: this.sourceImage,
- mainText: this.mainText,
- personName: this.personName,
- personPosition: this.personPosition,
- logoImage: this.logoImage,
- colors: this.colors
- }
- )
+ const canvasProperties = {
+ mainImage: this.mainImage,
+ sourceImage: this.sourceImage,
+ mainText: this.mainText,
+ personName: this.personName,
+ personPosition: this.personPosition,
+ logoImage: this.logoImage,
+ colors: this.colors
+ }
+
+ await this.$refs.canvas.redraw(canvasProperties)
+
+ delete canvasProperties.colors
+ $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
}
},
mounted () {
diff --git a/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue b/frontend/src/views/newspaper_quote_middle/NewspaperQuoteMiddle.vue
index 7f000233ce43e0b22ac2e1ace8f05ccd1e3364bf..96dd272ba564f5ade923d0174394c39b4f2d9f68 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 } from '../../utils'
+import { loadFonts, loadDataFromCookie } from '../../utils'
import Canvas from '../../components/canvas/Canvas.vue'
import redraw from './canvas';
@@ -68,7 +68,7 @@ export default {
}
}
- return {
+ let data = {
sourceImage: null,
mainText: null,
personName: null,
@@ -89,19 +89,26 @@ export default {
predefinedSourceImages: SOURCE_IMAGES,
autoRedraw: false
}
+
+ loadDataFromCookie($cookies, data)
+
+ return data
},
methods: {
reloadCanvasProperties () {
- this.$refs.canvas.redraw(
- {
- sourceImage: this.sourceImage,
- mainText: this.mainText,
- personName: this.personName,
- personPosition: this.personPosition,
- logoImage: this.logoImage,
- colors: this.colors
- }
- )
+ const canvasProperties = {
+ sourceImage: this.sourceImage,
+ mainText: this.mainText,
+ personName: this.personName,
+ personPosition: this.personPosition,
+ logoImage: this.logoImage,
+ colors: this.colors
+ }
+
+ this.$refs.canvas.redraw(canvasProperties)
+
+ delete canvasProperties.colors
+ $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
}
},
mounted () {
diff --git a/frontend/src/views/text_banner/TextBanner.vue b/frontend/src/views/text_banner/TextBanner.vue
index 8db304a740495e2054e30a14f8e3cdd04d864c5e..cf71bc0f1634df5ca78d40738fffd25e2bc76bda 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 } from '../../utils'
+import { loadFonts, loadDataFromCookie } from '../../utils'
import Canvas from '../../components/canvas/Canvas.vue';
import redraw from './canvas';
@@ -44,7 +44,7 @@ export default {
}
}
- return {
+ let data = {
text: null,
logoImage: null,
colorLabels: {
@@ -59,16 +59,23 @@ export default {
predefinedLogoImages: generateDefaultLogos('defaultLight'),
autoRedraw: false
}
+
+ loadDataFromCookie($cookies, data)
+
+ return data
},
methods: {
reloadCanvasProperties () {
- this.$refs.canvas.redraw(
- {
- text: this.text,
- logoImage: this.logoImage,
- colors: this.colors
- }
- )
+ const canvasProperties = {
+ text: this.text,
+ logoImage: this.logoImage,
+ colors: this.colors
+ }
+
+ this.$refs.canvas.redraw(canvasProperties)
+
+ delete canvasProperties.colors
+ $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
}
},
mounted () {
diff --git a/frontend/src/views/twitter_banner/TwitterBanner.vue b/frontend/src/views/twitter_banner/TwitterBanner.vue
index c9a4f82dd030ccc6af2389c8c7ee51fec843a882..7d67226cf65549cdaa3c53600026217497e87d19 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 } from '../../utils'
+import { loadFonts, loadDataFromCookie } from '../../utils'
import defaultDarkLogoImage from '../../assets/logos/default-dark.png'
@@ -71,7 +71,7 @@ export default {
}
}
- return {
+ let data = {
defaultSelection: personOptions.klara,
personOptions: personOptions,
mainImage: null,
@@ -88,20 +88,27 @@ export default {
},
autoRedraw: false
}
+
+ loadDataFromCookie($cookies, data)
+
+ return data
},
methods: {
reloadCanvasProperties () {
- this.$refs.canvas.redraw(
- {
- colors: this.colors,
- logoImageSource: this.logoImageSource,
- twitterLogoImageSource: this.twitterLogoImageSource,
- mainImage: this.mainImage,
- mainText: this.mainText,
- personName: this.personName,
- personTwitter: this.personTwitter
- }
- )
+ const canvasProperties = {
+ colors: this.colors,
+ logoImageSource: this.logoImageSource,
+ twitterLogoImageSource: this.twitterLogoImageSource,
+ mainImage: this.mainImage,
+ mainText: this.mainText,
+ personName: this.personName,
+ personTwitter: this.personTwitter
+ }
+
+ this.$refs.canvas.redraw(canvasProperties)
+
+ delete canvasProperties.colors
+ $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
}
},
mounted () {
diff --git a/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue b/frontend/src/views/urgent_basic_photo_banner/UrgentBasicPhotoBanner.vue
index b33702e87a9733039a6dcb98149a5ed6b0bf1db0..86b9a6913b2c054bf9ec9dc1eaf3210f353ea555 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 } from '../../utils'
+import { loadFonts, loadDataFromCookie } from '../../utils'
import Canvas from '../../components/canvas/Canvas.vue'
import redraw from '../basic_photo_banner/canvas'
@@ -55,7 +55,7 @@ export default {
}
}
- return {
+ let data = {
mainImage: null,
mainText: null,
personName: null,
@@ -74,20 +74,27 @@ export default {
predefinedLogoImages: generateDefaultLogos('defaultLight'),
autoRedraw: false
}
+
+ loadDataFromCookie($cookies, data)
+
+ return data
},
methods: {
reloadCanvasProperties () {
- this.$refs.canvas.redraw(
- {
- mainImage: this.mainImage,
- mainText: this.mainText,
- personName: this.personName,
- personPosition: this.personPosition,
- logoImage: this.logoImage,
- gradientHeightMultiplier: this.gradientHeightMultiplier,
- colors: this.colors
- }
- )
+ const canvasProperties = {
+ mainImage: this.mainImage,
+ mainText: this.mainText,
+ personName: this.personName,
+ personPosition: this.personPosition,
+ logoImage: this.logoImage,
+ gradientHeightMultiplier: this.gradientHeightMultiplier,
+ colors: this.colors
+ }
+
+ this.$refs.canvas.redraw(canvasProperties)
+
+ delete canvasProperties.colors
+ $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
}
},
mounted () {
diff --git a/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue b/frontend/src/views/urgent_text_banner/UrgentTextBanner.vue
index 0d9f15e45471738e11267495cdbe5068618d9312..d310b74c6a359e8138aa73f7b52d071dd67f24ca 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 } from '../../utils'
+import { loadFonts, loadDataFromCookie } from '../../utils'
import Canvas from '../../components/canvas/Canvas.vue';
import redraw from './canvas';
@@ -46,7 +46,7 @@ export default {
}
}
- return {
+ let data = {
text: null,
logoImage: null,
colorLabels: {
@@ -65,16 +65,23 @@ export default {
],
autoRedraw: false
}
+
+ loadDataFromCookie($cookies, data)
+
+ return data
},
methods: {
reloadCanvasProperties () {
- this.$refs.canvas.redraw(
- {
- text: this.text,
- logoImage: this.logoImage,
- colors: this.colors
- }
- )
+ const canvasProperties = {
+ text: this.text,
+ logoImage: this.logoImage,
+ colors: this.colors
+ }
+
+ this.$refs.canvas.redraw(canvasProperties)
+
+ delete canvasProperties.colors
+ $cookies.set("canvas_properties", JSON.stringify(canvasProperties), 0)
}
},
mounted () {