apsolut · May 24, 2018 13:27 · May 24, 2018
diff --git a/barba-wp.js b/barba-wp.js
@@ -0,0 +1,118 @@
+/*
+ * apsoluttheme
+ * transitionss
+ * Barba.Pjax.Dom.containerClass
+ * Barba.Pjax.Dom.currentHTML
+ * Barba.Pjax.Dom.wrapperId
+ * @URLtransitions.js http://barbajs.org/events.html
+ */
+
+
+const getUrl = window.location;
+const getHomeUrl = getUrl.protocol + "//" + getUrl.host;
+
+//
+// Barba.js
+//
+
+Barba.Pjax.Dom.wrapperId = 'ajax-wrapper';
+Barba.Pjax.Dom.containerClass = 'ajax-content';
+Barba.Pjax.ignoreClassLink = 'no-ajax';
+
+var FadeTransition = Barba.BaseTransition.extend({
+    start: function() {
+        /**
+         * This function is automatically called as soon the Transition starts
+         * this.newContainerLoading is a Promise for the loading of the new container
+         * (Barba.js also comes with an handy Promise polyfill!)
+         */
+
+        // As soon the loading is finished and the old page is faded out, let's fade the new page
+        Promise
+            .all([this.newContainerLoading, this.fadeOut()])
+            .then(this.fadeIn.bind(this));
+
+    },
+
+    fadeOut: function() {
+        /**
+         * this.oldContainer is the HTMLElement of the old Container
+         */
+
+        //return $(this.oldContainer).animate({ opacity: 0 }).promise();
+        return $(this.oldContainer).animate({ opacity: 0 }).promise();
+
+
+    },
+
+    fadeIn: function() {
+        /**
+         * this.newContainer is the HTMLElement of the new Container
+         * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
+         * Please note, newContainer is available just after newContainerLoading is resolved!
+         */
+
+        var _this = this;
+        var $newContainer = $(this.newContainer);
+
+        $(this.oldContainer).hide();
+        $(window).scrollTop(0); // scroll to top here
+
+        $newContainer.css({
+            visibility : 'visible',
+            opacity : 0,
+            "margin-left" : "30px",
+        });
+
+        $newContainer.animate({
+            opacity: 1,
+            "margin-left" : 0,
+        }, 400, function() {
+            /**
+             * Do not forget to call .done() as soon your transition is finished!
+             * .done() will automatically remove from the DOM the old Container
+             */
+
+            _this.done();
+        });
+    }
+});
+
+/**
+ * Next step, you have to tell Barba to use the new Transition
+ */
+
+Barba.Pjax.getTransition = function() {
+    /**
+     * Here you can use your own logic!
+     * For example you can use different Transition based on the current page or link...
+     */
+
+    return FadeTransition;
+};
+
+Barba.Pjax.start()
+Barba.Prefetch.init();
+
+
+
+/**
+ * GET WP body classes
+ */
+Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container, newPageRawHTML) {
+
+    var response = newPageRawHTML.replace(/(<\/?)body( .+?)?>/gi, '$1notbody$2>', newPageRawHTML)
+    var bodyClasses = $(response).filter('notbody').attr('class')
+    $('body').attr('class', bodyClasses);
+
+
+});
+
+
+//regex
+// Barba.Dispatcher.on('newPageReady', (currentStatus, oldStatus, container, newPageRawHTML) => {
+//     let regexp = /\<body.*\sclass=["'](.+?)["'].*\>/gi,
+//         match = regexp.exec(newPageRawHTML);
+//     if(!match || !match[1]) return;
+//     document.body.setAttribute('class', match[1]);
+// });