Copying across body classes

jhealey5 commented 7 years ago

Sometimes you need to access the classes on the body element, especially working with Wordpress. I'm not sure if this is possible with the current smoothstate.js but adding this code after the line: document.title = cache[url].title;

Seems to work.

var new_html = document.createElement('html');
new_html.innerHTML = cache[url].doc;
document.body.className = $(new_html).find('body')[0].className;

CHEWX commented 7 years ago

Another method would be the following:

<body>
    <div id="app>
        <div <?php body_class(); ?>>
            Content Here.
        </div>
    </div>
</body>

It doesn't need to be applied to the body element.

olddevyg commented 7 years ago

I needed the body classes to be updated too. First answer doesn't work anymore. Wasn't happy with the second one. Here is how I did it :

storePageIn: function (object, url, doc, id) {
        // var $newDoc = $(doc);

        // https://github.com/miguel-perez/smoothState.js/issues/228
        var newDoc = document.implementation.createHTMLDocument("tmp");
        newDoc.documentElement.innerHTML = doc;
        var $newDoc = $(newDoc);

        object[url] = { // Content is indexed by the url
          status: 'loaded',
          // Stores the title of the page, .first() prevents getting svg titles
          title: $newDoc.filter('title').first().text(),
          html: $newDoc.filter('#' + id), // Stores the contents of the page,
          bodyClass: $newDoc.filter('body').first().attr('class'),
        };
        return object;
      },

Then in updateContent function

            // Update the title
            document.title = cache[url].title;

            // Update body class
            // https://github.com/miguel-perez/smoothState.js/issues/327
            document.body.className = cache[url].bodyClass;

jesuismaxime commented 6 years ago

Is this piece of code will be include in a future release (or something similar) ?

CHEWX commented 6 years ago

@jesuismaxime I highly doubt it, I think the author has abandoned the project like many other authors have done on GitHub :(

garethhorner commented 5 years ago

@olddevyg Appreciate the explanation! Could you go into a little more detail on how to apply to Wordpress? Thanks in advance!

miguel-perez / smoothState.js

Copying across body classes #327