Show ebook online (using epub.js + WordPress)

Question

I want to show an ebook (epub-format) on a website that's built with a custom theme for WordPress.

I have, among other things, tried to find answers in the epub.js documentation but I can't make sense of it and need help.

What it does now:

It loads the example ebook, but not correctly/as I want it.
It doesn't load anything at all when I try to use my own ebook.

What I wish it would do:

That the ebook will load 100% in the specified field.
Be able to show an ebook uploaded to the site through WordPress Media Library.
Make it easy to manage ebooks in WordPress. On a "project" (custom post type) do I want to be able to show two buttons if necessary, one to download the associated ebook and one button that will redirect to an "ebook" page (another custom post type) for reading online. Not all "project" pages will have ebooks associated with them, so it must be easy to add/change/remove ebooks. But some projects may even have more than one ebook associated with them.

Additional information:

WordPress doesn't originally allow epub-files to be uploaded. I've fixed that by adding this to functions.php in my theme.

/* Allows uploading .MOBI and .EPUB files */
function allow_personal_uploads ( $existing_mimes=array() ) {
 
    // allow uploading .MOBI and .EPUB files
    $existing_mimes['mobi'] = 'application/x-mobipocket-ebook'; 
    $existing_mimes['epub'] = 'application/epub+zip'; 
 
    // return amended array
    return $existing_mimes;
}
add_filter('upload_mimes', 'allow_personal_uploads');

I'm using the plugin Download Monitor to make it possible to download ebooks. Maybe it's possible to use retrieve_single to get the URL?
If it's to any help, I also have the plugin Advanced Custom Fields PRO.

Please keep in mind that I'm still quite new to javascript.

Thanks in advance!

/* Dropdown */
$(function () {
    var $window = $(window);
    var toggleMenu = function() {
      if($window.width() ) {
        $(".toc-list").slideToggle(250);  
      }  
    };
    var collapseMenu = function() {
      if($window.width() ) {
        $(".toc-list").slideUp(250);  
      }  
    };
  
    $(".toc-toggle").click(toggleMenu);
    
    $(".toc-list a").click(collapseMenu);
    
    $(document).click(function (event) {
    console.log(!$(event.target).closest('.table-of-contents').length);
    if(!$(event.target).closest('.table-of-contents').length) {
      collapseMenu();
    }
  });
    
    var handleMatchMedia = function(md) {
      if(md.matches) {
        $(".toc-list").show();
      }
      else {
        $(".toc-list").hide();
      }
    };
    
    var mq = window.matchMedia("(min-width: " + "px)");
    handleMatchMedia(mq);
    mq.addListener(handleMatchMedia);
  });

/* EPUB */
// Load the opf
var book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
var rendition = book.renderTo("viewer", {
height: "100%"
});
var hash = window.location.hash.slice(2);
// console.log(hash);
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 = "";
  }

  // Add CFI fragment to the history
  //history.pushState({}, '', section.href);
  window.location.hash = "#/"+section.href
});

rendition.on("relocated", function(location){
  console.log(location);
});

book.loaded.navigation.then(function(toc){
  var $nav = document.getElementById("toc"),
      docfrag = document.createDocumentFragment();
  var addTocItems = function (parent, tocItems) {
    var $ul = document.createElement("ul");
    tocItems.forEach(function(chapter) {
      var item = document.createElement("li");
      var link = document.createElement("a");
      link.textContent = chapter.label;
      link.href = chapter.href;
      item.appendChild(link);

      if (chapter.subitems) {
        addTocItems(item, chapter.subitems)
      }

      link.onclick = function(){
        var url = link.getAttribute("href");
        rendition.display(url);
        return false;
      };

      $ul.appendChild(item);
    });
    parent.appendChild($ul);
  };

  addTocItems(docfrag, toc);

  $nav.appendChild(docfrag);

  if ($nav.offsetHeight + 60 < window.innerHeight) {
    $nav.classList.add("fixed");
  }

});

book.loaded.metadata.then(function(meta){
  var $title = document.getElementById("title");
  var $author = document.getElementById("author");
  var $cover = document.getElementById("cover");

  $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;
  }

});

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* End */

body {
  background-color: tan;
}

.hidden {
  display: none;
}

.container {
  height: 100vh;
  position: relative;
}

#test1 {
  background-color: orange;
  height: 2rem;
  width: 100%;
}

#test2 {
  background-color: yellow;
  height: 2rem;
  width: 100%;
}

/* Table of contents */
#toc-container {
  box-sizing: border-box;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #171717;
  top: 0;
  position: absolute;
  width: 100%;
  color: #ffffff;
  list-style-type: none;
  z-index: 2;
}

.table-of-contents {
  box-sizing: border-box;
}

#toc>ul {
  list-style: none;
  padding: 1.5rem 0;
  top: calc(1.5rem*2);
  background-color: #171717;
  height: 100%;
}

#toc>ul>li {
  padding: 1rem;
  display: block;
}

#toc a {
  border-bottom: 2px solid #171717;
  padding-bottom: calc(1.5rem/6);
  text-decoration: none;
  color: #9e9ea1;
  display: inline-block;
}

#toc a:hover {
  border-bottom: 2px solid #ffffff;
  color: #ffffff;
  padding-bottom: calc(1.5rem/6);
  display: inline-block;
}

#toc {
  max-height: 80vh;
  overflow: auto;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.toc-toggle {
  padding: 1rem;
  margin-right: 1rem;
}

/*pagination*/
#pagination {
  background-color: #171717;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
}

#pagination a {
  border-bottom: 2px solid #171717;
  padding-bottom: calc(1.5rem/6);
  text-decoration: none;
  color: #9e9ea1;
}

#pagination a:hover {
  border-bottom: 2px solid #ffffff;
  color: #ffffff;
  padding-bottom: calc(1.5rem/6);
}

#prev {
  text-align: left;
  float: left;
}

#next {
  text-align: right;
  float: right;
}

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/epubjs@0.3.83/dist/epub.min.js"></script>
</head>

<div id="test1">
</div>

<div class="container">

  <div id="toc-container">
    <div class="table-of-contents">
      <div class="toc-toggle">
        <span>Table of contents</span>
      </div>
      <div id="navigation" class="toc-list">
        <div id="toc"></div>
      </div>
    </div>
  </div>

  <div id="main" class="">
    <div id="viewer" class=""></div>
  </div>

  <div id="pagination">
    <a id="prev" href="#prev" class="arrow">...</a>
    <a id="next" href="#next" class="arrow">...</a>
  </div>


</div>

<div id="test2">
</div>

! The code worked before when I tested it, but when I paste it in here it doesn't. I don't understand. Here's the link to where it works: https://codepen.io/CutePixel/pen/xxZvZOP

score 2 · Answer 1 · edited Aug 04 '20 at 16:31

I am installing epub.js on my wordpress website at the moment. I have asked a developer to create a wordpress plugin for epub.js 2 years ago, which he succeeded to do and it works on my website. You can find the repository of the plugin on github : https://github.com/Dardena7/Epubjs-Reader-Wordpress

And you can find my website at https://www.gilfiliot.com to see how it works. Just click the images and it should open the epub.js. Don't pay attention to the homepage design. I just opened the website and I concentrated on testing the epub plugin for the moment.

You can download the Zip file from the github repository and upload it as a plugin on your wordpress install and it should work as it is. I recommend that you test it on a development site since this plugin is not maintain by the developer since it's creation. But it works on my website to this day.

The plugin allows you to upload the "epub mime type" on your wordpress install.

It also creates a specific epub_custom_post_type so you are able to create and manage your epubs from the admin side. As well as rendering them on the front end with epub.js. You can therefore create an "epub post" for each one of your books. You can upload your epub from the "epub post's admin side". Just "add new" from the plugin's options.

Once you have uploaded your ebook to your "epub post", save your post. (The epubs are not saved in the wordpress media library but in another folder in your wordpress install. If you want to suppress epubs from your server, you need to go in the folder in your install).

Once your post is saved, you can either copy the url link of your epub post in a button on your homepage or you can populate your button with the dynamic url link of the epub post. Your page builder should recognize the epub_custom_post_type dynamic link if you allow it in the page builder options.

Then, simply go on your homepage, click the button and it should open the epub cleanly.

You can edit the files of the plugin to change the css or the labels of the front end or the .../epub_post_type/... part of the Url for example.

This plugin is rudimentary but it does the job well. If you know how to code you can modify it.

I would be interested in your help if you know how to add the dynamic pagination to the epub, for example, or other options and settings. Gil

Show ebook online (using epub.js + WordPress)

1 Answers1