From 6022f8a3384f1a25bef16b0bb7da6d9e57970ec1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <git@imaniti.org>
Date: Mon, 2 Oct 2023 10:36:24 +0200
Subject: [PATCH] wip - shared content across templates
---
frontend/package-lock.json | 6 +++
frontend/package.json | 1 +
frontend/src/main.js | 2 +
frontend/src/utils.js | 23 +++++++++++-
.../basic_photo_banner/BasicPhotoBanner.vue | 33 ++++++++++-------
.../views/facebook_survey/FacebookSurvey.vue | 37 +++++++++++--------
.../NewspaperQuoteBottom.vue | 33 ++++++++++-------
.../NewspaperQuoteMiddle.vue | 31 ++++++++++------
frontend/src/views/text_banner/TextBanner.vue | 25 ++++++++-----
.../views/twitter_banner/TwitterBanner.vue | 33 ++++++++++-------
.../UrgentBasicPhotoBanner.vue | 33 ++++++++++-------
.../urgent_text_banner/UrgentTextBanner.vue | 25 ++++++++-----
12 files changed, 184 insertions(+), 98 deletions(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f8f447cf..0941da17 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 fa3c2117..1ec6074e 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 e30ce3c7..ef906641 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 9f00d80b..f08cd252 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 6fd923c1..18b47cef 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 4bcab602..d12256b2 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 3fe3be7a..7ad84bc5 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 7f000233..96dd272b 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 8db304a7..cf71bc0f 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 c9a4f82d..7d67226c 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 b33702e8..86b9a691 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 0d9f15e4..d310b74c 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 () {
--
GitLab