add social_cover_large_text template

frontend/src/templates.js

@@ -8,6 +8,7 @@ import facebookSurveyImage from "./assets/previews/facebook_survey.png";
 import twitterBannerImage from "./assets/previews/twitter_banner.png";
 import posterImage from "./assets/previews/poster.png";
 import regionalSuccessImage from "./assets/previews/regional_success.png";
+import socialCoverLargeTextImage from "./assets/previews/social_cover_large_text.png";
 
 import baseEventImage from "./assets/previews/base_event.png";
 import rightEventImage from "./assets/previews/right_event.png";
@@ -152,30 +153,45 @@ const TEMPLATES = {
       title: "Událost - pruh pod úhlem, vlevo",
     },
   },
-  people_banner_with_predefined_text: {
-    name: 'Osoba v šipce s textem "Odvaha pro Evropu"',
-    image: peopleBannerWithPredefinedTextImage,
-    path: "/people-banner-with-predefined-text",
-    component: () =>
-      import(
-        "./views/people_banner_with_predefined_text/PeopleBannerWithPredefinedText.vue"
-      ),
-    meta: {
-      title: 'Osoba v šipce s textem "Odvaha pro Evropu"',
-    },
-  },
-  people_banner_with_custom_text: {
-    name: "Osoba v šipce s vlastním textem",
-    image: peopleBannerWithCustomTextImage,
-    path: "/people-banner-with-custom-text",
-    component: () =>
-      import(
-        "./views/people_banner_with_custom_text/PeopleBannerWithCustomText.vue"
-      ),
+
+  social_cover_large_text: {
+    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"),
     meta: {
-      title: "Osoba v šipce s vlastním textem",
+      title: "Cover na sociální sítě - velký text",
     },
   },
+
+  // NOTE: The following 2 templates have been disabled on request.
+  // https://zulip.pirati.cz/#narrow/stream/1545-MoTo/topic/gener.C3.A1tor/near/3390404
+  //
+  // people_banner_with_predefined_text: {
+  //   name: 'Osoba v šipce s textem "Odvaha pro Evropu"',
+  //   image: peopleBannerWithPredefinedTextImage,
+  //   path: "/people-banner-with-predefined-text",
+  //   component: () =>
+  //     import(
+  //       "./views/people_banner_with_predefined_text/PeopleBannerWithPredefinedText.vue"
+  //     ),
+  //   meta: {
+  //     title: 'Osoba v šipce s textem "Odvaha pro Evropu"',
+  //   },
+  // },
+  // people_banner_with_custom_text: {
+  //   name: "Osoba v šipce s vlastním textem",
+  //   image: peopleBannerWithCustomTextImage,
+  //   path: "/people-banner-with-custom-text",
+  //   component: () =>
+  //     import(
+  //       "./views/people_banner_with_custom_text/PeopleBannerWithCustomText.vue"
+  //     ),
+  //   meta: {
+  //     title: "Osoba v šipce s vlastním textem",
+  //   },
+  // },
+
   // base_person_event: {
   //   name: "Událost - text a obrázek na pozadí, vprostřed",
   //   image: basePersonEventImage,

frontend/src/views/social_cover_large_text/SocialCoverLargeText.vue

+<script setup>
+import { watch, ref } from "vue";
+
+import COLORS from "../../colors";
+import TEMPLATES from "../../templates";
+import DEFAULT_CONTRACTOR from "../../contractors";
+import {
+  loadFonts,
+  loadCanvasStorage,
+  setCanvasStorage,
+  updateAutoRedrawStorage,
+} from "../../utils";
+
+import Canvas from "../../components/canvas/Canvas.vue";
+import redraw from "./canvas";
+
+import Navbar from "../../components/Navbar.vue";
+import MainContainer from "../../components/MainContainer.vue";
+import LongTextInput from "../../components/inputs/text/LongTextInput.vue";
+import ShortTextInput from "../../components/inputs/text/ShortTextInput.vue";
+import ReloadButton from "../../components/reload/ReloadButton.vue";
+import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
+</script>
+
+<script>
+await loadFonts(["12px Bebas Neue"]);
+
+export default {
+  components: {
+    Canvas,
+    Navbar,
+    MainContainer,
+    LongTextInput,
+    ShortTextInput,
+    AutoReloadCheckbox,
+    ReloadButton,
+  },
+  data() {
+    const predefinedColors = {
+      blackBackground: {
+        name: "Černý boxík, bílý text",
+        colors: {
+          background: COLORS.black,
+          mainText: COLORS.white,
+          highlightedText: COLORS.yellow1,
+          contractedByText: COLORS.black
+        },
+      },
+    };
+
+    return {
+      mainText: null,
+      contractedBy: DEFAULT_CONTRACTOR,
+      gradientHeightMultiplier: 1,
+      colorLabels: {
+        background: "Pozadí",
+      },
+      predefinedColors: predefinedColors,
+      colors: predefinedColors.blackBackground.colors,
+      autoRedraw: false,
+    };
+  },
+  async created() {
+    await loadCanvasStorage(this);
+  },
+  methods: {
+    async reloadCanvasProperties() {
+      const canvasProperties = {
+        mainText: this.mainText,
+        contractedBy: this.contractedBy,
+        colors: this.colors,
+      };
+
+      if (canvasProperties.mainText) {
+        window.fileName = canvasProperties.mainText;
+      }
+
+      await this.$refs.canvas.redraw(canvasProperties);
+
+      delete canvasProperties.colors;
+      setCanvasStorage(canvasProperties);
+    },
+  },
+  mounted() {
+    this.$watch(
+      (vm) => [vm.mainText, vm.contractedBy, vm.colors],
+      async (value) => {
+        if (this.autoRedraw) {
+          await this.reloadCanvasProperties();
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    );
+
+    this.$watch(
+      (vm) => [vm.autoRedraw],
+      async (value) => {
+        updateAutoRedrawStorage(this.autoRedraw);
+
+        if (this.autoRedraw) {
+          await this.reloadCanvasProperties();
+        }
+      },
+    );
+  },
+};
+</script>
+
+<template>
+  <header>
+    <Navbar :defaultTemplate="TEMPLATES.social_cover_large_text"></Navbar>
+  </header>
+  <main>
+    <MainContainer>
+      <template v-slot:left>
+        <Canvas
+          ref="canvas"
+          :redrawFunction="redraw"
+          width="2500"
+          height="1098"
+        />
+      </template>
+
+      <template v-slot:right>
+        <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
+        <AutoReloadCheckbox v-model="autoRedraw" />
+
+        <LongTextInput
+          name="Text"
+          v-model="mainText"
+          :important="true"
+          :highlightable="true"
+          zIndex="9"
+        />
+
+        <ShortTextInput
+          name="Zadavatel a zpracovatel"
+          v-model="contractedBy"
+          :defaultValue="DEFAULT_CONTRACTOR"
+          :important="false"
+          zIndex="4"
+        />
+      </template>
+    </MainContainer>
+  </main>
+</template>
+
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>

frontend/src/views/social_cover_large_text/canvas.js

+import { fabric } from "fabric";
+import {
+  clearObjects,
+  sortObjects,
+  transformHighlightedText,
+  checkTextBoxHeight,
+} from "../../components/canvas/utils";
+import COLORS from "../../colors";
+import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
+
+import bgImageSource from "../../assets/template/social_cover_large_text/background.png";
+
+let mainImage = null;
+let contractedByTextbox = null;
+let mainTextBox = null;
+
+const redraw = async (canvas, options) => {
+  clearObjects([contractedByTextbox, mainTextBox], canvas);
+
+  const contractedByTextSize = Math.ceil(canvas.height * 0.035);
+  const contractedByTextMaxWidth = Math.ceil(canvas.width * 0.9);
+  const contractedByTextBottomMargin = Math.ceil(canvas.width * 0.02);
+  const contractedByTextSideMargin = Math.ceil(canvas.width * 0.03);
+
+  const textMarginLeft = Math.ceil(canvas.width * 0.15);
+  const textWidth = Math.ceil(canvas.width * 0.7); 
+  const textMarginRight = Math.ceil(canvas.width * 0.23);
+
+  let mainTextMarginBottom = Math.ceil(canvas.height * 0.17);
+  const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14);
+  const mainTextSize = Math.ceil(canvas.height * 0.26);
+  const mainTextHeightLimit = Math.ceil(mainTextSize * 2.2);
+  const mainTextLineHeight = 0.85;
+
+  canvas.preserveObjectStacking = true;
+
+  /* BEGIN Main image render */
+
+  if (mainImage === null) {
+    const image = new Image();
+
+    console.log("Loading image")
+
+    const imageLoadPromise = new Promise((resolve) => {
+      image.onload = () => {
+        resolve();
+      };
+
+      image.src = bgImageSource;
+    });
+    
+    await imageLoadPromise;
+
+    mainImage = new fabric.Image(image, {
+      left: 0,
+      top: 0,
+      zIndex: 0,
+      selectable: false,
+    });
+
+    mainImage.scaleToWidth(canvas.width);
+
+    canvas.add(mainImage);
+  }
+
+  /* END Main image render */
+
+  if (options.mainText !== null) {
+    /* BEGIN Name text render */
+
+    const highlightedData = transformHighlightedText(
+      `*${options.mainText.replace(/\*/g, "")}*`,
+      mainTextSize,
+      textWidth,
+      "Bebas Neue",
+      "#000000",
+      "#ffffff",
+      { padWhenDiacritics: false },
+    );
+
+    if (Object.keys(highlightedData.styles).length == 2) {
+      // Set the second line to yellow
+      for (let i = 0; i < Object.keys(highlightedData.styles[1]).length; i++) {
+        highlightedData.styles[1][i].fill = options.colors.highlightedText.value;
+      }
+    }
+
+    mainTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
+      width: textWidth,
+      left: textMarginLeft,
+      textAlign: "center",
+      fontFamily: "Bebas Neue",
+      fontSize: mainTextSize,
+      lineHeight: mainTextLineHeight,
+      fill: options.colors.mainText.value,
+      styles: highlightedData.styles,
+      selectable: false,
+      highlightPadding: canvas.height * 0.003,
+      zIndex: 10,
+    });
+
+    checkTextBoxHeight(mainTextBox, 2);
+
+    canvas.add(mainTextBox);
+
+    let mainTextBoxTop =
+      canvas.height - mainTextBox.height - mainTextMarginBottom;
+
+    if (mainTextBox.textLines.length === 1) {
+      mainTextBoxTop -= mainTextSize / 2;
+    }
+
+    mainTextBox.top = mainTextBoxTop - highlightedData.paddingBottom;
+
+    canvas.renderAll();
+
+    /* END Main text render */
+  }
+
+  /* BEGIN Contracted by render */
+
+  if (options.contractedBy !== null) {
+    contractedByTextbox = new fabric.Textbox(options.contractedBy, {
+      left: contractedByTextSideMargin,
+      top: canvas.height - contractedByTextBottomMargin - contractedByTextSize,
+      width: contractedByTextMaxWidth,
+      fontFamily: "Roboto Condensed",
+      fontSize: contractedByTextSize,
+      textAlign: "left",
+      fill: options.colors.contractedByText.value,
+      selectable: false,
+      zIndex: 10,
+    });
+
+    checkTextBoxHeight(contractedByTextbox, 1);
+
+    canvas.add(contractedByTextbox);
+  }
+
+  /* END Contracted by render */
+
+  sortObjects(canvas);
+};
+
+export default redraw;