forked from openlp/openlp
Fixed buggy alerts and refactored CSS
This commit is contained in:
parent
7a1c82096d
commit
fe6130a534
@ -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%;
|
||||||
@ -52,3 +53,7 @@
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-scroll {
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
@ -3,7 +3,6 @@
|
|||||||
<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>
|
||||||
|
@ -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:
|
||||||
@ -473,9 +476,6 @@ var Display = {
|
|||||||
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) {
|
||||||
@ -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;
|
||||||
@ -517,54 +555,6 @@ var Display = {
|
|||||||
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"
|
||||||
|
@ -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()
|
||||||
|
@ -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(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);
|
expect(Display._animationState).toEqual(AnimationState.ScrollingText);
|
||||||
expect(Display._transitionState).toEqual(TransitionState.NoTransition);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
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() {
|
||||||
|
spyOn(Display, "displayNextAlert");
|
||||||
|
Display.hideAlertBackground();
|
||||||
|
|
||||||
it("should set the styles to default on exit transition", function() {
|
expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
|
||||||
Display.alertExitTransitionEnd();
|
expect(Display._alertState).toEqual(AlertState.NotDisplaying);
|
||||||
|
expect(alertBackground.style.height).toEqual("0%");
|
||||||
expect(Display._transitionState).toEqual(TransitionState.NoTransition);
|
expect(alertBackground.className).toEqual("bg-default");
|
||||||
expect(alertText.style.visibility).toEqual("hidden");
|
|
||||||
expect(alertBackground.className).toEqual("normal");
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user