Как при помощи barba.js менять активный пункт меню?

Question

[Genri_Rus]

Допустим человек кликнул по ссылке и перешел на другую страницу, как менять активный пункт меню в зависимости от страницы ?

var transitionAnimation = Barba.BaseTransition.extend({
      
 start: function() {

    Promise
      .all([this.newContainerLoading, this.startTransition()])
      .then(this.fadeIn.bind(this));

  },

  startTransition: function() {

    var transitionPromise = new Promise(function(resolve) {
      
     var outTransition = new TimelineMax();
        outTransition
      
                .to(".title", 1, {y:-50, autoAlpha: 0, ease: Power2.easeOut})
                .set(".color-wipe", {display:'block', y: "100%"}, "-=0.7")
                .staggerFromTo(".color-wipe", 1, {y: "100%"},{y: "-100%", ease: Expo.easeOut}, 0.2, "-=0.7")
        
        .to(".loader", 1, {autoAlpha:1, onComplete: function() {
            resolve();
        }},)
                .staggerFromTo(".color-wipe", 1, {y: "-100%"},{y: "-200%", ease: Expo.easeIn}, 0.2,"-=0.5")
        .set(".color-wipe", {display:'none'})
    });
    return transitionPromise;
  },
           fadeIn: function() {
               
               $(window).scrollTop(0);
               
                var _this = this;
                var $el = $(this.newContainer);

                TweenMax.set($(this.oldContainer), { display: "none" });
                TweenMax.set($el, { visibility: "visible", opacity: 0, });

                TweenMax.to(".loader", 1, {y:-50, autoAlpha: 0, ease: Expo.easeOut})
               TweenMax.fromTo(".title", 1.5, {y:30, autoAlpha: 0},{delay:0.8, y:0, autoAlpha: 1, ease: Expo.easeOut})

                TweenMax.to($el, 0.1, {
                    opacity: 1,
                    onComplete: function() {
                        _this.done();
                        console.log("done");
                    }
                });
            }
        });

Barba.Pjax.getTransition = function() {
  return transitionAnimation;
};

Comments

[Владимир Коротенко]

if(window.location.href.indexOf('cards.html') > -1){
// select menu item
var carditemmenu = document.getElementById('cardItem');
// делаете что то с пунктом меню
carditemmenu.classList.add("mystyle");
}

[Владимир Коротенко]

Плюс гляньте в документацию, там есть роутер, соответственно можно определить текущую страницу, мой предыдущий код для общего случая, работает вне зависимости от фреймворка

[Genri_Rus]

Владимир Коротенко, спасибо

Т.е. нужно все время делать проверки ?

if(window.location.href.indexOf('index.html') > -1){
// select menu item
var carditemmenu = document.getElementById('cardItem');
// делаете что то с пунктом меню
carditemmenu.classList.add("mystyle");
}

if(window.location.href.indexOf('cards.html') > -1){
// select menu item
var carditemmenu = document.getElementById('cardItem');
// делаете что то с пунктом меню
carditemmenu.classList.add("mystyle");
}

[Владимир Коротенко]

В момент смены страницы. Плюс зачищать стили.
Впрочем почитайте вот этот топик, там уже есть готовое решение.
https://github.com/barbajs/barba/issues/43

[Genri_Rus]

Владимир Коротенко, а у меня почему-то проблема

Я добавил inputmask для input, но они перестали инициализироваться

Что можно сделать, нужна callback функция ?

[Владимир Коротенко]

Я не совсем понял как вы это сделали и как input относится к меню?

В общем случае проверка выполняется заполнением регекспа в параметре pattern
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Попробуйте так. ну и покажите код.

[Genri_Rus]

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

Типа:

$('input["type=tel"]').inputmask({mask: "[phone]", showMaskOnHover: false});

Но он теперь перестал инициализироваться

Я пробовал при помощи

Barba.Dispatcher.on('linkClicked', function(el) {
   $('input["type=tel"]').inputmask({mask: "[phone]", showMaskOnHover: false});
});

Но все равно ничего не работает

[Владимир Коротенко]

Не совсем понял, вы по моему путаете последовательность.
Этот плагин вообще не связан с переходами, он навешивает маску на уже созданные инпуты.

В общем лучше привести полный код вашего проекта.

[Genri_Rus]

Владимир Коротенко, но этот плагин реализует Ajax подгрузки контента, а это значит, что все события нужно через такой код прогонять

$(document).on('submit', '#contacts-form-send', function(e) { 
  // тут какой-то код отправки формы
});

Но я решил вопрос с маской, после вызова функции типа:

TweenMax.to($el, 0.1, { opacity: 1, onComplete: function() {
            $('#phone').inputmask({mask: "[phone]", showMaskOnHover: false});
            _this.done();
            }
        });

После этого у меня маски все начинают работать

[Genri_Rus]

Владимир Коротенко, а может вы знаете, как сделать проверку, чтобы маски у input'ов запускались только на определенных страницах при переходах ?

[Владимир Коротенко]

Выполняйте проверку при загрузке страницы, соответственно в этом месте все контролы точно проинициализированы и с ними можно работать.

// Shorthand for $( document ).ready()
$(function() {
console.log( "ready!" );
});

[Genri_Rus]

Владимир Коротенко, а какую именно делать проверку ?

$(function() {
    $('#phone').inputmask({mask: "[phone]", showMaskOnHover: false});
});

У меня так не работает

Я пытался что-то такого:

if (Barba.HistoryManager.prevStatus().namespace === 'contacts') {
        console.log('ok');
    }

[Владимир Коротенко]

Туплю, сразу не заметил этот код.
Вот этот кусок вашего кода должен работать. Посмотрите в консоли браузера какие ошибки. И добавьте console.log по коду.
Так вы будете знать какой код выполнился, а какой фреймворк тихо проглотил.

$(function() {
$('#phone').inputmask({mask: "[phone]", showMaskOnHover: false});
});

[Genri_Rus]

Владимир Коротенко, в консоли никаких ошибок нет

Barba.js поглотил данный процесс, т.к. ajax не перезагружает страницу

Может что-то типа такого ?

if (Barba.HistoryManager.prevStatus().namespace === 'contacts') {
        showMasks();
    }

function showMasks() {
 $('#phone').inputmask({mask: "[phone]", showMaskOnHover: false});
}

[Владимир Коротенко]

Должно сработать. Большой вопрос когда это дерево проинициализируется.

Можно правда сделать хак и запускать это через таймер с задержкой

setTimeout(showMasks,500);

[Genri_Rus]

Владимир Коротенко, как оказалось - заработало только так:

$(function() {
var transitionAnimation = Barba.BaseTransition.extend({
      
 start: function() {

    Promise
      .all([this.newContainerLoading, this.startTransition()])
      .then(this.fadeIn.bind(this));

  },

  startTransition: function() {

    var transitionPromise = new Promise(function(resolve) {
      
     var outTransition = new TimelineMax();
        outTransition
      
                .to(".title", 1, {y:-50, autoAlpha: 0, ease: Power2.easeOut})
                .set(".color-wipe", {display:'block', y: "100%"}, "-=0.7")
                .staggerFromTo(".color-wipe", 1, {y: "100%"},{y: "-100%", ease: Expo.easeOut}, 0.2, "-=0.7")
        
        .to(".loader", 1, {autoAlpha:1, onComplete: function() {
            resolve();
        }},)
                .staggerFromTo(".color-wipe", 1, {y: "-100%"},{y: "-200%", ease: Expo.easeIn}, 0.2,"-=0.5")
        .set(".color-wipe", {display:'none'})
    });
    return transitionPromise;
  },
           fadeIn: function() {
               
               $(window).scrollTop(0);
               
                var _this = this;
                var $el = $(this.newContainer);

                TweenMax.set($(this.oldContainer), { display: "none" });
                TweenMax.set($el, { visibility: "visible", opacity: 0, });

                TweenMax.to(".loader", 1, {y:-50, autoAlpha: 0, ease: Expo.easeOut})
               TweenMax.fromTo(".title", 1.5, {y:30, autoAlpha: 0},{delay:0.8, y:0, autoAlpha: 1, ease: Expo.easeOut})

                TweenMax.to($el, 0.1, {
                    opacity: 1,
                    onComplete: function() {
                        _this.done();
                        console.log("done");
                    }
                });
            }
        });

Barba.Pjax.getTransition = function() {
  return transitionAnimation;
};
});

Я добавил barba.js $(function() { });
А есть аналог на нативном javascript'e ?

[Владимир Коротенко]

Попробуйте вот это
https://www.competa.com/blog/cross-browser-documen...

[Genri_Rus]

Владимир Коротенко, а все равно приходится на другой странице подключать

<script src="js/jquery.inputmask.min.js"></script>

Допустим человек перешел на страницу контакты, а потом при переходе на страницу главная - появляется ошибка, якобы не подключён inputmask

Дело в том, что Barba.HistoryManager.history сохраняет предыдущие события при переходе

[Genri_Rus]

Владимир Коротенко, я извиняюсь за беспокойство

А где на github про роутинг у barba.js почитать ?

Вы скидывали эту ссылку: https://github.com/barbajs/barba/issues/43

А есть что-то про роутинг ?

[Владимир Коротенко]

Как бы их репозиторий, внизу ссылка на документацию
https://github.com/barbajs/barba

https://barba.js.org/docs/v2/user/core.html

[Genri_Rus]

Владимир Коротенко, спасибо за ответ, а вы вообще пользовались их роутингом ?

И такой вопрос, у меня первая версия barba

Что нужно в данном случае поменять, чтобы заработало в barba 2 ?

var transitionAnimation = Barba.BaseTransition.extend({
      
 start: function() {

    Promise
      .all([this.newContainerLoading, this.startTransition()])
      .then(this.fadeIn.bind(this));

  },

  startTransition: function() {

    var transitionPromise = new Promise(function(resolve) {
      
     var outTransition = new TimelineMax();
        outTransition
      
                .to(".title", 1, {y:-50, autoAlpha: 0, ease: Power2.easeOut})
                .set(".color-wipe", {display:'block', y: "100%"}, "-=0.7")
                .staggerFromTo(".color-wipe", 1, {y: "100%"},{y: "-100%", ease: Expo.easeOut}, 0.2, "-=0.7")
        
        .to(".loader", 1, {autoAlpha:1, onComplete: function() {
            resolve();
        }},)
                .staggerFromTo(".color-wipe", 1, {y: "-100%"},{y: "-200%", ease: Expo.easeIn}, 0.2,"-=0.5")
        .set(".color-wipe", {display:'none'})
    });
    return transitionPromise;
  },
           fadeIn: function() {
               
               $(window).scrollTop(0);
               
                var _this = this;
                var $el = $(this.newContainer);

                TweenMax.set($(this.oldContainer), { display: "none" });
                TweenMax.set($el, { visibility: "visible", opacity: 0, });

                TweenMax.to(".loader", 1, {y:-50, autoAlpha: 0, ease: Expo.easeOut})
               TweenMax.fromTo(".title", 1.5, {y:30, autoAlpha: 0},{delay:0.8, y:0, autoAlpha: 1, ease: Expo.easeOut})

                TweenMax.to($el, 0.1, {
                    opacity: 1,
                    onComplete: function() {
                        _this.done();
                        console.log("done");
                    }
                });
            }
        });

Barba.Pjax.getTransition = function() {
  return transitionAnimation;
};

[Genri_Rus]

Владимир Коротенко, нужно типа так ?

var routes = [{
        path: '/index.html',
        name: 'home'
    }, {
        path: '/about.html',
        name: 'about'
    }];

    // tell Barba to use the router with your custom routes
    barba.use(barbaRouter, {
        routes
    });
    barba.init({
        routes: routes,
        transitions: [{
            name: 'custom-transition',
            from: {

                // define a custom rule based on the trigger class
                custom: ({ trigger }) => {
                    return trigger.classList && trigger.classList.contains('use-custom-transition');
                },

                // define rule based on multiple route names
                route: [
                    'index',
                    'about'
                ]
            },
            to: {

                // define rule based on multiple namespaces
                namespace: [
                    'home',
                    'about'
                ]
            },
            leave: function (data) {
                var done = this.async();
                TweenMax.to(data.current.container, 1, {
                    css: {
                        display: 'none',
                        opacity: 0
                    },
                    onComplete: done
                });
            },
            enter: function (data) {
                var done = this.async();
                TweenMax.from(data.next.container, 1, {
                    css: {
                        display: 'block',
                        opacity: 1
                    },
                    onComplete: done
                });
            }
        }]
    });

<div data-barba="wrapper">
  <div data-barba="container" data-barba-namespace="home">
    <!-- put here the content you wish to change between your pages -->
    <h1>Home Page</h1>
  </div>
</div>