Rendering Single Book to Root Page + Load TOC to sidemenu

[ibby89]

Hi Jan,

Been working on this as a side project for a couple of months now. I've added a sidemenu to my test app and changed the root to the book page. The ePUB is pushed to the book page and then rendered to the page via: this.book.renderTo("book"); // TODO We should work with ready somehow here I think

Is there a way to render the book onto the current page? I did try replacing "book" with this.navCtrl and this.currentPage but neither did the trick.

I have already changed the way the page is loaded to: let book = "assets/books/test.epub";

[janpio]

Sorry, I am not 100% sure I understand the problem. Could you maybe provide screenshots or some other way that makes it easier to follow what you already did and what you still need or want to do?

[ibby89]

My objective is to load only a single book into the app, so instead of having a selection of books to choose from, only a single book is loaded straight onto the rootpage of the app.

To do this, I imported the BookPage into app.component.ts and changed the root to: rootPage:any = BookPage;

Then, in order to load a single book into the BookPage I replaced the line where the book is retrieved from the book array when it is pushed from the HomePage with: let book = "assets/books/test.epub";

So far so good, I can tell my test epub is loading because the TOC icon shows the correct chapters of my epub. The problem is that the actual chapter content is not loading.

[janpio]

That is curious - because that is exactly how this app used to work - I added the book selection only later.

What does your browser console and network panel say? Can you maybe navigate using the TOC dropdown?

[ibby89]

TOC dropdown 'appears' tp be working. The GET function for the chapter finishes without error. I am having a few other errors one of which I don't think is connected (the undefined href is probably because I messed up somewhere when generating the epub with Sigil).

[janpio]

Can you maybe try with one of the ebooks included here in the repo, to make sure this is not all caused by your ebook?

[ibby89]

Changed it to moby-dick.epub and replaced the render line with the original: this.book.renderTo('book');

Still getting the renderTo error unfortunately. Also when I dismiss the error, again I can see the TOCs correctly, but selecting a chapter does nothing. Ion-content is still blank.

[janpio]

Best create a fork of this repo and commit your changes there - then I can check it out and debug a bit myself.

[ibby89]

Done and done: https://github.com/ibby89/ionic-epubjs

[janpio]

Checking out your code directly did not work, I always got "this.book is undefined" or similar.

But then wrapping https://github.com/ibby89/ionic-epubjs/blob/master/src/pages/book/book.ts#L59 in platform.ready() to be:

    this.platform.ready().then(() => {
      // render book
      this.book.renderTo('book'); // TODO We should work with ready somehow here I think
    });

it did successfully load Moby Dick for me and render the title page in the browser.

This is necessary as ionViewDidLoad fires before platform.ready() does and filles the actual this.book. When there is an initial page to choose the book this is not an issue (as in my repo), but for you it is.

(Two menu buttons though - but I think this is expected from the code you committed)

[ibby89]

Hi Jan,

Hmm, interesting. This raises some questions about the sequence the code is run. I guess it works when you push the function onto a separate page but if loading into the root you have to wait for the platform to load.

Oh, the two menu buttons are because I want to move the TOCs to the sidemenu. Still trying to work out how to do it.

[janpio]

This raises some questions about the sequence the code is run. I guess it works when you push the function onto a separate page but if loading into the root you have to wait for the platform to load.

It is more that it "accidentally" works in the way I wrote the code - see the comment behind that line ;) It's just that you almost surely take longer to select a book like it needs to ready the platform - so this work (almost) always.

Can you reproduce the fix I describe? Do you see your book now?

[ibby89]

Yes, tested and working! :))

[janpio]

Awesome. I'll close this for now then, but just ping me again when you have further questions. It's nice when people use this project ;)