Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

show multiple pages at a time for enhanced animations #150

Open
bartrail opened this Issue · 3 comments

2 participants

Conrad Barthelmes Finnsson
Conrad Barthelmes

I'd like to build a very (css)animation based web-app with pager.js where pages slide from left to right, animate like rotating squares and so on (should also support loading pages async). Maybe a bit like (reveal.js http://lab.hakim.se/reveal-js/#/)
To achieve these visual effects, its important to have more than one page visible at a time.
Is this currently possible out of the box or do you suggest writing an extension for pages that takes care of this? If so, do you have some hints for me to lead a basic direction? I would share this one with the community of course.

First ideas I am thinking of...

  • preload the 'next' page on beforeHide of the current page
  • (add it to the dom)
  • add transition-css
  • on afterShow of the new page when the transition is complete, remove/hide the old one

Or maybe some kind of group feature to set up id's in a VM?

Thanks.

Finnsson
Owner

It might be possible using the API that pager.fx should implement.

The object on pager.fx should implement

showElement: function (page, callback)

while showing a new element and

hideElement: function (page, callback)

while hiding the last element.

It might be possible to start showing the next page while the current page is still hiding simply by calling callback immediately in hideElement. The problem is that showElement is not aware of which page is hiding at the moment and hideElement is not aware of which page is being displayed. This is a clear miss in the API. Either hidePage and showPage should be augmented or maybe it's possible to solve the problem in ChildManager#showChild (see the code

oldCurrentChild.hidePage(function () {
    if (currentChild) {
        showCurrentChild();
    } else {
        onFailed();
    }
});

).

In ChildManager#showChild you got this.page that is a reference to the common "parent page" for the hiding and displaying pages. It might be possible to run the effect in showChild using some new property on this.page (some animation/transition that works on two pages, i.e. not using the effects on pager.fx).

Maybe something like

if(this.page.groupFX) {
  this.page.groupFX(oldCurrentChild, currentChild);
} else {
  oldCurrentChild.hidePage(....);
}

Feel free to hack away. I think this is a very useful and requested feature. Just think of

  • keeping the API backward compatible.
  • avoid reformatting/reindenting every single line (it makes git diff/git blame a sad panda)
  • keeping the fix small. I'm aiming at <5kb minified and gzipped (not counting optional css-files).
Conrad Barthelmes

Thanks for the heads up. I see what I can do and report back or cry for help :)

Conrad Barthelmes

I tried a lot achieve the desired behaviour in an API compatible way but none really worked out for me... The main reason is because I need to dynamically change the animation on same pages depending on the action that has happened. Though I'd really like to stic to pager.js (because I'm using knockout) and I'd like to have history management :) (and don't have time to implement it all by myself)

My current workaround looks like this:
in pager.js from line 308 I changed from

if (oldCurrentChild && oldCurrentChild === currentChild) {
    showCurrentChild();
} else if (oldCurrentChild) {
    oldCurrentChild.hidePage(function () {
        if (currentChild) {
            showCurrentChild();
        } else {
            onFailed();
        }
    });
} else if (currentChild) {
    showCurrentChild();
} else {
    onFailed();
}

to call showCurrentChild immediately and not after the callback:

if (oldCurrentChild && oldCurrentChild === currentChild) {
    showCurrentChild();
} else if (oldCurrentChild) {
    showCurrentChild();
    oldCurrentChild.hidePage(function () {
        if (currentChild) {
            // showCurrentChild();
        } else {
            onFailed();
        }
    });
} else if (currentChild) {
    showCurrentChild();
} else {
    onFailed();
}

afterwars I trigger my custom showElement and hideElement methods in my VM which uses jQuery Transit internally to achieve the desired animations.. This is far from beeing sophisticated, but right now it works. (The WebApp will be running locally on iOS - so asynchronous loading times aren't critical in the first place for me.. as long as this doesnt need to be placed online though..)

If you have any ideas or hints to extend your lib - I'll be happy to try it out.

PS. this is my page: { } binding:

<section id="globalWrapper" id="views.app.main" data-bind="foreach: pages_list">
  <section class="page-wrapper" data-bind="
    page: {
      role:           id == 'intro' ? 'start' : null,
      id:             id,
      title:          title,
      sourceLoaded:   $root.sourceLoaded,
      sourceCache:    true,
      sourceOnShow:   template_file,
      showElement:    function(page, callback) { $data.showPage(page, callback) },
      hideElement:    function(page, callback) { $data.hidePage(page, callback) },
      beforeShow:     function(page) { $data.beforeShow(page) },
      afterShow:      function(page) { $data.afterShow(page) },
      beforeHide:     function(page) { $data.beforeHide(page) },
      afterHide:      function(page) { $data.afterHide(page) }
    }
  "></section>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.