diff --git a/src/components/ConfigurationPage/settings/FontSelect.tsx b/src/components/ConfigurationPage/settings/FontSelect.tsx
index 506aa29..ccb0c88 100644
--- a/src/components/ConfigurationPage/settings/FontSelect.tsx
+++ b/src/components/ConfigurationPage/settings/FontSelect.tsx
@@ -2,6 +2,7 @@ import { Select } from "antd";
const fonts = [
"Alice",
+ "Play",
"Roboto",
"Ruslan Display",
"Cuprum",
diff --git a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
index 6e6fe5f..ce8e747 100644
--- a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
+++ b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
@@ -4,10 +4,12 @@ import axios from "axios";
import ColorPicker from "./ColorPicker";
import BaseSettings from "./BaseSettings";
import BooleanPropertyInput from "./properties/BooleanPropertyInput";
-import FontSelect from "./FontSelect";
import { Tabs as AntTabs, Input } from "antd";
import TextPropertyModal from "../widgetproperties/TextPropertyModal";
import { useTranslation } from "react-i18next";
+import { AnimatedFontProperty } from "../widgetproperties/AnimatedFontProperty";
+import AnimatedFontComponent from "../widgetproperties/AnimatedFontComponent";
+import { SingleChoiceProperty } from "../widgetproperties/SingleChoiceProperty";
interface PaymentAlertSettingsProps {
id: string;
@@ -53,24 +55,17 @@ export default function PaymentAlertSettings({
displayName: "widget-alert-image-show-time",
},
{
- tab: "header",
- name: "nicknameFont",
- type: "fontselect",
- value: "Roboto",
- displayName: "widget-alert-title-font-family",
- },
- {
- tab: "header",
- name: "nicknameFontSize",
- value: "60",
- displayName: "widget-alert-title-font-size",
+ tab: "image",
+ name: "appearance",
+ type: "custom",
+ value: "none",
},
{
tab: "header",
- name: "headerColor",
- type: "color",
- value: "#fb8c2b",
- displayName: "widget-alert-title-color",
+ name: "headerFont",
+ type: "fontselect",
+ value: null,
+ displayName: "widget-alert-title-font-family",
},
{
tab: "header",
@@ -81,24 +76,11 @@ export default function PaymentAlertSettings({
},
{
tab: "message",
- name: "messageFont",
+ name: "font",
type: "fontselect",
- value: "Roboto",
+ value: null,
displayName: "widget-alert-message-font-family",
},
- {
- tab: "message",
- name: "messageFontSize",
- value: "25",
- displayName: "widget-alert-message-font-size",
- },
- {
- tab: "message",
- name: "messageColor",
- type: "color",
- value: "#ffffff",
- displayName: "widget-alert-message-color",
- },
{
tab: "voice",
name: "voiceTextTemplate",
@@ -413,6 +395,8 @@ export default function PaymentAlertSettings({
const tabContent = (alert, selectedTab: string, index: number) =>
alert?.properties
.filter((it) => it.tab === selectedTab)
+ .filter((it) => it.type !== "fontselect")
+ .filter((it) => it.type !== "custom")
.map((prop) => (
{t(prop.displayName)}
@@ -426,12 +410,6 @@ export default function PaymentAlertSettings({
}}
/>
)}
- {prop.type === "fontselect" && (
-
update(prop.name, font, index)}
- />
- )}
{prop.type === "color" && (
{[
...tabContent(alert, "image", index),
+ new SingleChoiceProperty(
+ "widgetId",
+ "appearance",
+ "choice",
+ alert.properties.find((prop) => prop.name === "appearance")
+ ?.value,
+ "appearance",
+ [
+ "bounce",
+ "flash",
+ "pulse",
+ "rubberBand",
+ "shakeY",
+ "shakeX",
+ "headShake",
+ "swing",
+ "wobble",
+ "jello",
+ "heartBeat",
+ "backInDown",
+ "backInLeft",
+ "backInRight",
+ "backInUp",
+ "bounceIn",
+ "bounceInDown",
+ "bounceInLeft",
+ "bounceInRight",
+ "bounceInUp",
+ "fadeIn",
+ "fadeInDown",
+ "fadeInDownBig",
+ "fadeInLeft",
+ "fadeInLeftBig",
+ "fadeInRight",
+ "fadeInRightBig",
+ "fadeInUp",
+ "fadeInUpBig",
+ "fadeInTopLeft",
+ "fadeInTopRight",
+ "fadeInBottomLeft",
+ "fadeInBottomRight",
+ "flip",
+ "flinInX",
+ "flipInY",
+ "lightSpeedInRight",
+ "lightSpeedInLeft",
+ "rotateIn",
+ "rotateInDownLeft",
+ "rotateInDownRight",
+ "rotateInUpLeft",
+ "rotateInUpRight",
+ "hinge",
+ "jackInTheBox",
+ "rollIn",
+ "zoomIn",
+ "zoomInDown",
+ "zoomInLeft",
+ "zoomInRight",
+ "zoomInUp",
+ "slideInDown",
+ "slideInLeft",
+ "slideInRight",
+ "slideInUp",
+ "none",
+ ],
+ ).markup((widgetId, name, value) =>
+ update("appearance", value, index),
+ ),
{!alert.video && !alert.image && (
<>
@@ -592,16 +638,68 @@ export default function PaymentAlertSettings({
{
key: "header",
label: t("tab-alert-title"),
- children: [<>{tabContent(alert, "header", index)}>],
+ children: [
+ <>
+ {[
+ ...tabContent(alert, "header", index),
+
+ update("headerFont", value, index),
+ }}
+ >
+ prop.name === "headerFont",
+ )?.value,
+ label: "widget-alert-title-font-family",
+ })
+ }
+ />
+ ,
+ ]}
+ >,
+ ],
},
{
key: "message",
label: t("tab-alert-message"),
- children: [<>{tabContent(alert, "message", index)}>],
+ children: [
+ <>
+ {[
+ ...tabContent(alert, "message", index),
+
+ update("font", value, index),
+ }}
+ >
+ prop.name === "font")
+ ?.value,
+ label: "widget-alert-message-font-family",
+ })
+ }
+ />
+ ,
+ ]}
+ >,
+ ],
},
];
- // {alertCard(config.get(id)?.defaultAlert)}
return (
<>
();
+ const { t } = useTranslation();
+ const { updateConfig } = useContext(WidgetsContext);
+
+ function toggleModal() {
+ const classList = document.getElementById("root")?.classList;
+ if (classList?.contains("blured")) {
+ classList.remove("blured");
+ } else {
+ classList?.add("blured");
+ }
+ setShowModal((old) => !old);
+ }
+
+ return (
+ <>
+ {property.createFontImport()}
+
+
+
+
+
+
+ Это текст для демонстрации
+
+
+
+
+ {new FontProperty(
+ property.widgetId,
+ "font-family",
+ "font",
+ property.value.family,
+ "button-font",
+ ).markup((p1, p2, value) => {
+ updateConfig(
+ property.widgetId,
+ property.name,
+ produce(property.value, (draft) => {
+ draft.family = value;
+ }),
+ );
+ })}
+ {new NumberProperty(
+ property.widgetId,
+ "font-size",
+ "number",
+ property.value.size,
+ "button-font-size",
+ ).markup((p1, p2, value) => {
+ updateConfig(
+ property.widgetId,
+ property.name,
+ produce(property.value, (draft) => {
+ draft.size = value;
+ }),
+ );
+ })}
+ {new ColorProperty(
+ property.widgetId,
+ "color",
+ "color",
+ property.value.color,
+ "button-text-color",
+ ).markup((p1, p2, value) => {
+ updateConfig(
+ property.widgetId,
+ property.name,
+ produce(property.value, (draft) => {
+ draft.color = value;
+ }),
+ );
+ })}
+ {new BooleanProperty(
+ property.widgetId,
+ "bold",
+ "boolean",
+ property.value.weight,
+ "widget-font-bold",
+ ).markup((p1, p2, value) => {
+ updateConfig(
+ property.widgetId,
+ property.name,
+ produce(property.value, (draft) => {
+ draft.weight = value;
+ }),
+ );
+ })}
+ {new BooleanProperty(
+ property.widgetId,
+ "italic",
+ "boolean",
+ property.value.italic,
+ "widget-font-italic",
+ ).markup((p1, p2, value) => {
+ updateConfig(
+ property.widgetId,
+ property.name,
+ produce(property.value, (draft) => {
+ draft.italic = value;
+ }),
+ );
+ })}
+ {new BooleanProperty(
+ property.widgetId,
+ "bold",
+ "boolean",
+ property.value.underline,
+ "widget-font-underline",
+ ).markup((p1, p2, value) => {
+ updateConfig(
+ property.widgetId,
+ property.name,
+ produce(property.value, (draft) => {
+ draft.underline = value;
+ }),
+ );
+ })}
+ >
+ ),
+ },
+ {
+ label: t("widget-font-shadowtablabel"),
+ key: "shadow",
+ children: (
+ <>
+ {new NumberProperty(
+ property.widgetId,
+ "shadow-offset-x",
+ "number",
+ property.value.shadowOffsetX,
+ "button-shadow-offset-x",
+ ).markup((p1, p2, value) => {
+ updateConfig(
+ property.widgetId,
+ property.name,
+ produce(property.value, (draft) => {
+ draft.shadowOffsetX = value;
+ }),
+ );
+ })}
+ {new NumberProperty(
+ property.widgetId,
+ "shadow-offset-y",
+ "number",
+ property.value.shadowOffsetY,
+ "button-shadow-offset-y",
+ ).markup((p1, p2, value) => {
+ updateConfig(
+ property.widgetId,
+ property.name,
+ produce(property.value, (draft) => {
+ draft.shadowOffsetY = value;
+ }),
+ );
+ })}
+ {new NumberProperty(
+ property.widgetId,
+ "shadow-size",
+ "number",
+ property.value.shadowWidth,
+ "button-shadow-size",
+ ).markup((p1, p2, value) => {
+ updateConfig(
+ property.widgetId,
+ property.name,
+ produce(property.value, (draft) => {
+ draft.shadowWidth = value;
+ }),
+ );
+ })}
+ {new ColorProperty(
+ property.widgetId,
+ "shadow-color",
+ "color",
+ property.value.shadowColor,
+ "button-shadow-color",
+ ).markup((p1, p2, value) => {
+ updateConfig(
+ property.widgetId,
+ property.name,
+ produce(property.value, (draft) => {
+ draft.shadowColor = value;
+ }),
+ );
+ })}
+ >
+ ),
+ },
+ {
+ label: t("widget-font-animationtablabel"),
+ key: "animation",
+ children: (
+ <>
+ {new SingleChoiceProperty(
+ property.widgetId,
+ "font-animation",
+ "choice",
+ property.value.animation,
+ "widget-font-animation",
+ animations,
+ ).markup((p1, p2, value) => {
+ updateConfig(
+ property.widgetId,
+ property.name,
+ produce(property.value, (draft) => {
+ draft.animation = value;
+ }),
+ );
+ })}
+ >
+ ),
+ },
+ ]}
+ />
+
+
+ >
+ );
+}
diff --git a/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx b/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx
index 69e6b8e..05a8f8f 100644
--- a/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx
+++ b/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx
@@ -1,34 +1,7 @@
-import { ReactNode, useContext, useState } from "react";
+import { ReactNode } from "react";
import { DefaultWidgetProperty } from "./WidgetProperty";
-import { Tabs as AntTabs, Modal } from "antd";
-import { useTranslation } from "react-i18next";
-import classes from "./AnimatedFontProperty.module.css";
-import { ColorProperty } from "./ColorProperty";
-import { FontProperty } from "./FontProperty";
-import { NumberProperty } from "./NumberProperty";
-import { WidgetsContext } from "../WidgetsContext";
-import { produce } from "immer";
import FontImport from "../../FontImport/FontImport";
-import { BooleanProperty } from "./BooleanProperty";
-import { SingleChoiceProperty } from "./SingleChoiceProperty";
-
-const animationType = ["entire", "by words", "by symbols"];
-
-const animations = [
- "none",
- "bounce",
- "flash",
- "pulse",
- "rubberBand",
- "shakeX",
- "shakeY",
- "headShake",
- "swing",
- "tada",
- "wobble",
- "jello",
- "heartBeat",
-];
+import AnimatedFontComponent from "./AnimatedFontComponent";
export class AnimatedFontProperty extends DefaultWidgetProperty {
private _label: string;
@@ -82,7 +55,10 @@ export class AnimatedFontProperty extends DefaultWidgetProperty {
if (this.value.animation === "none") {
return;
}
- return `animate__animated animate__infinite animate__slower animate__${this.value.animation}`;
+ if (this.value.animation === "pulse") {
+ return `animate__animated animate__infinite animate__${this.value.animation}`;
+ }
+ return `animate__animated animate__infinite animate__slow animate__${this.value.animation}`;
}
createFontImport() {
@@ -101,257 +77,7 @@ export class AnimatedFontProperty extends DefaultWidgetProperty {
};
}
- button: React.FC = () => {
- const [showModal, setShowModal] = useState();
- const { t } = useTranslation();
- const { updateConfig } = useContext(WidgetsContext);
-
- function toggleModal() {
- const classList = document.getElementById("root")?.classList;
- if (classList?.contains("blured")) {
- classList.remove("blured");
- } else {
- classList?.add("blured");
- }
- setShowModal((old) => !old);
- }
-
- return (
- <>
- {this.createFontImport()}
-
-
-
-
-
-
- Это текст для демонстрации
-
-
-
-
- {new FontProperty(
- this.widgetId,
- "font-family",
- "font",
- this.value.family,
- "button-font",
- ).markup((p1, p2, value) => {
- updateConfig(
- this.widgetId,
- this.name,
- produce(this.value, (draft) => {
- draft.family = value;
- }),
- );
- })}
- {new NumberProperty(
- this.widgetId,
- "font-size",
- "number",
- this.value.size,
- "button-font-size",
- ).markup((p1, p2, value) => {
- updateConfig(
- this.widgetId,
- this.name,
- produce(this.value, (draft) => {
- draft.size = value;
- }),
- );
- })}
- {new ColorProperty(
- this.widgetId,
- "color",
- "color",
- this.value.color,
- "button-text-color",
- ).markup((p1, p2, value) => {
- updateConfig(
- this.widgetId,
- this.name,
- produce(this.value, (draft) => {
- draft.color = value;
- }),
- );
- })}
- {new BooleanProperty(
- this.widgetId,
- "bold",
- "boolean",
- this.value.weight,
- "widget-font-bold",
- ).markup((p1, p2, value) => {
- updateConfig(
- this.widgetId,
- this.name,
- produce(this.value, (draft) => {
- draft.weight = value;
- }),
- );
- })}
- {new BooleanProperty(
- this.widgetId,
- "italic",
- "boolean",
- this.value.italic,
- "widget-font-italic",
- ).markup((p1, p2, value) => {
- updateConfig(
- this.widgetId,
- this.name,
- produce(this.value, (draft) => {
- draft.italic = value;
- }),
- );
- })}
- {new BooleanProperty(
- this.widgetId,
- "bold",
- "boolean",
- this.value.underline,
- "widget-font-underline",
- ).markup((p1, p2, value) => {
- updateConfig(
- this.widgetId,
- this.name,
- produce(this.value, (draft) => {
- draft.underline = value;
- }),
- );
- })}
- >
- ),
- },
- {
- label: t("widget-font-shadowtablabel"),
- key: "shadow",
- children: (
- <>
- {new NumberProperty(
- this.widgetId,
- "shadow-offset-x",
- "number",
- this.value.shadowOffsetX,
- "button-shadow-offset-x",
- ).markup((p1, p2, value) => {
- updateConfig(
- this.widgetId,
- this.name,
- produce(this.value, (draft) => {
- draft.shadowOffsetX = value;
- }),
- );
- })}
- {new NumberProperty(
- this.widgetId,
- "shadow-offset-y",
- "number",
- this.value.shadowOffsetY,
- "button-shadow-offset-y",
- ).markup((p1, p2, value) => {
- updateConfig(
- this.widgetId,
- this.name,
- produce(this.value, (draft) => {
- draft.shadowOffsetY = value;
- }),
- );
- })}
- {new NumberProperty(
- this.widgetId,
- "shadow-size",
- "number",
- this.value.shadowWidth,
- "button-shadow-size",
- ).markup((p1, p2, value) => {
- updateConfig(
- this.widgetId,
- this.name,
- produce(this.value, (draft) => {
- draft.shadowWidth = value;
- }),
- );
- })}
- {new ColorProperty(
- this.widgetId,
- "shadow-color",
- "color",
- this.value.shadowColor,
- "button-shadow-color",
- ).markup((p1, p2, value) => {
- updateConfig(
- this.widgetId,
- this.name,
- produce(this.value, (draft) => {
- draft.shadowColor = value;
- }),
- );
- })}
- >
- ),
- },
- {
- label: t("widget-font-animationtablabel"),
- key: "animation",
- children: (
- <>
- {new SingleChoiceProperty(
- this.widgetId,
- "font-animation",
- "choice",
- this.value.animation,
- "widget-font-animation",
- animations,
- ).markup((p1, p2, value) => {
- updateConfig(
- this.widgetId,
- this.name,
- produce(this.value, (draft) => {
- draft.animation = value;
- }),
- );
- })}
- >
- ),
- },
- ]}
- />
-
-
- >
- );
- };
-
markup(): ReactNode {
- return <>{this.button({})}>;
+ return ;
}
}
diff --git a/src/components/PaymentAlerts/sections/AlertImage/AlertImage.tsx b/src/components/PaymentAlerts/sections/AlertImage/AlertImage.tsx
index a9982d4..712913e 100644
--- a/src/components/PaymentAlerts/sections/AlertImage/AlertImage.tsx
+++ b/src/components/PaymentAlerts/sections/AlertImage/AlertImage.tsx
@@ -11,10 +11,12 @@ export default function AlertImage({
const [image, setImage] = useState(null);
const [video, setVideo] = useState(null);
const [style, setStyle] = useState({});
+ const [className, setClassName] = useState("");
const videoRef = useRef(null);
useEffect(() => {
alertController.addAlertImageRenderer({
+ setClassName: setClassName,
setVideo: setVideo,
setImage: setImage,
setStyle: setStyle,
@@ -36,7 +38,7 @@ export default function AlertImage({
)}
{image && (
-
+
)}
{!image && !video && (
diff --git a/src/components/PaymentAlerts/sections/MessageBody.tsx b/src/components/PaymentAlerts/sections/MessageBody.tsx
index 1452bc7..7550b1e 100644
--- a/src/components/PaymentAlerts/sections/MessageBody.tsx
+++ b/src/components/PaymentAlerts/sections/MessageBody.tsx
@@ -9,17 +9,22 @@ export default function MessageBody({
}) {
const [message, setMessage] = useState("");
const [messageStyle, setMessageStyle] = useState({});
+ const [className, setClassName] = useState("");
useEffect(() => {
alertController.addMessageRenderer({
setMessage: setMessage,
+ setClassName: setClassName,
setStyle: setMessageStyle,
});
}, [alertController]);
return (
<>
-
+
{message != undefined && message != null ? message : null}
>
diff --git a/src/components/PaymentAlerts/sections/MessageTitle.tsx b/src/components/PaymentAlerts/sections/MessageTitle.tsx
index fd58125..f08cc4d 100644
--- a/src/components/PaymentAlerts/sections/MessageTitle.tsx
+++ b/src/components/PaymentAlerts/sections/MessageTitle.tsx
@@ -9,9 +9,11 @@ export default function MessageTitle({
}) {
const [style, setStyle] = useState
({});
const [title, setTitle] = useState("");
+ const [className, setClassName] = useState("");
useEffect(() => {
alertController.addTitleRenderer({
+ setClassName: setClassName,
setStyle: setStyle,
setTitle: setTitle,
});
@@ -19,7 +21,7 @@ export default function MessageTitle({
return (
<>
-
+
{title}
>
diff --git a/src/logic/alert/AlertController.ts b/src/logic/alert/AlertController.ts
index 1580256..8fc2a02 100644
--- a/src/logic/alert/AlertController.ts
+++ b/src/logic/alert/AlertController.ts
@@ -1,3 +1,4 @@
+import { AnimatedFontProperty } from "../../components/ConfigurationPage/widgetproperties/AnimatedFontProperty";
import { IFontLoader } from "../../components/FontLoader/IFontLoader";
import { log } from "../../logging";
import { publish, subscribe } from "../../socket";
@@ -32,7 +33,7 @@ export class AlertController {
})
.then(() => {
subscribe(widgetId, this.conf.topic.alerts, (message) => {
- log.info({message}, `Received alert`);
+ log.info({ message }, `Received alert`);
let json = JSON.parse(message.body);
const alert = this.findAlert(json);
if (alert) {
@@ -169,7 +170,7 @@ export class AlertController {
}
}
- playAudio(alert: any, data: any, ackFunction: Function){
+ playAudio(alert: any, data: any, ackFunction: Function) {
this.voiceController?.playAudio(alert, () => {
this.voiceController?.pronounceTitle(
alert,
@@ -223,20 +224,24 @@ export class AlertController {
`Amount of alert image renderers: ${this.alertImageRenderers.length}`,
);
const showTime = this.findSetting(alert.properties, "imageShowTime", null);
+ const appearance = this.findSetting(alert.properties, "appearance", "none");
this.alertImageRenderers.forEach((renderer) => {
console.log(alert.properties);
- if (alert.image){
- log.debug({image: alert.image}, "rendering image");
+ if (alert.image) {
+ log.debug({ image: alert.image }, "rendering image");
renderer.setImage(
`${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${alert.image}`,
);
}
- if (alert.video){
- log.debug({video: alert.video}, "rendering video");
+ if (alert.video) {
+ log.debug({ video: alert.video }, "rendering video");
renderer.setVideo(
`${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${alert.video}`,
);
}
+ if (appearance && appearance !== "none"){
+ renderer.setClassName(`animate__animated animate__slow animate__${appearance}`);
+ }
if (showTime) {
setTimeout(() => {
renderer.setImage(null);
@@ -253,13 +258,6 @@ export class AlertController {
}
private renderTitle(alert: any, data: any) {
- const headerFont = this.findSetting(
- alert.properties,
- "nicknameFont",
- "Roboto",
- );
- this.fontLoaders.forEach((loader) => loader.addFont(headerFont));
-
const nicknameTextTemplate = this.findSetting(
alert.properties,
"nicknameTextTemplate",
@@ -269,51 +267,32 @@ export class AlertController {
.replace("
", data.nickname ? data.nickname : "Аноним")
.replace("", `${data.amount.major} ${data.amount.currency}`);
- const headerFontSize = this.findSetting(
- alert.properties,
- "nicknameFontSize",
- "24px",
- );
- const headerColor = this.findSetting(
- alert.properties,
- "headerColor",
- "#fb8c2b",
+ const headerFont = new AnimatedFontProperty({
+ widgetId: "widgetId",
+ name: "headerFont",
+ value: this.findSetting(alert.properties, "headerFont", null),
+ });
+ this.fontLoaders.forEach((loader) =>
+ loader.addFont(headerFont.value.family),
);
this.titleRenderers.forEach((renderer) => {
- renderer.setStyle({
- fontSize: headerFontSize ? headerFontSize + "px" : "unset",
- fontFamily: headerFont ? headerFont : "unset",
- color: headerColor,
- });
+ renderer.setClassName(headerFont.calcClassName() ?? "");
+ renderer.setStyle(headerFont.calcStyle());
renderer.setTitle(title);
});
}
private renderMessage(alert: any, data: any) {
- const messageFont = this.findSetting(
- alert.properties,
- "messageFont",
- "Roboto",
- );
- this.fontLoaders.forEach((loader) => loader.addFont(messageFont));
-
- const messageFontSize = this.findSetting(
- alert.properties,
- "messageFontSize",
- "24px",
- );
- const messageColor = this.findSetting(
- alert.properties,
- "messageColor",
- "#fb8c2b",
- );
const showTime = this.findSetting(alert.properties, "imageShowTime", null);
+ const messageFont = new AnimatedFontProperty({
+ widgetId: "widgetId",
+ name: "font",
+ value: this.findSetting(alert.properties, "font", null),
+ });
+ this.fontLoaders.forEach((loader) => loader.addFont(messageFont.value.family));
this.messageRenderers.forEach((renderer) => {
- renderer.setStyle({
- fontSize: messageFontSize ? messageFontSize + "px" : "unset",
- fontFamily: messageFont ? messageFont : "unset",
- color: messageColor,
- });
+ renderer.setStyle(messageFont.calcStyle());
+ renderer.setClassName(messageFont.calcClassName() ?? "");
if (showTime) {
setTimeout(() => renderer.setMessage(data.message), showTime * 1000);
} else {
diff --git a/src/logic/alert/IAlertImageRenderer.ts b/src/logic/alert/IAlertImageRenderer.ts
index 16f2da1..d469f2e 100644
--- a/src/logic/alert/IAlertImageRenderer.ts
+++ b/src/logic/alert/IAlertImageRenderer.ts
@@ -1,4 +1,5 @@
interface IAlertImageRenderer {
+ setClassName(name:string):void;
setVideo(video: string|null): void;
setImage(image: string|null): void;
setStyle(style: any): void;
diff --git a/src/logic/alert/IMessageRenderer.ts b/src/logic/alert/IMessageRenderer.ts
index 85f608a..2eb19a9 100644
--- a/src/logic/alert/IMessageRenderer.ts
+++ b/src/logic/alert/IMessageRenderer.ts
@@ -1,4 +1,5 @@
interface IMessageRenderer {
+ setClassName(name: string):void;
setMessage(message:string):void;
setStyle(style:any):void;
}
diff --git a/src/logic/alert/ITitleRenderer.ts b/src/logic/alert/ITitleRenderer.ts
index 4e2dee2..401f6bb 100644
--- a/src/logic/alert/ITitleRenderer.ts
+++ b/src/logic/alert/ITitleRenderer.ts
@@ -1,4 +1,5 @@
interface ITitleRenderer {
+ setClassName(name: string): void;
setTitle(title: string): void;
setStyle(style: any): void;
}