Skip to content
Snippets Groups Projects
Verified Commit 7564f8eb authored by Alexa Valentová's avatar Alexa Valentová
Browse files

add fancy template, remove others for now

parent 6996c374
Branches
No related tags found
No related merge requests found
Pipeline #18017 passed
frontend/src/assets/previews/people_banner_with_predefined_text.png

5.78 KiB

frontend/src/assets/template/people_banner_with_custom_text/bg.png

23.1 KiB

frontend/src/assets/template/people_banner_with_predefined_text/bg.png

33.8 KiB

......@@ -14,10 +14,13 @@ import rightEventImage from "./assets/previews/right_event.png";
import angleEventRightImage from "./assets/previews/angle_event_right.png";
import angleEventLeftImage from "./assets/previews/angle_event_left.png";
import basePersonEventImage from "./assets/previews/base_person_event.png";
import rightPersonEventImage from "./assets/previews/right_person_event.png";
import anglePersonEventRightImage from "./assets/previews/angle_person_event_right.png";
import anglePersonEventLeftImage from "./assets/previews/angle_person_event_left.png";
// import basePersonEventImage from "./assets/previews/base_person_event.png";
// import rightPersonEventImage from "./assets/previews/right_person_event.png";
// import anglePersonEventRightImage from "./assets/previews/angle_person_event_right.png";
// import anglePersonEventLeftImage from "./assets/previews/angle_person_event_left.png";
import peopleBannerWithPredefinedTextImage from "./assets/previews/people_banner_with_predefined_text.png";
import peopleBannerWithCustomTextImage from "./assets/previews/people_banner_with_predefined_text.png";
const TEMPLATES = {
basic_photo_banner: {
......@@ -149,44 +152,68 @@ const TEMPLATES = {
title: "Událost - pruh pod úhlem, vlevo",
},
},
base_person_event: {
name: "Událost - text a obrázek na pozadí, vprostřed",
image: basePersonEventImage,
path: "/base-person-event",
component: () => import("./views/base_person_event/BasePersonEvent.vue"),
meta: {
title: "Událost - text a obrázek na pozadí, vprostřed",
},
},
right_person_event: {
name: "Událost - text a obrázek na pozadí, vpravo",
image: rightPersonEventImage,
path: "/right-person-event",
component: () => import("./views/right_person_event/RightPersonEvent.vue"),
meta: {
title: "Událost - text a obrázek na pozadí, vpravo",
},
},
angle_person_event_right: {
name: "Událost - pruh pod úhlem s obrázkem na pozadí, vpravo",
image: anglePersonEventRightImage,
path: "/angle-person-event-right",
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/angle_person_event_right/AnglePersonEventRight.vue"),
import(
"./views/people_banner_with_predefined_text/PeopleBannerWithPredefinedText.vue"
),
meta: {
title: "Událost - pruh pod úhlem s obrázkem na pozadí, vpravo",
title: 'Osoba v šipce s textem "Odvaha pro Evropu"',
},
},
angle_person_event_left: {
name: "Událost - pruh pod úhlem s obrázkem na pozadí, vlevo",
image: anglePersonEventLeftImage,
path: "/angle-person-event-left",
people_banner_with_custom_text: {
name: "Osoba v šipce s vlastním textem",
image: peopleBannerWithCustomTextImage,
path: "/people-banner-with-custom-text",
component: () =>
import("./views/angle_person_event_left/AnglePersonEventLeft.vue"),
meta: {
title: "Událost - pruh pod úhlem s obrázkem na pozadí, vlevo",
},
},
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,
// path: "/base-person-event",
// component: () => import("./views/base_person_event/BasePersonEvent.vue"),
// meta: {
// title: "Událost - text a obrázek na pozadí, vprostřed",
// },
// },
// right_person_event: {
// name: "Událost - text a obrázek na pozadí, vpravo",
// image: rightPersonEventImage,
// path: "/right-person-event",
// component: () => import("./views/right_person_event/RightPersonEvent.vue"),
// meta: {
// title: "Událost - text a obrázek na pozadí, vpravo",
// },
// },
// angle_person_event_right: {
// name: "Událost - pruh pod úhlem s obrázkem na pozadí, vpravo",
// image: anglePersonEventRightImage,
// path: "/angle-person-event-right",
// component: () =>
// import("./views/angle_person_event_right/AnglePersonEventRight.vue"),
// meta: {
// title: "Událost - pruh pod úhlem s obrázkem na pozadí, vpravo",
// },
// },
// angle_person_event_left: {
// name: "Událost - pruh pod úhlem s obrázkem na pozadí, vlevo",
// image: anglePersonEventLeftImage,
// path: "/angle-person-event-left",
// component: () =>
// import("./views/angle_person_event_left/AnglePersonEventLeft.vue"),
// meta: {
// title: "Událost - pruh pod úhlem s obrázkem na pozadí, vlevo",
// },
// },
};
export default TEMPLATES;
<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,
toRawDeep,
} 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 ImageInput from "../../components/inputs/ImageInput.vue";
import LongTextInput from "../../components/inputs/text/LongTextInput.vue";
import ShortTextInput from "../../components/inputs/text/ShortTextInput.vue";
import MultipleColorPicker from "../../components/inputs/colors/MultipleColorPicker.vue";
import ReloadButton from "../../components/reload/ReloadButton.vue";
import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
</script>
<script>
await loadFonts(["12px Bebas Neue", "12px Roboto Condensed"]);
export default {
components: {
Canvas,
Navbar,
MainContainer,
ImageInput,
LongTextInput,
ShortTextInput,
MultipleColorPicker,
AutoReloadCheckbox,
ReloadButton,
},
data() {
const predefinedColors = {
whiteBackground: {
name: "Bílé pozadí, černý text",
colors: {
background: COLORS.white,
mainText: COLORS.black,
highlightedText: COLORS.black,
highlight: COLORS.yellow1,
},
},
};
return {
mainText: null,
personImage: null,
gradientHeightMultiplier: 1,
colorLabels: {
background: "Pozadí",
},
predefinedColors: predefinedColors,
colors: predefinedColors.whiteBackground.colors,
autoRedraw: false,
};
},
async created() {
await loadCanvasStorage(this);
},
methods: {
async reloadCanvasProperties() {
const canvasProperties = {
mainText: this.mainText,
personImage: this.personImage,
colors: this.colors,
};
await this.$refs.canvas.redraw(canvasProperties);
let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
delete canvasPropertiesToSave.colors;
setCanvasStorage(canvasPropertiesToSave);
},
},
mounted() {
this.$watch(
(vm) => [vm.mainText, vm.personImage, 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.people_banner_with_predefined_text"
></Navbar>
</header>
<main>
<MainContainer>
<template v-slot:left>
<Canvas
ref="canvas"
:redrawFunction="redraw"
width="1640"
height="624"
/>
</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"
/>
<ImageInput
name="Obrázek"
v-model="personImage"
:important="true"
zIndex="10"
/>
<MultipleColorPicker
name="Barvy"
v-model="colors"
:important="false"
:colorLabels="colorLabels"
:predefinedColors="predefinedColors"
:defaultPredefinedColors="predefinedColors.whiteBackground"
zIndex="5"
></MultipleColorPicker>
</template>
</MainContainer>
</main>
</template>
<style>
@import "vue-select/dist/vue-select.css";
</style>
import { fabric } from "fabric";
import {
clearObjects,
sortObjects,
transformHighlightedText,
checkTextBoxHeight,
} from "../../components/canvas/utils";
import COLORS from "../../colors";
import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
import bgImage from "../../assets/template/people_banner_with_custom_text/bg.png";
let mainImage = null;
let personImage = null;
let contractedByTextbox = null;
let previousColor = null;
let mainTextBox = null;
let personImageSource = null;
const removeDownEventListener = () => {
document
.getElementsByClassName("upper-canvas")[0]
.removeEventListener("pointerdown", canvasPointerDownEvent);
};
let upEventFunction = null;
let canvasPointerDownEvent = null;
let pointerDownEventAssigned = false;
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.18);
const textMarginRight = Math.ceil(canvas.width * 0.7);
let mainTextMarginTop = Math.ceil(canvas.height * 0.112);
const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14);
const mainTextSize = Math.ceil(canvas.height * 0.085);
const mainTextHeightLimit = Math.ceil(mainTextSize * 2.2);
const mainTextLineHeight = 0.85;
document
.getElementsByClassName("upper-canvas")[0]
.removeEventListener("pointerup", upEventFunction);
document
.getElementsByClassName("upper-canvas")[0]
.removeEventListener("pointerout", upEventFunction);
document
.getElementsByClassName("upper-canvas")[0]
.removeEventListener("pointercancel", upEventFunction);
canvas.preserveObjectStacking = true;
/* BEGIN Person image render */
if (
options.personImage !== null &&
(!canvas.contains(personImage) ||
personImage === null ||
options.personImage.src !== personImageSource)
) {
if (personImage !== null) {
canvas.remove(personImage);
}
personImage = new fabric.Image(options.personImage, {
left: 0,
top: 0,
zIndex: 0,
});
personImage.controls = {
...fabric.Image.prototype.controls,
mtr: new fabric.Control({ visible: false }),
};
if (personImage.width >= personImage.height) {
personImage.scaleToHeight(canvas.height);
} else {
personImage.scaleToWidth(canvas.width);
}
canvas.add(personImage);
personImageSource = options.personImage.src;
// canvas.centerObject(personImage)
removeDownEventListener();
pointerDownEventAssigned = false;
} else if (personImage !== null && options.personImage === null) {
canvas.remove(personImage);
removeDownEventListener();
pointerDownEventAssigned = false;
}
/* END Person image render */
/* BEGIN Main image render */
if (previousColor !== options.colors.background || mainImage === null) {
if (mainImage !== null) {
canvas.remove(mainImage);
}
const image = new Image();
const imageLoadPromise = new Promise((resolve) => {
image.onload = () => {
resolve();
};
image.src = bgImage;
});
await imageLoadPromise;
mainImage = new fabric.Image(image, {
left: 0,
top: 0,
zIndex: 5,
selectable: false,
});
mainImage.scaleToWidth(canvas.width);
canvas.add(mainImage);
previousColor = options.colors.background;
}
/* END Main image render */
if (options.mainText !== null) {
/* BEGIN Name text render */
const mainTextWidth = canvas.width - textMarginLeft - textMarginRight;
const highlightedData = transformHighlightedText(
options.mainText,
mainTextSize,
mainTextWidth,
"Bebas Neue",
options.colors.highlight.value,
options.colors.highlightedText.value,
{ padWhenDiacritics: true },
);
mainTextBox = new PaddedHighlightingTextbox(highlightedData.text, {
width: canvas.width,
left: textMarginLeft,
textAlign: "left",
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, 5);
canvas.add(mainTextBox);
mainTextBox.top = mainTextMarginTop - highlightedData.paddingBottom;
canvas.renderAll();
/* END Main text render */
}
sortObjects(canvas);
canvasPointerDownEvent = (event) => {
let activeObject = canvas.getActiveObject();
if (activeObject === null) {
return;
}
// if (activeObject._element.src == mainImage._element.src) {
// return
// }
canvas.remove(mainImage);
canvas.remove(mainTextBox);
mainImage = null;
mainTextBox = null;
};
if (!pointerDownEventAssigned) {
document
.getElementsByClassName("upper-canvas")[0]
.addEventListener("pointerdown", canvasPointerDownEvent);
pointerDownEventAssigned = true;
}
upEventFunction = (event) => {
redraw(canvas, options);
};
document
.getElementsByClassName("upper-canvas")[0]
.addEventListener("pointerup", upEventFunction);
document
.getElementsByClassName("upper-canvas")[0]
.addEventListener("pointerout", upEventFunction);
document
.getElementsByClassName("upper-canvas")[0]
.addEventListener("pointercancel", upEventFunction);
};
export default redraw;
<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,
toRawDeep,
} 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 ImageInput from "../../components/inputs/ImageInput.vue";
import LongTextInput from "../../components/inputs/text/LongTextInput.vue";
import ShortTextInput from "../../components/inputs/text/ShortTextInput.vue";
import MultipleColorPicker from "../../components/inputs/colors/MultipleColorPicker.vue";
import ReloadButton from "../../components/reload/ReloadButton.vue";
import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
</script>
<script>
await loadFonts(["12px Bebas Neue", "12px Roboto Condensed"]);
export default {
components: {
Canvas,
Navbar,
MainContainer,
ImageInput,
LongTextInput,
ShortTextInput,
MultipleColorPicker,
AutoReloadCheckbox,
ReloadButton,
},
data() {
const predefinedColors = {
whiteBackground: {
name: "Bílé pozadí, černý text",
colors: {
background: COLORS.white,
highlightedText: COLORS.black,
highlight: COLORS.yellow1,
},
},
};
return {
personImage: null,
gradientHeightMultiplier: 1,
colorLabels: {
background: "Pozadí",
},
predefinedColors: predefinedColors,
colors: predefinedColors.whiteBackground.colors,
autoRedraw: false,
};
},
async created() {
await loadCanvasStorage(this);
},
methods: {
async reloadCanvasProperties() {
const canvasProperties = {
personImage: this.personImage,
colors: this.colors,
};
await this.$refs.canvas.redraw(canvasProperties);
let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
delete canvasPropertiesToSave.colors;
setCanvasStorage(canvasPropertiesToSave);
},
},
mounted() {
this.$watch(
(vm) => [vm.personImage, 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.people_banner_with_predefined_text"
></Navbar>
</header>
<main>
<MainContainer>
<template v-slot:left>
<Canvas
ref="canvas"
:redrawFunction="redraw"
width="1640"
height="624"
/>
</template>
<template v-slot:right>
<ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
<AutoReloadCheckbox v-model="autoRedraw" />
<ImageInput
name="Obrázek"
v-model="personImage"
:important="true"
zIndex="10"
/>
<MultipleColorPicker
name="Barvy"
v-model="colors"
:important="false"
:colorLabels="colorLabels"
:predefinedColors="predefinedColors"
:defaultPredefinedColors="predefinedColors.whiteBackground"
zIndex="5"
></MultipleColorPicker>
</template>
</MainContainer>
</main>
</template>
<style>
@import "vue-select/dist/vue-select.css";
</style>
import { fabric } from "fabric";
import {
clearObjects,
sortObjects,
transformHighlightedText,
checkTextBoxHeight,
} from "../../components/canvas/utils";
import COLORS from "../../colors";
import { PaddedHighlightingTextbox } from "../../components/canvas/textbox";
import bgImage from "../../assets/template/people_banner_with_predefined_text/bg.png";
let mainImage = null;
let personImage = null;
let contractedByTextbox = null;
let previousColor = null;
let mainTextBox = null;
let personImageSource = null;
const removeDownEventListener = () => {
document
.getElementsByClassName("upper-canvas")[0]
.removeEventListener("pointerdown", canvasPointerDownEvent);
};
let upEventFunction = null;
let canvasPointerDownEvent = null;
let pointerDownEventAssigned = false;
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.53);
const textMarginRight = Math.ceil(canvas.width * 0.1);
let mainTextMarginBottom = Math.ceil(canvas.height * 0.36);
const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14);
const mainTextSize = Math.ceil(canvas.height * 0.13);
const mainTextHeightLimit = Math.ceil(mainTextSize * 2.2);
const mainTextLineHeight = 0.85;
document
.getElementsByClassName("upper-canvas")[0]
.removeEventListener("pointerup", upEventFunction);
document
.getElementsByClassName("upper-canvas")[0]
.removeEventListener("pointerout", upEventFunction);
document
.getElementsByClassName("upper-canvas")[0]
.removeEventListener("pointercancel", upEventFunction);
canvas.preserveObjectStacking = true;
/* BEGIN Person image render */
if (
options.personImage !== null &&
(!canvas.contains(personImage) ||
personImage === null ||
options.personImage.src !== personImageSource)
) {
if (personImage !== null) {
canvas.remove(personImage);
}
personImage = new fabric.Image(options.personImage, {
left: 0,
top: 0,
zIndex: 0,
});
personImage.controls = {
...fabric.Image.prototype.controls,
mtr: new fabric.Control({ visible: false }),
};
if (personImage.width >= personImage.height) {
personImage.scaleToHeight(canvas.height);
} else {
personImage.scaleToWidth(canvas.width);
}
canvas.add(personImage);
personImageSource = options.personImage.src;
// canvas.centerObject(personImage)
removeDownEventListener();
pointerDownEventAssigned = false;
} else if (personImage !== null && options.personImage === null) {
canvas.remove(personImage);
removeDownEventListener();
pointerDownEventAssigned = false;
}
/* END Person image render */
/* BEGIN Main image render */
if (previousColor !== options.colors.background || mainImage === null) {
if (mainImage !== null) {
canvas.remove(mainImage);
}
const image = new Image();
const imageLoadPromise = new Promise((resolve) => {
image.onload = () => {
resolve();
};
image.src = bgImage;
});
await imageLoadPromise;
mainImage = new fabric.Image(image, {
left: 0,
top: 0,
zIndex: 5,
selectable: false,
});
mainImage.scaleToWidth(canvas.width);
canvas.add(mainImage);
previousColor = options.colors.background;
}
/* END Main image render */
sortObjects(canvas);
canvasPointerDownEvent = (event) => {
let activeObject = canvas.getActiveObject();
if (activeObject === null) {
return;
}
// if (activeObject._element.src == mainImage._element.src) {
// return
// }
canvas.remove(mainImage);
canvas.remove(mainTextBox);
mainImage = null;
mainTextBox = null;
};
if (!pointerDownEventAssigned) {
document
.getElementsByClassName("upper-canvas")[0]
.addEventListener("pointerdown", canvasPointerDownEvent);
pointerDownEventAssigned = true;
}
upEventFunction = (event) => {
redraw(canvas, options);
};
document
.getElementsByClassName("upper-canvas")[0]
.addEventListener("pointerup", upEventFunction);
document
.getElementsByClassName("upper-canvas")[0]
.addEventListener("pointerout", upEventFunction);
document
.getElementsByClassName("upper-canvas")[0]
.addEventListener("pointercancel", upEventFunction);
};
export default redraw;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment