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

86
openlp/core/display/html/display.html
View File

@ -27,74 +27,74 @@
/* Animation key frames for horizontal scrolling of alert */ /* Animation key frames for horizontal scrolling of alert */
@keyframes alert-scrolling-text { @keyframes alert-scrolling-text {
from { margin-left: 100%; } from { margin-left: 100%; }
to { margin-left: -300% } to { margin-left: -300% }
} }
/* Middle fade-in alert animation */ /* Middle fade-in alert animation */
@keyframes middle-fade-in { @keyframes middle-fade-in {
from { opacity: 0;} from { opacity: 0;}
to { opacity: 1;} to { opacity: 1;}
} }
/* Middle fade-out alert animation */ /* Middle fade-out alert animation */
@keyframes middle-fade-out { @keyframes middle-fade-out {
from { opacity: 1;} from { opacity: 1;}
to { opacity: 0;} to { opacity: 0;}
} }
/* Fade in when alert location is in the middle */ /* Fade in when alert location is in the middle */
.middle-entrance-animation { .middle-entrance-animation {
animation-duration: 2s; animation-duration: 2s;
animation-timing-function: linear; animation-timing-function: linear;
animation-name: middle-fade-in; animation-name: middle-fade-in;
} }
/* Fade out when alert location is in the middle */ /* Fade out when alert location is in the middle */
.middle-exit-animation { .middle-exit-animation {
animation-duration: 2s; animation-duration: 2s;
animation-timing-function: linear; animation-timing-function: linear;
animation-name: middle-fade-out; animation-name: middle-fade-out;
} }
.horizontal-scroll-animation { .horizontal-scroll-animation {
animation-duration: 10s; animation-duration: 10s;
animation-iteration-count: 1; animation-iteration-count: 1;
animation-timing-function: linear; animation-timing-function: linear;
animation-name: alert-scrolling-text; animation-name: alert-scrolling-text;
} }
/* ALERT STYLING */ /* ALERT STYLING */
#alert-background { #alert-background {
position: absolute; position: absolute;
margin: 0; margin: 0;
padding: 0; padding: 0;
left: 0px; left: 0px;
right: 0px; right: 0px;
z-index: 10; z-index: 10;
width: 100%; width: 100%;
height: 0%; height: 0%;
vertical-align: middle; vertical-align: middle;
color: #ffffff; color: #ffffff;
background-color: #660000; background-color: #660000;
overflow: hidden; overflow: hidden;
visibility:hidden; visibility:hidden;
} }
#alert { #alert {
position: relative; position: relative;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
margin-top: 0%; margin-top: 0%;
margin-right: 0%; margin-right: 0%;
margin-left: 100%; margin-left: 100%;
margin-bottom: 0%; margin-bottom: 0%;
z-index: 11; z-index: 11;
overflow: visible; overflow: visible;
white-space: nowrap; white-space: nowrap;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 100pt; font-size: 100pt;
color: #ffffff; color: #ffffff;
visibility: hidden; visibility: hidden;
} }
</style> </style>

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

@ -38,9 +38,9 @@ var HorizontalAlign = {
* Vertical alignment enumeration * Vertical alignment enumeration
*/ */
var VerticalAlign = { var VerticalAlign = {
Top: "top", Top: "0",
Middle: "middle", Middle: "1",
Bottom: "bottom" Bottom: "2"
}; };
/** /**
@ -71,6 +71,14 @@ var AnimationState = {
FadeInAnimation: "fadeInAnimation", FadeInAnimation: "fadeInAnimation",
FadeOutAnimation: "fadeOutAnimation" FadeOutAnimation: "fadeOutAnimation"
}; };
/**
* Alert location enumeration
*/
var AlertLocation = {
Top: "0",
Middle: "1",
Bottom: "2"
};
/** /**
* *
@ -406,7 +414,7 @@ var Display = {
alert: function (text, location) { alert: function (text, location) {
console.debug(" alert text: " + text + ", location: " + location); console.debug(" alert text: " + text + ", location: " + location);
if(text == ""){ if (text == "") {
return null; return null;
} }
@ -418,32 +426,40 @@ var Display = {
/* Bring in the transition background */ /* Bring in the transition background */
Display._transitionState = Display.doEntranceTransition(location); Display._transitionState = Display.doEntranceTransition(location);
alertBackground.addEventListener('transitionend', function(e){ alertBackground.addEventListener('transitionend', function (e) {
e.stopPropagation(); e.stopPropagation();
if(Display._transitionState == TransitionState.EntranceTransition){ if (Display._transitionState == TransitionState.EntranceTransition) {
alertText.style.visibility = "visible"; alertText.style.visibility = "visible";
alertText.classList.add("horizontal-scroll-animation"); alertText.classList.add("horizontal-scroll-animation");
}else if(Display._transitionState == TransitionState.ExitTransition){ }
else if (Display._transitionState == TransitionState.ExitTransition) {
Display._transitionState = TransitionState.NoTransition; Display._transitionState = TransitionState.NoTransition;
alertBackground.style.visibility = "hidden"; 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.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.style.visibility = "visible";
alertText.classList.add("horizontal-scroll-animation"); alertText.classList.add("horizontal-scroll-animation");
alertText.classList.remove("middle-entrance-animation"); alertText.classList.remove("middle-entrance-animation");
Display._animationState = AnimationState.ScrollingAnimation; Display._animationState = AnimationState.ScrollingAnimation;
}else if(Display._animationState == AnimationState.FadeOutAnimation){ }
else if (Display._animationState == AnimationState.FadeOutAnimation) {
alertBackground.style.visibility = "hidden"; alertBackground.style.visibility = "hidden";
alertBackground.classList.remove("middle-exit-animation"); alertBackground.classList.remove("middle-exit-animation");
Display._animationState = AnimationState.NoAnimation; 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.classList.remove("horizontal-scroll-animation");
alertText.style.visibility = "hidden";
Display._animationState = AnimationState.NoAnimation; Display._animationState = AnimationState.NoAnimation;
Display._transitionState = Display.doExitTransition(location); Display._transitionState = Display.doExitTransition(location);
} }
@ -461,27 +477,28 @@ var Display = {
* Start background entrance transition for display of alert * Start background entrance transition for display of alert
* @param {string} location - String showing the location of the alert on screen * @param {string} location - String showing the location of the alert on screen
*/ */
doEntranceTransition: function (location){ doEntranceTransition: function (location) {
var alertBackground = $("#alert-background")[0]; var alertBackground = $("#alert-background")[0];
switch(location){ switch (location) {
case "0": case VerticalAlign.Top:
alertBackground.style.top = '0'; alertBackground.style.bottom = '';
alertBackground.style.transition = "2s linear"; alertBackground.style.top = '0px';
alertBackground.style.height = "25%"; alertBackground.style.height = "25%";
alertBackground.style.transition = "2s linear";
break; break;
case "1": case VerticalAlign.Middle:
alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2) alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
+ 'px';
alertBackground.style.height = "25%"; alertBackground.style.height = "25%";
alertBackground.classList.add("middle-entrance-animation"); alertBackground.classList.add("middle-entrance-animation");
Display._animationState = AnimationState.FadeInAnimation; Display._animationState = AnimationState.FadeInAnimation;
break; break;
case "2": case VerticalAlign.Bottom:
default: default:
alertBackground.style.bottom = '0'; alertBackground.style.top = '';
alertBackground.style.transition= "2s linear"; alertBackground.style.bottom = '0px';
alertBackground.style.height = "25%"; alertBackground.style.height = "25%";
alertBackground.style.transition= "2s linear";
break; break;
} }
alertBackground.style.visibility = "visible"; alertBackground.style.visibility = "visible";
@ -493,16 +510,17 @@ var Display = {
* Start background exit transition once alert has been displayed * Start background exit transition once alert has been displayed
* @param {string} location - Integer showing the location of the alert on screen * @param {string} location - Integer showing the location of the alert on screen
*/ */
doExitTransition: function(location){ doExitTransition: function (location) {
var alertBackground = $("#alert-background")[0]; var alertBackground = $("#alert-background")[0];
if(location == "0" || location == "2"){ if (location == VerticalAlign.Top || location == VerticalAlign.Bottom) {
alertBackground.style.height = "0%"; alertBackground.style.height = "0%";
alertBackground.style.transition = '2s linear'; alertBackground.style.transition = '2s linear';
}else if(location == "1"){ }
else if (location == VerticalAlign.Middle) {
alertBackground.classList.add("middle-exit-animation"); alertBackground.classList.add("middle-exit-animation");
alertBackground.style.height = "0%"; alertBackground.style.height = "0%";
Display._animationState = AnimationState.FadeOutAnimation; Display._animationState = AnimationState.FadeOutAnimation;
} }

187
tests/js/test_display.js
View File

@ -153,140 +153,101 @@ describe("The Display object", function () {
}); });
describe("Display.alert",function(){ describe("Display.alert", function () {
var alertBackground,alert; var alertBackground, alert;
beforeEach(function(){ beforeEach(function () {
document.body.innerHTML = ""; document.body.innerHTML = "";
alertBackground = document.createElement("div"); alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background"); alertBackground.setAttribute("id", "alert-background");
document.body.appendChild(alertBackground); document.body.appendChild(alertBackground);
alert = document.createElement("p"); alert = document.createElement("p");
alert.setAttribute("id","alert"); alert.setAttribute("id","alert");
alertBackground.appendChild(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(); 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"); Display.alert("OPEN-LP-3.0 Alert Test", "2");
expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test"); 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"); expect(Display.alert("Alert Location Test","2")).toEqual("2");
}); });
}); });
describe("The doEntranceTransition", function(){ describe("The doEntranceTransition", function () {
var alertBackground; var alertBackground;
beforeEach(function(){ beforeEach(function() {
document.body.innerHTML = ""; document.body.innerHTML = "";
alertBackground = document.createElement("div"); alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background"); alertBackground.setAttribute("id", "alert-background");
document.body.appendChild(alertBackground); document.body.appendChild(alertBackground);
alertBackground.style.top = '0px'; alertBackground.style.top = '0px';
alertBackground.style.height = "0%"; 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"); Display.doEntranceTransition("0");
expect(alertBackground.style.top).toEqual('0px'); 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"); Display.doEntranceTransition("1");
var middlePosition = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px'; var middlePosition = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
expect(alertBackground.style.top).toEqual(middlePosition); 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(){ it("should set the correct styles for the alert when location is bottom of the page", function () {
Display.doEntranceTransition("2"); Display.doEntranceTransition("2");
expect(alertBackground.style.bottom).toEqual('0px'); expect(alertBackground.style.top).toEqual('');
}); expect(alertBackground.style.bottom).toEqual('0px');
expect(alertBackground.style.transition).toEqual("2s linear");
it("should have a transition set when position is set to top", function(){ expect(alertBackground.style.height).toEqual("25%");
Display.doEntranceTransition("0"); expect(alertBackground.style.visibility).toEqual("visible");
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 doExitTransition", function(){ describe("The doExitTransition", function () {
var alertBackground; var alertBackground;
beforeEach(function(){ beforeEach(function () {
document.body.innerHTML = ""; document.body.innerHTML = "";
alertBackground = document.createElement("div"); alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background"); alertBackground.setAttribute("id", "alert-background");
document.body.appendChild(alertBackground); 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(){ it("should remove the styles correctly when the location is middle of the page", function () {
Display.doExitTransition("0"); Display.doExitTransition("1");
expect(alertBackground.style.height).toEqual('0%'); expect(alertBackground.style.height).toEqual('0%');
}); expect(alertBackground.classList.contains("middle-exit-animation"));
});
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 the bottom of the page", function () {
Display.doExitTransition("2");
expect(alertBackground.style.height).toEqual('0%');
expect(alertBackground.style.transition).toEqual("2s linear");
});
}); });