Merge branch 'alert-fix' into 'master'

Alert scroll missing text + default font mismatch fix

See merge request openlp/openlp!336

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
  *********************************************/

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;

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);
   });
 });