diff --git a/openlp/core/display/html/display.css b/openlp/core/display/html/display.css index 02c4641fa..0e3d0dfa3 100644 --- a/openlp/core/display/html/display.css +++ b/openlp/core/display/html/display.css @@ -19,51 +19,65 @@ left: 0; z-index: 11; width: 100%; - height: 0%; - min-height: 0%; - overflow: hidden; + height: 0; + min-height: 0; + overflow: hidden; + transform: translate(0,0); + transition: min-height 1s ease-out .5s; display: flex; - flex-direction: row; + flex-direction: row; + align-items: center; + align-content: center; +} + +.show-bg { + /* height: auto; */ + min-height: 25%; + transition: min-height 1s ease-in .5s; +} + +.middle { align-items: center; } -.bg-default.show { - height: auto; - min-height: 25%; +.alert-container { + position: absolute; + display: flex; + flex-direction: row; + height: 100vh; + width: 100vw; } -.bg-default.hide { - height: 0; - min-height: 0; +.top { + align-items: flex-start; } -.bg-default.middle { - top: 50%; - left: 50%; - margin-right: -50%; - transform: translate(-50%, -50%); - bottom: initial; +.bottom { + align-items: flex-end; } -.bg-default.top { - top: 0; - bottom: initial; -} - -.bg-default.bottom { - top: initial; - bottom: 0; -} - -/* ALERT BACKGROUND STYLING */ -#alert { - z-index: 12; - position: relative; - top: 50%; - transform: translateY(-50%); +/* ALERT TEXT STYLING */ +#alert { + z-index: 100; overflow: visible; white-space: nowrap; color: #ffffff; + font-size: 40pt; + padding: 0; + margin: 0; opacity: 0; - transform: translateX(110%); -} \ No newline at end of file + transform: translateX(120%); + transition: opacity .5s linear; +} + +#alert.hide-text { + opacity: 0; +} + +#alert.show-text { + transform: none; + transition: none; + animation: none; + padding: auto 5px; + opacity: 1; +} diff --git a/openlp/core/display/html/display.html b/openlp/core/display/html/display.html index ff4ec4ebb..2367b6fd2 100644 --- a/openlp/core/display/html/display.html +++ b/openlp/core/display/html/display.html @@ -34,11 +34,13 @@ +
+

Testing alerts

+
-
-

Testing alerts

+
-
+ diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js index 61edb71cc..da55cb98c 100644 --- a/openlp/core/display/html/display.js +++ b/openlp/core/display/html/display.js @@ -437,7 +437,7 @@ var Display = { var settings = JSON.parse(alert_settings); this._alertSettings = settings; Display.setAlertText(text); - + Display.setAlertLocation(settings.location); if (settings.scroll === true) { Display.setAlertKeyframes(alertText.scrollWidth); } @@ -446,18 +446,10 @@ var Display = { Display._alertState = AlertState.Displaying; } - alertBackground.addEventListener('transitionend', function(e) { - e.stopPropagation(); - console.debug("The transition has ended"); - Display.alertTransitionEndEvent(); - }); - alertText.addEventListener('animationend', function(e) { - e.stopPropagation(); - console.debug("The animation has ended"); - Display.alertAnimationEndEvent(); - }); + alertBackground.addEventListener('transitionend', Display.alertTransitionEndEvent, false); + alertText.addEventListener('animationend', Display.alertAnimationEndEvent, false); - Display.showAlertBackground(settings); + Display.showAlertBackground(settings.background_color); }, /** * Add an alert to the alert queue @@ -494,43 +486,38 @@ var Display = { /** * The alertTransitionEndEvent called after a transition has ended */ - alertTransitionEndEvent: function () { + alertTransitionEndEvent: function (e) { + e.stopPropagation(); + console.debug("Transition end event reached"); if (Display._transitionState === TransitionState.EntranceTransition) { Display._transitionState = TransitionState.NoTransition; Display.showAlertText(Display._alertSettings); } else if (Display._transitionState === TransitionState.ExitTransition) { Display._transitionState = TransitionState.NoTransition; - setTimeout(function () { + Display.removeAlertLocation(Display._alertSettings.location); + Display.clearAlertSettings(); + setTimeout(function () { Display.showNextAlert(); }, AlertDelay.OnePointFiveSeconds); } }, /** - * The alertAnimationEndEvent called after a animation has ended + * The alertAnimationEndEvent called after an animation has ended */ - alertAnimationEndEvent: function () { + alertAnimationEndEvent: function (e) { + e.stopPropagation(); Display.hideAlertText(); }, /** * Start background entrance transition for display of alert - * @param {string} JSON object - JSON object containing the alert settings + * @param {string} hex_color - The background color of the alert */ - showAlertBackground: function (settings) { - var alertBackground = $("#alert-background")[0]; - var transitionSetting = "min-height 1s linear"; - - Display.setAlertLocation(settings.location); - - alertBackground.style.backgroundColor = settings.background_color; - - // Wait for styles to be set first before starting transition - setTimeout( function() { - alertBackground.style.transition = transitionSetting; - alertBackground.classList.add("show"); - alertBackground.classList.remove("hide"); - }, AlertDelay.FiftyMilliseconds); + showAlertBackground: function (bg_color) { + var alertBackground = $("#alert-background")[0]; + alertBackground.classList.add("show-bg"); + alertBackground.style.backgroundColor = bg_color; this._transitionState = TransitionState.EntranceTransition; }, /** @@ -538,38 +525,59 @@ var Display = { * @param {int} location - Integer number with the location of the alert on screen */ setAlertLocation: function (location) { - var alertBackground = $("#alert-background")[0]; + var alertContainer = $(".alert-container")[0]; switch (location) { case AlertLocation.Top: - alertBackground.classList.add("top"); + alertContainer.classList.add("top"); break; case AlertLocation.Middle: - alertBackground.classList.add("middle"); + alertContainer.classList.add("middle"); break; case AlertLocation.Bottom: default: - alertBackground.classList.add("bottom"); + alertContainer.classList.add("bottom"); break; } + console.debug("The classname set location is: " + alertContainer.className); + }, + /** + * Remove the location class set after displaying the alert + * @param {int} location - Integer number with the location of the alert on screen + */ + removeAlertLocation: function (location) { + var alertContainer = $(".alert-container")[0]; + console.debug("The value of location for removal is: " + location); + + switch (location) { + case AlertLocation.Top: + alertContainer.classList.remove("top"); + break; + case AlertLocation.Middle: + alertContainer.classList.remove("middle"); + break; + case AlertLocation.Bottom: + default: + alertContainer.classList.remove("bottom"); + break; + } + console.debug("The classname after removal is: " + alertContainer.className); }, /** * Hide the alert background after the alert has been shown */ hideAlertBackground: function () { - var alertBackground = $("#alert-background")[0]; - alertBackground.style.transition = "min-height 1s linear"; - alertBackground.classList.remove("show"); - alertBackground.classList.add("hide"); + var alertBackground = $("#alert-background")[0]; + alertBackground.classList.remove("show-bg"); this._transitionState = TransitionState.ExitTransition; 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]; + var alertText = $("#alert")[0]; alertText.style.opacity = 1; alertText.style.color = settings.font_color; alertText.style.fontFamily = settings.font_face; @@ -582,11 +590,12 @@ var Display = { Display._animationState = AnimationState.ScrollingText; } else { - Display._animationState = AnimationState.NonScrollingText; - alertText.style.animation = ""; - alertText.classList.add("no-scroll"); + Display._animationState = AnimationState.NonScrollingText; + alertText.classList.add("show-text"); setTimeout (function () { - Display._animationState = AnimationState.NoAnimation; + Display._animationState = AnimationState.NoAnimation; + alertText.classList.add("hide-text"); + alertText.classList.remove("show-text"); Display.hideAlertText(); }, settings.timeout * AlertDelay.OneSecond); } @@ -596,12 +605,8 @@ var Display = { */ hideAlertText: function () { var alertText = $('#alert')[0]; - alertText.style.animation = ""; - alertText.classList = ""; - alertText.style.opacity = 0; - alertText.style.color = "rgb(255, 255, 255)"; - alertText.style.fontSize = "40pt"; - Display._animationState = AnimationState.NoAnimation; + Display._animationState = AnimationState.NoAnimation; + alertText.classList.add("hide-text"); Display.hideAlertBackground(); Display.resetAlertKeyframes(); }, @@ -625,6 +630,12 @@ var Display = { var keyframeStyle = document.getElementById('keyframeStyles'); keyframeStyle.innerHTML = ""; }, + /** + * Clears the alert settings after displaying an alert + */ + clearAlertSettings: function () { + this._alertSettings = {}; + }, /** * 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/tests/js/test_display.js b/tests/js/test_display.js index 5ea977f59..4d919249f 100644 --- a/tests/js/test_display.js +++ b/tests/js/test_display.js @@ -204,43 +204,26 @@ describe("Display.alert", function () { describe("Display.showAlertBackground", function () { - var alertBackground, css, settings, style; + var alertBackground, bg_color; beforeEach(function () { - document.body.innerHTML = ""; - style = document.createElement("style"); - style.type = "text/css"; - 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 = { - "location": 2, "font_face": "Tahoma", "font_size": 40, - "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)", - "timeout": 5, "repeat": 1, "scrolling_text": true - }; - style.innerHTML = css; - document.head.appendChild(style); + document.body.innerHTML = ""; + bg_color = "rgb(102, 0, 0)"; alertBackground = document.createElement("div"); alertBackground.setAttribute("id", "alert-background"); alertBackground.setAttribute("class", "bg-default"); - document.body.appendChild(alertBackground); - Display._alertState = AlertState.NotDisplaying; + document.body.appendChild(alertBackground); }); it("should set the correct transition state", function () { - Display.showAlertBackground(settings); + Display.showAlertBackground(bg_color); expect(Display._transitionState).toEqual(TransitionState.EntranceTransition); }); - 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(alertBackground.style.backgroundColor).toEqual(settings.background_color); - expect(alertBackground.classList.contains("show")).toBe(true); - expect(alertBackground.style.transition).toEqual("min-height 1s linear"); - done(); - }, 50); + it("should apply the styles correctly when showAlertBackground is called", function () { + Display.showAlertBackground(bg_color); + + expect(alertBackground.style.backgroundColor).toEqual(bg_color); + expect(alertBackground.className).toEqual("bg-default show"); }); }); @@ -249,18 +232,17 @@ describe("Display.hideAlertBackground", function () { beforeEach( function() { document.body.innerHTML = ""; alertBackground = document.createElement("div"); - alertBackground.setAttribute("id", "alert-background"); + alertBackground.setAttribute("id", "alert-background"); + alertBackground.setAttribute("class", "bg-default show"); document.body.appendChild(alertBackground); }); - it("reset the background to default once an alert has been displayed", function() { - //spyOn(Display, "showNextAlert"); + it("reset the background to default once an alert has been displayed", function() { Display.hideAlertBackground(); expect(Display._transitionState).toEqual(TransitionState.ExitTransition); - expect(Display._alertState).toEqual(AlertState.NotDisplaying); - expect(alertBackground.style.transition).toEqual("min-height 1s linear"); - expect(alertBackground.className).toEqual("hide"); + expect(Display._alertState).toEqual(AlertState.NotDisplaying); + expect(alertBackground.className).toEqual("bg-default"); }); }); @@ -306,6 +288,36 @@ describe("Display.setAlertLocation", function() { }); }); +describe("Display.removeAlertLocation", function () { + beforeEach(function() { + document.body.innerHTML = ""; + alertBackground = document.createElement("p"); + alertBackground.setAttribute("id", "alert-background"); + alertBackground.setAttribute("class", "bg-default"); + document.body.appendChild(alertBackground); + }); + it("should remove the correct class when location is top of the page", function () { + alertBackground.classList.add("top"); + Display.removeAlertLocation(0); + + expect(alertBackground.className).toEqual("bg-default"); + }); + + it("should remove the correct class when location is middle of the page", function () { + alertBackground.classList.add("middle"); + Display.removeAlertLocation(1); + + expect(alertBackground.className).toEqual("bg-default"); + }); + + it("should remove the correct class when location is bottom of the page", function () { + alertBackground.classList.add("bottom"); + Display.removeAlertLocation(2); + + expect(alertBackground.className).toEqual("bg-default"); + }); +}); + describe("Display.showAlertText", function () { var alertText, settings; beforeEach(function () { @@ -510,6 +522,16 @@ describe("Display.resetAlertKeyframes", function () { }); }); +describe("Display.clearAlertSettings", function () { + it("should clear the alert settings once an alert has been displayed", function () { + var fake_settings = {test: "fake_settings"}; + Display._alertSettings = fake_settings; + Display.clearAlertSettings(); + + expect(Display._alertSettings).toEqual({}); + }); +}); + describe("Display.addTextSlide", function () { beforeEach(function() { document.body.innerHTML = "";