forked from openlp/openlp
Fixed all tests and changed entrance transition to class based toggling
This commit is contained in:
Nico Opiyo
parent
c25f4d8197
commit
0e1989f06f
@ -27,6 +27,16 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bg-default.show {
|
||||
height: auto;
|
||||
min-height: 25%;
|
||||
}
|
||||
|
||||
.bg-default.hide {
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.bg-default.middle {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div id="global-background" class="slide-background present" data-loaded="true"></div>
|
||||
<div id="alert-background" class="bg-default"><p class="" id="alert">Testing alerts</p></div>
|
||||
<div id="alert-background" class="bg-default hide"><p class="" id="alert">Testing alerts</p></div>
|
||||
<div class="slides"></div>
|
||||
<div class="footer"></div>
|
||||
</div>
|
||||
|
||||
@ -413,19 +413,28 @@ var Display = {
|
||||
* "timeout": 10, "repeat": 2, "scroll": true}'
|
||||
*/
|
||||
alert: function (text, alert_settings) {
|
||||
var alertBackground = $('#alert-background')[0];
|
||||
var alertText = $('#alert')[0];
|
||||
if (text == "") {
|
||||
return null;
|
||||
}
|
||||
else {
|
||||
if (this._alertState === AlertState.Displaying || this._alertState === AlertState.DisplayingFromQueue) {
|
||||
addAlertToQueue(text, alert_settings);
|
||||
Display.addAlertToQueue(text, alert_settings);
|
||||
}
|
||||
}
|
||||
var settings = JSON.parse(alert_settings);
|
||||
this._alertSettings = settings;
|
||||
Display.setAlertText(text);
|
||||
|
||||
Display.initAlertEventListeners();
|
||||
alertBackground.addEventListener('transitionend', function(e) {
|
||||
e.stopPropagation();
|
||||
Display.alertTransitionEndEvent();
|
||||
});
|
||||
alertText.addEventListener('animationend', function(e) {
|
||||
e.stopPropagation();
|
||||
Display.alertAnimationEndEvent();
|
||||
});
|
||||
|
||||
if (settings.scroll === true) {
|
||||
Display.setAlertKeyframes($('#alert'[0].scrollWidth));
|
||||
@ -437,16 +446,6 @@ var Display = {
|
||||
|
||||
Display.showAlertBackground(settings);
|
||||
},
|
||||
/**
|
||||
* Initialize alert event listeners
|
||||
*/
|
||||
initAlertEventListeners: function () {
|
||||
var alertBackground = $("#alert-background")[0];
|
||||
var alertText = $("#alert")[0];
|
||||
|
||||
alertBackground.addEventListener('transitionend', Display.alertTransitionEndEvent, false);
|
||||
alertText.addEventListener('animationend', Display.alertAnimationEndEvent, false);
|
||||
},
|
||||
/**
|
||||
* Add an alert to the alert queue
|
||||
* @param {string} text - The alert text to be displayed
|
||||
@ -482,28 +481,20 @@ var Display = {
|
||||
/**
|
||||
* The alertTransitionEndEvent called after a transition has ended
|
||||
*/
|
||||
alertTransitionEndEvent: function (e) {
|
||||
e.stopPropagation();
|
||||
alertTransitionEndEvent: function () {
|
||||
if (Display._transitionState === TransitionState.EntranceTransition) {
|
||||
Display._transitionState = TransitionState.NoTransition;
|
||||
Display.showAlertText(Display._alertSettings);
|
||||
console.log("Show alert has been called");
|
||||
}
|
||||
else if (Display._transitionState === TransitionState.ExitTransition) {
|
||||
Display._transitionState = TransitionState.NoTransition;
|
||||
Display.displayNextAlert();
|
||||
}
|
||||
else if (Display._transitionState === "animatingText") {
|
||||
if (e.propertyName === "transform") {
|
||||
console.log("The text transform has ended");
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* The alertAnimationEndEvent called after a animation has ended
|
||||
*/
|
||||
alertAnimationEndEvent: function (e) {
|
||||
e.stopPropagation();
|
||||
alertAnimationEndEvent: function () {
|
||||
Display.hideAlertText();
|
||||
},
|
||||
/**
|
||||
@ -519,17 +510,16 @@ var Display = {
|
||||
alertBackground.style.backgroundColor = settings.background_color;
|
||||
|
||||
if (Display._alertState === AlertState.DisplayingFromQueue) {
|
||||
transitionSetting = "height 1s linear 2s";
|
||||
transitionSetting = "min-height 1s linear 2s";
|
||||
}
|
||||
else {
|
||||
transitionSetting = "height 1s linear";
|
||||
transitionSetting = "min-height 1s linear";
|
||||
}
|
||||
// Wait for styles to be set first before starting transition
|
||||
setTimeout( function() {
|
||||
alertBackground.style.height = "auto";
|
||||
alertBackground.style.minHeight = "25%";
|
||||
alertBackground.style.transition = transitionSetting;
|
||||
alertBackground.style.visibility = "visible";
|
||||
alertBackground.classList.add("show");
|
||||
alertBackground.classList.remove("hide");
|
||||
}, 50);
|
||||
this._transitionState = TransitionState.EntranceTransition;
|
||||
},
|
||||
@ -558,10 +548,9 @@ var Display = {
|
||||
*/
|
||||
hideAlertBackground: function () {
|
||||
var alertBackground = $("#alert-background")[0];
|
||||
alertBackground.style.height = "0%";
|
||||
alertBackground.style.minHeight = "0%";
|
||||
alertBackground.style.transition = "height 1s linear";
|
||||
alertBackground.className = "bg-default";
|
||||
alertBackground.style.transition = "min-height 1s linear";
|
||||
alertBackground.classList.remove("show");
|
||||
alertBackground.classList.add("hide");
|
||||
this._transitionState = TransitionState.ExitTransition;
|
||||
this._alertState = AlertState.NotDisplaying;
|
||||
},
|
||||
|
||||
@ -176,18 +176,15 @@ describe("Display.alert", function () {
|
||||
});
|
||||
|
||||
it("should set the correct alert text", function () {
|
||||
spyOn("Display", "addAlertToQueue");
|
||||
spyOn("Display", "initAlertEventListeners");
|
||||
spyOn("Display", "setAlertKeyframes");
|
||||
spyOn("Display", "showAlertBackground");
|
||||
spyOn(Display, "setAlertKeyframes");
|
||||
Display.alert("OPEN-LP-3.0 Alert Test", settings);
|
||||
|
||||
expect(Display.setAlertText).toHaveBeenCalled();
|
||||
expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
|
||||
expect(alertText.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
|
||||
});
|
||||
|
||||
it("should call the addAlertToQueue method if an alert is displaying", function () {
|
||||
spyOn("Display", "addAlertToQueue");
|
||||
spyOn(Display, "addAlertToQueue");
|
||||
spyOn(Display, "setAlertKeyframes");
|
||||
Display._alerts = [];
|
||||
Display._alertState = AlertState.Displaying;
|
||||
var text = "Testing alert queue";
|
||||
@ -198,50 +195,13 @@ describe("Display.alert", function () {
|
||||
});
|
||||
|
||||
it("should set the alert settings correctly", function() {
|
||||
spyOn("Display", "setAlertKeyframes");
|
||||
spyOn(Display, "setAlertKeyframes");
|
||||
Display.alert("Testing settings", settings);
|
||||
|
||||
expect(Display._alertSettings).toEqual(JSON.parse(settings));
|
||||
});
|
||||
});
|
||||
|
||||
describe("Display.initAlertEventListeners", function() {
|
||||
var alertBackground, styles, alertText;
|
||||
beforeEach(function() {
|
||||
document.body.innerHTML = "";
|
||||
styles = document.createElement("style");
|
||||
styles.innerHTML = "@keyframes test { from {background-color: red;} \
|
||||
to {background-color: yellow;}";
|
||||
document.head.appendChild(styles);
|
||||
alertBackground = document.createElement("div");
|
||||
alertBackground.setAttribute("id", "alert-background");
|
||||
document.body.appendChild(alertBackground);
|
||||
alertText = document.createElement("p");
|
||||
alertText.setAttribute("id","alert");
|
||||
alertBackground.appendChild(alertText);
|
||||
alertBackground.style.opacity = 0;
|
||||
alertBackground.style.transition = "opacity 0.001s linear";
|
||||
Display.initAlertEventListeners();
|
||||
});
|
||||
|
||||
it("should set the transition end event listener correctly", function() {
|
||||
spyOn("Display", "alertTransitionEndEvent");
|
||||
|
||||
alertBackground.style.opacity = 1;
|
||||
|
||||
expect(Display.alertTransitionEndEvent).toHaveBeenCalled();
|
||||
|
||||
});
|
||||
|
||||
it("should set the animation end event listener correctly", function() {
|
||||
spyOn("Display", "alertAnimationEndEvent");
|
||||
|
||||
alertText.style.animation = "test 0.01s linear";
|
||||
|
||||
expect(Display.alertAnimationEndEvent).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Display.showAlertBackground", function () {
|
||||
|
||||
var alertBackground, css, settings, style;
|
||||
@ -269,7 +229,7 @@ describe("Display.showAlertBackground", function () {
|
||||
it("should set the correct transition state", function () {
|
||||
Display.showAlertBackground(settings);
|
||||
expect(Display._transitionState).toEqual(TransitionState.EntranceTransition);
|
||||
})
|
||||
});
|
||||
|
||||
it("should apply the styles correctly when showAlertBackground is called", function (done) {
|
||||
Display.showAlertBackground(settings);
|
||||
@ -277,10 +237,8 @@ describe("Display.showAlertBackground", function () {
|
||||
|
||||
setTimeout(function () {
|
||||
expect(alertBackground.style.backgroundColor).toEqual(settings.background_color);
|
||||
expect(alertBackground.style.height).toEqual("auto");
|
||||
expect(alertBackground.style.minHeight).toEqual("25%");
|
||||
expect(alertBackground.style.transition).toEqual("height 1s linear");
|
||||
expect(alertBackground.style.visibility).toEqual("visible");
|
||||
expect(alertBackground.classList.contains("show")).toBe(true);
|
||||
expect(alertBackground.style.transition).toEqual("min-height 1s linear");
|
||||
done();
|
||||
}, 50);
|
||||
});
|
||||
@ -301,10 +259,8 @@ describe("Display.hideAlertBackground", function () {
|
||||
|
||||
expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
|
||||
expect(Display._alertState).toEqual(AlertState.NotDisplaying);
|
||||
expect(alertBackground.style.transition).toEqual("height 1s linear");
|
||||
expect(alertBackground.style.height).toEqual("0%");
|
||||
expect(alertBackground.style.minHeight).toEqual("0%");
|
||||
expect(alertBackground.className).toEqual("bg-default");
|
||||
expect(alertBackground.style.transition).toEqual("min-height 1s linear");
|
||||
expect(alertBackground.className).toEqual("hide");
|
||||
});
|
||||
});
|
||||
|
||||
@ -488,20 +444,18 @@ describe("Display.alertTransitionEndEvent", function() {
|
||||
it("should set the correct state and call showAlertText after the alert entrance transition", function() {
|
||||
var fake_settings = {test: "fake_settings"};
|
||||
Display._alertSettings = fake_settings;
|
||||
spyOn("Display", "showAlertText");
|
||||
spyOn(Display, "showAlertText");
|
||||
Display._transitionState = TransitionState.EntranceTransition;
|
||||
var event = document.createEvent("animationend");
|
||||
Display.alertTransitionEnd(event);
|
||||
Display.alertTransitionEndEvent();
|
||||
|
||||
expect(Display._transitionState).toEqual(TransitionState.NoTransition);
|
||||
expect(Display.alertTransitionEndEvent).toHaveBeenCalledWith(fake_settings);
|
||||
expect(Display.showAlertText).toHaveBeenCalledWith(fake_settings);
|
||||
});
|
||||
|
||||
it("should set the correct state, class and call displayNextAlert after the alert exit transition", function() {
|
||||
spyOn("Display", "displayNextAlert");
|
||||
spyOn(Display, "displayNextAlert");
|
||||
Display._transitionState = TransitionState.ExitTransition;
|
||||
var event = document.createEvent("animationend");
|
||||
Display.alertTransitionEnd(event);
|
||||
Display.alertTransitionEndEvent();
|
||||
|
||||
expect(Display._transitionState).toEqual(TransitionState.NoTransition);
|
||||
expect(Display.displayNextAlert).toHaveBeenCalled();
|
||||
@ -510,7 +464,9 @@ describe("Display.alertTransitionEndEvent", function() {
|
||||
|
||||
describe("Display.alertAnimationEndEvent", function () {
|
||||
it("should call the hideAlertText method", function() {
|
||||
spyOn("Display","hideAlertText");
|
||||
spyOn(Display, "hideAlertText");
|
||||
|
||||
Display.alertAnimationEndEvent();
|
||||
|
||||
expect(Display.hideAlertText).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user