Barba.js (аналог Pjax.js) и работа с ним

754

19 января 2017, 05:46

В общем-то, сейчас использую barba.js для перехода по страницам без перезагрузки и создания плавной анимации.

Не поленился соорудить пример, чтоб было понятие того, как это дело выглядит и работает.

Вот сокращенный вид кода:

document.addEventListener("DOMContentLoaded", function() { 
 
    Barba.Pjax.init(); 
    Barba.Prefetch.init(); 
 
    var FadeTransition = Barba.BaseTransition.extend({ 
        start: function() { 
            Promise 
                .all([this.newContainerLoading, this.fadeOut()]) 
                .then(this.fadeIn.bind(this)); 
        }, 
 
        fadeOut: function() { 
            return $(this.oldContainer).animate({ 
                opacity: 0 
            }).promise(); 
        }, 
 
        fadeIn: function() { 
            var _this = this; 
            var $el = $(this.newContainer); 
 
            $(this.oldContainer).hide(); 
 
            $el.css({ 
                visibility: 'visible', 
                opacity: 0 
            }); 
 
            $el.animate({ 
                opacity: 1 
            }, 400, function() { 
                _this.done(); 
            }); 
        }, 
 
        newContainer: function() { 
            var $newPageHead = $('<head />').html( 
                $.parseHTML( 
                    newPageRawHTML.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0], document, true 
                ) 
            ); 
        }, 
 
        done: function() { 
            var headTags = [ 
                "meta[name='keywords']", 
                "meta[name='description']", 
                "meta[property^='og']", 
                "meta[name^='twitter']", 
                "meta[itemprop]", 
                "link[itemprop]", 
                "link[rel='prev']", 
                "link[rel='next']", 
                "link[rel='canonical']" 
            ].join(','); 
            $('head').find(headTags).remove(); 
            $newPageHead.find(headTags).appendTo('head'); 
        } 
    }); 
 
    Barba.Pjax.getTransition = function() { 
        return FadeTransition; 
    }; 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/0.0.10/barba.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<ul class="uMenuRoot"> 
  <li><a href="/"><span>Home</span></a></li> 
  <li><a href="/about.html"><span>About us</span></a></li> 
  <li><a href="/contacts.html"><span>Contacts</span></a></li> 
</ul> 
 
<main id="barba-wrapper"> 
  <section class="barba-container middle"> 
    Page content		  
  </section> 
</main>

Перелопатил все что можно в поисках наличия решения. Итак вопрос! Можно ли заставить перезагружать содержимое <head>? То есть, извлечь содержимое данного тега и заменить уже загруженное.

Немного дополним вопрос, изменив задачу. Было бы неплохо подменять не все стили и скрипты из <head>, а только некоторые данные. Например, разметку OpenGraph, необходимую для кнопок "Поделиться".

Подробнее об анимации используемой в примере описано тут.

Собственно говоря, речь идет об этой части кода:

newContainer: function() {
var $newPageHead = $('<head />').html(
$.parseHTML(
newPageRawHTML.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0], document, true
)
);
},
done: function() {
var headTags = [
"meta[name='keywords']",
"meta[name='description']",
"meta[property^='og']",
"meta[name^='twitter']",
"meta[itemprop]",
"link[itemprop]",
"link[rel='prev']",
"link[rel='next']",
"link[rel='canonical']"
].join(',');
$('head').find(headTags).remove();
$newPageHead.find(headTags).appendTo('head');
}

Этой частью кода я хочу извлечь определенные элементы из <head>, именно со страницы которая загружается. Затем удалить эти же элементы после окончания анимации и заменить их полученными ранее.

После окончания анимации, выбранные элементы исчезают, но, новые не добавляются. Что еще изменить уже и не знаю. Потыкать код можно тут.