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

Beauty spa for the htmlbuilder

Browse Source
This commit is contained in:
Ken Roberts 2016-06-07 06:12:22 -07:00
parent 2443b94eda
commit 5fe54b5907
2 changed files with 361 additions and 361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
openlp/core/lib/htmlbuilder.py
View File

@ -398,55 +398,54 @@ from openlp.core.lib.theme import BackgroundType, BackgroundGradientType, Vertic
log = logging.getLogger(__name__) log = logging.getLogger(__name__)
HTML_SRC = Template(""" HTML_SRC = Template("""
<!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 {
${bg_css}; ${bg_css};
} }
.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;
} }
${css_additions} ${css_additions}
#footer { #footer {
position: absolute; position: absolute;
z-index: 6; z-index: 6;
${footer_css} ${footer_css}
} }
/* lyric css */ /* lyric css */${lyrics_css}
${lyrics_css} 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 = ${transitions};
${js_additions} ${js_additions}
@ -535,63 +534,63 @@ sup {
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" ${bg_image} /> <img id="bgimage" class="size" ${bg_image} />
<img id="image" class="size" ${image} /> <img id="image" class="size" ${image} />
${html_additions} ${html_additions}
<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>
</body> </body>
</html> </html>
""") """)
LYRICS_SRC = Template(""" LYRICS_SRC = Template("""
.lyricstable { .lyricstable {
z-index: 5; z-index: 5;
position: absolute; position: absolute;
display: table; display: table;
${stable} ${stable}
} }
.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} ${lyrics}
} }
.lyricsmain { .lyricsmain {
${main} ${main}
} }
""") """)
FOOTER_SRC = Template(""" FOOTER_SRC = Template("""
left: ${left}px; left: ${left}px;
bottom: ${bottom}px; bottom: ${bottom}px;
width: ${width}px; width: ${width}px;
font-family: ${family}; font-family: ${family};
font-size: ${size}pt; font-size: ${size}pt;
color: ${color}; color: ${color};
text-align: left; text-align: left;
white-space: ${space}; white-space: ${space};
""") """)
LYRICS_FORMAT_SRC = Template(""" LYRICS_FORMAT_SRC = Template("""
${justify}word-wrap: break-word; ${justify}word-wrap: break-word;
text-align: ${align}; text-align: ${align};
vertical-align: ${valign}; vertical-align: ${valign};
font-family: ${font}; font-family: ${font};
font-size: ${size}pt; font-size: ${size}pt;
color: ${color}; color: ${color};
line-height: ${line}%; line-height: ${line}%;
margin: 0; margin: 0;
padding: 0; padding: 0;
padding-bottom: ${bottom}; padding-bottom: ${bottom};
padding-left: ${left}px; padding-left: ${left}px;
width: ${width}px; width: ${width}px;
height: ${height}px;${font_style}${font_weight} height: ${height}px;${font_style}${font_weight}
""") """)
def build_html(item, screen, is_live, background, image=None, plugins=None): def build_html(item, screen, is_live, background, image=None, plugins=None):
@ -737,7 +736,7 @@ def build_lyrics_format_css(theme_data, width, height):
valign = VerticalType.Names[theme_data.display_vertical_align] valign = VerticalType.Names[theme_data.display_vertical_align]
left_margin = (int(theme_data.font_main_outline_size) * 2) if theme_data.font_main_outline else 0 left_margin = (int(theme_data.font_main_outline_size) * 2) if theme_data.font_main_outline else 0
# fix tag incompatibilities # fix tag incompatibilities
justify = '' if (theme_data.display_horizontal_align == HorizontalType.Justify) else 'white-space:pre-wrap;\n' justify = '' if (theme_data.display_horizontal_align == HorizontalType.Justify) else ' white-space: pre-wrap;\n'
padding_bottom = '0.5em' if (theme_data.display_vertical_align == VerticalType.Bottom) else '0' padding_bottom = '0.5em' if (theme_data.display_vertical_align == VerticalType.Bottom) else '0'
return LYRICS_FORMAT_SRC.substitute(justify=justify, return LYRICS_FORMAT_SRC.substitute(justify=justify,
align=align, align=align,
@ -750,8 +749,8 @@ def build_lyrics_format_css(theme_data, width, height):
left=left_margin, left=left_margin,
width=width, width=width,
height=height, height=height,
font_style='\nfont-style:italic;' if theme_data.font_main_italics else '', font_style='\n font-style: italic;' if theme_data.font_main_italics else '',
font_weight='\nfont-weight:bold;' if theme_data.font_main_bold else '') font_weight='\n font-weight: bold;' if theme_data.font_main_bold else '')
def build_footer_css(item, height): def build_footer_css(item, height):

141
tests/functional/openlp_core_lib/test_htmlbuilder.py
View File

@ -14,55 +14,54 @@ from tests.functional import MagicMock, patch
from tests.helpers.testmixin import TestMixin from tests.helpers.testmixin import TestMixin
HTML = """ HTML = """
<!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 {
; ;
} }
.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;
} }
plugin CSS plugin CSS
#footer { #footer {
position: absolute; position: absolute;
z-index: 6; z-index: 6;
dummy: dummy; dummy: dummy;
} }
/* lyric css */ /* lyric css */
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 = false; var transition = false;
plugin JS plugin JS
@ -151,64 +150,64 @@ sup {
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" style="display:none;" /> <img id="bgimage" class="size" style="display:none;" />
<img id="image" class="size" style="display:none;" /> <img id="image" class="size" style="display:none;" />
plugin HTML plugin HTML
<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>
</body> </body>
</html> </html>
""" """
BACKGROUND_CSS_RADIAL = 'background: -webkit-gradient(radial, 5 50%, 100, 5 50%, 5, from(#000000), to(#FFFFFF)) fixed' BACKGROUND_CSS_RADIAL = 'background: -webkit-gradient(radial, 5 50%, 100, 5 50%, 5, from(#000000), to(#FFFFFF)) fixed'
LYRICS_CSS = """ LYRICS_CSS = """
.lyricstable { .lyricstable {
z-index: 5; z-index: 5;
position: absolute; position: absolute;
display: table; display: table;
left: 10px; top: 20px; left: 10px; top: 20px;
} }
.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_format_css lyrics_format_css
} }
.lyricsmain { .lyricsmain {
text-shadow: #000000 5px 5px; text-shadow: #000000 5px 5px;
} }
""" """
LYRICS_OUTLINE_CSS = ' -webkit-text-stroke: 0.125em #000000; -webkit-text-fill-color: #FFFFFF; ' LYRICS_OUTLINE_CSS = ' -webkit-text-stroke: 0.125em #000000; -webkit-text-fill-color: #FFFFFF; '
LYRICS_FORMAT_CSS = """ LYRICS_FORMAT_CSS = """
word-wrap: break-word; word-wrap: break-word;
text-align: justify; text-align: justify;
vertical-align: bottom; vertical-align: bottom;
font-family: Arial; font-family: Arial;
font-size: 40pt; font-size: 40pt;
color: #FFFFFF; color: #FFFFFF;
line-height: 108%; line-height: 108%;
margin: 0; margin: 0;
padding: 0; padding: 0;
padding-bottom: 0.5em; padding-bottom: 0.5em;
padding-left: 2px; padding-left: 2px;
width: 1580px; width: 1580px;
height: 810px; height: 810px;
font-style:italic; font-style: italic;
font-weight:bold; font-weight: bold;
""" """
FOOTER_CSS_BASE = """ FOOTER_CSS_BASE = """
left: 10px; left: 10px;
bottom: 0px; bottom: 0px;
width: 1260px; width: 1260px;
font-family: Arial; font-family: Arial;
font-size: 12pt; font-size: 12pt;
color: #FFFFFF; color: #FFFFFF;
text-align: left; text-align: left;
white-space: %s; white-space: %s;
""" """
FOOTER_CSS = FOOTER_CSS_BASE % ('nowrap') FOOTER_CSS = FOOTER_CSS_BASE % ('nowrap')
FOOTER_CSS_WRAP = FOOTER_CSS_BASE % ('normal') FOOTER_CSS_WRAP = FOOTER_CSS_BASE % ('normal')
FOOTER_CSS_INVALID = '' FOOTER_CSS_INVALID = ''
@ -257,6 +256,8 @@ class Htmbuilder(TestCase, TestMixin):
# WHEN: Create the html. # WHEN: Create the html.
html = build_html(item, screen, is_live, background, plugins=plugins) html = build_html(item, screen, is_live, background, plugins=plugins)
self.maxDiff = None
# THEN: The returned html should match. # THEN: The returned html should match.
self.assertEqual(html, HTML, 'The returned html should match') self.assertEqual(html, HTML, 'The returned html should match')