Merge pull request #28 from d-i-t-a/feature/pagebreak

Feature/pagebreak
d-i-t-a · May 15, 2020 · dab8e83 · dab8e83
2 parents 74d0ce7 + 3d4449d
commit dab8e83
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 0 deletions.
diff --git a/injectables/pagebreak/pagebreak.css b/injectables/pagebreak/pagebreak.css
@@ -0,0 +1,40 @@
+:root body,
+:root [style*="--USER__pageMargins"] body {
+  padding: 0 var(--RS__pageGutter) !important;
+}
+
+:root *[epub\:type="pagebreak"]:not(:empty),
+:root *[epub\:type="pagebreak"][title]:empty::after {
+  font-size: 0.75rem;
+  line-height: 1;
+  font-family: var(--RS__sansTf);
+  color: #666666;
+  font-weight: bold;
+  float: left;
+  margin-left: calc((var(--RS__pageGutter) * -1) + 5px);
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+:root *[epub\:type="pagebreak"][title]:empty::after {
+  content: attr(title);
+}
+:root *[epub\:type="pagebreak"][title]:empty::before {
+    content: attr(title) ": ";
+}
+
+.epubPageBreak {
+    font-size: 0.75rem;
+    line-height: 1;
+    font-family: var(--RS__sansTf);
+    color: #666666;
+    font-weight: bold;
+    float: left;
+    margin-left: calc((var(--RS__pageGutter) * -1) + 5px);
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;  
+}
diff --git a/src/navigator/IFrameNavigator.ts b/src/navigator/IFrameNavigator.ts
@@ -843,6 +843,17 @@ export default class IFrameNavigator implements Navigator {
                     }
                 }, 200);
 
+                const body = HTMLUtilities.findRequiredIframeElement(this.iframe.contentDocument, "body") as HTMLBodyElement;
+                var pagebreaks = body.querySelectorAll('[*|type="pagebreak"]');
+                for (var i = 0; i < pagebreaks.length; i++) {
+                    var img = pagebreaks[i];
+                    console.log(img)
+                    if (img.innerHTML.length == 0) {
+                        img.innerHTML = img.getAttribute("title");
+                    }
+                    img.className = "epubPageBreak"
+                }
+
             }, 100);
 
             return new Promise<void>(resolve => resolve());

diff --git a/viewer/index_api.html b/viewer/index_api.html
@@ -217,6 +217,7 @@
             { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-before.css', r2before: true },
             { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-default.css', r2default: true },
             { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-after.css', r2after: true },
+            { type: 'style', url: 'http://localhost:4444/viewer/injectables/pagebreak/pagebreak.css', r2after: true },
             // { type: 'style', url: 'http://localhost:4444/viewer/readium-css/neon-after.css', r2after: true, appearance: 'neon' },
             { type: 'script', url: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-MML-AM_CHTML&latest' },
             { type: 'style', url: 'http://localhost:4444/viewer/fonts/opendyslexic/opendyslexic.css', fontFamily: 'opendyslexic', systemFont: false },

diff --git a/viewer/index_material.html b/viewer/index_material.html
@@ -277,6 +277,7 @@
             { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-before.css', r2before: true },
             { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-default.css', r2default: true },
             { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-after.css', r2after: true },
+            { type: 'style', url: 'http://localhost:4444/viewer/injectables/pagebreak/pagebreak.css', r2after: true },
             { type: 'script', url: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-MML-AM_CHTML&latest' },
             { type: 'style', url: 'http://localhost:4444/viewer/fonts/opendyslexic/opendyslexic.css', fontFamily: 'opendyslexic' },
             { type: 'script', url: 'http://localhost:4444/viewer/injectables/click/click.js' },