add more avatar templates

VERSION

-2.12.0
+2.13.0

frontend/src/components/Navbar.vue

@@ -26,7 +26,7 @@ export default {
 </script>
 
 <template>
-  <nav class="bg-grey-600 py-7">
+  <nav class="bg-black py-7">
     <div
       class="container container--default flex justify-between flex-col lg:flex-row"
     >
@@ -39,16 +39,13 @@ export default {
         </RouterLink>
         <RouterLink
           to="/"
-          class="text-white pl-4 font-bold text-xl hover:no-underline lg:border-r lg:border-grey-300 lg:pr-8 flex gap-2 items-center"
+          class="text-white pl-4 font-bold text-3xl flex gap-2 items-center font-['Bebas_Neue'] hover:no-underline lg:border-r lg:border-grey-300 lg:pr-8"
         >
           Generátor grafiky
           <img :src="v2Image" class="h-5" alt="Verze 2.0" />
         </RouterLink>
 
-        <div
-          v-if="sideText"
-          class="pl-8 text-white"
-        >
+        <div v-if="sideText" class="pl-8 text-white">
           {{ sideText }}
         </div>
       </div>

frontend/src/components/canvas/Canvas.vue

@@ -42,9 +42,11 @@ export default {
       let link = document.createElement("a");
 
       if (
-        window.fileName !== undefined && window.fileName !== null
-        && (typeof window.fileName === 'string' || window.fileName instanceof String)
-        && window.fileName.length >= 1
+        window.fileName !== undefined &&
+        window.fileName !== null &&
+        (typeof window.fileName === "string" ||
+          window.fileName instanceof String) &&
+        window.fileName.length >= 1
       ) {
         link.download = window.fileName;
       } else {

frontend/src/components/canvas/utils.js

@@ -170,13 +170,16 @@ const transformHighlightedText = (
 
     if (characterIsStar) {
       highlightIsActive = !highlightIsActive;
-      text = setCharAt(text, positionWithinString, (
-        (!options.invertHighlight) ?
-        // For now, just put an empty Unicode character that still registers
+      text = setCharAt(
+        text,
+        positionWithinString,
+        !options.invertHighlight
+          ? // For now, just put an empty Unicode character that still registers
             // as one. To do this properly, we would have to adjust the code so that
             // it goes back one character. But I don't feel like doing that.
-        " " : "‎"
-      ));
+            " "
+          : "‎",
+      );
     }
 
     let style = {};

frontend/src/templates.js

@@ -169,7 +169,8 @@ const TEMPLATES = {
     name: "Cover na sociální sítě - velký text",
     image: socialCoverLargeTextImage,
     path: "/social-cover-large-text",
-    component: () => import("./views/social_cover_large_text/SocialCoverLargeText.vue"),
+    component: () =>
+      import("./views/social_cover_large_text/SocialCoverLargeText.vue"),
     meta: {
       title: "Cover na sociální sítě - velký text",
     },

frontend/src/views/avatar/Avatar.vue

@@ -9,6 +9,16 @@ import MainContainer from "../../components/MainContainer.vue";
 import ImageInput from "../../components/inputs/ImageInput.vue";
 import ReloadButton from "../../components/reload/ReloadButton.vue";
 import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
+import OverlaySelect from "./OverlaySelect.vue";
+
+import overlayImage1 from "../../assets/template/avatar/overlay1.png";
+import overlayImage2 from "../../assets/template/avatar/overlay2.png";
+import overlayImage3 from "../../assets/template/avatar/overlay3.png";
+import overlayImage4 from "../../assets/template/avatar/overlay4.png";
+import overlayImage5 from "../../assets/template/avatar/overlay5.png";
+import overlayImage6 from "../../assets/template/avatar/overlay6.png";
+import overlayImage7 from "../../assets/template/avatar/overlay7.png";
+import overlayImage8 from "../../assets/template/avatar/overlay8.png";
 
 import { toRawDeep } from "../../utils";
 </script>
@@ -22,7 +32,38 @@ export default {
     ImageInput,
   },
   data() {
+    const overlayOptions = {
+      overlay1: {
+        title: "Volím Piráty! (žluté pozadí)",
+        overlayImage: overlayImage1,
+      },
+      overlay8: {
+        title: "Volím Piráty! (černé pozadí)",
+        overlayImage: overlayImage8,
+      },
+      overlay7: {
+        title: "Budoucnost bez korupce (žluté pozadí)",
+        overlayImage: overlayImage7,
+      },
+      overlay2: {
+        title: "Budoucnost bez korupce (černé pozadí)",
+        overlayImage: overlayImage2,
+      },
+      overlay4: {
+        title: "Můj hlas mají Piráti! (žluté pozadí)",
+        overlayImage: overlayImage4,
+      },
+      overlay3: {
+        title: "Můj hlas mají Piráti! (černé pozadí)",
+        overlayImage: overlayImage3,
+      },
+    };
+
     return {
+      overlayOptions: overlayOptions,
+      defaultOverlay: overlayOptions.overlay1,
+      overlayImage: null,
+      overlayName: null,
       mainImage: null,
       autoRedraw: true,
     };
@@ -31,6 +72,7 @@ export default {
     async reloadCanvasProperties() {
       const canvasProperties = {
         mainImage: this.mainImage,
+        overlayImage: this.overlayImage,
       };
 
       await this.$refs.canvas.redraw(canvasProperties);
@@ -40,7 +82,7 @@ export default {
     window.fileName = "Profilovy obrazek.png";
 
     this.$watch(
-      (vm) => [vm.mainImage],
+      (vm) => [vm.mainImage, vm.overlayImage],
       async (value) => {
         if (this.autoRedraw) {
           await this.reloadCanvasProperties();
@@ -73,14 +115,23 @@ export default {
       <template v-slot:right>
         <div class="prose max-w-none mb-4">
           <ol>
-            <li>Klikněte na "vybrat soubor" a nahrajte svou profilovou fotografii.</li>
-            <li>Klikněte na "stáhnout", vyberte umístění ve svém přístroji a zvolte možnost "uložit"</li>
-            <li>Zobrazte si svůj profil na sociální síti a aktualizujte si profilovou fotku.</li>
+            <li>
+              Klikněte na "vybrat soubor" a nahrajte svou profilovou fotografii.
+            </li>
+            <li>
+              Klikněte na "stáhnout", vyberte umístění ve svém přístroji a
+              zvolte možnost "uložit"
+            </li>
+            <li>
+              Zobrazte si svůj profil na sociální síti a aktualizujte si
+              profilovou fotku.
+            </li>
           </ol>
 
           <p>
             <strong>
-              Děkujeme za podporu a nezapomeňte 7. a 8. června 2024 volit Piráty do Europarlamentu!
+              Děkujeme za podporu a nezapomeňte 20. a 21. září 2024 volit
+              Piráty!
             </strong>
           </p>
         </div>
@@ -92,6 +143,16 @@ export default {
           zIndex="10"
         />
 
+        <OverlaySelect
+          name="Šablona"
+          :defaultSelection="defaultOverlay"
+          v-model:overlayImage="overlayImage"
+          v-model:overlayName="overlayName"
+          :options="Object.values(overlayOptions)"
+          :important="true"
+          zIndex="9"
+        />
+
         <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
         <AutoReloadCheckbox v-model="autoRedraw" />
       </template>

frontend/src/views/avatar/OverlaySelect.vue

+<script setup>
+import VueSelect from "vue-select";
+import InputHeading from "../../components/inputs/InputHeading.vue";
+</script>
+
+<script>
+export default {
+  components: { InputHeading, VueSelect },
+  props: [
+    "name",
+    "important",
+    "zIndex",
+    "overlayImage",
+    "overlayName",
+    "defaultSelection",
+    "options",
+  ],
+  emits: ["update:overlayImage", "update:overlayName"],
+  data() {
+    return {
+      selectedOption: this.defaultSelection,
+    };
+  },
+  watch: {
+    selectedOption: {
+      async handler(value) {
+        const overlayImage = new Image();
+
+        await new Promise((resolve) => {
+          overlayImage.onload = () => {
+            resolve();
+          };
+
+          overlayImage.src = value.overlayImage;
+        });
+
+        this.$emit("update:overlayImage", overlayImage);
+        this.$emit("update:overlayName", value.title);
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <section
+    class="flex flex-col gap-2 bg-gray-100 p-4 drop-shadow-md"
+    :style="{ 'z-index': zIndex }"
+  >
+    <InputHeading :name="name" :important="important" icon="cog"></InputHeading>
+    <VueSelect
+      :options="options"
+      :clearable="false"
+      v-model="selectedOption"
+      label="title"
+    ></VueSelect>
+    <small class="text-gray-600">
+      <em>Obrázek se může chvíli načítat.</em>
+    </small>
+  </section>
+</template>

frontend/src/views/avatar/canvas.js

 import { sortObjects } from "../../components/canvas/utils";
 
-import overlayURL from "../../assets/template/avatar/overlay.png";
-
 let mainImage = null;
 let overlayImage = null;
 let mainImageSource = null;
@@ -74,18 +72,18 @@ const redraw = async (canvas, options) => {
 
   /* BEGIN Overlay render */
 
-  if (overlayImage === null) {
-    overlayImage = new Image();
-
-    await new Promise((resolve) => {
-      overlayImage.onload = () => {
-        resolve();
-      };
+  if (
+    options.overlayImage !== null &&
+    (overlayImage === null ||
+      options.overlayImage.src !== overlayImage._element.src)
+  ) {
+    if (overlayImage !== null) {
+      canvas.remove(overlayImage);
+    }
 
-      overlayImage.src = overlayURL;
-    });
+    overlayImage = new Image();
 
-    overlayImage = new fabric.Image(overlayImage, {
+    overlayImage = new fabric.Image(options.overlayImage, {
       selectable: false,
       zIndex: 5,
     });

frontend/src/views/event_poster/canvas.js

@@ -210,7 +210,7 @@ const redraw = async (canvas, options) => {
     canvas.add(eventLocationText);
 
     eventLocationText.set({
-      left: eventLocationText.left - eventLocationText.width
+      left: eventLocationText.left - eventLocationText.width,
     });
     canvas.renderAll();
   }

frontend/src/views/reel/Reel.vue

@@ -45,7 +45,7 @@ export default {
           background: COLORS.black,
           mainText: COLORS.white,
           highlightedText: COLORS.yellow1,
-          contractedByText: COLORS.white
+          contractedByText: COLORS.white,
         },
       },
       blackText: {
@@ -54,7 +54,7 @@ export default {
           background: COLORS.white,
           mainText: COLORS.black,
           highlightedText: COLORS.yellow1,
-          contractedByText: COLORS.black
+          contractedByText: COLORS.black,
         },
       },
     };