diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index 4d7aff0f5..fe8d54ac8 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -80,6 +80,7 @@ var AlertLocation = {
var AlertState = {
Displaying: "displaying",
+ DisplayingFromQueue: "displayingFrom Queue",
NotDisplaying: "notDisplaying"
}
@@ -406,39 +407,18 @@ var Display = {
Display._slides['0'] = 0;
Display.reinit();
},
- /**
- * Display the next alert in the queue
- */
- getNextAlert: function () {
-
- console.debug("Checking queue for alerts");
- if (Display._alerts.length > 0) {
- var alertObject = JSON.parse(this._alerts.shift());
- setTimeout(function() {
- Display.alert(alertObject.text, alertObject.settings);
- },1000);
-
- }
- else {
- console.debug("No alerts found");
- }
- },
/**
* Display an alert
* @param {string} text - The alert text
* @param {int} location - The location of the text (top, middle or bottom)
*/
alert: function (text, alert_settings) {
- console.debug(" alert text: " + text + ", alert settings: " + alert_settings);
-
if (text == "") {
return null;
}
else {
if (this._alertState === AlertState.Displaying) {
- var alertObject = {};
- alertObject.text = text;
- alertObject.settings = alert_settings;
+ var alertObject = {text: text, settings: alert_settings};
this._alerts.push(JSON.stringify(alertObject));
return null;
}
@@ -447,12 +427,14 @@ var Display = {
var alertBackground = $("#alert-background")[0];
var alertText = $("#alert")[0];
alertText.innerHTML = text;
-
- /* Start the entrance transition */
- this._alertState = AlertState.Displaying;
- this._transitionState = Display.doEntranceTransition(settings);
+ /* Check if the alert is a queued alert */
+ if (this._alertState !== AlertState.DisplayingFromQueue) {
+ this._alertState = AlertState.Displaying;
+ }
- // TODO: Add functionality for no scroll and queue if not all alerts have been displayed
+ Display.doEntranceTransition(settings);
+
+ // TODO: Add functionality for no scroll
alertBackground.addEventListener('transitionend', function (e) {
e.stopPropagation();
if (Display._transitionState === TransitionState.EntranceTransition) {
@@ -462,12 +444,10 @@ var Display = {
Display._transitionState = TransitionState.NoTransition
}
else if (Display._transitionState === TransitionState.ExitTransition) {
- Display._transitionState = TransitionState.NoTransition;
- Display._alertState = AlertState.NotDisplaying;
+ Display._transitionState = TransitionState.NoTransition;
alertText.style.visibility = "hidden";
alertBackground.classList = "";
- alertBackground.classList.add("normal");
- Display.getNextAlert();
+ alertBackground.classList.add("normal");
}
});
@@ -476,19 +456,18 @@ var Display = {
if (Display._animationState === AnimationState.ScrollingAnimation) {
alertText.classList.remove("horizontal-scroll-animation");
alertText.style.visibility = "hidden";
- Display._animationState = AnimationState.NoAnimation;
- Display.doExitTransition();
+ Display._animationState = AnimationState.NoAnimation;
}
});
},
-
/**
* Start background entrance transition for display of alert
- * @param {number} location - Number showing the location of the alert on screen
+ * @param {object} settings - Settings for styling the alert
*/
doEntranceTransition: function (settings) {
var alertBackground = $("#alert-background")[0];
var alertText = $("#alert")[0];
+ var transitionSetting;
switch (settings.location) {
case AlertLocation.Top:
alertBackground.classList.add("top");
@@ -505,15 +484,21 @@ var Display = {
alertText.style.fontFamily = settings.font_face;
alertText.style.fontSize = settings.font_size + "pt";
alertBackground.style.backgroundColor = settings.background_color;
- // Wait for styles to be set first before starting transitions
+
+ if (this._alertState === AlertState.DisplayingFromQueue) {
+ transitionSetting = "1s linear 1s";
+ }
+ else {
+ transitionSetting = "1s linear";
+ }
+ // Wait for styles to be set first before starting transition
setTimeout( function() {
alertBackground.style.height = "25%";
- alertBackground.style.transition = "1s linear";
+ alertBackground.style.transition = transitionSetting;
alertBackground.style.visibility = "visible";
}, 50);
- return TransitionState.EntranceTransition;
+ this._transitionState = TransitionState.EntranceTransition;
},
-
/**
* Start background exit transition once alert has been displayed
* @param {string} location - Integer showing the location of the alert on screen
@@ -522,7 +507,22 @@ var Display = {
var alertBackground = $("#alert-background")[0];
alertBackground.style.height = "0%";
alertBackground.style.transition = "1s linear";
- this._transitionState = TransitionState.ExitTransition;
+ this._transitionState = TransitionState.ExitTransition;
+ this._alertState = AlertState.NotDisplaying;
+ Display.getNextAlert();
+ },
+ /**
+ * Display the next alert in the queue
+ */
+ getNextAlert: function () {
+ if (Display._alerts.length > 0) {
+ var alertObject = JSON.parse(this._alerts.shift());
+ this._alertState = AlertState.DisplayingFromQueue;
+ Display.alert(alertObject.text, alertObject.settings);
+ }
+ else {
+ return null;
+ }
},
/**
* Add a slides. If the slide exists but the HTML is different, update the slide.
diff --git a/tests/js/test_display.js b/tests/js/test_display.js
index d6bef21e5..55da7031a 100644
--- a/tests/js/test_display.js
+++ b/tests/js/test_display.js
@@ -154,8 +154,7 @@ describe("The Display object", function () {
});
describe("Display.alert", function () {
- var alertBackground, alert, settings;
- var alerts = [];
+ var alertBackground, alert, settings,_alertState;
beforeEach(function () {
document.body.innerHTML = "";
@@ -180,21 +179,22 @@ describe("Display.alert", function () {
expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
});
- it("should set the correct alert position", function () {
- expect(Display.alert("Alert Location Test", settings)).toEqual(1);
- });
+ it("should add alerts to the queue correctly if it called when an alert is displaying", function () {
+ Display._alerts = [];
+ Display._alertState = AlertState.Displaying;
+ var alertObject = {text: "Testing alert queue", settings: settings};
+ var queuedAlert = JSON.stringify(alertObject);
+ Display.alert("Testing alert queue", settings);
- it("should add the alert to the alert queue", function() {
- //Uses the alerts array
+ expect(Display._alerts.length).toEqual(1);
+ expect(Display._alerts[0]).toEqual(queuedAlert);
});
});
-describe("The doEntranceTransition", function () {
+describe("Display.doEntranceTransition", function () {
var alertBackground, alertText, css, settings, style;
- // TODO: Fix tests to accommodate new behaviour with CSS classes and settings modification
-
- beforeEach(function() {
+ beforeEach(function () {
document.body.innerHTML = "";
style = document.createElement("style");
style.type = "text/css";
@@ -214,51 +214,52 @@ describe("The doEntranceTransition", function () {
alertText = document.createElement("p");
alertText.setAttribute("id","alert");
alertBackground.appendChild(alertText);
+ Display._alertState = AlertState.NotDisplaying;
});
- it("should apply the styles correctly when doEntranceTransition is called", function(done) {
+ it("should set the correct transition state", function () {
Display.doEntranceTransition(settings);
- expect(alertBackground.classList.contains("bottom")).toBe(true);
+ expect(Display._transitionState).toEqual(TransitionState.EntranceTransition);
+ })
- setTimeout(function() {
+ it("should apply the styles correctly when doEntranceTransition is called", function (done) {
+ Display.doEntranceTransition(settings);
+ expect(alertBackground.className).toBe("normal bottom");
+
+ setTimeout(function () {
expect(alertText.style.fontFamily).toEqual(settings.font_face);
expect(alertText.style.color).toEqual(settings.font_color);
expect(alertText.style.fontSize).toEqual(settings.font_size + "pt");
- expect(alertBackground.style.backgroundColor).toEqual(settings.background_color);
- expect(alertBackground.classList.contains("bottom")).toBe(true);
+ expect(alertBackground.style.backgroundColor).toEqual(settings.background_color);
expect(alertBackground.style.height).toEqual("25%");
expect(alertBackground.style.transition).toEqual("1s linear");
expect(alertBackground.style.visibility).toEqual("visible");
done();
- }, 60);
+ }, 50);
});
it("should set the correct class for the alert when location is top of the page", function () {
settings.location = 0;
Display.doEntranceTransition(settings);
- expect(alertBackground.classList.contains("normal")).toBe(true);
- expect(alertBackground.classList.contains("top")).toBe(true);
-
+ expect(alertBackground.className).toEqual("normal top");
});
it("should set the correct class for the alert when location is middle of the page", function () {
settings.location = 1;
Display.doEntranceTransition(settings);
- expect(alertBackground.classList.contains("normal")).toBe(true);
- expect(alertBackground.classList.contains("middle")).toBe(true);
+ expect(alertBackground.className).toEqual("normal middle");
});
it("should set the correct class for the alert when location is bottom of the page", function () {
Display.doEntranceTransition(settings);
- expect(alertBackground.classList.contains("normal")).toBe(true);
- expect(alertBackground.classList.contains("bottom")).toBe(true);
+ expect(alertBackground.className).toEqual("normal bottom");
});
});
-describe("The doExitTransition", function () {
+describe("Display.doExitTransition", function () {
var alertBackground;
beforeEach(function () {
@@ -266,16 +267,55 @@ describe("The doExitTransition", function () {
alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background");
document.body.appendChild(alertBackground);
+ Display._alerts = [];
});
- it("should transition correctly when the doExitTransition method is called", function () {
+ it("should set the styles correctly when the doExitTransition method is called", function () {
Display.doExitTransition();
expect(alertBackground.style.height).toEqual('0%');
- expect(alertBackground.style.transition).toEqual("1s linear");
+ expect(alertBackground.style.transition).toEqual("1s linear");
});
+
+ it("should set the correct states when doExitTransition is called", function () {
+ Display.doExitTransition();
+
+ expect(Display._alertState).toEqual(AlertState.NotDisplaying);
+ expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
+ });
+
+ it("should call the getNextAlert method to get the next alert on the queue", function () {
+ spyOn(Display,"getNextAlert");
+ Display.doExitTransition();
+
+ expect(Display.getNextAlert).toHaveBeenCalled();
+ });
});
+describe("Display.getNextAlert", function () {
+ Display.getNextAlert();
+
+ it("should return null if there are no alerts in the queue", function () {
+ Display._alerts = [];
+ Display.getNextAlert();
+
+ expect(Display.getNextAlert()).toBeNull();
+ });
+
+ it("should call the alert function correctly if there is an alert in the queue", function () {
+ var settings = {
+ "location": 2, "font_face": "Tahoma", "font_size": 40,
+ "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)"
+ };
+ var alertObject = {text: "Queued Alert", settings: settings};
+ Display._alerts.push(JSON.stringify(alertObject));
+ spyOn(Display,"alert");
+ Display.getNextAlert();
+
+ expect(Display.alert).toHaveBeenCalled();
+ expect(Display.alert).toHaveBeenCalledWith("Queued Alert",alertObject.settings);
+ });
+});
describe("Display.addTextSlide", function () {
beforeEach(function() {
@@ -386,6 +426,7 @@ describe("Display.setTextSlides", function () {
};
spyOn(Display, "reinit");
+ spyOn(Reveal, "slide");
Display.setTextSlides(slides);
Display.setTheme(theme);