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

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

@ -24,9 +24,7 @@
visibility: visible; visibility: visible;
z-index: -1; z-index: -1;
} }
</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>
@ -35,7 +33,7 @@
<body> <body>
<div class="alert-container"> <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>
<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>

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

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