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

Fixed alert positioning with CSS flexbox and also fixed non-scrolling alert display

Browse Source
This commit is contained in:
Nico Opiyo 2019-04-05 17:29:27 +03:00
parent e56971fa81
commit 628cfbf213
4 changed files with 170 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,51 +19,65 @@
left: 0; left: 0;
z-index: 11; z-index: 11;
width: 100%; width: 100%;
height: 0%; height: 0;
min-height: 0%; min-height: 0;
overflow: hidden; overflow: hidden;
transform: translate(0,0);
transition: min-height 1s ease-out .5s;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
align-content: center;
} }
.bg-default.show { .show-bg {
height: auto; /* height: auto; */
min-height: 25%; min-height: 25%;
transition: min-height 1s ease-in .5s;
} }
.bg-default.hide { .middle {
height: 0; align-items: center;
min-height: 0;
} }
.bg-default.middle { .alert-container {
top: 50%; position: absolute;
left: 50%; display: flex;
margin-right: -50%; flex-direction: row;
transform: translate(-50%, -50%); height: 100vh;
bottom: initial; width: 100vw;
} }
.bg-default.top { .top {
top: 0; align-items: flex-start;
bottom: initial;
} }
.bg-default.bottom { .bottom {
top: initial; align-items: flex-end;
bottom: 0;
} }
/* ALERT BACKGROUND STYLING */ /* ALERT TEXT STYLING */
#alert { #alert {
z-index: 12; z-index: 100;
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: visible; overflow: visible;
white-space: nowrap; white-space: nowrap;
color: #ffffff; color: #ffffff;
font-size: 40pt;
padding: 0;
margin: 0;
opacity: 0; opacity: 0;
transform: translateX(110%); transform: translateX(120%);
transition: opacity .5s linear;
}
#alert.hide-text {
opacity: 0;
}
#alert.show-text {
transform: none;
transition: none;
animation: none;
padding: auto 5px;
opacity: 1;
} }

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

@ -34,9 +34,11 @@
</head> </head>
<body> <body>
<div class="alert-container">
<div id="alert-background" class="bg-default"><p id="alert">Testing alerts</p></div>
</div>
<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="bg-default hide"><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>

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

@ -437,7 +437,7 @@ var Display = {
var settings = JSON.parse(alert_settings); var settings = JSON.parse(alert_settings);
this._alertSettings = settings; this._alertSettings = settings;
Display.setAlertText(text); Display.setAlertText(text);
Display.setAlertLocation(settings.location);
if (settings.scroll === true) { if (settings.scroll === true) {
Display.setAlertKeyframes(alertText.scrollWidth); Display.setAlertKeyframes(alertText.scrollWidth);
} }
@ -446,18 +446,10 @@ var Display = {
Display._alertState = AlertState.Displaying; Display._alertState = AlertState.Displaying;
} }
alertBackground.addEventListener('transitionend', function(e) { alertBackground.addEventListener('transitionend', Display.alertTransitionEndEvent, false);
e.stopPropagation(); alertText.addEventListener('animationend', Display.alertAnimationEndEvent, false);
console.debug("The transition has ended");
Display.alertTransitionEndEvent();
});
alertText.addEventListener('animationend', function(e) {
e.stopPropagation();
console.debug("The animation has ended");
Display.alertAnimationEndEvent();
});
Display.showAlertBackground(settings); Display.showAlertBackground(settings.background_color);
}, },
/** /**
* Add an alert to the alert queue * Add an alert to the alert queue
@ -494,13 +486,17 @@ var Display = {
/** /**
* The alertTransitionEndEvent called after a transition has ended * The alertTransitionEndEvent called after a transition has ended
*/ */
alertTransitionEndEvent: function () { alertTransitionEndEvent: function (e) {
e.stopPropagation();
console.debug("Transition end event reached");
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);
} }
else if (Display._transitionState === TransitionState.ExitTransition) { else if (Display._transitionState === TransitionState.ExitTransition) {
Display._transitionState = TransitionState.NoTransition; Display._transitionState = TransitionState.NoTransition;
Display.removeAlertLocation(Display._alertSettings.location);
Display.clearAlertSettings();
setTimeout(function () { setTimeout(function () {
Display.showNextAlert(); Display.showNextAlert();
}, AlertDelay.OnePointFiveSeconds); }, AlertDelay.OnePointFiveSeconds);
@ -508,29 +504,20 @@ var Display = {
} }
}, },
/** /**
* The alertAnimationEndEvent called after a animation has ended * The alertAnimationEndEvent called after an animation has ended
*/ */
alertAnimationEndEvent: function () { alertAnimationEndEvent: function (e) {
e.stopPropagation();
Display.hideAlertText(); Display.hideAlertText();
}, },
/** /**
* Start background entrance transition for display of alert * Start background entrance transition for display of alert
* @param {string} JSON object - JSON object containing the alert settings * @param {string} hex_color - The background color of the alert
*/ */
showAlertBackground: function (settings) { showAlertBackground: function (bg_color) {
var alertBackground = $("#alert-background")[0]; var alertBackground = $("#alert-background")[0];
var transitionSetting = "min-height 1s linear"; alertBackground.classList.add("show-bg");
alertBackground.style.backgroundColor = bg_color;
Display.setAlertLocation(settings.location);
alertBackground.style.backgroundColor = settings.background_color;
// Wait for styles to be set first before starting transition
setTimeout( function() {
alertBackground.style.transition = transitionSetting;
alertBackground.classList.add("show");
alertBackground.classList.remove("hide");
}, AlertDelay.FiftyMilliseconds);
this._transitionState = TransitionState.EntranceTransition; this._transitionState = TransitionState.EntranceTransition;
}, },
/** /**
@ -538,29 +525,50 @@ var Display = {
* @param {int} location - Integer number with the location of the alert on screen * @param {int} location - Integer number with the location of the alert on screen
*/ */
setAlertLocation: function (location) { setAlertLocation: function (location) {
var alertBackground = $("#alert-background")[0]; var alertContainer = $(".alert-container")[0];
switch (location) { switch (location) {
case AlertLocation.Top: case AlertLocation.Top:
alertBackground.classList.add("top"); alertContainer.classList.add("top");
break; break;
case AlertLocation.Middle: case AlertLocation.Middle:
alertBackground.classList.add("middle"); alertContainer.classList.add("middle");
break; break;
case AlertLocation.Bottom: case AlertLocation.Bottom:
default: default:
alertBackground.classList.add("bottom"); alertContainer.classList.add("bottom");
break; break;
} }
console.debug("The classname set location is: " + alertContainer.className);
},
/**
* Remove the location class set after displaying the alert
* @param {int} location - Integer number with the location of the alert on screen
*/
removeAlertLocation: function (location) {
var alertContainer = $(".alert-container")[0];
console.debug("The value of location for removal is: " + location);
switch (location) {
case AlertLocation.Top:
alertContainer.classList.remove("top");
break;
case AlertLocation.Middle:
alertContainer.classList.remove("middle");
break;
case AlertLocation.Bottom:
default:
alertContainer.classList.remove("bottom");
break;
}
console.debug("The classname after removal is: " + alertContainer.className);
}, },
/** /**
* Hide the alert background after the alert has been shown * Hide the alert background after the alert has been shown
*/ */
hideAlertBackground: function () { hideAlertBackground: function () {
var alertBackground = $("#alert-background")[0]; var alertBackground = $("#alert-background")[0];
alertBackground.style.transition = "min-height 1s linear"; alertBackground.classList.remove("show-bg");
alertBackground.classList.remove("show");
alertBackground.classList.add("hide");
this._transitionState = TransitionState.ExitTransition; this._transitionState = TransitionState.ExitTransition;
this._alertState = AlertState.NotDisplaying; this._alertState = AlertState.NotDisplaying;
}, },
@ -583,10 +591,11 @@ var Display = {
} }
else { else {
Display._animationState = AnimationState.NonScrollingText; Display._animationState = AnimationState.NonScrollingText;
alertText.style.animation = ""; alertText.classList.add("show-text");
alertText.classList.add("no-scroll");
setTimeout (function () { setTimeout (function () {
Display._animationState = AnimationState.NoAnimation; Display._animationState = AnimationState.NoAnimation;
alertText.classList.add("hide-text");
alertText.classList.remove("show-text");
Display.hideAlertText(); Display.hideAlertText();
}, settings.timeout * AlertDelay.OneSecond); }, settings.timeout * AlertDelay.OneSecond);
} }
@ -596,12 +605,8 @@ var Display = {
*/ */
hideAlertText: function () { hideAlertText: function () {
var alertText = $('#alert')[0]; var alertText = $('#alert')[0];
alertText.style.animation = "";
alertText.classList = "";
alertText.style.opacity = 0;
alertText.style.color = "rgb(255, 255, 255)";
alertText.style.fontSize = "40pt";
Display._animationState = AnimationState.NoAnimation; Display._animationState = AnimationState.NoAnimation;
alertText.classList.add("hide-text");
Display.hideAlertBackground(); Display.hideAlertBackground();
Display.resetAlertKeyframes(); Display.resetAlertKeyframes();
}, },
@ -625,6 +630,12 @@ var Display = {
var keyframeStyle = document.getElementById('keyframeStyles'); var keyframeStyle = document.getElementById('keyframeStyles');
keyframeStyle.innerHTML = ""; keyframeStyle.innerHTML = "";
}, },
/**
* Clears the alert settings after displaying an alert
*/
clearAlertSettings: function () {
this._alertSettings = {};
},
/** /**
* 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"

76
tests/js/test_display.js
View File

@ -204,43 +204,26 @@ describe("Display.alert", function () {
describe("Display.showAlertBackground", function () { describe("Display.showAlertBackground", function () {
var alertBackground, css, settings, style; var alertBackground, bg_color;
beforeEach(function () { beforeEach(function () {
document.body.innerHTML = ""; document.body.innerHTML = "";
style = document.createElement("style"); bg_color = "rgb(102, 0, 0)";
style.type = "text/css";
css = '.bg-default { position: absolute; margin: 0; padding: 0; left: 0; z-index: 10; \
width: 100%; height: 0%; vertical-align: middle; overflow: hidden; visibility:hidden; \
}';
settings = {
"location": 2, "font_face": "Tahoma", "font_size": 40,
"font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)",
"timeout": 5, "repeat": 1, "scrolling_text": true
};
style.innerHTML = css;
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", "bg-default"); alertBackground.setAttribute("class", "bg-default");
document.body.appendChild(alertBackground); document.body.appendChild(alertBackground);
Display._alertState = AlertState.NotDisplaying;
}); });
it("should set the correct transition state", function () { it("should set the correct transition state", function () {
Display.showAlertBackground(settings); Display.showAlertBackground(bg_color);
expect(Display._transitionState).toEqual(TransitionState.EntranceTransition); expect(Display._transitionState).toEqual(TransitionState.EntranceTransition);
}); });
it("should apply the styles correctly when showAlertBackground is called", function (done) { it("should apply the styles correctly when showAlertBackground is called", function () {
Display.showAlertBackground(settings); Display.showAlertBackground(bg_color);
expect(alertBackground.className).toBe("bg-default bottom");
setTimeout(function () { expect(alertBackground.style.backgroundColor).toEqual(bg_color);
expect(alertBackground.style.backgroundColor).toEqual(settings.background_color); expect(alertBackground.className).toEqual("bg-default show");
expect(alertBackground.classList.contains("show")).toBe(true);
expect(alertBackground.style.transition).toEqual("min-height 1s linear");
done();
}, 50);
}); });
}); });
@ -250,17 +233,16 @@ describe("Display.hideAlertBackground", 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", "bg-default show");
document.body.appendChild(alertBackground); document.body.appendChild(alertBackground);
}); });
it("reset the background to default once an alert has been displayed", function() { it("reset the background to default once an alert has been displayed", function() {
//spyOn(Display, "showNextAlert");
Display.hideAlertBackground(); Display.hideAlertBackground();
expect(Display._transitionState).toEqual(TransitionState.ExitTransition); expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
expect(Display._alertState).toEqual(AlertState.NotDisplaying); expect(Display._alertState).toEqual(AlertState.NotDisplaying);
expect(alertBackground.style.transition).toEqual("min-height 1s linear"); expect(alertBackground.className).toEqual("bg-default");
expect(alertBackground.className).toEqual("hide");
}); });
}); });
@ -306,6 +288,36 @@ describe("Display.setAlertLocation", function() {
}); });
}); });
describe("Display.removeAlertLocation", 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 remove the correct class when location is top of the page", function () {
alertBackground.classList.add("top");
Display.removeAlertLocation(0);
expect(alertBackground.className).toEqual("bg-default");
});
it("should remove the correct class when location is middle of the page", function () {
alertBackground.classList.add("middle");
Display.removeAlertLocation(1);
expect(alertBackground.className).toEqual("bg-default");
});
it("should remove the correct class when location is bottom of the page", function () {
alertBackground.classList.add("bottom");
Display.removeAlertLocation(2);
expect(alertBackground.className).toEqual("bg-default");
});
});
describe("Display.showAlertText", function () { describe("Display.showAlertText", function () {
var alertText, settings; var alertText, settings;
beforeEach(function () { beforeEach(function () {
@ -510,6 +522,16 @@ describe("Display.resetAlertKeyframes", function () {
}); });
}); });
describe("Display.clearAlertSettings", function () {
it("should clear the alert settings once an alert has been displayed", function () {
var fake_settings = {test: "fake_settings"};
Display._alertSettings = fake_settings;
Display.clearAlertSettings();
expect(Display._alertSettings).toEqual({});
});
});
describe("Display.addTextSlide", function () { describe("Display.addTextSlide", function () {
beforeEach(function() { beforeEach(function() {
document.body.innerHTML = ""; document.body.innerHTML = "";