From 7d0990021ddda6aa9227c13a1f250d6c461c6991 Mon Sep 17 00:00:00 2001
From: Mateus Meyer Jiacomelli <meyergdh@gmail.com>
Date: Thu, 19 Aug 2021 16:30:49 +0000
Subject: [PATCH] Alert scroll missing text + default font mismatch fix

---
 openlp/core/display/html/display.css | 15 ++++++++-
 openlp/core/display/html/display.js  | 17 +++++++++-
 tests/js/test_display.js             | 46 ++++++++++++++++++++++++++--
 3 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/openlp/core/display/html/display.css b/openlp/core/display/html/display.css
index 7e5094bed..983f68436 100644
--- a/openlp/core/display/html/display.css
+++ b/openlp/core/display/html/display.css
@@ -1,7 +1,7 @@
 @keyframes alert-scrolling-text {
   0% {
     opacity: 1;
-    transform: translateX(100%);
+    transform: translateX(101%);
   }
   99% {
     opacity: 1;
@@ -145,8 +145,21 @@ body.transition .reveal .slide-background {
   padding: 0;
   transition: opacity 0.5s linear;
   z-index: 100;
+  will-change: transform;
 }
 
+
+#alert-text.scrolling {
+  box-sizing: border-box;
+  transform: translateX(101%);
+  display: inline-block;
+  min-width: 100%;
+  padding-left: 2%;
+  padding-right: 2%;
+  text-align: center;
+}
+
+
 /*********************************************
  * Transition overrides to allow different directions
  *********************************************/
diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index 714f1281d..576b6b0d2 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -234,6 +234,19 @@ function _createStyle(selector, rules) {
   }
 }
 
+/**
+ * Fixes font name to match CSS names.
+ * @param {string} fontName Font Name
+ * @returns Fixed Font Name
+ */
+function _fixFontName(fontName) {
+  if (!fontName || (fontName == 'Sans Serif')) {
+    return 'sans-serif';
+  }
+
+  return "'" + fontName + "'";
+}
+
 /**
  * The Display object is what we use from OpenLP
  */
@@ -468,7 +481,7 @@ var Display = {
     // create styles for the alerts from the settings
     _createStyle("#alert-background.settings", {
       backgroundColor: settings.backgroundColor,
-      fontFamily: "'" + settings.fontFace + "'",
+      fontFamily: _fixFontName(settings.fontFace),
       fontSize: settings.fontSize.toString() + "pt",
       color: settings.fontColor
     });
@@ -486,6 +499,8 @@ var Display = {
     /* Either scroll the alert, or make it disappear at the end of its time */
     if (settings.scroll) {
       Display._animationState = AnimationState.ScrollingText;
+      alertText.classList.add('scrolling');
+      alertText.classList.replace("hide", "show");
       var animationSettings = "alert-scrolling-text " + settings.timeout +
                               "s linear 0.6s " + settings.repeat + " normal";
       alertText.style.animation = animationSettings;
diff --git a/tests/js/test_display.js b/tests/js/test_display.js
index a3b543ac7..c6c73f4bc 100644
--- a/tests/js/test_display.js
+++ b/tests/js/test_display.js
@@ -325,6 +325,48 @@ describe("Display.showAlert", function () {
     });
   });
 
+  it("should change fontFace to 'sans-serif' if no font face is provided", function () {
+    spyOn(window, "_createStyle");
+    Display.showAlert("Test Display.showAlert - fontFace fix", {
+      "location": 1,
+      "fontFace": "",
+      "fontSize": 40,
+      "fontColor": "#ffffff",
+      "backgroundColor": "#660000",
+      "timeout": 5,
+      "repeat": 1,
+      "scroll": true
+    });
+
+    expect(_createStyle).toHaveBeenCalledWith("#alert-background.settings", {
+      backgroundColor: settings["backgroundColor"],
+      fontFamily: "sans-serif",
+      fontSize: settings["fontSize"] + 'pt',
+      color: settings["fontColor"]
+    });
+  });
+
+  it("should change fontFace to 'sans-serif' if 'Sans Serif' is provided", function () {
+    spyOn(window, "_createStyle");
+    Display.showAlert("Test Display.showAlert - fontFace fix", {
+      "location": 1,
+      "fontFace": "Sans Serif",
+      "fontSize": 40,
+      "fontColor": "#ffffff",
+      "backgroundColor": "#660000",
+      "timeout": 5,
+      "repeat": 1,
+      "scroll": true
+    });
+
+    expect(_createStyle).toHaveBeenCalledWith("#alert-background.settings", {
+      backgroundColor: settings["backgroundColor"],
+      fontFamily: "sans-serif",
+      fontSize: settings["fontSize"] + 'pt',
+      color: settings["fontColor"]
+    });
+  });
+
   it("should set the alert state to AlertState.Displaying", function () {
     Display.showAlert("Test Display.showAlert - state", settings);
 
@@ -336,8 +378,8 @@ describe("Display.showAlert", function () {
 
     expect($("#alert-background")[0].classList.contains("hide")).toEqual(false);
     expect($("#alert-background")[0].classList.contains("show")).toEqual(true);
-    //expect($("#alert-text")[0].classList.contains("hide")).toEqual(false);
-    //expect($("#alert-text")[0].classList.contains("show")).toEqual(true);
+    expect($("#alert-text")[0].classList.contains("hide")).toEqual(false);
+    expect($("#alert-text")[0].classList.contains("show")).toEqual(true);
   });
 });