Treesaver ready

[Nathan Do]

Hi guys, 

Thank you for the great framework!!! 

I am trying to use treesaver to build a e-reader with certain functionalities. 

What really is missing right now is an event so that I can manipulate the DOM after treesaver settled (fill content into column)

I think it was mentioned here: https://github.com/Treesaver/treesaver/issues/210

Can I know if you guys have any plan for this to be included ? 

Is there a quick and dirty way that I can modify the source and continue with my work, cos some action really need to be done only after Treesaver... 

Thank you

Nathan

[Calvin Crane]

You could put your own function call in at the end of their render function if there isn't an event

www.landed.at ltd. A registered travel company in the UK.

-------------------------------

www.landed.at

www.roatan-diving.com

www.caribbean-diving.com

+447920026397

[Andrea Campi]

Did you try what was mentioned on that ticket?

        treesaver.addListener(document, event_name /* see below */, function (e) {

        });

There are a number of events that you can listen to, unfortunately we haven't documented them all yet, but you can find them easily in the source, look for fireEvent.

The most interesting ones:

* treesaver.index.loaded is fired as soon as the contents JSON is loaded;

* treesaver.loaded when the document has been parsed;

* treesaver.articlechanged when navigating to a new article (and when it's first loaded);

* treesaver.pageschanged when the actual displayed pages have changed;

* treesaver.paginationprogress is fired multiple times as the article is paginated; when it's all displayed, the event with have {completed: true}.

If you want to postprocess stuff after it's been laid out, these last two should be a good starting point.

But you need to be aware of two things:

* make absolutely sure you do not alter the size and layout of elements in any way.

Even something seemingly harmless like setting a font as bold or adding a border may changes the metrics (depending on your CSS, font etc), and that will look bad;

* also, do not generally assume that content is attached to the document;

* in general, *do not* manipulate the document DOM; instead use the Treesaver objects that you receive from the event handlers.

If in doubt, use the source :)

[Nathan Do]

Hi Andrea,

Yes, I tried what was mentioned in the post but then I did not know there are so many interesting events exposed out. 

Will definitely try those last two out. Thanks a lot!
@Ianded: Thanks mate, I think it will solve the problem using those mentioned events.

[Calvin Crane]

Has anyone tried to get an image as a single page. I can get close but iPhone throws an error though it works emulated via chrome pretending to be an iPhone.

www.landed.at ltd. A registered travel company in the UK.

-------------------------------

www.landed.at

www.roatan-diving.com

www.caribbean-diving.com

+447920026397

[Nathan Do]

Hi Andrea, 

I was using those two events 'pagechanged' and 'articlechanged'. They works great, saving me a lot of time.  

There are two things i want to ask though: 

- When using the 'pageChanged' event, I was checking the div#currentPage. The first time it loads, it seems to only contain the text 'Loading...', rather than the real HTML. 

It is, however, totally fine after that first time load. When I move from one Article to another it shows the HTML in div#currentPage

So for the first time, should I use another event ?

- From 'articleChanged', would there be any variable to tell the index of the article (Article 1,2, etc., which is the order in toc.json) ? 

I tried to parse it in the header as Javascript but apparently when you move to another article it does not pick it up. 

Thank you!

Nathan

[Nathan Do]

Hi guys, 

I figured out how to solve it. Thank you!

Nathan

[Mark Kessler]

Would be great if you could share it with the rest of us!

[Nathan Do]

Hi Mark,

Sure. The reason I did not mention the solution is because it's only specific to my app. 

However, I did figure out a few things:

1. 'pageChanged' event is trigger twice for each page. The first time only shows 'Loading' or undefined, i guess after that treesaver will fill the content into pages. 

On the second event, the page html will be available. 

Last time, the problem i had is because I have assumed the html will be there. So an error has caused JS to break. As long as you check the content, only execute when the content is there, it's fine.

2. 'articleChanged' 

Actually, i still don't know how to get current chapter index on treesaver's articlechanged event. 

But since I'm also using server side script that specify chapterIndex (i.e. index.php?chapter=1), I ended up just using javascript to query that parameter. 

Here is the code i'm using to get the 'name' param

decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;

3.Note

Another thing, treesaver will load the next + prev page. So if the current page is last page of article 1, first page of article 2 will be loaded (pagechanged) as well. 

But article 2 will only loaded (articlechanged) when the first page of article 2 is current page. 

Nathan

[Nathan Do]

apparently getting the Page number is simpler than I thought, but you need the treesaver source

It is basically exposed at ArticleManager.js component 

So I called: 

treesaver.ui.ArticleManager.getCurrentPageNumber() for Page number within article

treesaver.ui.ArticleManager.getCurrentDocumentNumber() for Article index

Both are 1-based indices

Nathan

On Thursday, November 8, 2012 6:22:08 PM UTC+8, Mark Kessler wrote:

[Andrea Campi]

On Fri, Nov 16, 2012 at 4:56 PM, Nathan Do <natha...@gmail.com> wrote:

apparently getting the Page number is simpler than I thought, but you need the treesaver source

It is basically exposed at ArticleManager.js component 

So I called: 

treesaver.ui.ArticleManager.getCurrentPageNumber() for Page number within article

treesaver.ui.ArticleManager.getCurrentDocumentNumber() for Article index

Both are 1-based indices

These are also exposed in a production build as treesaver.getCurrentPageNumber() and treesaver.getCurrentDocumentNumber()

[Nathan Do]

Thank you, Andrea. That's good to know!

I'm not sure if it's a bug but getCurrentPageNumber got some weird behavior 

Let's say Article 1 has 3 pages. 

When I change from Article 2 page 1 back to -> Article 1 page 3, this function return CurrentPageNumber = 1 (which correctly should be 3). It's totally fine if page changed forward though (i.e. from Page 3/Article 1 -> Page 1/Article 2)

[Andrea Campi]

On Sat, Nov 24, 2012 at 6:47 AM, Nathan Do <natha...@gmail.com> wrote:

Thank you, Andrea. That's good to know!

I'm not sure if it's a bug but getCurrentPageNumber got some weird behavior 

Let's say Article 1 has 3 pages. 

When I change from Article 2 page 1 back to -> Article 1 page 3, this function return CurrentPageNumber = 1 (which correctly should be 3). It's totally fine if page changed forward though (i.e. from Page 3/Article 1 -> Page 1/Article 2)

I can't exclude there may be some bugs there, but I would be very surprised.

If that was the case, the page number displayed in the chrome would be wrong too, but I've never ever seen that happen.

IIRC we also have a good number of unit tests for this.

It's more likely to be a timing issue.

Are you calling this from an event handler? If so, which event?

[Nathan Do]

Hi Andrea, 

I am calling it from the event treesaver.pageschanged

yeah, surprisingly the page number in chrome is fine =.= 

And it only occur if I move backward from Article 2 -> 1

[Nathan Do]

It seems this problem was fixed in 0.10 already, so please ignore my previous reply !!! Thank you !

Nathan

[Andrea Campi]

On Sat, Jan 19, 2013 at 5:12 AM, Nathan Do <natha...@gmail.com> wrote:

It seems this problem was fixed in 0.10 already, so please ignore my previous reply !!! Thank you !

That's great news Nathan, glad it's fixed now!

Andrea