forked from openlp/openlp
Fixed alert positioning with CSS flexbox and also fixed non-scrolling alert display
This commit is contained in:
Nico Opiyo
parent
e56971fa81
commit
628cfbf213
@ -19,51 +19,65 @@
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
min-height: 0%;
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
transform: translate(0,0);
|
||||
transition: min-height 1s ease-out .5s;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.bg-default.show {
|
||||
height: auto;
|
||||
.show-bg {
|
||||
/* height: auto; */
|
||||
min-height: 25%;
|
||||
transition: min-height 1s ease-in .5s;
|
||||
}
|
||||
|
||||
.bg-default.hide {
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
.middle {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bg-default.middle {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
bottom: initial;
|
||||
.alert-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.bg-default.top {
|
||||
top: 0;
|
||||
bottom: initial;
|
||||
.top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.bg-default.bottom {
|
||||
top: initial;
|
||||
bottom: 0;
|
||||
.bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* ALERT BACKGROUND STYLING */
|
||||
/* ALERT TEXT STYLING */
|
||||
#alert {
|
||||
z-index: 12;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
color: #ffffff;
|
||||
font-size: 40pt;
|
||||
padding: 0;
|
||||
margin: 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;
|
||||
}
|
||||
@ -34,9 +34,11 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="alert-container">
|
||||
<div id="alert-background" class="bg-default"><p id="alert">Testing alerts</p></div>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<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="footer"></div>
|
||||
</div>
|
||||
|
||||
@ -437,7 +437,7 @@ var Display = {
|
||||
var settings = JSON.parse(alert_settings);
|
||||
this._alertSettings = settings;
|
||||
Display.setAlertText(text);
|
||||
|
||||
Display.setAlertLocation(settings.location);
|
||||
if (settings.scroll === true) {
|
||||
Display.setAlertKeyframes(alertText.scrollWidth);
|
||||
}
|
||||
@ -446,18 +446,10 @@ var Display = {
|
||||
Display._alertState = AlertState.Displaying;
|
||||
}
|
||||
|
||||
alertBackground.addEventListener('transitionend', function(e) {
|
||||
e.stopPropagation();
|
||||
console.debug("The transition has ended");
|
||||
Display.alertTransitionEndEvent();
|
||||
});
|
||||
alertText.addEventListener('animationend', function(e) {
|
||||
e.stopPropagation();
|
||||
console.debug("The animation has ended");
|
||||
Display.alertAnimationEndEvent();
|
||||
});
|
||||
alertBackground.addEventListener('transitionend', Display.alertTransitionEndEvent, false);
|
||||
alertText.addEventListener('animationend', Display.alertAnimationEndEvent, false);
|
||||
|
||||
Display.showAlertBackground(settings);
|
||||
Display.showAlertBackground(settings.background_color);
|
||||
},
|
||||
/**
|
||||
* Add an alert to the alert queue
|
||||
@ -494,13 +486,17 @@ var Display = {
|
||||
/**
|
||||
* 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) {
|
||||
Display._transitionState = TransitionState.NoTransition;
|
||||
Display.showAlertText(Display._alertSettings);
|
||||
}
|
||||
else if (Display._transitionState === TransitionState.ExitTransition) {
|
||||
Display._transitionState = TransitionState.NoTransition;
|
||||
Display.removeAlertLocation(Display._alertSettings.location);
|
||||
Display.clearAlertSettings();
|
||||
setTimeout(function () {
|
||||
Display.showNextAlert();
|
||||
}, 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();
|
||||
},
|
||||
/**
|
||||
* 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 transitionSetting = "min-height 1s linear";
|
||||
|
||||
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);
|
||||
alertBackground.classList.add("show-bg");
|
||||
alertBackground.style.backgroundColor = bg_color;
|
||||
this._transitionState = TransitionState.EntranceTransition;
|
||||
},
|
||||
/**
|
||||
@ -538,29 +525,50 @@ var Display = {
|
||||
* @param {int} location - Integer number with the location of the alert on screen
|
||||
*/
|
||||
setAlertLocation: function (location) {
|
||||
var alertBackground = $("#alert-background")[0];
|
||||
var alertContainer = $(".alert-container")[0];
|
||||
|
||||
switch (location) {
|
||||
case AlertLocation.Top:
|
||||
alertBackground.classList.add("top");
|
||||
alertContainer.classList.add("top");
|
||||
break;
|
||||
case AlertLocation.Middle:
|
||||
alertBackground.classList.add("middle");
|
||||
alertContainer.classList.add("middle");
|
||||
break;
|
||||
case AlertLocation.Bottom:
|
||||
default:
|
||||
alertBackground.classList.add("bottom");
|
||||
alertContainer.classList.add("bottom");
|
||||
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
|
||||
*/
|
||||
hideAlertBackground: function () {
|
||||
var alertBackground = $("#alert-background")[0];
|
||||
alertBackground.style.transition = "min-height 1s linear";
|
||||
alertBackground.classList.remove("show");
|
||||
alertBackground.classList.add("hide");
|
||||
alertBackground.classList.remove("show-bg");
|
||||
this._transitionState = TransitionState.ExitTransition;
|
||||
this._alertState = AlertState.NotDisplaying;
|
||||
},
|
||||
@ -583,10 +591,11 @@ var Display = {
|
||||
}
|
||||
else {
|
||||
Display._animationState = AnimationState.NonScrollingText;
|
||||
alertText.style.animation = "";
|
||||
alertText.classList.add("no-scroll");
|
||||
alertText.classList.add("show-text");
|
||||
setTimeout (function () {
|
||||
Display._animationState = AnimationState.NoAnimation;
|
||||
alertText.classList.add("hide-text");
|
||||
alertText.classList.remove("show-text");
|
||||
Display.hideAlertText();
|
||||
}, settings.timeout * AlertDelay.OneSecond);
|
||||
}
|
||||
@ -596,12 +605,8 @@ var Display = {
|
||||
*/
|
||||
hideAlertText: function () {
|
||||
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;
|
||||
alertText.classList.add("hide-text");
|
||||
Display.hideAlertBackground();
|
||||
Display.resetAlertKeyframes();
|
||||
},
|
||||
@ -625,6 +630,12 @@ var Display = {
|
||||
var keyframeStyle = document.getElementById('keyframeStyles');
|
||||
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.
|
||||
* @param {string} verse - The verse number, e.g. "v1"
|
||||
|
||||
@ -204,43 +204,26 @@ describe("Display.alert", function () {
|
||||
|
||||
describe("Display.showAlertBackground", function () {
|
||||
|
||||
var alertBackground, css, settings, style;
|
||||
var alertBackground, bg_color;
|
||||
beforeEach(function () {
|
||||
document.body.innerHTML = "";
|
||||
style = document.createElement("style");
|
||||
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);
|
||||
bg_color = "rgb(102, 0, 0)";
|
||||
alertBackground = document.createElement("div");
|
||||
alertBackground.setAttribute("id", "alert-background");
|
||||
alertBackground.setAttribute("class", "bg-default");
|
||||
document.body.appendChild(alertBackground);
|
||||
Display._alertState = AlertState.NotDisplaying;
|
||||
});
|
||||
|
||||
it("should set the correct transition state", function () {
|
||||
Display.showAlertBackground(settings);
|
||||
Display.showAlertBackground(bg_color);
|
||||
expect(Display._transitionState).toEqual(TransitionState.EntranceTransition);
|
||||
});
|
||||
|
||||
it("should apply the styles correctly when showAlertBackground is called", function (done) {
|
||||
Display.showAlertBackground(settings);
|
||||
expect(alertBackground.className).toBe("bg-default bottom");
|
||||
it("should apply the styles correctly when showAlertBackground is called", function () {
|
||||
Display.showAlertBackground(bg_color);
|
||||
|
||||
setTimeout(function () {
|
||||
expect(alertBackground.style.backgroundColor).toEqual(settings.background_color);
|
||||
expect(alertBackground.classList.contains("show")).toBe(true);
|
||||
expect(alertBackground.style.transition).toEqual("min-height 1s linear");
|
||||
done();
|
||||
}, 50);
|
||||
expect(alertBackground.style.backgroundColor).toEqual(bg_color);
|
||||
expect(alertBackground.className).toEqual("bg-default show");
|
||||
});
|
||||
});
|
||||
|
||||
@ -250,17 +233,16 @@ describe("Display.hideAlertBackground", function () {
|
||||
document.body.innerHTML = "";
|
||||
alertBackground = document.createElement("div");
|
||||
alertBackground.setAttribute("id", "alert-background");
|
||||
alertBackground.setAttribute("class", "bg-default show");
|
||||
document.body.appendChild(alertBackground);
|
||||
});
|
||||
|
||||
it("reset the background to default once an alert has been displayed", function() {
|
||||
//spyOn(Display, "showNextAlert");
|
||||
Display.hideAlertBackground();
|
||||
|
||||
expect(Display._transitionState).toEqual(TransitionState.ExitTransition);
|
||||
expect(Display._alertState).toEqual(AlertState.NotDisplaying);
|
||||
expect(alertBackground.style.transition).toEqual("min-height 1s linear");
|
||||
expect(alertBackground.className).toEqual("hide");
|
||||
expect(alertBackground.className).toEqual("bg-default");
|
||||
});
|
||||
});
|
||||
|
||||
@ -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 () {
|
||||
var alertText, settings;
|
||||
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 () {
|
||||
beforeEach(function() {
|
||||
document.body.innerHTML = "";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user