lib/html.py

import json


class HTML:

	@staticmethod
	def header(title = '', reldir = ''):
		return f"""<!DOCTYPE html>
			<html>

			<head>
				<title>Kumiko Reader</title>
				<meta charset="utf-8">
				<meta name="viewport" content="width=device-width, initial-scale=1">
				<script type="text/javascript" src="{reldir}jquery-3.2.1.min.js"></script>
				<script type="text/javascript" src="{reldir}reader.js"></script>
				<link rel="stylesheet" media="all" href="{reldir}style.css" />
				<style type="text/css">
					h2, h3 {{ text-align: center; margin-top: 3em; }}
					.sidebyside {{ display: flex; justify-content: space-around; }}
					.sidebyside > div {{ width: 45%; }}
					.version, .step-info {{ text-align: center; }}
					.kumiko-reader.halfwidth {{ max-width: 45%; max-height: 90vh; }}
					.kumiko-reader.fullpage {{ width: 100%; height: 100%; }}
				</style>
			</head>

			<body>
			<h1>{title}</h1>

		"""

	@staticmethod
	def nbdiffs(files_diff):
		return f"<p>{len(files_diff)} differences found in files</p>"

	pageId = 0

	@staticmethod
	def side_by_side_panels(title, step_info, jsons, v1, v2, images_dir, known_panels, diff_numbering_panels):
		html = f"""
			<h2>{title}</h2>
			<p class="step-info">{step_info}</p>
			<div class="sidebyside">
				<div class="version">{v1} <span class="processing_time">− processing time {jsons[0][0]['processing_time'] if 'processing_time' in jsons[0][0] else "??"}s</span></div>
				<div class="version">{v2} <span class="processing_time">- processing time {jsons[1][0]['processing_time']}s</span></div>
			</div>
			<div class="sidebyside">
		"""

		oneside = """
			<div id="page{id}" class="kumiko-reader halfwidth debug"></div>
			<script type="text/javascript">
				var reader = new Reader({{
					container: $('#page{id}'),
					comicsJson: {json},
					images_dir: {images_dir},
					known_panels: {known_panels},
					diff_numbering_panels: {diff_numbering_panels},
				}});
				reader.start();
			</script>
			"""
		i = -1
		for js in jsons:
			i += 1
			html += oneside.format(
				id = HTML.pageId,
				json = json.dumps(js),
				images_dir = json.dumps(images_dir),
				known_panels = known_panels[i],
				diff_numbering_panels = diff_numbering_panels
			)
			HTML.pageId += 1

		html += '</div>'
		return html

	@staticmethod
	def imgbox(images):
		html = "<h3>Debugging images</h3>\n<div class='imgbox'>\n"
		for img in images:
			html += f"\t<div><p>{img['label']}</p><img src='{img['filename']}' /></div>\n"

		return html + "</div>\n\n"

	@staticmethod
	def reader(js, images_dir):
		return f"""
			<div id="reader" class="kumiko-reader fullpage"></div>
			<script type="text/javascript">
				var reader = new Reader({{
					container: $('#reader'),
					comicsJson: {js},
					images_dir: {json.dumps(images_dir)},
					controls: true
				}});
				reader.start();
			</script>
			"""

	footer = """

</body>
</html>
"""