melpomene.html

@@ -2,8 +2,10 @@
 <!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
 <div id="reader-frame">
     <div id="reader-content-frame">
-        <div id="reader-pages" class="animated" hidden>
-            <!-- your img tags here, see documentation -->
+        <!-- replace all 'xxxx' with the actual value -->
+        <div id="reader-pages" class="animated" data-pages-width="xxxx" data-pages-height="xxxx" hidden>
+            <img loading="lazy" src="xxxx" data-zooms="xxxx"/>
+            <!-- duplicate img for each comic page -->
         </div>
         <div id="focus-overlay" class="flex-col fill">
             <div class="grow obscured animated"></div>

zooms_generator.py

@@ -10,8 +10,45 @@ import argparse
 from pathlib import Path
 
 
-HTML_TEMPLATE = Path(__file__).parent / "melpomene.html"
-HTML_TO_REPLACE = "<!-- your img tags here, see documentation -->"
+HTML_START_CONSTANT = """\
+<!-- Melpomene comic reader -->
+<!-- CC-BY-NC-SA https://git.aribaud.net/caribaud/melpomene/ -->
+<div id="reader-frame">
+    <div id="reader-content-frame">
+"""
+
+HTML_END_CONSTANT = """\
+        <div id="focus-overlay" class="flex-col fill">
+            <div class="grow obscured animated"></div>
+            <div id="focus-overlay-height" class="flex animated" style="height:100%">
+                <div class="grow obscured animated"></div>
+                <div id="focus-overlay-width" class="focus animated" style="width:100%"></div>
+                <div class="grow obscured animated"></div>
+            </div>
+            <div class="grow obscured animated"></div>
+        </div>
+        <div id="help-menu" class="fill">
+            <div id="help-controls" style="opacity:1; transform: translate(0,0);">
+                <div><div class="key">&larr;</div>/ scroll up / clic : previous</div>
+                <div><div class="key">&rarr;</div>/ scroll down / clic  : next</div>
+                <div>-----------------------</div>
+                <div><div class="key">F</div>: Toggle fullscreen</div>
+                <div><div class="key">P</div>: Toggle progress bar</div>
+                <div><div class="key">V</div>: Toggle panel / page viewing mode</div>
+            </div>
+        </div>
+        <div id="nav-controls" class="fill">
+            <div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
+            <div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
+        </div>
+    </div>
+    <div id="reader-progress-container">
+        <div id="reader-progress-bar"></div>
+        <div id="reader-progress-pages"></div>
+    </div>
+</div>
+<!-- End of Melpomene comic reader -->
+"""
 
 
 def extract_zooms(src_folder):
@@ -78,21 +115,21 @@ def write_json_or_js(zooms, dest_file, is_js):
 
 def write_html(zooms, dest_file, pages_width, pages_height, prefix, extention):
     
-    img_tags = ""
-    for page_idx in sorted(zooms.keys()):
-        img_url = f"{prefix}{zooms[page_idx]['name']}.{extention}"
-        zoom_html_data = [','.join([str(zoom) for zoom in page_zooms]) for page_zooms in zooms[page_idx]["zooms"]]
-        zoom_html_str = ';'.join(zoom_html_data)
-        img_tags = img_tags + f'            <img loading="lazy" heigth="{zooms[page_idx]["height"]}" width="{zooms[page_idx]["width"]}" src="{img_url}" data-zooms="{zoom_html_str}"/>\n'
+    with open(dest_file, "w") as data_file:
     
-    img_tags = img_tags.strip()
+        data_file.write(HTML_START_CONSTANT)
     
-    with open(HTML_TEMPLATE) as template_file, open(dest_file, "w") as data_file:
+        data_file.write(f'        <div id="reader-pages" class="animated" hidden>\n')
         
-        data = template_file.read().replace(HTML_TO_REPLACE, img_tags)
-    
-        data_file.write(data)
-
+        for page_idx in sorted(zooms.keys()):
+            img_url = f"{prefix}{zooms[page_idx]['name']}.{extention}"
+            zoom_html_data = [','.join([str(zoom) for zoom in page_zooms]) for page_zooms in zooms[page_idx]["zooms"]]
+            zoom_html_str = ';'.join(zoom_html_data)
+            data_file.write(f'            <img loading="lazy" heigth="{zooms[page_idx]["height"]}" width="{zooms[page_idx]["width"]}" src="{img_url}" data-zooms="{zoom_html_str}"/>\n')
+        
+        data_file.write(f'        </div>\n')
+        
+        data_file.write(HTML_END_CONSTANT)
 
 def generate_argparse():
     """ Generate Melpomene's generator input parser"""