workarounds for contain={true} and onScroll progress?

[makeitrein]

happy new year!

when contain is set to {true}, onScroll's final progress is less than expected since views no longer scroll to the very possible end...

image #1 shows that when fully scrolling to the end with contain = {false}, progress works as expected... this is when there are 7 views and viewsToShow={6}

image #2 illustrates the problem well - "Ander..." is the last view, the pager is fully scrolled, but progress remains in the 30% range because contain = {true}

before i go and see if i can hack together a math solution to the problem, is there a code-based solution that is recommended for this?

[souporserious]

Happy new years to you as well :) and sorry about that! Unfortunately, I'm tied up in other projects right now. But the relevant line of code for progress is here https://github.com/souporserious/react-view-pager/blob/master/src/Track.jsx#L35 which uses this method here https://github.com/souporserious/react-view-pager/blob/master/src/Pager.js#L377-L384 I wrote this library in somewhat of a hurry so apologies if some things don't make sense. I'm happy to answer any questions you have if you think you can fix it. Just let me know :)

[makeitrein]

whew, in the spirit of the holidays, just put together a potential fix that looks pretty clean - what's your opinion? i tried it against the example file, no visible bugs except for the animation pager... not sure if contain={true} can be used w/ every Track type

getTrackSize(includeLastSlide = true, getContainedTrackSize = false) {
    const {viewsToShow} = this.options
    let lastIndex = includeLastSlide ? this.views.length : this.views.length - 1

    let views = this.views.slice(0, lastIndex);

    /*
    for contained tracks, views that are visible at the end of the track must be filtered out to get the right size
     */
    if (getContainedTrackSize) views = views.filter((view, index) => !(index > (lastIndex - viewsToShow)))

    let size = 0
    views.forEach(view => {
      size += view.getSize();
    })

    return size
  }

componentWillReceiveProps({ trackPosition }) {
    const { pager } = this.context
    pager.setViewStyles(trackPosition)

    if (this.props.trackPosition !== trackPosition) {
      requestAnimationFrame(() =>
        // sometimes the pager will be contained and pager.getTrackSize will need to know that
        this.props.onScroll((trackPosition / pager.getTrackSize(false, pager.options.contain)) * -1, trackPosition)
      )
    }
  }

edit - didn't handle the viewsToShow = 'auto' case...

[souporserious]

Awesome, thanks! Is it possible you can put together a PR? I can review and merge it in if all looks well :)

[makeitrein]

sure thing - i'll have some time on the weekend to push something - 1st time github PR, wooo

On Tue, Jan 3, 2017 at 9:51 AM, Travis Arnold [email protected] wrote:

Awesome, thanks! Is it possible you can put together a PR? I can review and merge it in if all looks well :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/souporserious/react-view-pager/issues/49#issuecomment-270176564, or mute the thread https://github.com/notifications/unsubscribe-auth/AB-P73dEDbQcixuI7XKMv94yyV9Gpiqyks5rOoqRgaJpZM4LYtTC .