Как оптимизировать создание элемента?

Сергей, в очередной раз спасибо

А вот так сделать можно ?

function loadScripts(arrScr, arrScr2) {
      [arrScr, arrScr2].forEach(function(src) {

      var scr = document.createElement('script');

      scr.src = src;

      document.body.appendChild(scr);
   });
}

Как оптимизировать создание элемента?

Сергей, т.е. в данном случае только так ?

function loadScripts(arrScr, arrScr2) {
      [arrScr, arrScr2].forEach(function(src) {

      var scr = document.createElement('script');

      scr.src = src;

      document.body.appendChild(scr);
   });
}

Как оптимизировать создание элемента?

Сергей, у меня через function() не работает

Я прочитал, что:

Функциональный контекст – это причудливый способ сказать, к чему относится this. for, for/in и for/of сохраняют значение this из внешней области видимости, но обратный вызов forEach() будет иметь другое значение this, если вы не используете стрелочную функцию.

Т.е. foreach в данном случае не подойдет ?

Как оптимизировать создание элемента?

Сергей, просто у меня ошибки:

Uncaught TypeError: arrScr.forEach is not a function

Если так:

function loadScripts(arrScr) {
       arrScr.forEach(function(src) {
            var scr = document.createElement('script');
            scr.src = src;
            document.body.appendChild(scr);
        })
    }

Как оптимизировать создание элемента?

Сергей, спасибо

А без стрелочной функции тут работать не будет, типа так ?

function loadScripts(arrScr) {
       arrScr.forEach(function(src) {
            var scr = document.createElement('script');
            scr.src = src;
            document.body.appendChild(scr);
        })
    }

Как оптимизировать создание элемента?

Спасибо за ответ

Но у меня выскакивает ошибка:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Как оптимизировать создание элемента?

muryn.official, мне нужно подгружать скрипты только на определённой странице

Ка это можно сделать ?

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

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

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

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

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

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

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

$(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 ?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Владимир Коротенко, но этот плагин реализует 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();
            }
        });

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

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

Владимир Коротенко, спасибо за ответ, при переходе на другую страницу при помощи 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});
});

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

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

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

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

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

Что лучше всего использовать swup или html5 history API?

Типа такого ?

$(function(){
        const mainApp = $('.main-wrapper'); // получаем нашу обводку для контента
        mainApp.on('click', '.menu li a', function(e){// при клике на пункт меню получаем путь до href 
            e.preventDefault();
            History.pushState(null, document.title, $(this).attr('href'));
        });

        function loadPage(url) {            
           mainApp.css({opacity: 0.5});
           mainApp.load(url + " .menu-wrapper > *", function(){
                mainApp.css({opacity: 1});
            });
        }

        History.Adapter.bind(window, 'statechange',function(e){
            var State = History.getState();
            loadPage(State.url);
        });
});

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

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

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

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");
}

Как сделать такой эффект без перезагрузки страницы?

Спасибо за ответ
А данный вариант, который выше правильный ?

А если мне не нужно php, а просто html ?

И есть ли готовые похожие примеры ?

Как сделать анимацию пульсирующего текста?

Interface, у меня почему-то не открывается ссылка

Как возобновить заново анимацию, если окно скрыто?

Виталий, а вы не встречали случаем похожие анимации ?