diff --git a/openlp/core/display/html/display.css b/openlp/core/display/html/display.css
index 29ce52b58..0e656a30a 100644
--- a/openlp/core/display/html/display.css
+++ b/openlp/core/display/html/display.css
@@ -11,8 +11,8 @@
animation-name: alert-scrolling-text;
}
-/* ALERT STYLING */
-.normal {
+/* ALERT BACKGROUND STYLING */
+.bg-default {
position: absolute;
margin: 0;
padding: 0;
@@ -24,7 +24,7 @@
visibility:hidden;
}
-.normal.middle {
+.bg-default.middle {
top: 50%;
left: 50%;
margin-right: -50%;
@@ -32,16 +32,17 @@
bottom: initial;
}
-.normal.top {
+.bg-default.top {
top: 0;
bottom: initial;
}
-.normal.bottom {
+.bg-default.bottom {
top: initial;
bottom: 0;
}
+/* ALERT BACKGROUND STYLING */
#alert {
position: relative;
top: 50%;
@@ -51,4 +52,8 @@
white-space: nowrap;
color: #ffffff;
visibility: hidden;
+}
+
+.no-scroll {
+ margin: 0 20px;
}
\ No newline at end of file
diff --git a/openlp/core/display/html/display.html b/openlp/core/display/html/display.html
index 014138202..8eed91645 100644
--- a/openlp/core/display/html/display.html
+++ b/openlp/core/display/html/display.html
@@ -2,8 +2,7 @@
Display Window
-
-
+
+
-
+
-
+
diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index 652d4f15b..e0970c709 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -287,6 +287,7 @@ AudioPlayer.prototype.stop = function () {
var Display = {
_alerts: [],
_slides: {},
+ _alertSettings: {},
_alertState: AlertState.NotDisplaying,
_transitionState: TransitionState.NoTransition,
_animationState: AnimationState.NoAnimation,
@@ -411,20 +412,23 @@ var Display = {
/**
* Display an alert
* @param {string} text - The alert text
- * @param {int} location - The location of the text (top, middle or bottom)
+ * @param {string} JSON object - The settings for the alert object e.g '{"background_color": "rgb(255, 85, 0)",
+ * "location": 1, "font_face": "Open Sans Condensed", "font_size": 90, "font_color": "rgb(255, 255, 255)",
+ * "timeout": 10, "repeat": 2, "scroll": true}'
*/
alert: function (text, alert_settings) {
if (text == "") {
return null;
}
else {
- if (this._alertState === AlertState.Displaying) {
+ if (this._alertState === AlertState.Displaying || this._alertState === AlertState.DisplayingFromQueue) {
var alertObject = {text: text, settings: alert_settings};
this._alerts.push(JSON.stringify(alertObject));
return null;
}
}
var settings = JSON.parse(alert_settings);
+ this._alertSettings = settings;
var alertBackground = $("#alert-background")[0];
var alertText = $("#alert")[0];
alertText.innerHTML = text;
@@ -433,33 +437,32 @@ var Display = {
this._alertState = AlertState.Displaying;
}
- Display.doEntranceTransition(settings);
+ Display.showAlertBackground(settings);
- alertBackground.addEventListener('transitionend', function(e) {
+ alertBackground.addEventListener('transitionend', function (e) {
e.stopPropagation();
- if (Display._transitionState === TransitionState.EntranceTransition) {
- console.debug("Calling alertEntranceTransitionEnd");
- Display.alertEntranceTransitionEnd(settings);
+ if (Display._transitionState === TransitionState.EntranceTransition) {
+ Display._transitionState = TransitionState.NoTransition;
+ Display.showAlertText(Display._alertSettings);
}
- else {
- console.debug("Calling alertExitTransitionEnd");
- Display.alertExitTransitionEnd();
+ else if (Display._transitionState === TransitionState.ExitTransition){
+ Display._transitionState = TransitionState.NoTransition;
+ alertBackground.classList = "bg-default";
+ Display.displayNextAlert();
}
});
alertText.addEventListener('animationend', function (e) {
- e.stopPropagation();
- console.debug("The text scrolling has ended");
- Display.textAnimationEnd();
+ e.stopPropagation();
+ Display.hideAlertText();
});
},
/**
* Start background entrance transition for display of alert
- * @param {object} settings - Settings for styling the alert
+ * @param {object} location - The location of the alert (top, middle or bottom)
*/
- doEntranceTransition: function (settings) {
- var alertBackground = $("#alert-background")[0];
- var alertText = $("#alert")[0];
+ showAlertBackground: function (settings) {
+ var alertBackground = $("#alert-background")[0];
var transitionSetting;
switch (settings.location) {
case AlertLocation.Top:
@@ -472,10 +475,7 @@ var Display = {
default:
alertBackground.classList.add("bottom");
break;
- }
- alertText.style.color = settings.font_color;
- alertText.style.fontFamily = settings.font_face;
- alertText.style.fontSize = settings.font_size + "pt";
+ }
alertBackground.style.backgroundColor = settings.background_color;
if (this._alertState === AlertState.DisplayingFromQueue) {
@@ -483,7 +483,7 @@ var Display = {
}
else {
transitionSetting = "1s linear";
- }
+ }
// Wait for styles to be set first before starting transition
setTimeout( function() {
alertBackground.style.height = "25%";
@@ -496,18 +496,56 @@ var Display = {
* Start background exit transition once alert has been displayed
* @param {string} location - Integer showing the location of the alert on screen
*/
- doExitTransition: function () {
- var alertBackground = $("#alert-background")[0];
+ hideAlertBackground: function () {
+ var alertBackground = $("#alert-background")[0];
alertBackground.style.height = "0%";
alertBackground.style.transition = "1s linear";
this._transitionState = TransitionState.ExitTransition;
- this._alertState = AlertState.NotDisplaying;
- Display.getNextAlert();
+ this._alertState = AlertState.NotDisplaying;
+ },
+ /**
+ * Sets the alert text styles correctly after the entrance transition has ended.
+ * @param {json} settings object - The settings to use for the animation
+ */
+ showAlertText: function (settings) {
+ var alertText = $("#alert")[0];
+ alertText.style.visibility = "visible";
+ alertText.style.color = settings.font_color;
+ alertText.style.fontFamily = settings.font_face;
+ alertText.style.fontSize = settings.font_size + "pt";
+ alertText.classList.add("no-scroll");
+ if (settings.scroll) {
+ var animationSettings = "alert-scrolling-text " + settings.timeout +
+ "s linear 0s " + settings.repeat + " normal";
+ alertText.style.animation = animationSettings;
+ Display._animationState = AnimationState.ScrollingText;
+ }
+ else {
+ Display._animationState = AnimationState.NonScrollingText;
+ alertText.style.animation = "";
+ setTimeout (function () {
+ Display._animationState = AnimationState.NoAnimation;
+ Display.hideAlertText();
+ }, settings.timeout * 1000);
+ }
+ },
+ /**
+ * Reset styling and hide the alert text after displaying the animation
+ */
+ hideAlertText: function () {
+ var alertText = $('#alert')[0];
+ alertText.style.animation = "";
+ alertText.classList = "";
+ alertText.style.visibility = "hidden";
+ alertText.style.color = "rgb(255, 255, 255)";
+ alertText.style.fontSize = "40pt";
+ Display._animationState = AnimationState.NoAnimation;
+ Display.hideAlertBackground();
},
/**
* Display the next alert in the queue
*/
- getNextAlert: function () {
+ displayNextAlert: function () {
if (Display._alerts.length > 0) {
var alertObject = JSON.parse(this._alerts.shift());
this._alertState = AlertState.DisplayingFromQueue;
@@ -516,55 +554,7 @@ var Display = {
else {
return null;
}
- },
- /**
- * Reset the styling and animation state of the alert text after the scrolling animation
- */
- textAnimationEnd: function () {
- var alertText = $('#alert')[0];
- alertText.style.animation = "";
- alertText.style.visibility = "hidden";
- Display._animationState = AnimationState.NoAnimation;
- Display.doExitTransition();
- },
- /**
- * Sets the alert text styles correctly after the entrance transition has ended.
- * @param {json} settings object - The settings to use for the animation
- */
- alertEntranceTransitionEnd: function (settings) {
- var alertText = $("#alert")[0];
- if (settings.scroll) {
- // alertText.style.visibility = "visible";
- var animationSettings = "alert-scrolling-text " + settings.timeout +
- "s linear 0s " + settings.repeat + " normal";
- console.debug("Visibility: " + alertText.style.visibility);
- alertText.style.animation = animationSettings;
- console.debug("Animation: " + animationSettings);
- Display._animationState = AnimationState.ScrollingText;
- }
- else {
- Display._animationState = AnimationState.NonScrollingText;
- alertText.style.animation = "";
- setTimeout (function () {
- // alertText.style.visibility = "visible";
- Display._animationState = AnimationState.NoAnimation;
- Display.doExitTransition();
- }, settings.timeout * 1000);
- }
- alertText.style.visibility = "visible";
- Display._transitionState = TransitionState.NoTransition
- },
- /**
- * Resets the alert styles after the alert has been shown.
- */
- alertExitTransitionEnd: function () {
- var alertText = $("#alert")[0];
- var alertBackground = $("#alert-background")[0];
- Display._transitionState = TransitionState.NoTransition;
- alertText.style.visibility = "hidden";
- alertBackground.classList = "";
- alertBackground.classList.add("normal");
- },
+ },
/**
* Add a slide. If the slide exists but the HTML is different, update the slide.
* @param {string} verse - The verse number, e.g. "v1"
diff --git a/openlp/plugins/alerts/lib/alertstab.py b/openlp/plugins/alerts/lib/alertstab.py
index a359c736f..7a33c5570 100644
--- a/openlp/plugins/alerts/lib/alertstab.py
+++ b/openlp/plugins/alerts/lib/alertstab.py
@@ -205,6 +205,7 @@ class AlertsTab(SettingsTab):
self.font_color_button.color = self.font_color
self.background_color_button.color = self.background_color
self.repeat_spin_box.setValue(self.repeat)
+ self.repeat_spin_box.setEnabled(self.scroll)
self.vertical_combo_box.setCurrentIndex(self.location)
self.scroll_check_box.setChecked(self.scroll)
font = QtGui.QFont()
diff --git a/tests/js/test_display.js b/tests/js/test_display.js
index d1e206d24..67570060b 100644
--- a/tests/js/test_display.js
+++ b/tests/js/test_display.js
@@ -154,7 +154,7 @@ describe("The Display object", function () {
});
describe("Display.alert", function () {
- var alertBackground, alert, settings,_alertState;
+ var alertBackground, alert, settings;
beforeEach(function () {
document.body.innerHTML = "";
@@ -190,16 +190,23 @@ describe("Display.alert", function () {
expect(Display._alerts.length).toEqual(1);
expect(Display._alerts[0]).toEqual(queuedAlert);
});
+
+ it("should set the alert settings correctly", function() {
+ Display.alert("Testing settings", settings);
+
+ console.debug("Settings", JSON.parse(settings));
+ expect(Display._alertSettings).toEqual(JSON.parse(settings));
+ });
});
-describe("Display.doEntranceTransition", function () {
+describe("Display.showAlertBackground", function () {
- var alertBackground, alertText, css, settings, style;
+ var alertBackground, css, settings, style;
beforeEach(function () {
document.body.innerHTML = "";
style = document.createElement("style");
style.type = "text/css";
- css = '.normal { position: absolute; margin: 0; padding: 0; left: 0; z-index: 10; \
+ css = '.bg-default { position: absolute; margin: 0; padding: 0; left: 0; z-index: 10; \
width: 100%; height: 0%; vertical-align: middle; overflow: hidden; visibility:hidden; \
}';
settings = {
@@ -211,27 +218,21 @@ describe("Display.doEntranceTransition", function () {
document.head.appendChild(style);
alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background");
- alertBackground.setAttribute("class", "normal");
- document.body.appendChild(alertBackground);
- alertText = document.createElement("p");
- alertText.setAttribute("id","alert");
- alertBackground.appendChild(alertText);
+ alertBackground.setAttribute("class", "bg-default");
+ document.body.appendChild(alertBackground);
Display._alertState = AlertState.NotDisplaying;
});
it("should set the correct transition state", function () {
- Display.doEntranceTransition(settings);
+ Display.showAlertBackground(settings);
expect(Display._transitionState).toEqual(TransitionState.EntranceTransition);
})
- it("should apply the styles correctly when doEntranceTransition is called", function (done) {
- Display.doEntranceTransition(settings);
- expect(alertBackground.className).toBe("normal bottom");
+ it("should apply the styles correctly when showAlertBackground is called", function (done) {
+ Display.showAlertBackground(settings);
+ expect(alertBackground.className).toBe("bg-default 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");
+ setTimeout(function () {
expect(alertBackground.style.backgroundColor).toEqual(settings.background_color);
expect(alertBackground.style.height).toEqual("25%");
expect(alertBackground.style.transition).toEqual("1s linear");
@@ -240,28 +241,28 @@ describe("Display.doEntranceTransition", function () {
}, 50);
});
- it("should set the correct class for the alert when location is top of the page", function () {
+ it("should set the correct class when location is top of the page", function () {
settings.location = 0;
- Display.doEntranceTransition(settings);
+ Display.showAlertBackground(settings);
- expect(alertBackground.className).toEqual("normal top");
+ expect(alertBackground.className).toEqual("bg-default top");
});
- it("should set the correct class for the alert when location is middle of the page", function () {
+ it("should set the correct class when location is middle of the page", function () {
settings.location = 1;
- Display.doEntranceTransition(settings);
+ Display.showAlertBackground(settings);
- expect(alertBackground.className).toEqual("normal middle");
+ expect(alertBackground.className).toEqual("bg-default middle");
});
- it("should set the correct class for the alert when location is bottom of the page", function () {
- Display.doEntranceTransition(settings);
+ it("should set the correct class when location is bottom of the page", function () {
+ Display.showAlertBackground(settings);
- expect(alertBackground.className).toEqual("normal bottom");
+ expect(alertBackground.className).toEqual("bg-default bottom");
});
});
-describe("Display.doExitTransition", function () {
+describe("Display.hideAlertBackground", function () {
var alertBackground;
beforeEach(function () {
@@ -272,36 +273,29 @@ describe("Display.doExitTransition", function () {
Display._alerts = [];
});
- it("should set the styles correctly when the doExitTransition method is called", function () {
- Display.doExitTransition();
+ it("should set the styles correctly when the hideAlertBackground method is called", function () {
+ Display.hideAlertBackground();
expect(alertBackground.style.height).toEqual('0%');
expect(alertBackground.style.transition).toEqual("1s linear");
});
- it("should set the correct states when doExitTransition is called", function () {
- Display.doExitTransition();
+ it("should set the correct states when hideAlertBackground is called", function () {
+ Display.hideAlertBackground();
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();
+describe("Display.displayNextAlert", function () {
+ Display.displayNextAlert();
it("should return null if there are no alerts in the queue", function () {
Display._alerts = [];
- Display.getNextAlert();
+ Display.displayNextAlert();
- expect(Display.getNextAlert()).toBeNull();
+ expect(Display.displayNextAlert()).toBeNull();
});
it("should call the alert function correctly if there is an alert in the queue", function () {
@@ -313,14 +307,14 @@ describe("Display.getNextAlert", function () {
var alertObject = {text: "Queued Alert", settings: settings};
Display._alerts.push(JSON.stringify(alertObject));
spyOn(Display, "alert");
- Display.getNextAlert();
+ Display.displayNextAlert();
expect(Display.alert).toHaveBeenCalled();
expect(Display.alert).toHaveBeenCalledWith("Queued Alert",alertObject.settings);
});
});
-describe("Display.textAnimationEnd", function() {
+describe("Display.hideAlertText", function() {
var alertBackground, alertText;
beforeEach(function () {
document.body.innerHTML = "";
@@ -330,98 +324,96 @@ describe("Display.textAnimationEnd", function() {
alertText = document.createElement("p");
alertText.setAttribute("id", "alert");
alertText.style.visibility = "visible";
- alertText.style.animation = "alert-scrolling-text 5s linear 0s 1 normal";
+ alertText.style.animation = "alert-scrolling-text 5s linear 0s 1 bg-default";
alertBackground.appendChild(alertText);
Display._animationState = AnimationState.ScrollingText;
});
it("should reset the text styles and animation state after the text has scrolled", function() {
- Display.textAnimationEnd();
+ Display.hideAlertText();
expect(alertText.style.animation).toEqual("");
expect(alertText.style.visibility).toEqual("hidden");
+ expect(alertText.style.color).toEqual("rgb(255, 255, 255)");
+ expect(alertText.style.fontSize).toEqual("40pt");
expect(Display._animationState).toEqual(AnimationState.NoAnimation);
});
- it("should call the doExitTranstion method", function() {
- spyOn(Display, "doExitTransition");
- Display.textAnimationEnd();
+ it("should call the alert background method", function() {
+ spyOn(Display, "hideAlertBackground");
+ Display.hideAlertText();
- expect(Display.doExitTransition).toHaveBeenCalled();
+ expect(Display.hideAlertBackground).toHaveBeenCalled();
});
});
-describe("Display.alertEntranceTransitionEnd", function () {
- var alertBackground, alertText;
+describe("Display.showAlertText", function () {
+ var alertText, settings;
beforeEach(function () {
- document.body.innerHTML = "";
- alertBackground = document.createElement("div");
- alertBackground.setAttribute("id", "alert-background");
- alertBackground.setAttribute("class", "normal");
- document.body.appendChild(alertBackground);
+ document.body.innerHTML = "";
alertText = document.createElement("p");
alertText.setAttribute("id","alert");
- alertBackground.appendChild(alertText);
- });
-
- it("should set the correct styles on entrance transition (with scroll)", function () {
- var settings = {
+ document.body.appendChild(alertText);
+ settings = {
"location": 2, "font_face": "Tahoma", "font_size": 40,
"font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)",
- "timeout": 5, "repeat": 1, "scroll": true
- };
+ "timeout": 0.01, "repeat": 1, "scroll": true
+ };
Display._transitionState = TransitionState.EntranceTransition;
- Display.alertEntranceTransitionEnd(settings);
+ });
+
+ it("should set the correct styles on the text", function() {
+ Display.showAlertText(settings);
expect(alertText.style.visibility).toEqual("visible");
- expect(alertText.style.animation).toEqual("alert-scrolling-text 5s linear 0s 1 normal");
- expect(Display._animationState).toEqual(AnimationState.ScrollingText);
- expect(Display._transitionState).toEqual(TransitionState.NoTransition);
+ expect(alertText.style.color).toEqual("rgb(255, 255, 255)");
+ expect(alertText.style.fontFamily).toEqual("Tahoma");
+ expect(alertText.style.fontSize).toEqual("40pt");
+ });
+
+ it("should set the correct animation when text is set to scroll)", function () {
+ Display.showAlertText(settings);
+
+ expect(alertText.style.animation).toEqual("alert-scrolling-text " + settings.timeout + "s linear 0s 1 normal");
+ expect(Display._animationState).toEqual(AnimationState.ScrollingText);
});
it("should set the correct styles on entrance transition (without scroll)", function (done) {
-
- var settings = {
- "location": 2, "font_face": "Tahoma", "font_size": 40,
- "font_color": "rgb(255, 255, 255)", "scroll": false, "repeat": 1,
- "timeout": 0.01, "background_color": "rgb(102, 0, 0)"
- };
+ settings.scroll = false;
Display._transitionState = TransitionState.EntranceTransition;
- spyOn(Display, "doExitTransition");
- Display.alertEntranceTransitionEnd(settings);
+ spyOn(Display, "hideAlertBackground");
+ Display.showAlertText(settings);
expect(alertText.style.visibility).toEqual("visible");
expect(alertText.style.animation).toEqual("");
expect(Display._animationState).toEqual(AnimationState.NonScrollingText);
- expect(Display._transitionState).toEqual(TransitionState.NoTransition);
- setTimeout (function () {
+ setTimeout (function () {
+ expect(alertText.className).toEqual("no-scroll");
expect(Display._animationState).toEqual(AnimationState.NoAnimation);
- expect(Display.doExitTransition).toHaveBeenCalled();
+ expect(Display.hideAlertBackground).toHaveBeenCalled();
done();
}, settings.timeout * 1000);
});
});
-describe("Display.alertExitTransitionEnd", function () {
- var alertBackground, alertText;
+describe("Display.hideAlertBackground", function () {
+ var alertBackground;
beforeEach( function() {
document.body.innerHTML = "";
alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background");
- alertBackground.setAttribute("class", "normal");
+ alertBackground.setAttribute("class", "bg-default");
document.body.appendChild(alertBackground);
- alertText = document.createElement("p");
- alertText.setAttribute("id","alert");
- alertBackground.appendChild(alertText);
});
-
- it("should set the styles to default on exit transition", function() {
- Display.alertExitTransitionEnd();
-
- expect(Display._transitionState).toEqual(TransitionState.NoTransition);
- expect(alertText.style.visibility).toEqual("hidden");
- expect(alertBackground.className).toEqual("normal");
+ it("reset the background to default once an aletr has been displayed", function() {
+ spyOn(Display, "displayNextAlert");
+ Display.hideAlertBackground();
+
+ expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
+ expect(Display._alertState).toEqual(AlertState.NotDisplaying);
+ expect(alertBackground.style.height).toEqual("0%");
+ expect(alertBackground.className).toEqual("bg-default");
});
});