forked from openlp/openlp
Revert htmlbuilder for now
This commit is contained in:
parent
ed7ea01f43
commit
a4483af5b4
@ -396,74 +396,74 @@ from openlp.core.lib.theme import BackgroundType, BackgroundGradientType, Vertic
|
|||||||
|
|
||||||
log = logging.getLogger(__name__)
|
log = logging.getLogger(__name__)
|
||||||
|
|
||||||
# TODO: Tested at home
|
# TODO: Verify where this is used before converting to python3
|
||||||
HTMLSRC = """
|
HTMLSRC = """
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>OpenLP Display</title>
|
<title>OpenLP Display</title>
|
||||||
<style>
|
<style>
|
||||||
*{{
|
*{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
}}
|
}
|
||||||
body {{
|
body {
|
||||||
{background_css};
|
%s;
|
||||||
}}
|
}
|
||||||
.size {{
|
.size {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
width: 100%;
|
width: 100%%;
|
||||||
height: 100%;
|
height: 100%%;
|
||||||
}}
|
}
|
||||||
#black {{
|
#black {
|
||||||
z-index: 8;
|
z-index: 8;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
display: none;
|
display: none;
|
||||||
}}
|
}
|
||||||
#bgimage {{
|
#bgimage {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}}
|
}
|
||||||
#image {{
|
#image {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}}
|
}
|
||||||
{additions}
|
%s
|
||||||
#footer {{
|
#footer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 6;
|
z-index: 6;
|
||||||
{footer_css}
|
%s
|
||||||
}}
|
}
|
||||||
/* lyric css */
|
/* lyric css */
|
||||||
{lyrics_css}
|
%s
|
||||||
sup {{
|
sup {
|
||||||
font-size: 0.6em;
|
font-size: 0.6em;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -0.3em;
|
top: -0.3em;
|
||||||
}}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
var timer = null;
|
var timer = null;
|
||||||
var transition = {transitions};
|
var transition = %s;
|
||||||
{js_additions}
|
%s
|
||||||
|
|
||||||
function show_image(src){{
|
function show_image(src){
|
||||||
var img = document.getElementById('image');
|
var img = document.getElementById('image');
|
||||||
img.src = src;
|
img.src = src;
|
||||||
if(src == '')
|
if(src == '')
|
||||||
img.style.display = 'none';
|
img.style.display = 'none';
|
||||||
else
|
else
|
||||||
img.style.display = 'block';
|
img.style.display = 'block';
|
||||||
}}
|
}
|
||||||
|
|
||||||
function show_blank(state){{
|
function show_blank(state){
|
||||||
var black = 'none';
|
var black = 'none';
|
||||||
var lyrics = '';
|
var lyrics = '';
|
||||||
switch(state){{
|
switch(state){
|
||||||
case 'theme':
|
case 'theme':
|
||||||
lyrics = 'hidden';
|
lyrics = 'hidden';
|
||||||
break;
|
break;
|
||||||
@ -472,18 +472,18 @@ sup {{
|
|||||||
break;
|
break;
|
||||||
case 'desktop':
|
case 'desktop':
|
||||||
break;
|
break;
|
||||||
}}
|
}
|
||||||
document.getElementById('black').style.display = black;
|
document.getElementById('black').style.display = black;
|
||||||
document.getElementById('lyricsmain').style.visibility = lyrics;
|
document.getElementById('lyricsmain').style.visibility = lyrics;
|
||||||
document.getElementById('image').style.visibility = lyrics;
|
document.getElementById('image').style.visibility = lyrics;
|
||||||
document.getElementById('footer').style.visibility = lyrics;
|
document.getElementById('footer').style.visibility = lyrics;
|
||||||
}}
|
}
|
||||||
|
|
||||||
function show_footer(footertext){{
|
function show_footer(footertext){
|
||||||
document.getElementById('footer').innerHTML = footertext;
|
document.getElementById('footer').innerHTML = footertext;
|
||||||
}}
|
}
|
||||||
|
|
||||||
function show_text(new_text){{
|
function show_text(new_text){
|
||||||
var match = /-webkit-text-fill-color:[^;\"]+/gi;
|
var match = /-webkit-text-fill-color:[^;\"]+/gi;
|
||||||
if(timer != null)
|
if(timer != null)
|
||||||
clearTimeout(timer);
|
clearTimeout(timer);
|
||||||
@ -493,35 +493,35 @@ sup {{
|
|||||||
but only in this scenario.
|
but only in this scenario.
|
||||||
*/
|
*/
|
||||||
var txt = document.getElementById('lyricsmain');
|
var txt = document.getElementById('lyricsmain');
|
||||||
if(window.getComputedStyle(txt).textAlign == 'justify'){{
|
if(window.getComputedStyle(txt).textAlign == 'justify'){
|
||||||
if(window.getComputedStyle(txt).webkitTextStrokeWidth != '0px'){{
|
if(window.getComputedStyle(txt).webkitTextStrokeWidth != '0px'){
|
||||||
new_text = new_text.replace(/(\s| )+(?![^<]*>)/g,
|
new_text = new_text.replace(/(\s| )+(?![^<]*>)/g,
|
||||||
function(match) {{
|
function(match) {
|
||||||
return '</span>' + match + '<span>';
|
return '</span>' + match + '<span>';
|
||||||
}});
|
});
|
||||||
new_text = '<span>' + new_text + '</span>';
|
new_text = '<span>' + new_text + '</span>';
|
||||||
}}
|
}
|
||||||
}}
|
}
|
||||||
text_fade('lyricsmain', new_text);
|
text_fade('lyricsmain', new_text);
|
||||||
}}
|
}
|
||||||
|
|
||||||
function text_fade(id, new_text){{
|
function text_fade(id, new_text){
|
||||||
/*
|
/*
|
||||||
Show the text.
|
Show the text.
|
||||||
*/
|
*/
|
||||||
var text = document.getElementById(id);
|
var text = document.getElementById(id);
|
||||||
if(text == null) return;
|
if(text == null) return;
|
||||||
if(!transition){{
|
if(!transition){
|
||||||
text.innerHTML = new_text;
|
text.innerHTML = new_text;
|
||||||
return;
|
return;
|
||||||
}}
|
}
|
||||||
// Fade text out. 0.1 to minimize the time "nothing" is shown on the screen.
|
// Fade text out. 0.1 to minimize the time "nothing" is shown on the screen.
|
||||||
text.style.opacity = '0.1';
|
text.style.opacity = '0.1';
|
||||||
// Fade new text in after the old text has finished fading out.
|
// Fade new text in after the old text has finished fading out.
|
||||||
timer = window.setTimeout(function(){{_show_text(text, new_text)}}, 400);
|
timer = window.setTimeout(function(){_show_text(text, new_text)}, 400);
|
||||||
}}
|
}
|
||||||
|
|
||||||
function _show_text(text, new_text) {{
|
function _show_text(text, new_text) {
|
||||||
/*
|
/*
|
||||||
Helper function to show the new_text delayed.
|
Helper function to show the new_text delayed.
|
||||||
*/
|
*/
|
||||||
@ -529,18 +529,18 @@ sup {{
|
|||||||
text.style.opacity = '1';
|
text.style.opacity = '1';
|
||||||
// Wait until the text is completely visible. We want to save the timer id, to be able to call
|
// Wait until the text is completely visible. We want to save the timer id, to be able to call
|
||||||
// clearTimeout(timer) when the text has changed before finishing fading.
|
// clearTimeout(timer) when the text has changed before finishing fading.
|
||||||
timer = window.setTimeout(function(){{timer = null;}}, 400);
|
timer = window.setTimeout(function(){timer = null;}, 400);
|
||||||
}}
|
}
|
||||||
|
|
||||||
function show_text_completed(){{
|
function show_text_completed(){
|
||||||
return (timer == null);
|
return (timer == null);
|
||||||
}}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<img id="bgimage" class="size" {bgimage} />
|
<img id="bgimage" class="size" %s />
|
||||||
<img id="image" class="size" {image} />
|
<img id="image" class="size" %s />
|
||||||
{html_additions}
|
%s
|
||||||
<div class="lyricstable"><div id="lyricsmain" style="opacity:1" class="lyricscell lyricsmain"></div></div>
|
<div class="lyricstable"><div id="lyricsmain" style="opacity:1" class="lyricscell lyricsmain"></div></div>
|
||||||
<div id="footer" class="footer"></div>
|
<div id="footer" class="footer"></div>
|
||||||
<div id="black" class="size"></div>
|
<div id="black" class="size"></div>
|
||||||
@ -582,17 +582,17 @@ def build_html(item, screen, is_live, background, image=None, plugins=None):
|
|||||||
css_additions += plugin.get_display_css()
|
css_additions += plugin.get_display_css()
|
||||||
js_additions += plugin.get_display_javascript()
|
js_additions += plugin.get_display_javascript()
|
||||||
html_additions += plugin.get_display_html()
|
html_additions += plugin.get_display_html()
|
||||||
html = HTMLSRC.format(background_css=build_background_css(item, width),
|
html = HTMLSRC % (
|
||||||
additions=css_additions,
|
build_background_css(item, width),
|
||||||
footer_css=build_footer_css(item, height),
|
css_additions,
|
||||||
lyrics_css=build_lyrics_css(item),
|
build_footer_css(item, height),
|
||||||
transitions='true' if (theme_data and
|
build_lyrics_css(item),
|
||||||
theme_data.display_slide_transition and
|
'true' if theme_data and theme_data.display_slide_transition and is_live else 'false',
|
||||||
is_live) else 'false',
|
js_additions,
|
||||||
js_additions=js_additions,
|
bgimage_src,
|
||||||
bgimage=bgimage_src,
|
image_src,
|
||||||
image=image_src,
|
html_additions
|
||||||
html_additions=html_additions)
|
)
|
||||||
return html
|
return html
|
||||||
|
|
||||||
|
|
||||||
@ -650,23 +650,23 @@ def build_lyrics_css(item):
|
|||||||
|
|
||||||
:param item: Service Item containing theme and location information
|
:param item: Service Item containing theme and location information
|
||||||
"""
|
"""
|
||||||
# TODO: Tested at home
|
# TODO: Verify this before converting to python3
|
||||||
style = """
|
style = """
|
||||||
.lyricstable {{
|
.lyricstable {
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: table;
|
display: table;
|
||||||
{stable}
|
%s
|
||||||
}}
|
}
|
||||||
.lyricscell {{
|
.lyricscell {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
-webkit-transition: opacity 0.4s ease;
|
-webkit-transition: opacity 0.4s ease;
|
||||||
{lyrics}
|
%s
|
||||||
}}
|
}
|
||||||
.lyricsmain {{
|
.lyricsmain {
|
||||||
{main}
|
%s
|
||||||
}}
|
}
|
||||||
"""
|
"""
|
||||||
theme_data = item.theme_data
|
theme_data = item.theme_data
|
||||||
lyricstable = ''
|
lyricstable = ''
|
||||||
@ -680,7 +680,7 @@ def build_lyrics_css(item):
|
|||||||
lyricsmain += ' text-shadow: {theme} {shadow}px ' \
|
lyricsmain += ' text-shadow: {theme} {shadow}px ' \
|
||||||
'{shadow}px;'.format(theme=theme_data.font_main_shadow_color,
|
'{shadow}px;'.format(theme=theme_data.font_main_shadow_color,
|
||||||
shadow=theme_data.font_main_shadow_size)
|
shadow=theme_data.font_main_shadow_size)
|
||||||
lyrics_css = style.format(stable=lyricstable, lyrics=lyrics, main=lyricsmain)
|
lyrics_css = style % (lyricstable, lyrics, lyricsmain)
|
||||||
return lyrics_css
|
return lyrics_css
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user