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

Fixed queue bug when showing alerts from the queue

Browse Source
This commit is contained in:
Nico Opiyo 2019-04-02 22:08:27 +03:00
parent 0e1989f06f
commit e56971fa81
3 changed files with 46 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,12 +79,23 @@ var AlertLocation = {
Bottom: 2 Bottom: 2
}; };
/**
* Alert state enumeration
*/
var AlertState = { var AlertState = {
Displaying: "displaying", Displaying: "displaying",
DisplayingFromQueue: "displayingFrom Queue",
NotDisplaying: "notDisplaying" NotDisplaying: "notDisplaying"
} }
/**
* Alert delay enumeration
*/
var AlertDelay = {
FiftyMilliseconds: 50,
OneSecond: 1000,
OnePointFiveSeconds: 1500
}
/** /**
* Return an array of elements based on the selector query * Return an array of elements based on the selector query
* @param {string} selector - The selector to find elements * @param {string} selector - The selector to find elements
@ -419,7 +430,7 @@ var Display = {
return null; return null;
} }
else { else {
if (this._alertState === AlertState.Displaying || this._alertState === AlertState.DisplayingFromQueue) { if (this._alertState === AlertState.Displaying) {
Display.addAlertToQueue(text, alert_settings); Display.addAlertToQueue(text, alert_settings);
} }
} }
@ -427,23 +438,25 @@ var Display = {
this._alertSettings = settings; this._alertSettings = settings;
Display.setAlertText(text); Display.setAlertText(text);
alertBackground.addEventListener('transitionend', function(e) {
e.stopPropagation();
Display.alertTransitionEndEvent();
});
alertText.addEventListener('animationend', function(e) {
e.stopPropagation();
Display.alertAnimationEndEvent();
});
if (settings.scroll === true) { if (settings.scroll === true) {
Display.setAlertKeyframes($('#alert'[0].scrollWidth)); Display.setAlertKeyframes(alertText.scrollWidth);
} }
/* Check if the alert is a queued alert */ /* Check if the alert is a queued alert */
if (Display._alertState !== AlertState.DisplayingFromQueue) { if (Display._alertState !== AlertState.DisplayingFromQueue) {
Display._alertState = AlertState.Displaying; Display._alertState = AlertState.Displaying;
} }
alertBackground.addEventListener('transitionend', function(e) {
e.stopPropagation();
console.debug("The transition has ended");
Display.alertTransitionEndEvent();
});
alertText.addEventListener('animationend', function(e) {
e.stopPropagation();
console.debug("The animation has ended");
Display.alertAnimationEndEvent();
});
Display.showAlertBackground(settings); Display.showAlertBackground(settings);
}, },
/** /**
@ -488,7 +501,10 @@ var Display = {
} }
else if (Display._transitionState === TransitionState.ExitTransition) { else if (Display._transitionState === TransitionState.ExitTransition) {
Display._transitionState = TransitionState.NoTransition; Display._transitionState = TransitionState.NoTransition;
Display.displayNextAlert(); setTimeout(function () {
Display.showNextAlert();
}, AlertDelay.OnePointFiveSeconds);
} }
}, },
/** /**
@ -503,24 +519,18 @@ var Display = {
*/ */
showAlertBackground: function (settings) { showAlertBackground: function (settings) {
var alertBackground = $("#alert-background")[0]; var alertBackground = $("#alert-background")[0];
var transitionSetting; var transitionSetting = "min-height 1s linear";
Display.setAlertLocation(settings.location); Display.setAlertLocation(settings.location);
alertBackground.style.backgroundColor = settings.background_color; alertBackground.style.backgroundColor = settings.background_color;
if (Display._alertState === AlertState.DisplayingFromQueue) {
transitionSetting = "min-height 1s linear 2s";
}
else {
transitionSetting = "min-height 1s linear";
}
// Wait for styles to be set first before starting transition // Wait for styles to be set first before starting transition
setTimeout( function() { setTimeout( function() {
alertBackground.style.transition = transitionSetting; alertBackground.style.transition = transitionSetting;
alertBackground.classList.add("show"); alertBackground.classList.add("show");
alertBackground.classList.remove("hide"); alertBackground.classList.remove("hide");
}, 50); }, AlertDelay.FiftyMilliseconds);
this._transitionState = TransitionState.EntranceTransition; this._transitionState = TransitionState.EntranceTransition;
}, },
/** /**
@ -578,7 +588,7 @@ var Display = {
setTimeout (function () { setTimeout (function () {
Display._animationState = AnimationState.NoAnimation; Display._animationState = AnimationState.NoAnimation;
Display.hideAlertText(); Display.hideAlertText();
}, settings.timeout * 1000); }, settings.timeout * AlertDelay.OneSecond);
} }
}, },
/** /**
@ -598,7 +608,7 @@ var Display = {
/** /**
* Display the next alert in the queue * Display the next alert in the queue
*/ */
displayNextAlert: function () { showNextAlert: function () {
if (Display._alerts.length > 0) { if (Display._alerts.length > 0) {
var alertObject = JSON.parse(this._alerts.shift()); var alertObject = JSON.parse(this._alerts.shift());
this._alertState = AlertState.DisplayingFromQueue; this._alertState = AlertState.DisplayingFromQueue;

17
tests/js/test_display.js
View File

@ -254,7 +254,7 @@ describe("Display.hideAlertBackground", function () {
}); });
it("reset the background to default once an alert has been displayed", function() { it("reset the background to default once an alert has been displayed", function() {
//spyOn(Display, "displayNextAlert"); //spyOn(Display, "showNextAlert");
Display.hideAlertBackground(); Display.hideAlertBackground();
expect(Display._transitionState).toEqual(TransitionState.ExitTransition); expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
@ -414,14 +414,14 @@ describe("Display.addAlertToQueue", function () {
}); });
}); });
describe("Display.displayNextAlert", function () { describe("Display.showNextAlert", function () {
Display.displayNextAlert(); Display.showNextAlert();
it("should return null if there are no alerts in the queue", function () { it("should return null if there are no alerts in the queue", function () {
Display._alerts = []; Display._alerts = [];
Display.displayNextAlert(); Display.showNextAlert();
expect(Display.displayNextAlert()).toBeNull(); expect(Display.showNextAlert()).toBeNull();
}); });
it("should call the alert function correctly if there is an alert in the queue", function () { it("should call the alert function correctly if there is an alert in the queue", function () {
@ -433,7 +433,7 @@ describe("Display.displayNextAlert", function () {
var alertObject = {text: "Queued Alert", settings: settings}; var alertObject = {text: "Queued Alert", settings: settings};
Display._alerts.push(JSON.stringify(alertObject)); Display._alerts.push(JSON.stringify(alertObject));
spyOn(Display, "alert"); spyOn(Display, "alert");
Display.displayNextAlert(); Display.showNextAlert();
expect(Display.alert).toHaveBeenCalled(); expect(Display.alert).toHaveBeenCalled();
expect(Display.alert).toHaveBeenCalledWith("Queued Alert",alertObject.settings); expect(Display.alert).toHaveBeenCalledWith("Queued Alert",alertObject.settings);
@ -452,13 +452,12 @@ describe("Display.alertTransitionEndEvent", function() {
expect(Display.showAlertText).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() { it("should set the correct state after the alert exit transition", function() {
spyOn(Display, "displayNextAlert"); spyOn(Display, "showNextAlert");
Display._transitionState = TransitionState.ExitTransition; Display._transitionState = TransitionState.ExitTransition;
Display.alertTransitionEndEvent(); Display.alertTransitionEndEvent();
expect(Display._transitionState).toEqual(TransitionState.NoTransition); expect(Display._transitionState).toEqual(TransitionState.NoTransition);
expect(Display.displayNextAlert).toHaveBeenCalled();
}); });
}); });