swup/plugins/swupMergeHeadPlugin.js

Animated page transitions with css.

'use strict';

module.exports = {
    name: 'swupMergeHeadPlugin',
    options: { runScripts: false },
    exec: function exec(options, swup, getHTMLfromCache) {
        document.addEventListener('swup:contentReplaced', function () {
            var currentHead = document.querySelector('head');
            var newHead = getHTMLfromCache().querySelector('head');
            replaceHeadWithoutReplacingExistingTags(currentHead, newHead);
        });

        var replaceHeadWithoutReplacingExistingTags = function replaceHeadWithoutReplacingExistingTags(currentHead, newHead) {
            var oldTags = currentHead.children;
            var newTags = newHead.children;
            var oldTagsToRemove = [];
            var newTagsToRemove = [];

            for (var i = 0; i < oldTags.length; i++) {
                var oldTag = oldTags[i];
                var oldTagIdentifier = oldTag.outerHTML;
                var foundInNewHead = false;
                var newTag = void 0;
                for (var j = 0; j < newTags.length; j++) {
                    newTag = newTags[j];
                    var newTagIdentifier = newTag.outerHTML;

                    if (newTagIdentifier === oldTagIdentifier) {
                        foundInNewHead = true;
                        break;
                    }
                }

                if (foundInNewHead) {
                    newTagsToRemove.push(newTag);
                } else {
                    oldTagsToRemove.push(oldTag);
                }
            }

            for (var _i = 0; _i < newTagsToRemove.length; _i++) {
                newHead.removeChild(newTagsToRemove[_i]);
            }

            for (var _i2 = 0; _i2 < oldTagsToRemove.length; _i2++) {
                currentHead.removeChild(oldTagsToRemove[_i2]);
            }

            var added = newHead.children.length;
            var removed = oldTagsToRemove.length;

            var fragment = document.createDocumentFragment();
            for (var _i3 = 0; _i3 < newHead.children.length; _i3++) {
                fragment.appendChild(newHead.children[_i3]);
            }
            currentHead.appendChild(fragment);

            if (options.runScripts) {
                newHead.querySelectorAll('script').forEach(function (item) {
                    if (item.tagName == "SCRIPT" && (item.type == null || item.type == "" || item.type == "text/javascript")) {
                        var elem = document.createElement('script');
                        if (item.src != null && item.src != "") {
                            elem.src = item.src;
                        } else {
                            var inline = document.createTextNode(item.innerText);
                            elem.appendChild(inline);
                        }
                        if (item.type != null && item.type != "") {
                            elem.type = item.type;
                        }
                        currentHead.appendChild(elem);
                    } else {}
                });
            }

            swup.log('Removed ' + removed + ' / added ' + added + ' tags in head');
        };
    }
};