From fe6130a534e9661f57a98010e85f2af5457ac62b Mon Sep 17 00:00:00 2001 From: Nico Opiyo Date: Sun, 17 Mar 2019 22:05:31 +0300 Subject: [PATCH] Fixed buggy alerts and refactored CSS --- openlp/core/display/html/display.css | 15 ++- openlp/core/display/html/display.html | 11 +- openlp/core/display/html/display.js | 142 ++++++++++---------- openlp/plugins/alerts/lib/alertstab.py | 1 + tests/js/test_display.js | 176 ++++++++++++------------- 5 files changed, 166 insertions(+), 179 deletions(-) diff --git a/openlp/core/display/html/display.css b/openlp/core/display/html/display.css index 29ce52b58..0e656a30a 100644 --- a/openlp/core/display/html/display.css +++ b/openlp/core/display/html/display.css @@ -11,8 +11,8 @@ animation-name: alert-scrolling-text; } -/* ALERT STYLING */ -.normal { +/* ALERT BACKGROUND STYLING */ +.bg-default { position: absolute; margin: 0; padding: 0; @@ -24,7 +24,7 @@ visibility:hidden; } -.normal.middle { +.bg-default.middle { top: 50%; left: 50%; margin-right: -50%; @@ -32,16 +32,17 @@ bottom: initial; } -.normal.top { +.bg-default.top { top: 0; bottom: initial; } -.normal.bottom { +.bg-default.bottom { top: initial; bottom: 0; } +/* ALERT BACKGROUND STYLING */ #alert { position: relative; top: 50%; @@ -51,4 +52,8 @@ white-space: nowrap; color: #ffffff; visibility: hidden; +} + +.no-scroll { + margin: 0 20px; } \ No newline at end of file diff --git a/openlp/core/display/html/display.html b/openlp/core/display/html/display.html index 014138202..8eed91645 100644 --- a/openlp/core/display/html/display.html +++ b/openlp/core/display/html/display.html @@ -2,8 +2,7 @@ Display Window - - + + - +
-

Testing alerts

+

Testing alerts

-
- + diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js index 652d4f15b..e0970c709 100644 --- a/openlp/core/display/html/display.js +++ b/openlp/core/display/html/display.js @@ -287,6 +287,7 @@ AudioPlayer.prototype.stop = function () { var Display = { _alerts: [], _slides: {}, + _alertSettings: {}, _alertState: AlertState.NotDisplaying, _transitionState: TransitionState.NoTransition, _animationState: AnimationState.NoAnimation, @@ -411,20 +412,23 @@ var Display = { /** * Display an alert * @param {string} text - The alert text - * @param {int} location - The location of the text (top, middle or bottom) + * @param {string} JSON object - The settings for the alert object e.g '{"background_color": "rgb(255, 85, 0)", + * "location": 1, "font_face": "Open Sans Condensed", "font_size": 90, "font_color": "rgb(255, 255, 255)", + * "timeout": 10, "repeat": 2, "scroll": true}' */ alert: function (text, alert_settings) { if (text == "") { return null; } else { - if (this._alertState === AlertState.Displaying) { + if (this._alertState === AlertState.Displaying || this._alertState === AlertState.DisplayingFromQueue) { var alertObject = {text: text, settings: alert_settings}; this._alerts.push(JSON.stringify(alertObject)); return null; } } var settings = JSON.parse(alert_settings); + this._alertSettings = settings; var alertBackground = $("#alert-background")[0]; var alertText = $("#alert")[0]; alertText.innerHTML = text; @@ -433,33 +437,32 @@ var Display = { this._alertState = AlertState.Displaying; } - Display.doEntranceTransition(settings); + Display.showAlertBackground(settings); - alertBackground.addEventListener('transitionend', function(e) { + alertBackground.addEventListener('transitionend', function (e) { e.stopPropagation(); - if (Display._transitionState === TransitionState.EntranceTransition) { - console.debug("Calling alertEntranceTransitionEnd"); - Display.alertEntranceTransitionEnd(settings); + if (Display._transitionState === TransitionState.EntranceTransition) { + Display._transitionState = TransitionState.NoTransition; + Display.showAlertText(Display._alertSettings); } - else { - console.debug("Calling alertExitTransitionEnd"); - Display.alertExitTransitionEnd(); + else if (Display._transitionState === TransitionState.ExitTransition){ + Display._transitionState = TransitionState.NoTransition; + alertBackground.classList = "bg-default"; + Display.displayNextAlert(); } }); alertText.addEventListener('animationend', function (e) { - e.stopPropagation(); - console.debug("The text scrolling has ended"); - Display.textAnimationEnd(); + e.stopPropagation(); + Display.hideAlertText(); }); }, /** * Start background entrance transition for display of alert - * @param {object} settings - Settings for styling the alert + * @param {object} location - The location of the alert (top, middle or bottom) */ - doEntranceTransition: function (settings) { - var alertBackground = $("#alert-background")[0]; - var alertText = $("#alert")[0]; + showAlertBackground: function (settings) { + var alertBackground = $("#alert-background")[0]; var transitionSetting; switch (settings.location) { case AlertLocation.Top: @@ -472,10 +475,7 @@ var Display = { default: alertBackground.classList.add("bottom"); break; - } - alertText.style.color = settings.font_color; - alertText.style.fontFamily = settings.font_face; - alertText.style.fontSize = settings.font_size + "pt"; + } alertBackground.style.backgroundColor = settings.background_color; if (this._alertState === AlertState.DisplayingFromQueue) { @@ -483,7 +483,7 @@ var Display = { } else { transitionSetting = "1s linear"; - } + } // Wait for styles to be set first before starting transition setTimeout( function() { alertBackground.style.height = "25%"; @@ -496,18 +496,56 @@ var Display = { * Start background exit transition once alert has been displayed * @param {string} location - Integer showing the location of the alert on screen */ - doExitTransition: function () { - var alertBackground = $("#alert-background")[0]; + hideAlertBackground: function () { + var alertBackground = $("#alert-background")[0]; alertBackground.style.height = "0%"; alertBackground.style.transition = "1s linear"; this._transitionState = TransitionState.ExitTransition; - this._alertState = AlertState.NotDisplaying; - Display.getNextAlert(); + this._alertState = AlertState.NotDisplaying; + }, + /** + * Sets the alert text styles correctly after the entrance transition has ended. + * @param {json} settings object - The settings to use for the animation + */ + showAlertText: function (settings) { + var alertText = $("#alert")[0]; + alertText.style.visibility = "visible"; + alertText.style.color = settings.font_color; + alertText.style.fontFamily = settings.font_face; + alertText.style.fontSize = settings.font_size + "pt"; + alertText.classList.add("no-scroll"); + if (settings.scroll) { + var animationSettings = "alert-scrolling-text " + settings.timeout + + "s linear 0s " + settings.repeat + " normal"; + alertText.style.animation = animationSettings; + Display._animationState = AnimationState.ScrollingText; + } + else { + Display._animationState = AnimationState.NonScrollingText; + alertText.style.animation = ""; + setTimeout (function () { + Display._animationState = AnimationState.NoAnimation; + Display.hideAlertText(); + }, settings.timeout * 1000); + } + }, + /** + * Reset styling and hide the alert text after displaying the animation + */ + hideAlertText: function () { + var alertText = $('#alert')[0]; + alertText.style.animation = ""; + alertText.classList = ""; + alertText.style.visibility = "hidden"; + alertText.style.color = "rgb(255, 255, 255)"; + alertText.style.fontSize = "40pt"; + Display._animationState = AnimationState.NoAnimation; + Display.hideAlertBackground(); }, /** * Display the next alert in the queue */ - getNextAlert: function () { + displayNextAlert: function () { if (Display._alerts.length > 0) { var alertObject = JSON.parse(this._alerts.shift()); this._alertState = AlertState.DisplayingFromQueue; @@ -516,55 +554,7 @@ var Display = { else { return null; } - }, - /** - * Reset the styling and animation state of the alert text after the scrolling animation - */ - textAnimationEnd: function () { - var alertText = $('#alert')[0]; - alertText.style.animation = ""; - alertText.style.visibility = "hidden"; - Display._animationState = AnimationState.NoAnimation; - Display.doExitTransition(); - }, - /** - * Sets the alert text styles correctly after the entrance transition has ended. - * @param {json} settings object - The settings to use for the animation - */ - alertEntranceTransitionEnd: function (settings) { - var alertText = $("#alert")[0]; - if (settings.scroll) { - // alertText.style.visibility = "visible"; - var animationSettings = "alert-scrolling-text " + settings.timeout + - "s linear 0s " + settings.repeat + " normal"; - console.debug("Visibility: " + alertText.style.visibility); - alertText.style.animation = animationSettings; - console.debug("Animation: " + animationSettings); - Display._animationState = AnimationState.ScrollingText; - } - else { - Display._animationState = AnimationState.NonScrollingText; - alertText.style.animation = ""; - setTimeout (function () { - // alertText.style.visibility = "visible"; - Display._animationState = AnimationState.NoAnimation; - Display.doExitTransition(); - }, settings.timeout * 1000); - } - alertText.style.visibility = "visible"; - Display._transitionState = TransitionState.NoTransition - }, - /** - * Resets the alert styles after the alert has been shown. - */ - alertExitTransitionEnd: function () { - var alertText = $("#alert")[0]; - var alertBackground = $("#alert-background")[0]; - Display._transitionState = TransitionState.NoTransition; - alertText.style.visibility = "hidden"; - alertBackground.classList = ""; - alertBackground.classList.add("normal"); - }, + }, /** * Add a slide. If the slide exists but the HTML is different, update the slide. * @param {string} verse - The verse number, e.g. "v1" diff --git a/openlp/plugins/alerts/lib/alertstab.py b/openlp/plugins/alerts/lib/alertstab.py index a359c736f..7a33c5570 100644 --- a/openlp/plugins/alerts/lib/alertstab.py +++ b/openlp/plugins/alerts/lib/alertstab.py @@ -205,6 +205,7 @@ class AlertsTab(SettingsTab): self.font_color_button.color = self.font_color self.background_color_button.color = self.background_color self.repeat_spin_box.setValue(self.repeat) + self.repeat_spin_box.setEnabled(self.scroll) self.vertical_combo_box.setCurrentIndex(self.location) self.scroll_check_box.setChecked(self.scroll) font = QtGui.QFont() diff --git a/tests/js/test_display.js b/tests/js/test_display.js index d1e206d24..67570060b 100644 --- a/tests/js/test_display.js +++ b/tests/js/test_display.js @@ -154,7 +154,7 @@ describe("The Display object", function () { }); describe("Display.alert", function () { - var alertBackground, alert, settings,_alertState; + var alertBackground, alert, settings; beforeEach(function () { document.body.innerHTML = ""; @@ -190,16 +190,23 @@ describe("Display.alert", function () { expect(Display._alerts.length).toEqual(1); expect(Display._alerts[0]).toEqual(queuedAlert); }); + + it("should set the alert settings correctly", function() { + Display.alert("Testing settings", settings); + + console.debug("Settings", JSON.parse(settings)); + expect(Display._alertSettings).toEqual(JSON.parse(settings)); + }); }); -describe("Display.doEntranceTransition", function () { +describe("Display.showAlertBackground", function () { - var alertBackground, alertText, css, settings, style; + var alertBackground, css, settings, style; beforeEach(function () { document.body.innerHTML = ""; style = document.createElement("style"); style.type = "text/css"; - css = '.normal { position: absolute; margin: 0; padding: 0; left: 0; z-index: 10; \ + css = '.bg-default { position: absolute; margin: 0; padding: 0; left: 0; z-index: 10; \ width: 100%; height: 0%; vertical-align: middle; overflow: hidden; visibility:hidden; \ }'; settings = { @@ -211,27 +218,21 @@ describe("Display.doEntranceTransition", function () { document.head.appendChild(style); alertBackground = document.createElement("div"); alertBackground.setAttribute("id", "alert-background"); - alertBackground.setAttribute("class", "normal"); - document.body.appendChild(alertBackground); - alertText = document.createElement("p"); - alertText.setAttribute("id","alert"); - alertBackground.appendChild(alertText); + alertBackground.setAttribute("class", "bg-default"); + document.body.appendChild(alertBackground); Display._alertState = AlertState.NotDisplaying; }); it("should set the correct transition state", function () { - Display.doEntranceTransition(settings); + Display.showAlertBackground(settings); expect(Display._transitionState).toEqual(TransitionState.EntranceTransition); }) - it("should apply the styles correctly when doEntranceTransition is called", function (done) { - Display.doEntranceTransition(settings); - expect(alertBackground.className).toBe("normal bottom"); + it("should apply the styles correctly when showAlertBackground is called", function (done) { + Display.showAlertBackground(settings); + expect(alertBackground.className).toBe("bg-default bottom"); - setTimeout(function () { - expect(alertText.style.fontFamily).toEqual(settings.font_face); - expect(alertText.style.color).toEqual(settings.font_color); - expect(alertText.style.fontSize).toEqual(settings.font_size + "pt"); + setTimeout(function () { expect(alertBackground.style.backgroundColor).toEqual(settings.background_color); expect(alertBackground.style.height).toEqual("25%"); expect(alertBackground.style.transition).toEqual("1s linear"); @@ -240,28 +241,28 @@ describe("Display.doEntranceTransition", function () { }, 50); }); - it("should set the correct class for the alert when location is top of the page", function () { + it("should set the correct class when location is top of the page", function () { settings.location = 0; - Display.doEntranceTransition(settings); + Display.showAlertBackground(settings); - expect(alertBackground.className).toEqual("normal top"); + expect(alertBackground.className).toEqual("bg-default top"); }); - it("should set the correct class for the alert when location is middle of the page", function () { + it("should set the correct class when location is middle of the page", function () { settings.location = 1; - Display.doEntranceTransition(settings); + Display.showAlertBackground(settings); - expect(alertBackground.className).toEqual("normal middle"); + expect(alertBackground.className).toEqual("bg-default middle"); }); - it("should set the correct class for the alert when location is bottom of the page", function () { - Display.doEntranceTransition(settings); + it("should set the correct class when location is bottom of the page", function () { + Display.showAlertBackground(settings); - expect(alertBackground.className).toEqual("normal bottom"); + expect(alertBackground.className).toEqual("bg-default bottom"); }); }); -describe("Display.doExitTransition", function () { +describe("Display.hideAlertBackground", function () { var alertBackground; beforeEach(function () { @@ -272,36 +273,29 @@ describe("Display.doExitTransition", function () { Display._alerts = []; }); - it("should set the styles correctly when the doExitTransition method is called", function () { - Display.doExitTransition(); + it("should set the styles correctly when the hideAlertBackground method is called", function () { + Display.hideAlertBackground(); expect(alertBackground.style.height).toEqual('0%'); expect(alertBackground.style.transition).toEqual("1s linear"); }); - it("should set the correct states when doExitTransition is called", function () { - Display.doExitTransition(); + it("should set the correct states when hideAlertBackground is called", function () { + Display.hideAlertBackground(); expect(Display._alertState).toEqual(AlertState.NotDisplaying); expect(Display._transitionState).toEqual(TransitionState.ExitTransition); }); - - it("should call the getNextAlert method to get the next alert on the queue", function () { - spyOn(Display,"getNextAlert"); - Display.doExitTransition(); - - expect(Display.getNextAlert).toHaveBeenCalled(); - }); }); -describe("Display.getNextAlert", function () { - Display.getNextAlert(); +describe("Display.displayNextAlert", function () { + Display.displayNextAlert(); it("should return null if there are no alerts in the queue", function () { Display._alerts = []; - Display.getNextAlert(); + Display.displayNextAlert(); - expect(Display.getNextAlert()).toBeNull(); + expect(Display.displayNextAlert()).toBeNull(); }); it("should call the alert function correctly if there is an alert in the queue", function () { @@ -313,14 +307,14 @@ describe("Display.getNextAlert", function () { var alertObject = {text: "Queued Alert", settings: settings}; Display._alerts.push(JSON.stringify(alertObject)); spyOn(Display, "alert"); - Display.getNextAlert(); + Display.displayNextAlert(); expect(Display.alert).toHaveBeenCalled(); expect(Display.alert).toHaveBeenCalledWith("Queued Alert",alertObject.settings); }); }); -describe("Display.textAnimationEnd", function() { +describe("Display.hideAlertText", function() { var alertBackground, alertText; beforeEach(function () { document.body.innerHTML = ""; @@ -330,98 +324,96 @@ describe("Display.textAnimationEnd", function() { alertText = document.createElement("p"); alertText.setAttribute("id", "alert"); alertText.style.visibility = "visible"; - alertText.style.animation = "alert-scrolling-text 5s linear 0s 1 normal"; + alertText.style.animation = "alert-scrolling-text 5s linear 0s 1 bg-default"; alertBackground.appendChild(alertText); Display._animationState = AnimationState.ScrollingText; }); it("should reset the text styles and animation state after the text has scrolled", function() { - Display.textAnimationEnd(); + Display.hideAlertText(); expect(alertText.style.animation).toEqual(""); expect(alertText.style.visibility).toEqual("hidden"); + expect(alertText.style.color).toEqual("rgb(255, 255, 255)"); + expect(alertText.style.fontSize).toEqual("40pt"); expect(Display._animationState).toEqual(AnimationState.NoAnimation); }); - it("should call the doExitTranstion method", function() { - spyOn(Display, "doExitTransition"); - Display.textAnimationEnd(); + it("should call the alert background method", function() { + spyOn(Display, "hideAlertBackground"); + Display.hideAlertText(); - expect(Display.doExitTransition).toHaveBeenCalled(); + expect(Display.hideAlertBackground).toHaveBeenCalled(); }); }); -describe("Display.alertEntranceTransitionEnd", function () { - var alertBackground, alertText; +describe("Display.showAlertText", function () { + var alertText, settings; beforeEach(function () { - document.body.innerHTML = ""; - alertBackground = document.createElement("div"); - alertBackground.setAttribute("id", "alert-background"); - alertBackground.setAttribute("class", "normal"); - document.body.appendChild(alertBackground); + document.body.innerHTML = ""; alertText = document.createElement("p"); alertText.setAttribute("id","alert"); - alertBackground.appendChild(alertText); - }); - - it("should set the correct styles on entrance transition (with scroll)", function () { - var settings = { + document.body.appendChild(alertText); + settings = { "location": 2, "font_face": "Tahoma", "font_size": 40, "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)", - "timeout": 5, "repeat": 1, "scroll": true - }; + "timeout": 0.01, "repeat": 1, "scroll": true + }; Display._transitionState = TransitionState.EntranceTransition; - Display.alertEntranceTransitionEnd(settings); + }); + + it("should set the correct styles on the text", function() { + Display.showAlertText(settings); expect(alertText.style.visibility).toEqual("visible"); - expect(alertText.style.animation).toEqual("alert-scrolling-text 5s linear 0s 1 normal"); - expect(Display._animationState).toEqual(AnimationState.ScrollingText); - expect(Display._transitionState).toEqual(TransitionState.NoTransition); + expect(alertText.style.color).toEqual("rgb(255, 255, 255)"); + expect(alertText.style.fontFamily).toEqual("Tahoma"); + expect(alertText.style.fontSize).toEqual("40pt"); + }); + + it("should set the correct animation when text is set to scroll)", function () { + Display.showAlertText(settings); + + expect(alertText.style.animation).toEqual("alert-scrolling-text " + settings.timeout + "s linear 0s 1 normal"); + expect(Display._animationState).toEqual(AnimationState.ScrollingText); }); it("should set the correct styles on entrance transition (without scroll)", function (done) { - - var settings = { - "location": 2, "font_face": "Tahoma", "font_size": 40, - "font_color": "rgb(255, 255, 255)", "scroll": false, "repeat": 1, - "timeout": 0.01, "background_color": "rgb(102, 0, 0)" - }; + settings.scroll = false; Display._transitionState = TransitionState.EntranceTransition; - spyOn(Display, "doExitTransition"); - Display.alertEntranceTransitionEnd(settings); + spyOn(Display, "hideAlertBackground"); + Display.showAlertText(settings); expect(alertText.style.visibility).toEqual("visible"); expect(alertText.style.animation).toEqual(""); expect(Display._animationState).toEqual(AnimationState.NonScrollingText); - expect(Display._transitionState).toEqual(TransitionState.NoTransition); - setTimeout (function () { + setTimeout (function () { + expect(alertText.className).toEqual("no-scroll"); expect(Display._animationState).toEqual(AnimationState.NoAnimation); - expect(Display.doExitTransition).toHaveBeenCalled(); + expect(Display.hideAlertBackground).toHaveBeenCalled(); done(); }, settings.timeout * 1000); }); }); -describe("Display.alertExitTransitionEnd", function () { - var alertBackground, alertText; +describe("Display.hideAlertBackground", function () { + var alertBackground; beforeEach( function() { document.body.innerHTML = ""; alertBackground = document.createElement("div"); alertBackground.setAttribute("id", "alert-background"); - alertBackground.setAttribute("class", "normal"); + alertBackground.setAttribute("class", "bg-default"); document.body.appendChild(alertBackground); - alertText = document.createElement("p"); - alertText.setAttribute("id","alert"); - alertBackground.appendChild(alertText); }); - - it("should set the styles to default on exit transition", function() { - Display.alertExitTransitionEnd(); - - expect(Display._transitionState).toEqual(TransitionState.NoTransition); - expect(alertText.style.visibility).toEqual("hidden"); - expect(alertBackground.className).toEqual("normal"); + it("reset the background to default once an aletr has been displayed", function() { + spyOn(Display, "displayNextAlert"); + Display.hideAlertBackground(); + + expect(Display._transitionState).toEqual(TransitionState.ExitTransition); + expect(Display._alertState).toEqual(AlertState.NotDisplaying); + expect(alertBackground.style.height).toEqual("0%"); + expect(alertBackground.className).toEqual("bg-default"); }); });