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

Fixed scrolling bug display

Browse Source
This commit is contained in:
Nico Opiyo 2019-06-27 13:11:56 +03:00
parent e8edb7e52f
commit 2076851555
3 changed files with 23 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,7 @@
/* Animation key frames for horizontal scrolling of alert */
/* @keyframes alert-scrolling-text {
from { margin-left: 100%; }
to { margin-left: -300% }
} */
.horizontal-scroll-animation {
animation-duration: 10s;
animation-iteration-count: 2;
animation-timing-function: linear;
animation-name: alert-scrolling-text;
@keyframes alert-scrolling-text {
0% { transform: translateX(100%); opacity: 1; }
99% { opacity: 1; }
100% { transform: translateX(-105%); opacity: 0;}
}
/* ALERT BACKGROUND STYLING */
@ -24,10 +17,16 @@
overflow: hidden;
transform: translate(0,0);
transition: min-height 1s ease-out .5s;
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
/* align-content: center; */
}
.bg-default span {
display: inline-block;
padding-left: 100%;
}
.show-bg {
@ -60,13 +59,11 @@
#alert {
z-index: 100;
overflow: visible;
white-space: nowrap;
color: #ffffff;
font-size: 40pt;
padding: 0;
margin: 0;
opacity: 0;
transform: translateX(120%);
transition: opacity .5s linear;
}

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

@ -24,9 +24,7 @@
visibility: visible;
z-index: -1;
}
</style>
<style type="text/css" id="keyframeStyles"></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="reveal.js"></script>
@ -35,7 +33,7 @@
<body>
<div class="alert-container">
<div id="alert-background" class="bg-default"><p id="alert">Testing alerts</p></div>
<div id="alert-background" class="bg-default"><span id="alert">Testing alerts</span></div>
</div>
<div class="reveal">
<div id="global-background" class="slide-background present" data-loaded="true"></div>

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

@ -437,10 +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);
}
Display.setAlertLocation(settings.location, settings.font_color, settings.font_face, settings.font_size);
/* Check if the alert is a queued alert */
if (Display._alertState !== AlertState.DisplayingFromQueue) {
Display._alertState = AlertState.Displaying;
@ -465,23 +462,12 @@ var Display = {
* Set Alert Text
* @param {string} text - The alert text to display
*/
setAlertText: function (text) {
setAlertText: function (text, color, font_face, font_size) {
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;
alertText.style.color = color;
alertText.style.fontFamily = font_face;
alertText.style.fontSize = font_size + "pt";
},
/**
* The alertTransitionEndEvent called after a transition has ended
@ -578,10 +564,6 @@ var Display = {
*/
showAlertText: function (settings) {
var alertText = $("#alert")[0];
alertText.style.opacity = 1;
alertText.style.color = settings.font_color;
alertText.style.fontFamily = settings.font_face;
alertText.style.fontSize = settings.font_size + "pt";
if (settings.scroll) {
var animationSettings = "alert-scrolling-text " + settings.timeout +
@ -606,7 +588,7 @@ var Display = {
hideAlertText: function () {
var alertText = $('#alert')[0];
Display._animationState = AnimationState.NoAnimation;
alertText.classList.add("hide-text");
alertText.style.animation = "";
Display.hideAlertBackground();
Display.resetAlertKeyframes();
},
@ -623,13 +605,6 @@ var Display = {
return null;
}
},
/**
* Reset animation keyframes after displaying alert
*/
resetAlertKeyframes: function () {
var keyframeStyle = document.getElementById('keyframeStyles');
keyframeStyle.innerHTML = "";
},
/**
* Clears the alert settings after displaying an alert
*/