jekyll-ebook_reader 0.1.0

data/lib/jekyll/ebook_reader/assets/jekyll-ebookreader-assets/ebookreader_main.css

@@ -0,0 +1,369 @@
+#ebook-includes #ebook-main {
+    /*position: absolute;*/
+    top: 50px;
+    left: 3%;
+    width: calc(100% - 100px);
+    max-width: 3000px;
+    z-index: 2;
+    transition: left .15s cubic-bezier(.55, 0, .2, .8) .08s;
+}
+
+
+#ebook-includes div#bottom-nav-arrows {
+
+}
+
+#ebook-includes svg {
+    display: block;
+}
+
+#ebook-includes .close-x {
+    stroke: #cccddd;
+    fill: transparent;
+    stroke-linecap: round;
+    stroke-width: 5;
+}
+
+#ebook-includes .close-x:hover {
+    stroke: #fff;
+}
+
+#ebook-includes #viewer {
+    overflow: hidden;
+    width: 100%;
+    min-width: 500px;
+    max-width: 1000px;
+    background-color: white;
+    box-shadow: 0 0 4px #ccc;
+    margin: 20px 20px 20px 20px;
+    padding: 40px 40px;
+}
+
+
+#ebook-includes #navigation {
+    width: 400px;
+    position: fixed;
+    overflow: auto;
+    top: 0;
+    right: 100%;
+
+    background: #ECECEC;
+    min-height: 100%;
+    height: 100%;
+    height: 100vh;
+
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+    padding: 9px;
+    padding-top: 10px;
+
+    transition: left .2s ease-out;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+#ebook-includes #navigation.open {
+    left: calc(100% - 410px);
+    z-index: 4;
+}
+
+#ebook-includes #navigation.fixed {
+    position: fixed;
+}
+
+
+#ebook-includes #navigation h1 {
+    width: 200px;
+    font-size: 16px;
+    font-weight: normal;
+    color: #777;
+    margin-bottom: 10px;
+}
+
+#ebook-includes #navigation h2 {
+    font-size: 14px;
+    font-weight: normal;
+    color: #B0B0B0;
+    margin-bottom: 20px;
+}
+
+#ebook-includes #navigation ul {
+    padding-left: 28px;
+    margin-left: 0;
+}
+
+#ebook-includes #navigation ul li {
+    list-style: decimal;
+    margin-bottom: 10px;
+    color: #585858;
+    font-size: 1em;
+    padding-left: 0;
+    margin-left: 0;
+}
+
+#ebook-includes #navigation ul li a {
+    color: #585858;
+    text-decoration: none;
+}
+
+#ebook-includes #navigation ul li a:hover {
+    color: #585858;
+    text-decoration: underline;
+}
+
+#ebook-includes #navigation ul li a.active {
+    color: #000;
+    font-weight: 400;
+}
+
+#ebook-includes #navigation #author {
+    text-align: center;
+}
+
+#ebook-includes #cover {
+    display: inline;
+}
+
+#ebook-includes #ebook-main {
+    margin-top: 60px;
+}
+
+#ebook-includes #pagination {
+    text-align: center;
+    margin: 20px;
+    /*padding: 0 50px;*/
+}
+
+#ebook-includes .arrow:hover {
+    color: #777;
+}
+
+#ebook-includes .arrow:active {
+    color: #000;
+}
+
+#ebook-includes .arrow .material-icons {
+    font-size: 64px;
+}
+
+#ebook-includes #prev {
+    /*float: left;*/
+}
+
+#ebook-includes #next {
+    /*float: right;*/
+}
+
+#ebook-includes #toc {
+    display: block;
+    margin: 10px auto;
+}
+
+
+#ebook-includes #navigation #cover {
+    display: block;
+    margin: 24px auto;
+}
+
+#ebook-includes #closer {
+    position: absolute;
+    padding: 12px;
+    left: 0;
+    top: 0;
+    color: #333;
+    cursor: pointer;
+}
+
+#ebook-includes #closer .material-icons {
+    color: #333;
+}
+
+#ebook-includes #opener {
+    position: sticky;
+    float: right;
+    top: 0;
+    right: 20px;
+    padding: 10px;
+    stroke: #E2E2E2;
+    fill: #E2E2E2;
+    z-index: 4;
+
+}
+
+#ebook-includes #opener:hover {
+    stroke: #777;
+    fill: #777;
+}
+
+
+#ebook-includes #hiddenTitle {
+    display: none;
+}
+
+#ebook-includes #title {
+    width: 900px;
+    min-height: 18px;
+    margin: 10px auto;
+    text-align: center;
+    font-size: 16px;
+    color: #E2E2E2;
+    font-weight: 400;
+}
+
+#ebook-includes #title:hover {
+    color: #777;
+}
+
+#ebook-includes #prev {
+    left: 0;
+}
+
+#ebook-includes #next {
+    right: 0;
+}
+
+#ebook-includes #toc {
+    display: block;
+    margin: 10px auto;
+}
+
+#ebook-includes #viewer.spreads {
+    width: 84vw;
+    height: 80vh;
+    box-shadow: 0 0 4px #ccc;
+    border-radius: 5px;
+    padding: 0;
+    position: relative;
+    margin: 10vh auto;
+    background: white;
+    top: 0;
+}
+
+#ebook-includes #viewer.loading {
+    background: white url('ajax-loader.gif') center center no-repeat;
+}
+
+#ebook-includes div#bottom-nav-arrows {
+    height: 100px;
+    width: 100%;
+}
+
+#ebook-includes .arrow {
+    font-size: 1rem;
+    margin: 14px;
+    display: inline-block;
+    text-align: center;
+    text-decoration: none;
+    color: #ccc;
+    margin-bottom: 50px;
+    width: calc(50% - 60px);
+}
+
+#ebook-includes .navlink {
+    margin: 14px;
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    color: #ccc;
+}
+
+#ebook-includes .arrow:hover,
+#ebook-includes .navlink:hover {
+    color: #777;
+}
+
+#ebook-includes .arrow:active,
+#ebook-includes .navlink:hover {
+    color: #000;
+}
+
+#ebook-includes #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;
+}
+
+#ebook-includes #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);
+}
+
+#ebook-includes #book-viewer iframe {
+    padding: 40px 40px;
+}
+
+#ebook-includes #controls {
+    position: absolute;
+    bottom: 16px;
+    left: 50%;
+    width: 400px;
+    margin-left: -200px;
+    text-align: center;
+    display: none;
+}
+
+#ebook-includes>#controls>input[type=range] {
+    width: 400px;
+}
+
+
+/* Navigation  */
+
+@media screen and (max-width: 600px) {
+    #ebook-includes #navigation {
+        width: 100%;
+    }
+
+    #ebook-includes #navigation.open {
+        left: 0px;
+    }
+
+    #ebook-includes #ebook-main {
+        width: calc(100% - 32px);
+        position: relative;
+        left: 0px;
+        top: 42px;
+        margin-top: 0px;
+    }
+
+    #ebook-includes #viewer {
+        width: 92%;
+        min-width: 1px;
+
+        margin: 2%;
+        padding: 2%;
+    }
+
+    #ebook-includes #opener {
+        position: absolute;
+        top: 0;
+        right: 6%;
+        padding: 10px 20px;
+        stroke: #E2E2E2;
+        fill: #E2E2E2;
+    }
+}
+
+
+
+
+/* === ALONE EDITS =========== */
+
+
+#ebook-includes #ebook-main {
+    width: calc(100% - 200px);
+}
+
+#ebook-includes #opener {
+    right: 45px;
+}
+
+

data/lib/jekyll/ebook_reader/assets/jekyll-ebookreader-assets/reader.js

@@ -0,0 +1,305 @@
+// window.launchEpubJS = launchEpubJS;
+// window.handleHypothesisChange = handleHypothesisChange;
+
+function launchEpubJS(bookURL, bookRenderOptions) {
+    console.log('launchEpubJS...', bookURL, bookRenderOptions);
+    let params = URLSearchParams && new URLSearchParams(document.location.search.substring(1));
+    let url = params && params.get("url") && decodeURIComponent(params.get("url"));
+    let defaultBookRenderOptions = {
+        flow: "scrolled-doc",
+        ignoreClass: "annotator-hl",
+        width: "100%",
+        height: "100%",
+        stylesheet: "/assets/books/graeber_debt/epub/assets/epub_iframe_stylesheet.css"
+    };
+
+
+    // Load the opf
+    book = ePub(bookURL || url || "https://cdn.hypothes.is/demos/epub/content/moby-dick/book.epub", {
+        canonical: function(path) {
+            return window.location.origin + window.location.pathname + "?loc=" + path;
+        }
+    });
+    rendition = book.renderTo("viewer", bookRenderOptions || defaultBookRenderOptions);
+
+    // var hash = window.location.hash.slice(2);
+    var loc = window.location.href.indexOf("?loc=");
+    if (loc > -1) {
+        var href = window.location.href.slice(loc + 5);
+        var hash = decodeURIComponent(href);
+    }
+
+    rendition.display(hash || undefined);
+
+
+    var next = document.getElementById("next");
+    next.addEventListener("click", function(e) {
+        rendition.next();
+        e.preventDefault();
+    }, false);
+
+    var prev = document.getElementById("prev");
+    prev.addEventListener("click", function(e) {
+        rendition.prev();
+        e.preventDefault();
+    }, false);
+
+    rendition.on("rendered", function(section) {
+        var nextSection = section.next();
+        var prevSection = section.prev();
+
+        if (nextSection) {
+            nextNav = book.navigation.get(nextSection.href);
+
+            if (nextNav) {
+                nextLabel = nextNav.label;
+            } else {
+                nextLabel = "next";
+            }
+
+            next.textContent = nextLabel + " »";
+        } else {
+            next.textContent = "";
+        }
+
+        if (prevSection) {
+            prevNav = book.navigation.get(prevSection.href);
+
+            if (prevNav) {
+                prevLabel = prevNav.label;
+            } else {
+                prevLabel = "previous";
+            }
+
+            prev.textContent = "« " + prevLabel;
+        } else {
+            prev.textContent = "";
+        }
+    });
+
+    var nav = document.getElementById("navigation");
+    var opener = document.getElementById("opener");
+    opener.addEventListener("click", function(e) {
+        if (nav.classList.contains("open")) {
+            nav.classList.remove("open")
+        } else {
+            nav.classList.add("open");
+        }
+    }, false);
+
+    var closer = document.getElementById("closer");
+    closer.addEventListener("click", function(e) {
+        nav.classList.remove("open");
+    }, false);
+
+    // Hidden
+    var hiddenTitle = document.getElementById("hiddenTitle");
+
+    rendition.on("rendered", function(section) {
+        var current = book.navigation && book.navigation.get(section.href);
+
+        if (current) {
+            document.title = current.label;
+        }
+
+        // TODO: this is needed to trigger the hypothesis client
+        // to inject into the iframe
+        requestAnimationFrame(function() {
+            hiddenTitle.textContent = section.href;
+        })
+
+        var old = document.querySelectorAll('.active');
+        Array.prototype.slice.call(old, 0)
+            .forEach(function(link) {
+                link.classList.remove("active");
+            })
+
+        var active = document.querySelector('a[href="' + section.href + '"]');
+        if (active) {
+            active.classList.add("active");
+        }
+        // Add CFI fragment to the history
+        history.pushState({}, '', "?loc=" + encodeURIComponent(section.href));
+        // window.location.hash = "#/"+section.href
+    });
+
+    var keyListener = function(e) {
+
+        // Left Key
+        if ((e.keyCode || e.which) == 37) {
+            rendition.prev();
+        }
+
+        // Right Key
+        if ((e.keyCode || e.which) == 39) {
+            rendition.next();
+        }
+
+    };
+
+    rendition.on("keyup", keyListener);
+    document.addEventListener("keyup", keyListener, false);
+
+    book.ready.then(function() {
+        var $viewer = document.getElementById("viewer");
+        $viewer.classList.remove("loading");
+    });
+
+    book.loaded.navigation.then(function(toc) {
+        var $nav = document.getElementById("toc"),
+            docfrag = document.createDocumentFragment();
+
+        toc.forEach(function(chapter, index) {
+            var item = document.createElement("li");
+            var link = document.createElement("a");
+            link.id = "chap-" + chapter.id;
+            link.textContent = chapter.label;
+            link.href = chapter.href;
+            item.appendChild(link);
+            docfrag.appendChild(item);
+
+            link.onclick = function() {
+                var url = link.getAttribute("href");
+                rendition.display(url);
+                return false;
+            };
+
+        });
+
+        $nav.appendChild(docfrag);
+
+
+    });
+
+    book.loaded.metadata.then(function(meta) {
+        var $title = document.getElementById("title");
+        var $author = document.getElementById("author");
+        var $cover = document.getElementById("cover");
+        var $nav = document.getElementById('navigation');
+
+        $title.textContent = meta.title;
+        $author.textContent = meta.creator;
+        if (book.archive) {
+            book.archive.createUrl(book.cover)
+                .then(function(url) {
+                    $cover.src = url;
+                })
+        } else {
+            $cover.src = book.cover;
+        }
+
+    });
+
+    book.rendition.hooks.content.register(function(contents, view) {
+
+        contents.window.addEventListener('scrolltorange', function(e) {
+            var range = e.detail;
+            var cfi = new ePub.CFI(range, contents.cfiBase)
+                .toString();
+            if (cfi) {
+                book.rendition.display(cfi);
+            }
+            e.preventDefault();
+        });
+
+    });
+
+}
+
+
+function wait(t) {
+    return new Promise(function(resolve) {
+        window.setTimeout(resolve, t)
+    });
+}
+
+function handleHypothesisChange(state) {
+
+    let epubjsStyleIfHypoOpen = `body.hypothesis-highlights-always-on { padding-left: 5px !important; }`
+
+    let main = document.querySelector('#ebook-main');
+    let hypoWasAlreadyOpen = main.classList.contains('hypoIsOpen');
+    let hypoSidebarDidChange = (
+        (hypoWasAlreadyOpen && !state.expanded)
+        || (!hypoWasAlreadyOpen && state.expanded));
+    if (hypoSidebarDidChange) {
+        // Wait until epub.js iframe is loaded
+        if (!document.querySelector('div.epub-view iframe')) {
+            wait(1500)
+                .then(
+                    (a) => {
+                        console.log('waiting...', a);
+                        resizeReflowAndScroll();
+                    }
+                );
+        } else {
+            resizeReflowAndScroll();
+        }
+    } else {
+        return;
+    }
+
+    // Reflow txt to still be visible, scroll to maintain location
+    function resizeReflowAndScroll() {
+        console.log('reflowing...')
+
+        // Main window
+        let currScroll = scrollY;
+        let viewer = document.querySelector("#viewer");
+        let parsedRenditionWidthPct = Number.parseInt(rendition.settings.width) / 100;
+
+        // Hypothesis
+        let hypoSidebar = document.querySelector("hypothesis-sidebar")
+            .shadowRoot.querySelector('div.annotator-frame');
+
+        // epub.js iframe
+        let iframeEl = document.querySelector('iframe');
+        let iframePaddingElement = iframeEl.contentDocument.querySelector("#iframePaddingElement");
+        console.log(iframeEl, iframePaddingElement);
+        if (!iframePaddingElement) {
+            iframePaddingElement = document.createElement("style");
+            iframePaddingElement.id = "iframePaddingElement";
+            iframeEl.contentDocument.head.appendChild(iframePaddingElement);
+        }
+        console.log(iframeEl, iframePaddingElement);
+
+        let bodyEl = iframeEl.contentDocument.body;
+        let currBodyPadding = [Number.parseInt(bodyEl.style.paddingLeft),
+            Number.parseInt(bodyEl.style.paddingRight)
+        ];
+
+        // If hypothesis expanded (this fn is only called if it was a real sidebar open/close)
+        if (state.expanded) {
+            main.classList.add('hypoIsOpen');
+
+            // Inject reduced padding styling to epub iframe
+            iframePaddingElement.textContent = epubjsStyleIfHypoOpen;
+
+            // Calculate new size
+            let rectViewer = viewer.getBoundingClientRect();
+            let rectHypo = hypoSidebar.getBoundingClientRect();
+            let spaceNeeded = Number.parseFloat(rectViewer.right - (rectHypo.left - rectHypo.width));
+            let pct = spaceNeeded / Number.parseFloat(rectViewer.width);
+            pct = (1 - pct) * 100;
+            pct = Number.parseInt(pct).toString();
+            pct = pct + '%';
+            console.log('resizeDetails', {pct, spaceNeeded, rectHypo, rectViewer});
+            rendition.resize(pct);
+
+            let scrollNew = currScroll + 0.262 * currScroll;
+            wait(300).then(() => scrollTo({ 'top': scrollNew }));
+
+        } else if ((state.expanded === false)) {
+            rendition.resize("100%");
+            main.classList.remove("hypoIsOpen");
+            iframePaddingElement.textContent = "";
+
+            let scrollNew = currScroll / 1.262;
+            wait(300)
+                .then(() => scrollTo({ 'top': scrollNew }));
+
+        }
+
+    };
+
+}