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

Refactored alert tests and optimized alert code plus fixed spacing

Browse Source
This commit is contained in:
Nico Opiyo 2019-02-12 13:08:25 +03:00
parent 03bfe63135
commit fe431b2b2c
3 changed files with 163 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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"
};
/**
*
@ -423,27 +431,35 @@ var Display = {
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 () {
console.debug("Noticed an animation has ended. The animation state is: ", Display._animationState);
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);
}
@ -465,23 +481,24 @@ var Display = {
var alertBackground = $("#alert-background")[0];
switch (location) {
case "0":
alertBackground.style.top = '0';
alertBackground.style.transition = "2s linear";
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";
@ -497,10 +514,11 @@ var Display = {
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"){
}
else if (location == VerticalAlign.Middle) {
alertBackground.classList.add("middle-exit-animation");
alertBackground.style.height = "0%";
Display._animationState = AnimationState.FadeOutAnimation;

77
tests/js/test_display.js
View File

@ -178,7 +178,6 @@ describe("Display.alert",function(){
it("should set the correct alert position", function () {
expect(Display.alert("Alert Location Test","2")).toEqual("2");
});
});
describe("The doEntranceTransition", function () {
@ -194,54 +193,30 @@ describe("The doEntranceTransition", function(){
alertBackground.style.height = "0%";
});
it("should move the alert background to the top of the page", function(){
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(){
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);
});
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%");
expect(alertBackground.style.visibility).toEqual("visible");
});
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(){
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%");
});
it("should make the alert background visible", function(){
Display.doEntranceTransition();
expect(alertBackground.style.visibility).toEqual("visible");
});
});
@ -254,39 +229,25 @@ describe("The doExitTransition", function(){
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(){
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%');
});
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(){
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");
});
});