From fe431b2b2c2f923e21dde7c654a8d95c30183ecf Mon Sep 17 00:00:00 2001 From: Nico Opiyo Date: Tue, 12 Feb 2019 13:08:25 +0300 Subject: [PATCH] Refactored alert tests and optimized alert code plus fixed spacing --- openlp/core/display/html/display.html | 86 ++++++------ openlp/core/display/html/display.js | 74 ++++++---- tests/js/test_display.js | 187 ++++++++++---------------- 3 files changed, 163 insertions(+), 184 deletions(-) diff --git a/openlp/core/display/html/display.html b/openlp/core/display/html/display.html index 876a85667..d6c9fffec 100644 --- a/openlp/core/display/html/display.html +++ b/openlp/core/display/html/display.html @@ -27,74 +27,74 @@ /* Animation key frames for horizontal scrolling of alert */ @keyframes alert-scrolling-text { - from { margin-left: 100%; } - to { margin-left: -300% } + from { margin-left: 100%; } + to { margin-left: -300% } } /* Middle fade-in alert animation */ @keyframes middle-fade-in { - from { opacity: 0;} - to { opacity: 1;} + from { opacity: 0;} + to { opacity: 1;} } /* Middle fade-out alert animation */ @keyframes middle-fade-out { - from { opacity: 1;} - to { opacity: 0;} + from { opacity: 1;} + to { opacity: 0;} } /* Fade in when alert location is in the middle */ .middle-entrance-animation { - animation-duration: 2s; - animation-timing-function: linear; - animation-name: middle-fade-in; + animation-duration: 2s; + animation-timing-function: linear; + animation-name: middle-fade-in; } /* Fade out when alert location is in the middle */ .middle-exit-animation { - animation-duration: 2s; - animation-timing-function: linear; - animation-name: middle-fade-out; + animation-duration: 2s; + animation-timing-function: linear; + animation-name: middle-fade-out; } .horizontal-scroll-animation { - animation-duration: 10s; - animation-iteration-count: 1; - animation-timing-function: linear; - animation-name: alert-scrolling-text; + animation-duration: 10s; + animation-iteration-count: 1; + animation-timing-function: linear; + animation-name: alert-scrolling-text; } /* ALERT STYLING */ #alert-background { - position: absolute; - margin: 0; - padding: 0; - left: 0px; - right: 0px; - z-index: 10; - width: 100%; - height: 0%; - vertical-align: middle; - color: #ffffff; - background-color: #660000; - overflow: hidden; - visibility:hidden; + position: absolute; + margin: 0; + padding: 0; + left: 0px; + right: 0px; + z-index: 10; + width: 100%; + height: 0%; + vertical-align: middle; + color: #ffffff; + background-color: #660000; + overflow: hidden; + visibility:hidden; } #alert { - position: relative; - top: 50%; - transform: translateY(-50%); - margin-top: 0%; - margin-right: 0%; - margin-left: 100%; - margin-bottom: 0%; - z-index: 11; - overflow: visible; - white-space: nowrap; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 100pt; - color: #ffffff; - visibility: hidden; + position: relative; + top: 50%; + transform: translateY(-50%); + margin-top: 0%; + margin-right: 0%; + margin-left: 100%; + margin-bottom: 0%; + z-index: 11; + overflow: visible; + white-space: nowrap; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 100pt; + color: #ffffff; + visibility: hidden; } diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js index 37fe5c616..226730a0d 100644 --- a/openlp/core/display/html/display.js +++ b/openlp/core/display/html/display.js @@ -38,9 +38,9 @@ var HorizontalAlign = { * Vertical alignment enumeration */ var VerticalAlign = { - Top: "top", - Middle: "middle", - Bottom: "bottom" + Top: "0", + Middle: "1", + Bottom: "2" }; /** @@ -71,6 +71,14 @@ var AnimationState = { FadeInAnimation: "fadeInAnimation", FadeOutAnimation: "fadeOutAnimation" }; +/** + * Alert location enumeration + */ +var AlertLocation = { + Top: "0", + Middle: "1", + Bottom: "2" +}; /** * @@ -406,7 +414,7 @@ var Display = { alert: function (text, location) { console.debug(" alert text: " + text + ", location: " + location); - if(text == ""){ + if (text == "") { return null; } @@ -418,32 +426,40 @@ var Display = { /* Bring in the transition background */ Display._transitionState = Display.doEntranceTransition(location); - alertBackground.addEventListener('transitionend', function(e){ + alertBackground.addEventListener('transitionend', function (e) { e.stopPropagation(); - if(Display._transitionState == TransitionState.EntranceTransition){ + if (Display._transitionState == TransitionState.EntranceTransition) { alertText.style.visibility = "visible"; alertText.classList.add("horizontal-scroll-animation"); - }else if(Display._transitionState == TransitionState.ExitTransition){ + } + else if (Display._transitionState == TransitionState.ExitTransition) { Display._transitionState = TransitionState.NoTransition; alertBackground.style.visibility = "hidden"; + alertText.style.visibility = "hidden"; + alertBackground.style.top = ""; + alertBackground.style.bottom = ""; + alertBackground.style.height = ""; + alertBackground.style.transition = ""; alertBackground.classList.remove("middle-exit-animation"); } }); - alertBackground.addEventListener('animationend',function(){ + alertBackground.addEventListener('animationend', function () { - console.debug("Noticed an animation has ended. The animation state is: ", Display._animationState); - if(Display._animationState == AnimationState.FadeInAnimation){ + if (Display._animationState == AnimationState.FadeInAnimation) { alertText.style.visibility = "visible"; alertText.classList.add("horizontal-scroll-animation"); alertText.classList.remove("middle-entrance-animation"); Display._animationState = AnimationState.ScrollingAnimation; - }else if(Display._animationState == AnimationState.FadeOutAnimation){ + } + else if (Display._animationState == AnimationState.FadeOutAnimation) { alertBackground.style.visibility = "hidden"; alertBackground.classList.remove("middle-exit-animation"); Display._animationState = AnimationState.NoAnimation; - }else if(alertText.classList.contains("horizontal-scroll-animation")){ + } + else if (alertText.classList.contains("horizontal-scroll-animation")) { alertText.classList.remove("horizontal-scroll-animation"); + alertText.style.visibility = "hidden"; Display._animationState = AnimationState.NoAnimation; Display._transitionState = Display.doExitTransition(location); } @@ -461,27 +477,28 @@ var Display = { * Start background entrance transition for display of alert * @param {string} location - String showing the location of the alert on screen */ - doEntranceTransition: function (location){ + doEntranceTransition: function (location) { var alertBackground = $("#alert-background")[0]; - switch(location){ - case "0": - alertBackground.style.top = '0'; - alertBackground.style.transition = "2s linear"; + switch (location) { + case VerticalAlign.Top: + alertBackground.style.bottom = ''; + alertBackground.style.top = '0px'; alertBackground.style.height = "25%"; + alertBackground.style.transition = "2s linear"; break; - case "1": - alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2) - + 'px'; + case VerticalAlign.Middle: + alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px'; alertBackground.style.height = "25%"; alertBackground.classList.add("middle-entrance-animation"); Display._animationState = AnimationState.FadeInAnimation; break; - case "2": + case VerticalAlign.Bottom: default: - alertBackground.style.bottom = '0'; - alertBackground.style.transition= "2s linear"; + alertBackground.style.top = ''; + alertBackground.style.bottom = '0px'; alertBackground.style.height = "25%"; + alertBackground.style.transition= "2s linear"; break; } alertBackground.style.visibility = "visible"; @@ -493,16 +510,17 @@ 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(location){ + doExitTransition: function (location) { var alertBackground = $("#alert-background")[0]; - if(location == "0" || location == "2"){ + if (location == VerticalAlign.Top || location == VerticalAlign.Bottom) { alertBackground.style.height = "0%"; - alertBackground.style.transition = '2s linear'; - }else if(location == "1"){ + alertBackground.style.transition = '2s linear'; + } + else if (location == VerticalAlign.Middle) { alertBackground.classList.add("middle-exit-animation"); - alertBackground.style.height = "0%"; + alertBackground.style.height = "0%"; Display._animationState = AnimationState.FadeOutAnimation; } diff --git a/tests/js/test_display.js b/tests/js/test_display.js index e63f5606b..a83eef643 100644 --- a/tests/js/test_display.js +++ b/tests/js/test_display.js @@ -153,140 +153,101 @@ describe("The Display object", function () { }); -describe("Display.alert",function(){ - var alertBackground,alert; +describe("Display.alert", function () { + var alertBackground, alert; - beforeEach(function(){ - document.body.innerHTML = ""; - alertBackground = document.createElement("div"); - alertBackground.setAttribute("id", "alert-background"); - document.body.appendChild(alertBackground); - alert = document.createElement("p"); - alert.setAttribute("id","alert"); - alertBackground.appendChild(alert); - }); + beforeEach(function () { + document.body.innerHTML = ""; + alertBackground = document.createElement("div"); + alertBackground.setAttribute("id", "alert-background"); + document.body.appendChild(alertBackground); + alert = document.createElement("p"); + alert.setAttribute("id","alert"); + alertBackground.appendChild(alert); + }); - it("should return null if called without any text", function(){ + it("should return null if called without any text", function () { expect(Display.alert("","2")).toBeNull(); - }); + }); - it("should set correct alert text", function(){ + it("should set correct alert text", function () { Display.alert("OPEN-LP-3.0 Alert Test", "2"); expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test"); - }); + }); - it("should set the correct alert position", function(){ + it("should set the correct alert position", function () { expect(Display.alert("Alert Location Test","2")).toEqual("2"); - }); - + }); }); -describe("The doEntranceTransition", function(){ +describe("The doEntranceTransition", function () { - var alertBackground; + var alertBackground; - beforeEach(function(){ - document.body.innerHTML = ""; - alertBackground = document.createElement("div"); - alertBackground.setAttribute("id", "alert-background"); - document.body.appendChild(alertBackground); - alertBackground.style.top = '0px'; - alertBackground.style.height = "0%"; - }); + beforeEach(function() { + document.body.innerHTML = ""; + alertBackground = document.createElement("div"); + alertBackground.setAttribute("id", "alert-background"); + document.body.appendChild(alertBackground); + alertBackground.style.top = '0px'; + alertBackground.style.height = "0%"; + }); - it("should move the alert background to the top of the page", function(){ - Display.doEntranceTransition("0"); - expect(alertBackground.style.top).toEqual('0px'); - }); + it("should set the correct styles for the alert when location is top of the page", function () { + Display.doEntranceTransition("0"); + expect(alertBackground.style.bottom).toEqual(''); + expect(alertBackground.style.top).toEqual('0px'); + expect(alertBackground.style.transition).toEqual("2s linear"); + expect(alertBackground.style.height).toEqual("25%"); + expect(alertBackground.style.visibility).toEqual("visible"); + }); - it("should move the alert background to the middle of the page", function(){ - Display.doEntranceTransition("1"); - var middlePosition = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px'; - expect(alertBackground.style.top).toEqual(middlePosition); - }); + it("should set the correct styles for the alert when location is middle of the page", function () { + Display.doEntranceTransition("1"); + var middlePosition = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px'; + expect(alertBackground.style.top).toEqual(middlePosition); + expect(alertBackground.classList.contains("middle-entrance-animation")); + expect(alertBackground.style.height).toEqual("25%"); + expect(alertBackground.style.visibility).toEqual("visible"); + }); - it("should move the alert background to the bottom of the page", function(){ - Display.doEntranceTransition("2"); - expect(alertBackground.style.bottom).toEqual('0px'); - }); - - it("should have a transition set when position is set to top", function(){ - Display.doEntranceTransition("0"); - expect(alertBackground.style.transition).toEqual("2s linear"); - }); - - it("should have a transition set when position is set to bottom", function(){ - Display.doEntranceTransition("2"); - expect(alertBackground.style.transition).toEqual("2s linear"); - }); - - it("should have an animation class when position is set to middle", function(){ - Display.doEntranceTransition("1"); - expect(alertBackground.classList.contains("middle-entrance-animation")); - }); - - it("should have the height set to 25% when the position is top", function(){ - Display.doEntranceTransition("0"); - expect(alertBackground.style.height).toEqual("25%"); - }); - - it("should have the height set to 25% when the position is middle", function(){ - Display.doEntranceTransition("1"); - expect(alertBackground.style.height).toEqual("25%"); - }); - - it("should have the height set to 25% when the position is bottom", function(){ - Display.doEntranceTransition("2"); - expect(alertBackground.style.height).toEqual("25%"); - }); - - it("should make the alert background visible", function(){ - Display.doEntranceTransition(); - expect(alertBackground.style.visibility).toEqual("visible"); - }); + it("should set the correct styles for the alert when location is bottom of the page", function () { + Display.doEntranceTransition("2"); + expect(alertBackground.style.top).toEqual(''); + expect(alertBackground.style.bottom).toEqual('0px'); + expect(alertBackground.style.transition).toEqual("2s linear"); + expect(alertBackground.style.height).toEqual("25%"); + expect(alertBackground.style.visibility).toEqual("visible"); + }); }); -describe("The doExitTransition", function(){ - var alertBackground; +describe("The doExitTransition", function () { + var alertBackground; - beforeEach(function(){ - document.body.innerHTML = ""; - alertBackground = document.createElement("div"); - alertBackground.setAttribute("id", "alert-background"); - document.body.appendChild(alertBackground); + beforeEach(function () { + document.body.innerHTML = ""; + alertBackground = document.createElement("div"); + alertBackground.setAttribute("id", "alert-background"); + document.body.appendChild(alertBackground); + }); - }); + it("should remove the styles correctly when the location is the top of the page", function () { + Display.doExitTransition("0"); + expect(alertBackground.style.height).toEqual('0%'); + expect(alertBackground.style.transition).toEqual("2s linear"); + }); - it("should make the height of the alert zero when position is top", function(){ - Display.doExitTransition("0"); - expect(alertBackground.style.height).toEqual('0%'); - }); - - it("should make the height of the alert zero when position is bottom", function(){ - Display.doExitTransition("2"); - expect(alertBackground.style.height).toEqual('0%'); - }); - - it("should make the height of the alert zero when position is middle", function(){ - Display.doExitTransition("2"); - expect(alertBackground.style.height).toEqual('0%'); - }); - - it("should have a transition set when position is set to top", function(){ - Display.doExitTransition("0"); - expect(alertBackground.style.transition).toEqual("2s linear"); - }); - - it("should have a transition set when position is set to bottom", function(){ - Display.doExitTransition("2"); - expect(alertBackground.style.transition).toEqual("2s linear"); - }); - - it("should have an animation class when position is set to middle", function(){ - Display.doExitTransition("1"); - expect(alertBackground.classList.contains("middle-exit-animation")); - }); + it("should remove the styles correctly when the location is middle of the page", function () { + Display.doExitTransition("1"); + expect(alertBackground.style.height).toEqual('0%'); + expect(alertBackground.classList.contains("middle-exit-animation")); + }); +it("should remove the styles correctly when the location is the bottom of the page", function () { + Display.doExitTransition("2"); + expect(alertBackground.style.height).toEqual('0%'); + expect(alertBackground.style.transition).toEqual("2s linear"); +}); });