Merge pull request #43 from openzim/issue_39

Move inline JS + CSS to dedicated files Add --node-ids CLI parameter Fix issue with ePub rendering which was outside the iframe
openzim · Jul 10, 2023 · 9798dcd · 9798dcd
2 parents f91f34d + 7db2383
commit 9798dcd
Show file tree

Hide file tree

Showing 11 changed files with 364 additions and 365 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,11 @@ Development
 Before contributing be sure to check out the
 [CONTRIBUTING.md](CONTRIBUTING.md) guidelines.
 
+To test epubs and pdfs rendering, a potential usefull command is:
+```bash
+kolibri2zim --name "Biblioteca Elejandria" --output /output --tmp-dir /tmp --zim-file Biblioteca_Elejandria.zim --channel-id "fed29d60e4d84a1e8dcfc781d920b40e" --node-ids 'd92c07655128458f8248416154b18a68,89fe2f86ee3f4fbaa7fb2bf9bd56d088,75f99e6b97d14b14a4e74762ad77391f,89fe2f86ee3f4fbaa7fb2bf9bd56d088'
+```
+
 License
 -------
 

diff --git a/kolibri2zim/entrypoint.py b/kolibri2zim/entrypoint.py
@@ -27,6 +27,11 @@ def main():
         default=None,
     )
 
+    parser.add_argument(
+        "--node-ids",
+        help="Comma-separated list of node IDs to process ; root is always processed.",
+    )
+
     parser.add_argument(
         "--name",
         help="ZIM name. Used as identifier and filename (date will be appended)",

diff --git a/kolibri2zim/scraper.py b/kolibri2zim/scraper.py
@@ -58,6 +58,7 @@
     "about",
     "css",
     "dedup_html_files",
+    "node_ids"
 ]
 NOSTREAM_FUNNEL_SIZE = 1024  # 2**20 * 2  # 2MiB
 
@@ -131,6 +132,9 @@ def go(option):
         self.keep_build_dir = go("keep_build_dir")
         self.debug = go("debug")
         self.only_topics = go("only_topics")
+        self.node_ids = (
+            None if go("node_ids") is None else [t.strip() for t in go("node_ids").split(",")]
+        )
 
         # jinja2 environment setup
         self.jinja2_env = jinja2.Environment(
@@ -167,7 +171,8 @@ def schedule_node(item):
 
         # fill queue with (node_id, kind) tuples for all root node's descendants
         for node in self.db.get_node_descendants(self.root_id):
-            schedule_node((node["id"], node["kind"]))
+            if self.node_ids is None or node["id"] in self.node_ids:
+                schedule_node((node["id"], node["kind"]))
 
     def add_node(self, item):
         """process a content node from the tuple in queue"""

diff --git a/kolibri2zim/templates/assets/document.js b/kolibri2zim/templates/assets/document.js
@@ -0,0 +1,9 @@
+function resizeFrameToFullHeight(){
+    let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+    let frame = document.getElementById("frame");
+    let headerHeight = frame.getBoundingClientRect().top;
+    let newHeight = windowHeight - headerHeight;
+    frame.style.height = newHeight + 'px';
+}
+window.addEventListener('resize', resizeFrameToFullHeight, {capture: true});
+resizeFrameToFullHeight();
diff --git a/kolibri2zim/templates/assets/epub_embed.css b/kolibri2zim/templates/assets/epub_embed.css
@@ -0,0 +1,283 @@
+body {
+    margin: 0;
+    background: #fafafa;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #333;
+
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    min-height: 800px;
+}
+
+#title {
+    width: 900px;
+    min-height: 18px;
+    margin: 10px auto;
+    text-align: center;
+    font-size: 16px;
+    color: #E2E2E2;
+    font-weight: 400;
+}
+
+#title:hover {
+    color: #777;
+}
+
+#viewer.spreads {
+    width: 900px;
+    height: 600px;
+    box-shadow: 0 0 4px #ccc;
+    border-radius: 5px;
+    padding: 0;
+    position: relative;
+    margin: 10px auto;
+    background: white url('ajax-loader.gif') center center no-repeat;
+}
+
+#viewer.spreads .epub-view>iframe {
+    background: white;
+}
+
+#viewer.scrolled {
+    overflow: hidden;
+    width: 800px;
+    margin: 0 auto;
+    position: relative;
+    background: url('ajax-loader.gif') center center no-repeat;
+    box-shadow: 0 0 4px #ccc;
+    padding: 20px;
+    background-color: white;
+}
+
+#viewer.scrolled .epub-view>iframe {
+    background: white;
+}
+
+#prev {
+    left: 0;
+}
+
+#next {
+    right: 0;
+}
+
+#toc {
+    display: block;
+    margin: 10px auto;
+}
+
+@media (min-width: 1000px) {
+    #viewer.spreads:after {
+        position: absolute;
+        width: 1px;
+        border-right: 1px #000 solid;
+        height: 90%;
+        z-index: 1;
+        left: 50%;
+        margin-left: -1px;
+        top: 5%;
+        opacity: .15;
+        box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
+        content: "";
+    }
+
+    #viewer.spreads.single:after {
+        display: none;
+    }
+
+    #prev {
+        left: 40px;
+    }
+
+    #next {
+        right: 40px;
+    }
+}
+
+.arrow {
+    position: fixed;
+    top: 50%;
+    margin-top: -32px;
+    font-size: 64px;
+    color: #E2E2E2;
+    font-family: arial, sans-serif;
+    font-weight: bold;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    text-decoration: none;
+}
+
+.navlink {
+    margin: 14px;
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    color: #ccc;
+}
+
+.arrow:hover,
+.navlink:hover {
+    color: #777;
+}
+
+.arrow:active,
+.navlink:hover {
+    color: #000;
+}
+
+#book-wrapper {
+    width: 480px;
+    height: 640px;
+    overflow: hidden;
+    border: 1px solid #ccc;
+    margin: 28px auto;
+    background: #fff;
+    border-radius: 0 5px 5px 0;
+    position: absolute;
+}
+
+#book-viewer {
+    width: 480px;
+    height: 660px;
+    margin: -30px auto;
+    -moz-box-shadow: inset 10px 0 20px rgba(0, 0, 0, .1);
+    -webkit-box-shadow: inset 10px 0 20px rgba(0, 0, 0, .1);
+    box-shadow: inset 10px 0 20px rgba(0, 0, 0, .1);
+}
+
+#book-viewer iframe {
+    padding: 40px;
+}
+
+#controls {
+    position: absolute;
+    bottom: 16px;
+    left: 50%;
+    width: 400px;
+    margin-left: -200px;
+    text-align: center;
+    display: none;
+}
+
+#controls>input[type=range] {
+    width: 400px;
+}
+
+#navigation {
+    width: 400px;
+    height: 100vh;
+    position: absolute;
+    overflow: auto;
+    top: 0;
+    left: 0;
+    background: #777;
+    -webkit-transition: -webkit-transform .25s ease-out;
+    -moz-transition: -moz-transform .25s ease-out;
+    -ms-transition: -moz-transform .25s ease-out;
+    transition: transform .25s ease-out;
+
+}
+
+#navigation.fixed {
+    position: fixed;
+}
+
+#navigation h1 {
+    width: 200px;
+    font-size: 16px;
+    font-weight: normal;
+    color: #fff;
+    margin-bottom: 10px;
+}
+
+#navigation h2 {
+    font-size: 14px;
+    font-weight: normal;
+    color: #B0B0B0;
+    margin-bottom: 20px;
+}
+
+#navigation ul {
+    padding-left: 36px;
+    margin-left: 0;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    width: 340px;
+}
+
+#navigation ul li {
+    list-style: decimal;
+    margin-bottom: 10px;
+    color: #cccddd;
+    font-size: 12px;
+    padding-left: 0;
+    margin-left: 0;
+}
+
+#navigation ul li a {
+    color: #ccc;
+    text-decoration: none;
+}
+
+#navigation ul li a:hover {
+    color: #fff;
+    text-decoration: underline;
+}
+
+#navigation ul li a.active {
+    color: #fff;
+}
+
+#navigation #cover {
+    display: block;
+    margin: 24px auto;
+}
+
+#navigation #closer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 12px;
+    color: #cccddd;
+    width: 24px;
+}
+
+#navigation.closed {
+    -webkit-transform: translate(-400px, 0);
+    -moz-transform: translate(-400px, 0);
+    -ms-transform: translate(-400px, 0);
+    transform: translate(-400px, 0);
+}
+
+svg {
+    display: block;
+}
+
+.close-x {
+    stroke: #cccddd;
+    fill: transparent;
+    stroke-linecap: round;
+    stroke-width: 5;
+}
+
+.close-x:hover {
+    stroke: #fff;
+}
+
+#opener {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 10px;
+    stroke: #E2E2E2;
+    fill: #E2E2E2;
+
+}
+
+#opener:hover {
+    stroke: #777;
+    fill: #777;
+}