Fixed queue bug when showing alerts from the queue

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

View File

@ -39,6 +39,6 @@
<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>
</div>
</body>
</html>

View File

@ -79,12 +79,23 @@ var AlertLocation = {
Bottom: 2
};
/**
* Alert state enumeration
*/
var AlertState = {
Displaying: "displaying",
DisplayingFromQueue: "displayingFrom Queue",
Displaying: "displaying",
NotDisplaying: "notDisplaying"
}
/**
* Alert delay enumeration
*/
var AlertDelay = {
FiftyMilliseconds: 50,
OneSecond: 1000,
OnePointFiveSeconds: 1500
}
/**
* Return an array of elements based on the selector query
* @param {string} selector - The selector to find elements
@ -419,31 +430,33 @@ var Display = {
return null;
}
else {
if (this._alertState === AlertState.Displaying || this._alertState === AlertState.DisplayingFromQueue) {
if (this._alertState === AlertState.Displaying) {
Display.addAlertToQueue(text, alert_settings);
}
}
var settings = JSON.parse(alert_settings);
this._alertSettings = settings;
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) {
Display.setAlertKeyframes($('#alert'[0].scrollWidth));
Display.setAlertKeyframes(alertText.scrollWidth);
}
/* Check if the alert is a queued alert */
if (Display._alertState !== AlertState.DisplayingFromQueue) {
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);
},
/**
@ -487,8 +500,11 @@ var Display = {
Display.showAlertText(Display._alertSettings);
}
else if (Display._transitionState === TransitionState.ExitTransition) {
Display._transitionState = TransitionState.NoTransition;
Display.displayNextAlert();
Display._transitionState = TransitionState.NoTransition;
setTimeout(function () {
Display.showNextAlert();
}, AlertDelay.OnePointFiveSeconds);
}
},
/**
@ -503,24 +519,18 @@ var Display = {
*/
showAlertBackground: function (settings) {
var alertBackground = $("#alert-background")[0];
var transitionSetting;
var transitionSetting = "min-height 1s linear";
Display.setAlertLocation(settings.location);
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
setTimeout( function() {
alertBackground.style.transition = transitionSetting;
alertBackground.classList.add("show");
alertBackground.classList.remove("hide");
}, 50);
}, AlertDelay.FiftyMilliseconds);
this._transitionState = TransitionState.EntranceTransition;
},
/**
@ -578,7 +588,7 @@ var Display = {
setTimeout (function () {
Display._animationState = AnimationState.NoAnimation;
Display.hideAlertText();
}, settings.timeout * 1000);
}, settings.timeout * AlertDelay.OneSecond);
}
},
/**
@ -598,7 +608,7 @@ var Display = {
/**
* Display the next alert in the queue
*/
displayNextAlert: function () {
showNextAlert: function () {
if (Display._alerts.length > 0) {
var alertObject = JSON.parse(this._alerts.shift());
this._alertState = AlertState.DisplayingFromQueue;

View File

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