diff --git a/openlp/core/display/html/display.html b/openlp/core/display/html/display.html
index ccecd7788..876a85667 100644
--- a/openlp/core/display/html/display.html
+++ b/openlp/core/display/html/display.html
@@ -72,7 +72,7 @@
right: 0px;
z-index: 10;
width: 100%;
- height: 25%;
+ height: 0%;
vertical-align: middle;
color: #ffffff;
background-color: #660000;
@@ -82,7 +82,7 @@
#alert {
position: relative;
- top: 50%
+ top: 50%;
transform: translateY(-50%);
margin-top: 0%;
margin-right: 0%;
@@ -97,8 +97,6 @@
visibility: hidden;
}
-
-
diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index 4bc56fa48..37fe5c616 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -416,17 +416,14 @@ var Display = {
alertText.innerHTML = text;
/* Bring in the transition background */
- Display._transitionState = Display.alertEntranceTransition(location);
+ Display._transitionState = Display.doEntranceTransition(location);
alertBackground.addEventListener('transitionend', function(e){
e.stopPropagation();
- console.debug("Transition end event captured");
if(Display._transitionState == TransitionState.EntranceTransition){
- console.debug("Entrance Transition Condition");
alertText.style.visibility = "visible";
alertText.classList.add("horizontal-scroll-animation");
}else if(Display._transitionState == TransitionState.ExitTransition){
- console.debug("Exit Transition Condition");
Display._transitionState = TransitionState.NoTransition;
alertBackground.style.visibility = "hidden";
alertBackground.classList.remove("middle-exit-animation");
@@ -437,21 +434,18 @@ var Display = {
console.debug("Noticed an animation has ended. The animation state is: ", Display._animationState);
if(Display._animationState == AnimationState.FadeInAnimation){
- console.debug("Entrance Animation Condition");
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){
- console.debug("Exit Animation Condition");
alertBackground.style.visibility = "hidden";
alertBackground.classList.remove("middle-exit-animation");
Display._animationState = AnimationState.NoAnimation;
}else if(alertText.classList.contains("horizontal-scroll-animation")){
- console.debug("Scrolling Animation Ended");
alertText.classList.remove("horizontal-scroll-animation");
Display._animationState = AnimationState.NoAnimation;
- Display._transitionState = Display.alertExitTransition(location);
+ Display._transitionState = Display.doExitTransition(location);
}
});
@@ -460,35 +454,31 @@ var Display = {
* The implementation should show an alert.
* It should be able to handle receiving a new alert before a previous one is "finished", basically queueing it.
*/
- //return;
+ return location;
},
/**
* Start background entrance transition for display of alert
* @param {string} location - String showing the location of the alert on screen
*/
- alertEntranceTransition: function (location){
- console.debug("Alert Entrance Transition Method. The value of animation state is: " + Display._animationState);
+ doEntranceTransition: function (location){
var alertBackground = $("#alert-background")[0];
switch(location){
case "0":
- console.debug("Top Location Entrance Transition");
alertBackground.style.top = '0';
alertBackground.style.transition = "2s linear";
alertBackground.style.height = "25%";
break;
case "1":
- console.debug("Middle Location Entrance Animation");
- console.debug("The value of animation state is: " + Display._animationState);
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":
default:
- console.debug("Bottom Location Entrance Transition");
alertBackground.style.bottom = '0';
alertBackground.style.transition= "2s linear";
alertBackground.style.height = "25%";
@@ -503,25 +493,21 @@ var Display = {
* Start background exit transition once alert has been displayed
* @param {string} location - Integer showing the location of the alert on screen
*/
- alertExitTransition: function(location){
+ doExitTransition: function(location){
- console.debug("Alert Exit Transition");
var alertBackground = $("#alert-background")[0];
if(location == "0" || location == "2"){
- console.debug("Exit Transition for top or bottom");
alertBackground.style.height = "0%";
alertBackground.style.transition = '2s linear';
}else if(location == "1"){
- // alertBackground.style.opacity = 0;
- console.debug("Fade out Animation");
alertBackground.classList.add("middle-exit-animation");
+ alertBackground.style.height = "0%";
Display._animationState = AnimationState.FadeOutAnimation;
}
return TransitionState.ExitTransition;
},
-
/**
* Add a slides. 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 bbb7a75da..1caa8115b 100644
--- a/tests/js/test_display.js
+++ b/tests/js/test_display.js
@@ -151,40 +151,144 @@ describe("The Display object", function () {
expect(Display.alert).toBeDefined();
});
- it("should have a correctly functioning alert() method", function (){
- spyOn(Display,"alert");
- Display.alert("OPEN-LP-3.0 Alert Test", "2");
- expect(Display.alert).toHaveBeenCalledWith("OPEN-LP-3.0 Alert Test", "2");
- });
-
});
describe("Display.alert",function(){
+ var alertBackground,alert;
+
beforeEach(function(){
- var alertBackground = document.getElementById("alert-background");
- var alertText = document.getElementById("alert");
+ 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 if called without any text", function(){
- spyOn(Display, "alert");
- Display.alert("", "2");
- expect(Display.alert).toHaveBeenCalled();
+ it("should return null if called without any text", function(){
+ expect(Display.alert("","2")).toBeNull();
});
- it("should call alertEntranceTransition", function(){
- spyOn(Display,"alertEntranceTransition");
- Display.alertEntranceTransition("2");
- expect(Display.alertEntranceTransition).toHaveBeenCalledWith("2");
+ 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 call alertExitTransition", function(){
- spyOn(Display,"alertExitTransition");
- Display.alertExitTransition("2");
- expect(Display.alertExitTransition).toHaveBeenCalledWith("2");
+ it("should set the correct alert position", function(){
+ expect(Display.alert("Alert Location Test","2")).toEqual("2");
});
+
});
+describe("The doEntranceTransition", function(){
+ 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%";
+ });
+
+ it("should move the alert background to the top of the page", function(){
+ Display.doEntranceTransition("0");
+ expect(alertBackground.style.top).toEqual('0px');
+ });
+
+ 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 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");
+ });
+});
+
+describe("The startExitTransition", function(){
+ var alertBackground;
+
+ beforeEach(function(){
+ document.body.innerHTML = "";
+ alertBackground = document.createElement("div");
+ alertBackground.setAttribute("id", "alert-background");
+ document.body.appendChild(alertBackground);
+
+ });
+
+ 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"));
+ });
+
+
+});
describe("Display.addTextSlide", function () {