add twitter banner template

5e1647a6 · Tomáš Valenta · ee735ffc · 5e1647a6 · 5e1647a6 · 5e1647a6
Commit 5e1647a6 authored May 28, 2023 by Tomáš Valenta
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,6 +3,7 @@
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="https://styleguide.pirati.cz/2.12.x/css/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generátor grafiky</title>
  </head>

--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -5,10 +5,3 @@ import { RouterView } from 'vue-router'
 <template>
    <RouterView />
 </template>
-
-<script>
-    const pirateStylesheet = document.createElement('link')
-    pirateStylesheet.rel = 'stylesheet'
-    pirateStylesheet.href = 'https://styleguide.pirati.cz/2.12.x/css/styles.css'
-    document.head.appendChild(pirateStylesheet)
-</script>
--- a/frontend/src/assets/previews/twitter_banner.png
+++ b/frontend/src/assets/previews/twitter_banner.png
--- a/frontend/src/assets/template/twitter_banner/ivan.png
+++ b/frontend/src/assets/template/twitter_banner/ivan.png
--- a/frontend/src/assets/template/twitter_banner/jakub.png
+++ b/frontend/src/assets/template/twitter_banner/jakub.png
--- a/frontend/src/assets/template/twitter_banner/klara.png
+++ b/frontend/src/assets/template/twitter_banner/klara.png
--- a/frontend/src/assets/template/twitter_banner/lipo.png
+++ b/frontend/src/assets/template/twitter_banner/lipo.png
--- a/frontend/src/assets/template/twitter_banner/olga.png
+++ b/frontend/src/assets/template/twitter_banner/olga.png
--- a/frontend/src/assets/template/twitter_banner/twitter.png
+++ b/frontend/src/assets/template/twitter_banner/twitter.png
--- a/frontend/src/templates.js
+++ b/frontend/src/templates.js
@@ -4,7 +4,7 @@ import textBannerImage from './assets/previews/text_banner.png'
 import newspaperQuoteBottomImage from './assets/previews/newspaper_quote_bottom.png'
 import newspaperQuoteMiddleImage from './assets/previews/newspaper_quote_middle.png'
 import facebookSurveyImage from './assets/previews/facebook_survey.png'
-import twitterBannerImage from './assets/previews/facebook_survey.png'
+import twitterBannerImage from './assets/previews/twitter_banner.png'

 const TEMPLATES = {
    basic_photo_banner: {

--- a/frontend/src/views/twitter_banner/PersonInput.vue
+++ b/frontend/src/views/twitter_banner/PersonInput.vue
@@ -23,7 +23,9 @@ export default {
        }
    },
    watch: {
-        async selectedOption (value) {
+        selectedOption: {
+            async handler (value) {
+                console.log(value)
                const mainImage = new Image()

                await new Promise(
@@ -37,8 +39,10 @@ export default {
                )

                this.$emit('update:mainImage', mainImage)
-            this.$emit('update:personName', value.personName)
+                this.$emit('update:personName', value.title)
                this.$emit('update:personTwitter', value.personTwitter)
+            },
+            immediate: true
        }
    }
 }
@@ -56,6 +60,7 @@ export default {
        ></InputHeading>
        <VueSelect
            :options="options"
+            :clearable="false"
            v-model="selectedOption"
            label="title"
        ></VueSelect>

--- a/frontend/src/views/twitter_banner/TwitterBanner.vue
+++ b/frontend/src/views/twitter_banner/TwitterBanner.vue
@@ -21,13 +21,15 @@ import ivanImage from '../../assets/template/twitter_banner/ivan.png'
 import jakubImage from '../../assets/template/twitter_banner/jakub.png'
 import lipoImage from '../../assets/template/twitter_banner/lipo.png'
 import olgaImage from '../../assets/template/twitter_banner/olga.png'
+
+import twitterLogoImage from '../../assets/template/twitter_banner/twitter.png'
 </script>

 <script>
 loadFonts([
    '12px Bebas Neue',
    '12px Roboto Condensed',
-    'bold 12px Roboto Condensed'
+    '12px Roboto'
 ])

 export default {
@@ -74,7 +76,8 @@ export default {
            mainText: null,
            personName: null,
            personTwitter: null,
-            logoImage: defaultDarkLogoImage,
+            logoImageSource: defaultDarkLogoImage,
+            twitterLogoImageSource: twitterLogoImage,
            colors: {
                background: COLORS.white,
                text: COLORS.black,
@@ -92,6 +95,9 @@ export default {
            async (value) => {
                await this.$refs.canvas.redraw(
                    {
+                        colors: this.colors,
+                        logoImageSource: this.logoImageSource,
+                        twitterLogoImageSource: this.twitterLogoImageSource,
                        mainImage: this.mainImage,
                        mainText: this.mainText,
                        personName: this.personName,
@@ -100,7 +106,8 @@ export default {
                );
            },
            {
-                immediate: true,
+                // Let the person chooser element run the first redraw
+                // immediate: true,
                deep: true
            }
        )

--- a/frontend/src/views/twitter_banner/canvas.js
+++ b/frontend/src/views/twitter_banner/canvas.js
 import { fabric } from 'fabric'
 import { clearObjects, sortObjects, transformHighlightedText } from '../../components/canvas/utils'

-let mainTextBox = null
-let mainTextBoxBackground = null
+let background = null

-let personInfoText = null
+let personNameTextBox = null
+let personTwitterTextBox = null
+let mainTextBox = null

 let mainImage = null
 let logoImage = null
-
-let arrow = null
+let twitterLogoImage = null

 const redraw = async (canvas, options) => {
    clearObjects(
        [
            mainTextBox,
-            mainTextBoxBackground,
-            personInfoText,
-            arrow
+            personNameTextBox,
+            personTwitterTextBox,
        ],
        canvas
    )

    canvas.preserveObjectStacking = true

-    const textMarginLeft = Math.ceil(canvas.width * 0.14)
-    const textMarginRight = Math.ceil(canvas.width * 0.075)

-    let mainTextMarginBottom = Math.ceil(canvas.height * 0.06)
-    const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14)
-    const mainTextSize = Math.ceil(canvas.height * 0.0725)
-    const mainTextHeightLimit = Math.ceil(mainTextSize * 3.3)
-    const mainTextLineHeight = 0.98  // Hacky fix for highlight seam
+    const mainImageOffsetSide = Math.ceil(canvas.width * 0.075)
+    const mainImageWidth = Math.ceil(canvas.width * 0.425)
+    const mainImageOffsetTop = Math.ceil(canvas.height * 0.17)

-    const nameTextSize = Math.ceil(canvas.height * 0.03)
-    const nameTextMarginTop = Math.ceil(canvas.height * 0.015)
-    const nameTextExtraBottomMargin = Math.ceil(canvas.height * 0.06)
+    const logoSideMargin = Math.ceil(canvas.width * 0.075)
+    const logoWidth = Math.ceil(canvas.width * 0.25)

-    const arrowWidth = Math.ceil(canvas.width * 0.047)
-    const arrowHeight = Math.ceil(canvas.width * 0.055)
-    const arrowThickness = Math.ceil(canvas.width * 0.019)
-    const arrowMarginLeft = Math.ceil(canvas.width * 0.065)
-    const arrowMarginTop = Math.ceil(canvas.height * 0.011)
+    const twitterLogoImageWidth = Math.ceil(canvas.width * 0.08)
+    const twitterLogoOffsetTop = Math.ceil(canvas.height * 0.1)

-    const logoWidth = Math.ceil(canvas.width * 0.2)
-    const logoSideMargin = Math.ceil(canvas.width * 0.07)
+    const mainTextBoxWidth = Math.ceil(canvas.width * 0.42)
+    const mainTextBoxMarginSide = Math.ceil(canvas.width * 0.06)
+    const mainTextBoxMarginTop = Math.ceil(canvas.height * 0.03)
+    const mainTextBoxFontSize = Math.ceil(canvas.height * 0.038)
+    const mainTextBoxMaxHeight = Math.ceil(mainTextBoxFontSize * 12)
+    const mainTextBoxLineHeight = 1
+    const mainTextBoxCharSpacing = -Math.ceil(canvas.width * 0.015)

-    if (options.mainText !== null) {
-        /* BEGIN Name text render */
+    const nameTextFontSize = Math.ceil(canvas.height * 0.07)
+    const nameTextOffsetTop = Math.ceil(canvas.height * 0.03)

-        if (options.personName !== null) {
-            mainTextMarginBottom += nameTextExtraBottomMargin
+    const twitterTextFontSize = Math.ceil(canvas.height * 0.037)
+    const twitterTextOffsetTop = Math.ceil(canvas.height * -0.007)

-            let styles = {
-                0: {}
-            }

+    /* BEGIN Background render */

-            for (let position = 0; position < options.personName.length; position++) {
-                styles[0][position] = {
-                    fontWeight: 'bold'
-                }
+    if (background === null) {
+        background = new fabric.Rect({
+            left: 0,
+            top: 0,
+            fill: options.colors.background.value,
+            width: canvas.width,
+            height: canvas.height
+        })
+
+        canvas.add(background)
    }

-            let nameText = options.personName;
+    /* END Background render */

-            if (options.personPosition) {
-                nameText += `｜${options.personPosition}`

-                styles[0][options.personName.length] = {
-                    fontWeight: 'bold'
-                }
+    /* BEGIN Twitter logo render */
+
+    if (twitterLogoImage === null) {
+        const twitterLogoImageElement = new Image()
+
+        await new Promise(
+            resolve => {
+                twitterLogoImageElement.onload = () => {
+                    resolve()
                }

-            personInfoText = new fabric.Text(
-                nameText,
-                {
-                    left: textMarginLeft,
-                    top: (
-                        canvas.height
-                        - mainTextMarginBottom
-                        + nameTextMarginTop
-                    ),
-                    fontFamily: 'Roboto Condensed',
-                    fontSize: nameTextSize,
-                    styles: styles,
-                    fill: options.colors.baseText.value,
-                    selectable: false,
-                    zIndex: 10
+                twitterLogoImageElement.src = options.twitterLogoImageSource
            }
        )

-            canvas.add(personInfoText)
-        }
+        twitterLogoImage = new fabric.Image(twitterLogoImageElement, {selectable: false})
+        twitterLogoImage.scaleToWidth(twitterLogoImageWidth)
+        twitterLogoImage.set({
+            left: (
+                canvas.width
+                - mainTextBoxMarginSide
+                - (
+                    mainTextBoxWidth
+                    + twitterLogoImageWidth
+                ) / 2
+            ),
+            top: twitterLogoOffsetTop,
+            zIndex: 11
+        })

-        /* END Name text render */
+        canvas.add(twitterLogoImage)
+    }

+    /* END Twitter logo render */

-        /* BEGIN Main text render */

-        const highlightedData = transformHighlightedText(
-            options.mainText,
-            options.colors.highlight.value,
-            options.colors.highlightedText.value
-        )
+    if (options.personName !== null) {
+        /* BEGIN Name text render */

-        mainTextBox = new fabric.Textbox(
-            highlightedData.text,
+        personNameTextBox = new fabric.Textbox(
+            options.personName,
            {
-                width: canvas.width - textMarginLeft - textMarginRight,
-                left: textMarginLeft,
-                textAlign: 'left',
+                width: mainTextBoxWidth,
+                textAlign: 'center',
+                fontSize: nameTextFontSize,
                fontFamily: 'Bebas Neue',
-                fontSize: mainTextSize,
-                lineHeight: mainTextLineHeight,
-                fill: options.colors.baseText.value,
-                styles: highlightedData.styles,
+                fill: options.colors.text.value,
+                left: (
+                    canvas.width
+                    - mainTextBoxMarginSide
+                    - mainTextBoxWidth
+                ),
+                top: (
+                    twitterLogoImage.top
+                    + twitterLogoImage.getScaledHeight()
+                    + nameTextOffsetTop
+                ),
                selectable: false,
-                zIndex: 10
+                zIndex: 11
            }
        )

-        canvas.add(mainTextBox)
-
-        while (mainTextBox.height > mainTextHeightLimit) {
-            mainTextBox.fontSize -= 4
-            canvas.renderAll()
-        }
+        canvas.add(personNameTextBox)

-        mainTextBox.top = (
-            canvas.height
-            - mainTextBox.height
-            - mainTextMarginBottom
-        )
-
-        /* END Main text render */
+        /* END Name text render */


-        /* BEGIN Arrow render */
+        if (options.personTwitter !== null) {
+            /* BEGIN Twitter handle text render */

-        arrow = new fabric.Polygon(
-            [
-                {x: 0, y: 0},
-                {x: arrowThickness, y: 0},
-                {
-                    x: arrowWidth,
-                    y: Math.ceil(arrowHeight) / 2
-                },
-                {
-                    x: arrowThickness,
-                    y: arrowHeight
-                },
-                {x: 0, y: arrowHeight},
-                {
-                    x: arrowWidth - arrowThickness,
-                    y: Math.ceil(arrowHeight) / 2
-                },
-                {x: 0, y: 0}
-            ],
+            personTwitterTextBox = new fabric.Textbox(
+                `@${options.personTwitter}`,
                {
+                    width: mainTextBoxWidth,
+                    textAlign: 'center',
+                    fontSize: twitterTextFontSize,
+                    fontFamily: 'Roboto',
+                    fill: options.colors.text.value,
+                    left: (
+                        canvas.width
+                        - mainTextBoxMarginSide
+                        - mainTextBoxWidth
+                    ),
                    top: (
-                    mainTextBox.top
-                    + arrowMarginTop
+                        personNameTextBox.top
+                        + personNameTextBox.height
+                        + twitterTextOffsetTop
                    ),
-                left: arrowMarginLeft,
-                fill: options.colors.arrow.value,
                    selectable: false,
-                zIndex: 10
+                    zIndex: 11
                }
            )

-        canvas.add(arrow)
+            canvas.add(personTwitterTextBox)

-        /* END Arrow render */
+            /* END Twitter handle text render */


-        /* BEGIN Main text background render */
-
-        const backgroundHeight = (
-            canvas.height
-            - mainTextBox.top
-            + mainTextBackgroundMarginTop
-        )
+            /* BEGIN Main text render */

-        mainTextBoxBackground = new fabric.Rect(
-            {
-                width: canvas.width,
-                height: backgroundHeight,
-                left: 0,
-                top: mainTextBox.top - mainTextBackgroundMarginTop,
-                fill: new fabric.Gradient({
-                    type: 'linear',
-                    gradientUnits: 'pixels',
-                    coords: {
-                        x1: 0, y1: 0,
-                        x2: 0, y2: backgroundHeight
-                    },
-                    colorStops: [
-                        {
-                            offset: 1,
-                            color: options.colors.background.value
-                        },
-                        {
-                            offset: 0.45,
-                            color: options.colors.background.value
-                        },
+            if (options.mainText !== null) {
+                mainTextBox = new fabric.Textbox(
+                    options.mainText,
                    {
-                            offset: 0,
-                            color: `${options.colors.background.value}00`
-                        }
-                    ]
-                }),
+                        width: mainTextBoxWidth,
+                        textAlign: 'left',
+                        fontSize: mainTextBoxFontSize,
+                        fontFamily: 'Roboto Condensed',
+                        lineHeight: mainTextBoxLineHeight,
+                        charSpacing: mainTextBoxCharSpacing,
+                        fill: options.colors.text.value,
+                        left: (
+                            canvas.width
+                            - mainTextBoxMarginSide
+                            - mainTextBoxWidth
+                        ),
+                        top: (
+                            personTwitterTextBox.top
+                            + personTwitterTextBox.height
+                            + mainTextBoxMarginTop
+                        ),
                        selectable: false,
-                zIndex: 9
+                        zIndex: 11
                    }
                )

-        canvas.add(mainTextBoxBackground)
+                canvas.add(mainTextBox)

-        /* END Main text background render */
+                while (mainTextBox.height > mainTextBoxMaxHeight) {
+                    mainTextBox.fontSize -= 4
+                    canvas.renderAll()
+                }
+            }
+
+            /* END Main text render */
+        }
    }


    /* BEGIN Logo render */

-    // A logo is provided, and it either hasn't been rendered yet or is a new one.
-    const createNewLogo = (
-        options.logoImage !== null
-        && (
-            logoImage === null
-            || (
-                options.logoImage !== null
-                && options.logoImage !== logoImage._element
-            )
-        )
-    )
+    if (logoImage === null) {
+        const logoImageElement = new Image();

-    if (createNewLogo) {
-        canvas.remove(logoImage)
+        await new Promise(
+            resolve => {
+                logoImageElement.onload = () => {
+                    resolve()
+                }
+
+                logoImageElement.src = options.logoImageSource
+            }
+        )

-        logoImage = new fabric.Image(options.logoImage, {selectable: false})
+        logoImage = new fabric.Image(logoImageElement, {selectable: false})
        logoImage.scaleToWidth(logoWidth)
        logoImage.set({
-            left: (
-                canvas.width
-                - logoWidth
+            left: logoSideMargin,
+            top: (
+                canvas.height
                - logoSideMargin
+                - logoImage.getScaledHeight()
            ),
-            top: logoSideMargin,
            zIndex: 11,
        })

@@ -273,17 +254,13 @@ const redraw = async (canvas, options) => {
        mainImage = new fabric.Image(
            options.mainImage,
            {
-                left: 0,
-                top: 0,
+                left: mainImageOffsetSide,
+                top: mainImageOffsetTop,
+                selectable: false,
                zIndex: 0
            }
        )
-
-        if (mainImage.width >= mainImage.height) {
-            mainImage.scaleToHeight(canvas.height)
-        } else {
-            mainImage.scaleToWidth(canvas.width)
-        }
+        mainImage.scaleToWidth(mainImageWidth)

        canvas.add(mainImage)
        // canvas.centerObject(mainImage)

--- a/server/server/templates/index.html
+++ b/server/server/templates/index.html
@@ -3,9 +3,10 @@
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="https://styleguide.pirati.cz/2.12.x/css/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generátor grafiky</title>
-    <script type="module" crossorigin src="/static/index-af58fe31.js"></script>
+    <script type="module" crossorigin src="/static/index-7aa18e1b.js"></script>
    <link rel="stylesheet" href="/static/index-656e3210.css">
  </head>
  <body>