GNOME Bugzilla – Bug 768002
Remove need to scroll in epubs
Last modified: 2017-05-31 16:04:28 UTC
We want pagination a-la iBooks on iOS and macOS, as in: https://people.gnome.org/~hadess/gnome-books-examples/ibooks-ios/ https://people.gnome.org/~hadess/gnome-books-examples/ibooks-osx/
I've been trying to paginate the widget using css and javascript and I get something that "works". https://git.gnome.org/browse/libgepub/commit/?h=widget-pagination&id=848d51bb7f3903bbbe8c0fdd2ef0e65fc59bc598 I've added a checkbutton in the test-gepub to activate or deactivate the pagination and two buttons more to change between widget pages. The pagination js and css is based on the following stackoverflow comment: http://stackoverflow.com/a/9165698 What is needed to be done to consider this as completed?: * Fix the css of the last "page", I don't find the way to add right margin to make the last page look good. * Emit a signal when we are in the last/first page and the next/prev function is called, to control when we should change the chapter.
(In reply to Daniel Garcia from comment #1) > I've been trying to paginate the widget using css and javascript and I get > something that "works". > > https://git.gnome.org/browse/libgepub/commit/?h=widget- > pagination&id=848d51bb7f3903bbbe8c0fdd2ef0e65fc59bc598 > > I've added a checkbutton in the test-gepub to activate or deactivate the > pagination and two buttons more to change between widget pages. > > The pagination js and css is based on the following stackoverflow comment: > http://stackoverflow.com/a/9165698 > > What is needed to be done to consider this as completed?: > > * Fix the css of the last "page", I don't find the way to add right margin > to make the last page look good. > * Emit a signal when we are in the last/first page and the next/prev > function is called, to control when we should change the chapter. And a way to serialise the current "page" so that you can get back to the same location after saving the state, first without resizing the window, and then resizing the window (it obviously needs to work in both cases).
I'm moving this bug to libgepub product.
I've pagination working in this branch: https://git.gnome.org/browse/libgepub/log/?h=widget-pagination I've tested with some text books and it seems to work okay. I've not tested with books with images and I maybe we need to add some extra css to control that, and maybe we should add some custom css to force a margin in the widget. I'll make more tests, but I'll merge this to master soon, because it's extra functionality, doesn't break previous behaviour. Any comment, change or suggest is welcome.
One important thing is that the current implementation supports resize and we can store the "position", not the page, so if we resize, we can go to the previous position (a percentage 0-100) and depending of the widget size the page shown will be the nearest one. I've tried resizing and it seems to work well.
Created attachment 352241 [details] [review] Added pagination to the GepubWidget I've added a property to set pagination on/off so the webkitwebview will be shown with or without scroll. The pagination is done with the column-width css property, setting the "body" with the widget width and height and the column-width with the same widget width, so we change the scroll from vertical to horizontal. Using this combined with "overflow" css property and with the "scrollTo" javascript function we can control the page showed. The position in the book we've the chapter number and the the position inside this chapter, the position is a percentage that we can get and set with "gepub_widget_(g/s)et_pos". We store a percentage to make it valid if the widget size changes, the page is not the same, but the position is always valid. To make this work well we need to remove margin and padding from the body tag, because this affects the column-width.
Attachment 352241 [details] pushed as 2616050 - Added pagination to the GepubWidget
Note that the expectation is that for property "X", the getter is called _get_X, and the setter _set_X. I doubt that the introspection code can figure out that the "set_pagination()" function modifies the "paginate" property.
Created attachment 352949 [details] [review] Rename _set_pagination() to match property (paginate)
Created attachment 352950 [details] [review] Add _get_paginate() helper function
Created attachment 352951 [details] [review] Add guard to _set_paginate()
Attachment 352949 [details] pushed as 5a0a3f4 - Rename _set_pagination() to match property (paginate) Attachment 352950 [details] pushed as 7349151 - Add _get_paginate() helper function Attachment 352951 [details] pushed as c1fc28a - Add guard to _set_paginate()