readium / SDKLauncher-iOS

A small iOS application to serve as a launcher/testbed for the Readium SDK.
BSD 3-Clause "New" or "Revised" License
71 stars 47 forks source link

reflow intra spine item page load event triggered too early #57

Open RichardPat opened 9 years ago

RichardPat commented 9 years ago

In a reflow document, when attempting to animate the uiwebview during a page transition within the same spine item, I discovered that the page loaded event is sent before the uiwebview visually updates.

Whilst experimenting with animations using javascript, I found a solution that renders the offset change before sending the page load event by animating an opacity change in the document. I'm not certain why it works, or if it's uiwebview specific, but I'm posting it here for further evaluation in the hopes that maybe a cleaner solution can be found.

In reflowable_view.js :

function redraw() {
    var offsetVal =  -_paginationInfo.pageOffset + "px";

    _$epubHtml.css("opacity", "0.01");

    if (_htmlBodyIsVerticalWritingMode)
    {   
        _$epubHtml.animate({
                           top: offsetVal,
                           opacity: 1
                           }, 0, function() {
                           });
    }
    else
    {
        var ltr = _htmlBodyIsLTRDirection || _htmlBodyIsLTRWritingMode;
        _$epubHtml.animate({
                           left: ltr ? offsetVal : "",
                           right: !ltr ? offsetVal : "",
                           opacity: 1
                           }, 0, function() {
                           });
    }

    showBook(); // as it's no longer hidden by shifting the position
}
bluefirepatrick commented 9 years ago

@RichardPat thank you for sharing this code. We tried this approach in our WKWebView based Readium reader and found that it did not reliably send the event after the page rendered. (The timing of these things seems so platform, device and book dependent). Unfortunately it seems like there is no reliable event from UIWebView or WKWebView that is sent after a successful render pass (which is a common gripe out there on the Internet) but it is certainly worth exploring more. If you find something interesting please share it. Thanks! Patrick

danielweck commented 9 years ago

Possibly duplicate of: https://github.com/readium/SDKLauncher-iOS/issues/53 See also: https://github.com/readium/readium-shared-js/issues/172 @JCCR has been working on this: https://github.com/readium/readium-shared-js/pull/179