Single page support?

[thelonecabbage]

Is there a way to use the push.js transition features with a single page system (ie backbone)?

Transitioning in a new div?

[sindresorhus]

I was surprised there was no mention on this in the docs. Seems like a fairly common pattern these days. There should be a programmatic way to change pages.

[akre54]

totally agree. coupling a widget framework to a particular brand of page fetching can only lead to bad things. Can we get some dev love for this?

[jakiestfu]

Push.js hardly solved what I needed for my mobile web app, but it is an awesome start nonetheless. Some things I added include an 'beforepush' event, a 'filter' event for the data, a data-ignore="push-history" attribute, and I'm currently working on a prefetching method.

[epegzz]

👍

[n321203]

+1

This pattern is taking over the multi-page approach!

[romanbsd]

I guess that the first step would be making the swapContent function public. Not sure if it's enough, though.

[romanbsd]

FWIMC - the following proof of concept slides the provided Backbone view into view:

  PUSH.replaceWithView = function(view) {
    var dom = view.el, key, selector, barElement, newBarElement;

    for (key in bars) {
      selector = bars[key];
      barElement = document.querySelector(selector);
      newBarElement = dom.querySelector(selector);

      if (newBarElement) {
        swapContent(newBarElement, barElement);
        newBarElement.parentNode.removeChild(newBarElement);
      }
      else if (barElement) {
        barElement.parentNode.removeChild(barElement);
      }
    }

    selector = '.content';
    swapContent(dom.querySelector(selector), document.querySelector(selector), 'slidein');
  }

[jgillich]

I did this by extracting the code out of push.js (I don't use any of Ratchet's JavaScript so far). This sets the target variable to the link that has been clicked:

var isScrolling,
    target;

var findTarget = function(target) {
    var i;
    var toggles = document.querySelectorAll('a');

    for (; target && target !== document; target = target.parentNode) {
        for (i = toggles.length; i--;) {
            if (toggles[i] === target) {
                return target;
            }
        }
    }
};


var getTarget = function(e) {
    var target = findTarget(e.target);

    if (!target ||
        e.which > 1 ||
        e.metaKey ||
        e.ctrlKey ||
        isScrolling ||
        location.protocol !== target.protocol ||
        location.host !== target.host ||
        !target.hash && /#/.test(target.href)
       ) {
        return;
    }

    return target;
};

window.addEventListener('touchstart', function() {
    isScrolling = false;
});
window.addEventListener('touchmove', function() {
    isScrolling = true;
});
window.addEventListener('click', function(e) {
    var t = getTarget(e);
    if(t) target = t;
});

With that, it is easy to do the transition manually. First, remove the footer since it does not support transitions. Then apply the classes to the old content like:

oldContent.classList.add('sliding');
oldContent.classList.add(target && target.dataset.transition === 'slide-out' ? 'right' : 'left');
oldContent.addEventListener('transitionend', cb);

This requires you to have data-transition set to slide-in or slide-out on your links, just like with push.

[ndelage]

Just found this old thread. I've submitted a pull request to extract & expose the transition functionality from push.js to a new global function.

#684