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

Fixed alerts and removed unnecessary debug statements and added tests

Browse Source
This commit is contained in:
gregzovic@bazaar.launchpad.net 2019-02-06 23:33:16 +03:00
parent 178df476bd
commit b83df5cd29
3 changed files with 133 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}
</style>
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="reveal.js"></script>

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

@ -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"

144
tests/js/test_display.js
View File

@ -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 () {