forked from openlp/openlp
Cleaned up Javascript and refactored the functions and tests plus optimized animation of text
This commit is contained in:
parent
fe6130a534
commit
c25f4d8197
@ -1,12 +1,12 @@
|
|||||||
/* Animation key frames for horizontal scrolling of alert */
|
/* Animation key frames for horizontal scrolling of alert */
|
||||||
@keyframes alert-scrolling-text {
|
/* @keyframes alert-scrolling-text {
|
||||||
from { margin-left: 100%; }
|
from { margin-left: 100%; }
|
||||||
to { margin-left: -300% }
|
to { margin-left: -300% }
|
||||||
}
|
} */
|
||||||
|
|
||||||
.horizontal-scroll-animation {
|
.horizontal-scroll-animation {
|
||||||
animation-duration: 10s;
|
animation-duration: 10s;
|
||||||
animation-iteration-count: 1;
|
animation-iteration-count: 2;
|
||||||
animation-timing-function: linear;
|
animation-timing-function: linear;
|
||||||
animation-name: alert-scrolling-text;
|
animation-name: alert-scrolling-text;
|
||||||
}
|
}
|
||||||
@ -17,11 +17,14 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 10;
|
z-index: 11;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0%;
|
height: 0%;
|
||||||
|
min-height: 0%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
visibility:hidden;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-default.middle {
|
.bg-default.middle {
|
||||||
@ -44,16 +47,13 @@
|
|||||||
|
|
||||||
/* ALERT BACKGROUND STYLING */
|
/* ALERT BACKGROUND STYLING */
|
||||||
#alert {
|
#alert {
|
||||||
|
z-index: 12;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
z-index: 12;
|
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
visibility: hidden;
|
opacity: 0;
|
||||||
}
|
transform: translateX(110%);
|
||||||
|
|
||||||
.no-scroll {
|
|
||||||
margin: 0 20px;
|
|
||||||
}
|
}
|
@ -26,6 +26,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
<style type="text/css" id="keyframeStyles"></style>
|
||||||
<link rel="stylesheet" type="text/css" href="display.css"></link>
|
<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>
|
||||||
|
@ -164,10 +164,6 @@ function _pathToString(path) {
|
|||||||
return filename;
|
return filename;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* An audio player with a play list
|
* An audio player with a play list
|
||||||
*/
|
*/
|
||||||
@ -422,49 +418,129 @@ var Display = {
|
|||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
if (this._alertState === AlertState.Displaying || this._alertState === AlertState.DisplayingFromQueue) {
|
if (this._alertState === AlertState.Displaying || this._alertState === AlertState.DisplayingFromQueue) {
|
||||||
var alertObject = {text: text, settings: alert_settings};
|
addAlertToQueue(text, alert_settings);
|
||||||
this._alerts.push(JSON.stringify(alertObject));
|
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var settings = JSON.parse(alert_settings);
|
var settings = JSON.parse(alert_settings);
|
||||||
this._alertSettings = settings;
|
this._alertSettings = settings;
|
||||||
var alertBackground = $("#alert-background")[0];
|
Display.setAlertText(text);
|
||||||
var alertText = $("#alert")[0];
|
|
||||||
alertText.innerHTML = text;
|
Display.initAlertEventListeners();
|
||||||
|
|
||||||
|
if (settings.scroll === true) {
|
||||||
|
Display.setAlertKeyframes($('#alert'[0].scrollWidth));
|
||||||
|
}
|
||||||
/* Check if the alert is a queued alert */
|
/* Check if the alert is a queued alert */
|
||||||
if (this._alertState !== AlertState.DisplayingFromQueue) {
|
if (Display._alertState !== AlertState.DisplayingFromQueue) {
|
||||||
this._alertState = AlertState.Displaying;
|
Display._alertState = AlertState.Displaying;
|
||||||
}
|
}
|
||||||
|
|
||||||
Display.showAlertBackground(settings);
|
Display.showAlertBackground(settings);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Initialize alert event listeners
|
||||||
|
*/
|
||||||
|
initAlertEventListeners: function () {
|
||||||
|
var alertBackground = $("#alert-background")[0];
|
||||||
|
var alertText = $("#alert")[0];
|
||||||
|
|
||||||
alertBackground.addEventListener('transitionend', function (e) {
|
alertBackground.addEventListener('transitionend', Display.alertTransitionEndEvent, false);
|
||||||
|
alertText.addEventListener('animationend', Display.alertAnimationEndEvent, false);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Add an alert to the alert queue
|
||||||
|
* @param {string} text - The alert text to be displayed
|
||||||
|
* @param {string} setttings - JSON object containing the settings for the alert
|
||||||
|
*/
|
||||||
|
addAlertToQueue: function (text, settings) {
|
||||||
|
var alertObject = {text: text, settings: settings};
|
||||||
|
this._alerts.push(JSON.stringify(alertObject));
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Set Alert Text
|
||||||
|
* @param {string} text - The alert text to display
|
||||||
|
*/
|
||||||
|
setAlertText: function (text) {
|
||||||
|
var alertText = $("#alert")[0];
|
||||||
|
alertText.textContent = text;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Set the keyframe styles for the scrolling text
|
||||||
|
* @param {int} scrollWidth - The length of the paragraph with the alert text
|
||||||
|
*/
|
||||||
|
setAlertKeyframes: function (scrollWidth) {
|
||||||
|
var keyframeStyle = $('#keyframeStyles')[0];
|
||||||
|
var scrollWidthPercentage = Math.ceil((((scrollWidth / screen.width) * 100) + 1) / 10) * 10;
|
||||||
|
scrollWidthPercentage += 110; // Scroll the full text length
|
||||||
|
var keyframes = "@keyframes alert-scrolling-text {" +
|
||||||
|
"from { transform: translateX(110%); } " +
|
||||||
|
"to { transform: translateX(-" + scrollWidthPercentage + "%);}";
|
||||||
|
keyframeStyle.innerHTML = keyframes;
|
||||||
|
return keyframes;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* The alertTransitionEndEvent called after a transition has ended
|
||||||
|
*/
|
||||||
|
alertTransitionEndEvent: function (e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
if (Display._transitionState === TransitionState.EntranceTransition) {
|
if (Display._transitionState === TransitionState.EntranceTransition) {
|
||||||
Display._transitionState = TransitionState.NoTransition;
|
Display._transitionState = TransitionState.NoTransition;
|
||||||
Display.showAlertText(Display._alertSettings);
|
Display.showAlertText(Display._alertSettings);
|
||||||
|
console.log("Show alert has been called");
|
||||||
}
|
}
|
||||||
else if (Display._transitionState === TransitionState.ExitTransition){
|
else if (Display._transitionState === TransitionState.ExitTransition) {
|
||||||
Display._transitionState = TransitionState.NoTransition;
|
Display._transitionState = TransitionState.NoTransition;
|
||||||
alertBackground.classList = "bg-default";
|
|
||||||
Display.displayNextAlert();
|
Display.displayNextAlert();
|
||||||
}
|
}
|
||||||
});
|
else if (Display._transitionState === "animatingText") {
|
||||||
|
if (e.propertyName === "transform") {
|
||||||
alertText.addEventListener('animationend', function (e) {
|
console.log("The text transform has ended");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* The alertAnimationEndEvent called after a animation has ended
|
||||||
|
*/
|
||||||
|
alertAnimationEndEvent: function (e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
Display.hideAlertText();
|
Display.hideAlertText();
|
||||||
});
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Start background entrance transition for display of alert
|
* Start background entrance transition for display of alert
|
||||||
* @param {object} location - The location of the alert (top, middle or bottom)
|
* @param {string} JSON object - JSON object containing the alert settings
|
||||||
*/
|
*/
|
||||||
showAlertBackground: function (settings) {
|
showAlertBackground: function (settings) {
|
||||||
var alertBackground = $("#alert-background")[0];
|
var alertBackground = $("#alert-background")[0];
|
||||||
var transitionSetting;
|
var transitionSetting;
|
||||||
switch (settings.location) {
|
|
||||||
|
Display.setAlertLocation(settings.location);
|
||||||
|
|
||||||
|
alertBackground.style.backgroundColor = settings.background_color;
|
||||||
|
|
||||||
|
if (Display._alertState === AlertState.DisplayingFromQueue) {
|
||||||
|
transitionSetting = "height 1s linear 2s";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
transitionSetting = "height 1s linear";
|
||||||
|
}
|
||||||
|
// Wait for styles to be set first before starting transition
|
||||||
|
setTimeout( function() {
|
||||||
|
alertBackground.style.height = "auto";
|
||||||
|
alertBackground.style.minHeight = "25%";
|
||||||
|
alertBackground.style.transition = transitionSetting;
|
||||||
|
alertBackground.style.visibility = "visible";
|
||||||
|
}, 50);
|
||||||
|
this._transitionState = TransitionState.EntranceTransition;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Set the location of the alert
|
||||||
|
* @param {int} location - Integer number with the location of the alert on screen
|
||||||
|
*/
|
||||||
|
setAlertLocation: function (location) {
|
||||||
|
var alertBackground = $("#alert-background")[0];
|
||||||
|
|
||||||
|
switch (location) {
|
||||||
case AlertLocation.Top:
|
case AlertLocation.Top:
|
||||||
alertBackground.classList.add("top");
|
alertBackground.classList.add("top");
|
||||||
break;
|
break;
|
||||||
@ -476,30 +552,16 @@ var Display = {
|
|||||||
alertBackground.classList.add("bottom");
|
alertBackground.classList.add("bottom");
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
alertBackground.style.backgroundColor = settings.background_color;
|
|
||||||
|
|
||||||
if (this._alertState === AlertState.DisplayingFromQueue) {
|
|
||||||
transitionSetting = "1s linear 2s";
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
transitionSetting = "1s linear";
|
|
||||||
}
|
|
||||||
// Wait for styles to be set first before starting transition
|
|
||||||
setTimeout( function() {
|
|
||||||
alertBackground.style.height = "25%";
|
|
||||||
alertBackground.style.transition = transitionSetting;
|
|
||||||
alertBackground.style.visibility = "visible";
|
|
||||||
}, 50);
|
|
||||||
this._transitionState = TransitionState.EntranceTransition;
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Start background exit transition once alert has been displayed
|
* Hide the alert background after the alert has been shown
|
||||||
* @param {string} location - Integer showing the location of the alert on screen
|
|
||||||
*/
|
*/
|
||||||
hideAlertBackground: 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.minHeight = "0%";
|
||||||
|
alertBackground.style.transition = "height 1s linear";
|
||||||
|
alertBackground.className = "bg-default";
|
||||||
this._transitionState = TransitionState.ExitTransition;
|
this._transitionState = TransitionState.ExitTransition;
|
||||||
this._alertState = AlertState.NotDisplaying;
|
this._alertState = AlertState.NotDisplaying;
|
||||||
},
|
},
|
||||||
@ -509,11 +571,11 @@ var Display = {
|
|||||||
*/
|
*/
|
||||||
showAlertText: function (settings) {
|
showAlertText: function (settings) {
|
||||||
var alertText = $("#alert")[0];
|
var alertText = $("#alert")[0];
|
||||||
alertText.style.visibility = "visible";
|
alertText.style.opacity = 1;
|
||||||
alertText.style.color = settings.font_color;
|
alertText.style.color = settings.font_color;
|
||||||
alertText.style.fontFamily = settings.font_face;
|
alertText.style.fontFamily = settings.font_face;
|
||||||
alertText.style.fontSize = settings.font_size + "pt";
|
alertText.style.fontSize = settings.font_size + "pt";
|
||||||
alertText.classList.add("no-scroll");
|
|
||||||
if (settings.scroll) {
|
if (settings.scroll) {
|
||||||
var animationSettings = "alert-scrolling-text " + settings.timeout +
|
var animationSettings = "alert-scrolling-text " + settings.timeout +
|
||||||
"s linear 0s " + settings.repeat + " normal";
|
"s linear 0s " + settings.repeat + " normal";
|
||||||
@ -523,6 +585,7 @@ var Display = {
|
|||||||
else {
|
else {
|
||||||
Display._animationState = AnimationState.NonScrollingText;
|
Display._animationState = AnimationState.NonScrollingText;
|
||||||
alertText.style.animation = "";
|
alertText.style.animation = "";
|
||||||
|
alertText.classList.add("no-scroll");
|
||||||
setTimeout (function () {
|
setTimeout (function () {
|
||||||
Display._animationState = AnimationState.NoAnimation;
|
Display._animationState = AnimationState.NoAnimation;
|
||||||
Display.hideAlertText();
|
Display.hideAlertText();
|
||||||
@ -536,11 +599,12 @@ var Display = {
|
|||||||
var alertText = $('#alert')[0];
|
var alertText = $('#alert')[0];
|
||||||
alertText.style.animation = "";
|
alertText.style.animation = "";
|
||||||
alertText.classList = "";
|
alertText.classList = "";
|
||||||
alertText.style.visibility = "hidden";
|
alertText.style.opacity = 0;
|
||||||
alertText.style.color = "rgb(255, 255, 255)";
|
alertText.style.color = "rgb(255, 255, 255)";
|
||||||
alertText.style.fontSize = "40pt";
|
alertText.style.fontSize = "40pt";
|
||||||
Display._animationState = AnimationState.NoAnimation;
|
Display._animationState = AnimationState.NoAnimation;
|
||||||
Display.hideAlertBackground();
|
Display.hideAlertBackground();
|
||||||
|
Display.resetAlertKeyframes();
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Display the next alert in the queue
|
* Display the next alert in the queue
|
||||||
@ -555,6 +619,13 @@ var Display = {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* Reset animation keyframes after displaying alert
|
||||||
|
*/
|
||||||
|
resetAlertKeyframes: function () {
|
||||||
|
var keyframeStyle = document.getElementById('keyframeStyles');
|
||||||
|
keyframeStyle.innerHTML = "";
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 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"
|
||||||
|
@ -154,20 +154,20 @@ describe("The Display object", function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe("Display.alert", function () {
|
describe("Display.alert", function () {
|
||||||
var alertBackground, alert, settings;
|
var alertBackground, alertText, settings;
|
||||||
|
|
||||||
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");
|
||||||
document.body.appendChild(alertBackground);
|
document.body.appendChild(alertBackground);
|
||||||
alert = document.createElement("p");
|
alertText = document.createElement("p");
|
||||||
alert.setAttribute("id","alert");
|
alertText.setAttribute("id","alert");
|
||||||
alertBackground.appendChild(alert);
|
alertBackground.appendChild(alertText);
|
||||||
settings = '{ \
|
settings = '{ \
|
||||||
"location": 1, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif", \
|
"location": 1, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif", \
|
||||||
"font_size": 40, "font_color": "#ffffff", "background_color": "#660000", \
|
"font_size": 40, "font_color": "#ffffff", "background_color": "#660000", \
|
||||||
"timeout": 5, "repeat": 1, "scrolling_text": true \
|
"timeout": 5, "repeat": 1, "scroll": true \
|
||||||
}';
|
}';
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -176,29 +176,72 @@ describe("Display.alert", function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it("should set the correct alert text", function () {
|
it("should set the correct alert text", function () {
|
||||||
|
spyOn("Display", "addAlertToQueue");
|
||||||
|
spyOn("Display", "initAlertEventListeners");
|
||||||
|
spyOn("Display", "setAlertKeyframes");
|
||||||
|
spyOn("Display", "showAlertBackground");
|
||||||
Display.alert("OPEN-LP-3.0 Alert Test", settings);
|
Display.alert("OPEN-LP-3.0 Alert Test", settings);
|
||||||
|
|
||||||
|
expect(Display.setAlertText).toHaveBeenCalled();
|
||||||
expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
|
expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should add alerts to the queue correctly if it called when an alert is displaying", function () {
|
it("should call the addAlertToQueue method if an alert is displaying", function () {
|
||||||
|
spyOn("Display", "addAlertToQueue");
|
||||||
Display._alerts = [];
|
Display._alerts = [];
|
||||||
Display._alertState = AlertState.Displaying;
|
Display._alertState = AlertState.Displaying;
|
||||||
var alertObject = {text: "Testing alert queue", settings: settings};
|
var text = "Testing alert queue";
|
||||||
var queuedAlert = JSON.stringify(alertObject);
|
|
||||||
Display.alert("Testing alert queue", settings);
|
|
||||||
|
|
||||||
expect(Display._alerts.length).toEqual(1);
|
Display.alert(text, settings);
|
||||||
expect(Display._alerts[0]).toEqual(queuedAlert);
|
|
||||||
|
expect(Display.addAlertToQueue).toHaveBeenCalledWith(text, settings);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should set the alert settings correctly", function() {
|
it("should set the alert settings correctly", function() {
|
||||||
|
spyOn("Display", "setAlertKeyframes");
|
||||||
Display.alert("Testing settings", settings);
|
Display.alert("Testing settings", settings);
|
||||||
|
|
||||||
console.debug("Settings", JSON.parse(settings));
|
|
||||||
expect(Display._alertSettings).toEqual(JSON.parse(settings));
|
expect(Display._alertSettings).toEqual(JSON.parse(settings));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("Display.initAlertEventListeners", function() {
|
||||||
|
var alertBackground, styles, alertText;
|
||||||
|
beforeEach(function() {
|
||||||
|
document.body.innerHTML = "";
|
||||||
|
styles = document.createElement("style");
|
||||||
|
styles.innerHTML = "@keyframes test { from {background-color: red;} \
|
||||||
|
to {background-color: yellow;}";
|
||||||
|
document.head.appendChild(styles);
|
||||||
|
alertBackground = document.createElement("div");
|
||||||
|
alertBackground.setAttribute("id", "alert-background");
|
||||||
|
document.body.appendChild(alertBackground);
|
||||||
|
alertText = document.createElement("p");
|
||||||
|
alertText.setAttribute("id","alert");
|
||||||
|
alertBackground.appendChild(alertText);
|
||||||
|
alertBackground.style.opacity = 0;
|
||||||
|
alertBackground.style.transition = "opacity 0.001s linear";
|
||||||
|
Display.initAlertEventListeners();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should set the transition end event listener correctly", function() {
|
||||||
|
spyOn("Display", "alertTransitionEndEvent");
|
||||||
|
|
||||||
|
alertBackground.style.opacity = 1;
|
||||||
|
|
||||||
|
expect(Display.alertTransitionEndEvent).toHaveBeenCalled();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should set the animation end event listener correctly", function() {
|
||||||
|
spyOn("Display", "alertAnimationEndEvent");
|
||||||
|
|
||||||
|
alertText.style.animation = "test 0.01s linear";
|
||||||
|
|
||||||
|
expect(Display.alertAnimationEndEvent).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe("Display.showAlertBackground", function () {
|
describe("Display.showAlertBackground", function () {
|
||||||
|
|
||||||
var alertBackground, css, settings, style;
|
var alertBackground, css, settings, style;
|
||||||
@ -234,57 +277,184 @@ describe("Display.showAlertBackground", function () {
|
|||||||
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
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("auto");
|
||||||
expect(alertBackground.style.transition).toEqual("1s linear");
|
expect(alertBackground.style.minHeight).toEqual("25%");
|
||||||
|
expect(alertBackground.style.transition).toEqual("height 1s linear");
|
||||||
expect(alertBackground.style.visibility).toEqual("visible");
|
expect(alertBackground.style.visibility).toEqual("visible");
|
||||||
done();
|
done();
|
||||||
}, 50);
|
}, 50);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should set the correct class when location is top of the page", function () {
|
|
||||||
settings.location = 0;
|
|
||||||
Display.showAlertBackground(settings);
|
|
||||||
|
|
||||||
expect(alertBackground.className).toEqual("bg-default top");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should set the correct class when location is middle of the page", function () {
|
|
||||||
settings.location = 1;
|
|
||||||
Display.showAlertBackground(settings);
|
|
||||||
|
|
||||||
expect(alertBackground.className).toEqual("bg-default middle");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should set the correct class when location is bottom of the page", function () {
|
|
||||||
Display.showAlertBackground(settings);
|
|
||||||
|
|
||||||
expect(alertBackground.className).toEqual("bg-default bottom");
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("Display.hideAlertBackground", function () {
|
describe("Display.hideAlertBackground", function () {
|
||||||
var alertBackground;
|
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");
|
||||||
document.body.appendChild(alertBackground);
|
document.body.appendChild(alertBackground);
|
||||||
Display._alerts = [];
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should set the styles correctly when the hideAlertBackground method is called", function () {
|
it("reset the background to default once an alert has been displayed", function() {
|
||||||
|
//spyOn(Display, "displayNextAlert");
|
||||||
Display.hideAlertBackground();
|
Display.hideAlertBackground();
|
||||||
|
|
||||||
expect(alertBackground.style.height).toEqual('0%');
|
|
||||||
expect(alertBackground.style.transition).toEqual("1s linear");
|
|
||||||
});
|
|
||||||
|
|
||||||
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);
|
expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
|
||||||
|
expect(Display._alertState).toEqual(AlertState.NotDisplaying);
|
||||||
|
expect(alertBackground.style.transition).toEqual("height 1s linear");
|
||||||
|
expect(alertBackground.style.height).toEqual("0%");
|
||||||
|
expect(alertBackground.style.minHeight).toEqual("0%");
|
||||||
|
expect(alertBackground.className).toEqual("bg-default");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Display.setAlertText", function() {
|
||||||
|
var alertText;
|
||||||
|
beforeEach( function() {
|
||||||
|
document.body.innerHTML = "";
|
||||||
|
alertText = document.createElement("p");
|
||||||
|
alertText.setAttribute("id", "alert");
|
||||||
|
document.body.appendChild(alertText);
|
||||||
|
});
|
||||||
|
it("should set the alert text correctly", function () {
|
||||||
|
Display.setAlertText("OpenLP Alert Text");
|
||||||
|
|
||||||
|
expect(alertText.textContent).toEqual("OpenLP Alert Text");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Display.setAlertLocation", function() {
|
||||||
|
beforeEach(function() {
|
||||||
|
document.body.innerHTML = "";
|
||||||
|
alertBackground = document.createElement("p");
|
||||||
|
alertBackground.setAttribute("id","alert-background");
|
||||||
|
alertBackground.setAttribute("class","bg-default");
|
||||||
|
document.body.appendChild(alertBackground);
|
||||||
|
});
|
||||||
|
it("should set the correct class when location is top of the page", function () {
|
||||||
|
Display.setAlertLocation(0);
|
||||||
|
|
||||||
|
expect(alertBackground.className).toEqual("bg-default top");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should set the correct class when location is middle of the page", function () {
|
||||||
|
Display.setAlertLocation(1);
|
||||||
|
|
||||||
|
expect(alertBackground.className).toEqual("bg-default middle");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should set the correct class when location is bottom of the page", function () {
|
||||||
|
Display.setAlertLocation(2);
|
||||||
|
|
||||||
|
expect(alertBackground.className).toEqual("bg-default bottom");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Display.showAlertText", function () {
|
||||||
|
var alertText, settings;
|
||||||
|
beforeEach(function () {
|
||||||
|
document.body.innerHTML = "";
|
||||||
|
alertText = document.createElement("p");
|
||||||
|
alertText.setAttribute("id","alert");
|
||||||
|
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": 0.01, "repeat": 1, "scroll": true
|
||||||
|
};
|
||||||
|
Display._transitionState = TransitionState.EntranceTransition;
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should set the correct styles on the text", function() {
|
||||||
|
Display.showAlertText(settings);
|
||||||
|
|
||||||
|
expect(alertText.style.opacity).toEqual('1');
|
||||||
|
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 when text is not scrolling", function (done) {
|
||||||
|
settings.scroll = false;
|
||||||
|
Display._transitionState = TransitionState.EntranceTransition;
|
||||||
|
spyOn(Display, "hideAlertText");
|
||||||
|
Display.showAlertText(settings);
|
||||||
|
|
||||||
|
expect(alertText.style.opacity).toEqual('1');
|
||||||
|
expect(alertText.style.animation).toEqual("");
|
||||||
|
expect(Display._animationState).toEqual(AnimationState.NonScrollingText);
|
||||||
|
setTimeout (function () {
|
||||||
|
expect(alertText.className).toEqual("no-scroll");
|
||||||
|
expect(Display._animationState).toEqual(AnimationState.NoAnimation);
|
||||||
|
expect(Display.hideAlertText).toHaveBeenCalled();
|
||||||
|
done();
|
||||||
|
}, settings.timeout * 1000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Display.hideAlertText", function() {
|
||||||
|
var alertBackground, alertText, keyframeStyle;
|
||||||
|
beforeEach(function () {
|
||||||
|
document.body.innerHTML = "";
|
||||||
|
// keyframeStyle = document.createElement("style");
|
||||||
|
// keyframeStyle.setAttribute("id", "keyframeStyles");
|
||||||
|
// document.head.appendChild(keyframeStyle);
|
||||||
|
// alertBackground = document.createElement("div");
|
||||||
|
// alertBackground.setAttribute("id", "alert-background");
|
||||||
|
// document.body.appendChild(alertBackground);
|
||||||
|
alertText = document.createElement("p");
|
||||||
|
alertText.setAttribute("id", "alert");
|
||||||
|
alertText.style.opacity = 1;
|
||||||
|
alertText.style.animation = "alert-scrolling-text 5s linear 0s 1 bg-default";
|
||||||
|
document.body.appendChild(alertText);
|
||||||
|
Display._animationState = AnimationState.ScrollingText;
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should reset the text styles and animation state after the text has scrolled", function() {
|
||||||
|
spyOn(Display, "resetAlertKeyframes");
|
||||||
|
spyOn(Display, "hideAlertBackground");
|
||||||
|
Display.hideAlertText();
|
||||||
|
|
||||||
|
expect(alertText.style.animation).toEqual("");
|
||||||
|
expect(alertText.style.opacity).toEqual('0');
|
||||||
|
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 hideAlertBackground and resetAlertKeyframes methods", function() {
|
||||||
|
spyOn(Display, "hideAlertBackground");
|
||||||
|
spyOn(Display, "resetAlertKeyframes");
|
||||||
|
Display.hideAlertText();
|
||||||
|
|
||||||
|
expect(Display.hideAlertBackground).toHaveBeenCalled();
|
||||||
|
expect(Display.resetAlertKeyframes).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Display.addAlertToQueue", function () {
|
||||||
|
it("should add an alert to the queue if one is displaying already", function() {
|
||||||
|
Display._alerts = [];
|
||||||
|
Display._alertState = AlertState.Displaying;
|
||||||
|
settings = '{ \
|
||||||
|
"location": 1, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif", \
|
||||||
|
"font_size": 40, "font_color": "#ffffff", "background_color": "#660000", \
|
||||||
|
"timeout": 5, "repeat": 1, "scrolling_text": true \
|
||||||
|
}';
|
||||||
|
var alertObject = {text: "Testing alert queue", settings: settings};
|
||||||
|
var queuedAlert = JSON.stringify(alertObject);
|
||||||
|
|
||||||
|
Display.addAlertToQueue("Testing alert queue", settings);
|
||||||
|
|
||||||
|
expect(Display._alerts.length).toEqual(1);
|
||||||
|
expect(Display._alerts[0]).toEqual(queuedAlert);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -314,106 +484,74 @@ describe("Display.displayNextAlert", function () {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("Display.hideAlertText", function() {
|
describe("Display.alertTransitionEndEvent", function() {
|
||||||
var alertBackground, alertText;
|
it("should set the correct state and call showAlertText after the alert entrance transition", function() {
|
||||||
beforeEach(function () {
|
var fake_settings = {test: "fake_settings"};
|
||||||
document.body.innerHTML = "";
|
Display._alertSettings = fake_settings;
|
||||||
alertBackground = document.createElement("div");
|
spyOn("Display", "showAlertText");
|
||||||
alertBackground.setAttribute("id", "alert-background");
|
Display._transitionState = TransitionState.EntranceTransition;
|
||||||
document.body.appendChild(alertBackground);
|
var event = document.createEvent("animationend");
|
||||||
alertText = document.createElement("p");
|
Display.alertTransitionEnd(event);
|
||||||
alertText.setAttribute("id", "alert");
|
|
||||||
alertText.style.visibility = "visible";
|
expect(Display._transitionState).toEqual(TransitionState.NoTransition);
|
||||||
alertText.style.animation = "alert-scrolling-text 5s linear 0s 1 bg-default";
|
expect(Display.alertTransitionEndEvent).toHaveBeenCalledWith(fake_settings);
|
||||||
alertBackground.appendChild(alertText);
|
|
||||||
Display._animationState = AnimationState.ScrollingText;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should reset the text styles and animation state after the text has scrolled", function() {
|
it("should set the correct state, class and call displayNextAlert after the alert exit transition", function() {
|
||||||
Display.hideAlertText();
|
spyOn("Display", "displayNextAlert");
|
||||||
|
Display._transitionState = TransitionState.ExitTransition;
|
||||||
|
var event = document.createEvent("animationend");
|
||||||
|
Display.alertTransitionEnd(event);
|
||||||
|
|
||||||
expect(alertText.style.animation).toEqual("");
|
expect(Display._transitionState).toEqual(TransitionState.NoTransition);
|
||||||
expect(alertText.style.visibility).toEqual("hidden");
|
expect(Display.displayNextAlert).toHaveBeenCalled();
|
||||||
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 alert background method", function() {
|
|
||||||
spyOn(Display, "hideAlertBackground");
|
|
||||||
Display.hideAlertText();
|
|
||||||
|
|
||||||
expect(Display.hideAlertBackground).toHaveBeenCalled();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("Display.showAlertText", function () {
|
describe("Display.alertAnimationEndEvent", function () {
|
||||||
var alertText, settings;
|
it("should call the hideAlertText method", function() {
|
||||||
beforeEach(function () {
|
spyOn("Display","hideAlertText");
|
||||||
document.body.innerHTML = "";
|
|
||||||
alertText = document.createElement("p");
|
|
||||||
alertText.setAttribute("id","alert");
|
|
||||||
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": 0.01, "repeat": 1, "scroll": true
|
|
||||||
};
|
|
||||||
Display._transitionState = TransitionState.EntranceTransition;
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should set the correct styles on the text", function() {
|
expect(Display.hideAlertText).toHaveBeenCalled();
|
||||||
Display.showAlertText(settings);
|
|
||||||
|
|
||||||
expect(alertText.style.visibility).toEqual("visible");
|
|
||||||
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) {
|
|
||||||
settings.scroll = false;
|
|
||||||
Display._transitionState = TransitionState.EntranceTransition;
|
|
||||||
spyOn(Display, "hideAlertBackground");
|
|
||||||
Display.showAlertText(settings);
|
|
||||||
|
|
||||||
expect(alertText.style.visibility).toEqual("visible");
|
|
||||||
expect(alertText.style.animation).toEqual("");
|
|
||||||
expect(Display._animationState).toEqual(AnimationState.NonScrollingText);
|
|
||||||
setTimeout (function () {
|
|
||||||
expect(alertText.className).toEqual("no-scroll");
|
|
||||||
expect(Display._animationState).toEqual(AnimationState.NoAnimation);
|
|
||||||
expect(Display.hideAlertBackground).toHaveBeenCalled();
|
|
||||||
done();
|
|
||||||
}, settings.timeout * 1000);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("Display.hideAlertBackground", function () {
|
describe("Display.setAlertKeyframes", function () {
|
||||||
var alertBackground;
|
var keyframeStyle;
|
||||||
beforeEach( function() {
|
beforeEach( function () {
|
||||||
document.body.innerHTML = "";
|
document.head.innerHTML = "";
|
||||||
alertBackground = document.createElement("div");
|
keyframeStyle = document.createElement("style");
|
||||||
alertBackground.setAttribute("id", "alert-background");
|
keyframeStyle.setAttribute("id", "keyframeStyles");
|
||||||
alertBackground.setAttribute("class", "bg-default");
|
document.head.appendChild(keyframeStyle);
|
||||||
document.body.appendChild(alertBackground);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("reset the background to default once an aletr has been displayed", function() {
|
it("should set the correct keyframes", function () {
|
||||||
spyOn(Display, "displayNextAlert");
|
var scrollWidth = 3200;
|
||||||
Display.hideAlertBackground();
|
var scrollWidthPercentage = (Math.ceil((((scrollWidth / screen.width) * 100) + 1) / 10) * 10) + 110;
|
||||||
|
var keyframeHtml = "@keyframes alert-scrolling-text {" +
|
||||||
|
"from { transform: translateX(110%); } " +
|
||||||
|
"to { transform: translateX(-" + scrollWidthPercentage +"%);}";
|
||||||
|
|
||||||
expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
|
expect(Display.setAlertKeyframes(scrollWidth)).toEqual(keyframeHtml);
|
||||||
expect(Display._alertState).toEqual(AlertState.NotDisplaying);
|
expect(keyframeStyle.innerHTML).toEqual(keyframeHtml);
|
||||||
expect(alertBackground.style.height).toEqual("0%");
|
});
|
||||||
expect(alertBackground.className).toEqual("bg-default");
|
});
|
||||||
|
|
||||||
|
describe("Display.resetAlertKeyframes", function () {
|
||||||
|
var keyframeStyle;
|
||||||
|
beforeEach( function () {
|
||||||
|
document.head.innerHTML = "";
|
||||||
|
keyframeStyle = document.createElement("style");
|
||||||
|
keyframeStyle.setAttribute("id", "keyframeStyles");
|
||||||
|
document.head.appendChild(keyframeStyle);
|
||||||
|
keyframeStyle.innerHTML = "@keyframes alert-scrolling-text {" +
|
||||||
|
"from { margin-left: 110%; } to { margin-left: -220;}";
|
||||||
|
});
|
||||||
|
|
||||||
|
it("shoud reset the key frames after scrolling the text", function () {
|
||||||
|
Display.resetAlertKeyframes();
|
||||||
|
|
||||||
|
expect(keyframeStyle.innerHTML).toEqual("");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user