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

Fixed buggy alerts and refactored CSS

Browse Source
This commit is contained in:
Nico Opiyo 2019-03-17 22:05:31 +03:00
parent 7a1c82096d
commit fe6130a534
5 changed files with 166 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
openlp/core/display/html/display.css
View File

@ -11,8 +11,8 @@
animation-name: alert-scrolling-text; animation-name: alert-scrolling-text;
} }
/* ALERT STYLING */ /* ALERT BACKGROUND STYLING */
.normal { .bg-default {
position: absolute; position: absolute;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -24,7 +24,7 @@
visibility:hidden; visibility:hidden;
} }
.normal.middle { .bg-default.middle {
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-right: -50%; margin-right: -50%;
@ -32,16 +32,17 @@
bottom: initial; bottom: initial;
} }
.normal.top { .bg-default.top {
top: 0; top: 0;
bottom: initial; bottom: initial;
} }
.normal.bottom { .bg-default.bottom {
top: initial; top: initial;
bottom: 0; bottom: 0;
} }
/* ALERT BACKGROUND STYLING */
#alert { #alert {
position: relative; position: relative;
top: 50%; top: 50%;
@ -51,4 +52,8 @@
white-space: nowrap; white-space: nowrap;
color: #ffffff; color: #ffffff;
visibility: hidden; visibility: hidden;
}
.no-scroll {
margin: 0 20px;
} }

11
openlp/core/display/html/display.html
View File

@ -2,8 +2,7 @@
<html> <html>
<head> <head>
<title>Display Window</title> <title>Display Window</title>
<link href="reveal.css" rel="stylesheet"> <link href="reveal.css" rel="stylesheet">
<link href="display.css" rel="stylesheet">
<style type="text/css"> <style type="text/css">
body { body {
background: transparent !important; background: transparent !important;
@ -27,18 +26,18 @@
} }
</style> </style>
<link rel="stylesheet" type="text/css" href="display.css"></link>
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="reveal.js"></script> <script type="text/javascript" src="reveal.js"></script>
<script type="text/javascript" src="display.css"></script> <script type="text/javascript" src="display.js"></script>
</head> </head>
<body> <body>
<div class="reveal"> <div class="reveal">
<div id="global-background" class="slide-background present" data-loaded="true"></div> <div id="global-background" class="slide-background present" data-loaded="true"></div>
<div id="alert-background" class="normal"><p id="alert">Testing alerts</p></div> <div id="alert-background" class="bg-default"><p class="" id="alert">Testing alerts</p></div>
<div class="slides"></div> <div class="slides"></div>
<div class="footer"></div> <div class="footer"></div>
</div> </div>
<script type="text/javascript" src="display.js"></script>
</body> </body>
</html> </html>

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

@ -287,6 +287,7 @@ AudioPlayer.prototype.stop = function () {
var Display = { var Display = {
_alerts: [], _alerts: [],
_slides: {}, _slides: {},
_alertSettings: {},
_alertState: AlertState.NotDisplaying, _alertState: AlertState.NotDisplaying,
_transitionState: TransitionState.NoTransition, _transitionState: TransitionState.NoTransition,
_animationState: AnimationState.NoAnimation, _animationState: AnimationState.NoAnimation,
@ -411,20 +412,23 @@ var Display = {
/** /**
* Display an alert * Display an alert
* @param {string} text - The alert text * @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) { alert: function (text, alert_settings) {
if (text == "") { if (text == "") {
return null; return null;
} }
else { else {
if (this._alertState === AlertState.Displaying) { if (this._alertState === AlertState.Displaying || this._alertState === AlertState.DisplayingFromQueue) {
var alertObject = {text: text, settings: alert_settings}; var alertObject = {text: text, settings: alert_settings};
this._alerts.push(JSON.stringify(alertObject)); this._alerts.push(JSON.stringify(alertObject));
return null; return null;
} }
} }
var settings = JSON.parse(alert_settings); var settings = JSON.parse(alert_settings);
this._alertSettings = settings;
var alertBackground = $("#alert-background")[0]; var alertBackground = $("#alert-background")[0];
var alertText = $("#alert")[0]; var alertText = $("#alert")[0];
alertText.innerHTML = text; alertText.innerHTML = text;
@ -433,33 +437,32 @@ var Display = {
this._alertState = AlertState.Displaying; this._alertState = AlertState.Displaying;
} }
Display.doEntranceTransition(settings); Display.showAlertBackground(settings);
alertBackground.addEventListener('transitionend', function(e) { alertBackground.addEventListener('transitionend', function (e) {
e.stopPropagation(); e.stopPropagation();
if (Display._transitionState === TransitionState.EntranceTransition) { if (Display._transitionState === TransitionState.EntranceTransition) {
console.debug("Calling alertEntranceTransitionEnd"); Display._transitionState = TransitionState.NoTransition;
Display.alertEntranceTransitionEnd(settings); Display.showAlertText(Display._alertSettings);
} }
else { else if (Display._transitionState === TransitionState.ExitTransition){
console.debug("Calling alertExitTransitionEnd"); Display._transitionState = TransitionState.NoTransition;
Display.alertExitTransitionEnd(); alertBackground.classList = "bg-default";
Display.displayNextAlert();
} }
}); });
alertText.addEventListener('animationend', function (e) { alertText.addEventListener('animationend', function (e) {
e.stopPropagation(); e.stopPropagation();
console.debug("The text scrolling has ended"); Display.hideAlertText();
Display.textAnimationEnd();
}); });
}, },
/** /**
* Start background entrance transition for display of alert * 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) { showAlertBackground: function (settings) {
var alertBackground = $("#alert-background")[0]; var alertBackground = $("#alert-background")[0];
var alertText = $("#alert")[0];
var transitionSetting; var transitionSetting;
switch (settings.location) { switch (settings.location) {
case AlertLocation.Top: case AlertLocation.Top:
@ -472,10 +475,7 @@ var Display = {
default: default:
alertBackground.classList.add("bottom"); alertBackground.classList.add("bottom");
break; 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; alertBackground.style.backgroundColor = settings.background_color;
if (this._alertState === AlertState.DisplayingFromQueue) { if (this._alertState === AlertState.DisplayingFromQueue) {
@ -483,7 +483,7 @@ var Display = {
} }
else { else {
transitionSetting = "1s linear"; transitionSetting = "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.height = "25%"; alertBackground.style.height = "25%";
@ -496,18 +496,56 @@ var Display = {
* Start background exit transition once alert has been displayed * Start background exit transition once alert has been displayed
* @param {string} location - Integer showing the location of the alert on screen * @param {string} location - Integer showing the location of the alert on screen
*/ */
doExitTransition: function () { hideAlertBackground: function () {
var alertBackground = $("#alert-background")[0]; var alertBackground = $("#alert-background")[0];
alertBackground.style.height = "0%"; alertBackground.style.height = "0%";
alertBackground.style.transition = "1s linear"; alertBackground.style.transition = "1s linear";
this._transitionState = TransitionState.ExitTransition; this._transitionState = TransitionState.ExitTransition;
this._alertState = AlertState.NotDisplaying; this._alertState = AlertState.NotDisplaying;
Display.getNextAlert(); },
/**
* 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 * Display the next alert in the queue
*/ */
getNextAlert: function () { displayNextAlert: 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;
@ -516,55 +554,7 @@ var Display = {
else { else {
return null; 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. * Add a slide. If the slide exists but the HTML is different, update the slide.
* @param {string} verse - The verse number, e.g. "v1" * @param {string} verse - The verse number, e.g. "v1"

1
openlp/plugins/alerts/lib/alertstab.py
View File

@ -205,6 +205,7 @@ class AlertsTab(SettingsTab):
self.font_color_button.color = self.font_color self.font_color_button.color = self.font_color
self.background_color_button.color = self.background_color self.background_color_button.color = self.background_color
self.repeat_spin_box.setValue(self.repeat) self.repeat_spin_box.setValue(self.repeat)
self.repeat_spin_box.setEnabled(self.scroll)
self.vertical_combo_box.setCurrentIndex(self.location) self.vertical_combo_box.setCurrentIndex(self.location)
self.scroll_check_box.setChecked(self.scroll) self.scroll_check_box.setChecked(self.scroll)
font = QtGui.QFont() font = QtGui.QFont()

176
tests/js/test_display.js
View File

@ -154,7 +154,7 @@ describe("The Display object", function () {
}); });
describe("Display.alert", function () { describe("Display.alert", function () {
var alertBackground, alert, settings,_alertState; var alertBackground, alert, settings;
beforeEach(function () { beforeEach(function () {
document.body.innerHTML = ""; document.body.innerHTML = "";
@ -190,16 +190,23 @@ describe("Display.alert", function () {
expect(Display._alerts.length).toEqual(1); expect(Display._alerts.length).toEqual(1);
expect(Display._alerts[0]).toEqual(queuedAlert); 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 () { beforeEach(function () {
document.body.innerHTML = ""; document.body.innerHTML = "";
style = document.createElement("style"); style = document.createElement("style");
style.type = "text/css"; 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; \ width: 100%; height: 0%; vertical-align: middle; overflow: hidden; visibility:hidden; \
}'; }';
settings = { settings = {
@ -211,27 +218,21 @@ describe("Display.doEntranceTransition", function () {
document.head.appendChild(style); document.head.appendChild(style);
alertBackground = document.createElement("div"); alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background"); alertBackground.setAttribute("id", "alert-background");
alertBackground.setAttribute("class", "normal"); alertBackground.setAttribute("class", "bg-default");
document.body.appendChild(alertBackground); document.body.appendChild(alertBackground);
alertText = document.createElement("p");
alertText.setAttribute("id","alert");
alertBackground.appendChild(alertText);
Display._alertState = AlertState.NotDisplaying; Display._alertState = AlertState.NotDisplaying;
}); });
it("should set the correct transition state", function () { it("should set the correct transition state", function () {
Display.doEntranceTransition(settings); Display.showAlertBackground(settings);
expect(Display._transitionState).toEqual(TransitionState.EntranceTransition); expect(Display._transitionState).toEqual(TransitionState.EntranceTransition);
}) })
it("should apply the styles correctly when doEntranceTransition is called", function (done) { it("should apply the styles correctly when showAlertBackground is called", function (done) {
Display.doEntranceTransition(settings); Display.showAlertBackground(settings);
expect(alertBackground.className).toBe("normal bottom"); expect(alertBackground.className).toBe("bg-default bottom");
setTimeout(function () { 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.style.backgroundColor).toEqual(settings.background_color);
expect(alertBackground.style.height).toEqual("25%"); expect(alertBackground.style.height).toEqual("25%");
expect(alertBackground.style.transition).toEqual("1s linear"); expect(alertBackground.style.transition).toEqual("1s linear");
@ -240,28 +241,28 @@ describe("Display.doEntranceTransition", function () {
}, 50); }, 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; 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; 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 () { it("should set the correct class when location is bottom of the page", function () {
Display.doEntranceTransition(settings); 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; var alertBackground;
beforeEach(function () { beforeEach(function () {
@ -272,36 +273,29 @@ describe("Display.doExitTransition", function () {
Display._alerts = []; Display._alerts = [];
}); });
it("should set the styles correctly when the doExitTransition method is called", function () { it("should set the styles correctly when the hideAlertBackground method is called", function () {
Display.doExitTransition(); Display.hideAlertBackground();
expect(alertBackground.style.height).toEqual('0%'); 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 () { it("should set the correct states when hideAlertBackground is called", function () {
Display.doExitTransition(); Display.hideAlertBackground();
expect(Display._alertState).toEqual(AlertState.NotDisplaying); expect(Display._alertState).toEqual(AlertState.NotDisplaying);
expect(Display._transitionState).toEqual(TransitionState.ExitTransition); 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 () { describe("Display.displayNextAlert", function () {
Display.getNextAlert(); Display.displayNextAlert();
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.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 () { 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}; 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.getNextAlert(); Display.displayNextAlert();
expect(Display.alert).toHaveBeenCalled(); expect(Display.alert).toHaveBeenCalled();
expect(Display.alert).toHaveBeenCalledWith("Queued Alert",alertObject.settings); expect(Display.alert).toHaveBeenCalledWith("Queued Alert",alertObject.settings);
}); });
}); });
describe("Display.textAnimationEnd", function() { describe("Display.hideAlertText", function() {
var alertBackground, alertText; var alertBackground, alertText;
beforeEach(function () { beforeEach(function () {
document.body.innerHTML = ""; document.body.innerHTML = "";
@ -330,98 +324,96 @@ describe("Display.textAnimationEnd", function() {
alertText = document.createElement("p"); alertText = document.createElement("p");
alertText.setAttribute("id", "alert"); alertText.setAttribute("id", "alert");
alertText.style.visibility = "visible"; 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); alertBackground.appendChild(alertText);
Display._animationState = AnimationState.ScrollingText; Display._animationState = AnimationState.ScrollingText;
}); });
it("should reset the text styles and animation state after the text has scrolled", function() { 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.animation).toEqual("");
expect(alertText.style.visibility).toEqual("hidden"); 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); expect(Display._animationState).toEqual(AnimationState.NoAnimation);
}); });
it("should call the doExitTranstion method", function() { it("should call the alert background method", function() {
spyOn(Display, "doExitTransition"); spyOn(Display, "hideAlertBackground");
Display.textAnimationEnd(); Display.hideAlertText();
expect(Display.doExitTransition).toHaveBeenCalled(); expect(Display.hideAlertBackground).toHaveBeenCalled();
}); });
}); });
describe("Display.alertEntranceTransitionEnd", function () { describe("Display.showAlertText", function () {
var alertBackground, alertText; var alertText, settings;
beforeEach(function () { beforeEach(function () {
document.body.innerHTML = ""; document.body.innerHTML = "";
alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background");
alertBackground.setAttribute("class", "normal");
document.body.appendChild(alertBackground);
alertText = document.createElement("p"); alertText = document.createElement("p");
alertText.setAttribute("id","alert"); alertText.setAttribute("id","alert");
alertBackground.appendChild(alertText); document.body.appendChild(alertText);
}); settings = {
it("should set the correct styles on entrance transition (with scroll)", function () {
var settings = {
"location": 2, "font_face": "Tahoma", "font_size": 40, "location": 2, "font_face": "Tahoma", "font_size": 40,
"font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)", "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._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.visibility).toEqual("visible");
expect(alertText.style.animation).toEqual("alert-scrolling-text 5s linear 0s 1 normal"); expect(alertText.style.color).toEqual("rgb(255, 255, 255)");
expect(Display._animationState).toEqual(AnimationState.ScrollingText); expect(alertText.style.fontFamily).toEqual("Tahoma");
expect(Display._transitionState).toEqual(TransitionState.NoTransition); 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) { it("should set the correct styles on entrance transition (without scroll)", function (done) {
settings.scroll = false;
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)"
};
Display._transitionState = TransitionState.EntranceTransition; Display._transitionState = TransitionState.EntranceTransition;
spyOn(Display, "doExitTransition"); spyOn(Display, "hideAlertBackground");
Display.alertEntranceTransitionEnd(settings); Display.showAlertText(settings);
expect(alertText.style.visibility).toEqual("visible"); expect(alertText.style.visibility).toEqual("visible");
expect(alertText.style.animation).toEqual(""); expect(alertText.style.animation).toEqual("");
expect(Display._animationState).toEqual(AnimationState.NonScrollingText); 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._animationState).toEqual(AnimationState.NoAnimation);
expect(Display.doExitTransition).toHaveBeenCalled(); expect(Display.hideAlertBackground).toHaveBeenCalled();
done(); done();
}, settings.timeout * 1000); }, settings.timeout * 1000);
}); });
}); });
describe("Display.alertExitTransitionEnd", function () { describe("Display.hideAlertBackground", function () {
var alertBackground, alertText; var alertBackground;
beforeEach( function() { beforeEach( function() {
document.body.innerHTML = ""; document.body.innerHTML = "";
alertBackground = document.createElement("div"); alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background"); alertBackground.setAttribute("id", "alert-background");
alertBackground.setAttribute("class", "normal"); alertBackground.setAttribute("class", "bg-default");
document.body.appendChild(alertBackground); document.body.appendChild(alertBackground);
alertText = document.createElement("p");
alertText.setAttribute("id","alert");
alertBackground.appendChild(alertText);
}); });
it("reset the background to default once an aletr has been displayed", function() {
it("should set the styles to default on exit transition", function() { spyOn(Display, "displayNextAlert");
Display.alertExitTransitionEnd(); Display.hideAlertBackground();
expect(Display._transitionState).toEqual(TransitionState.NoTransition); expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
expect(alertText.style.visibility).toEqual("hidden"); expect(Display._alertState).toEqual(AlertState.NotDisplaying);
expect(alertBackground.className).toEqual("normal"); expect(alertBackground.style.height).toEqual("0%");
expect(alertBackground.className).toEqual("bg-default");
}); });
}); });