raoul/openlp
1
0
Fork 0
forked from openlp/openlp
Code Issues Pull Requests Projects Releases Wiki Activity

Alert scroll missing text + default font mismatch fix

Browse Source
This commit is contained in:
Mateus Meyer Jiacomelli 2021-08-19 16:30:49 +00:00 committed by Tim Bentley
parent e048348890
commit 7d0990021d
3 changed files with 74 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
openlp/core/display/html/display.css
View File

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

17
openlp/core/display/html/display.js
View File

@ -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;

46
tests/js/test_display.js
View File

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