Javascript used for Wordpress theme using Elementor to update articles on archive template

ajax.js

String.prototype.toSlug = function ()
{
	var str = this;
	str = str.replace(/^\s+|\s+$/g, ''); // trim
	str = str.toLowerCase();

	// remove accents, swap ñ for n, etc
	var from = "àáäâèéëêìíïîòóöôùúüûñçěščřžýúůďťň·/_,:;";
	var to   = "aaaaeeeeiiiioooouuuuncescrzyuudtn------";

	for (var i=0, l=from.length ; i<l ; i++)
	{
		str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
	}

	str = str.replace('.', '-') // replace a dot by a dash 
		.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
		.replace(/\s+/g, '-') // collapse whitespace and replace by a dash
		.replace(/-+/g, '-') // collapse dashes
		.replace( /\//g, '' ); // collapse all forward-slashes

	return str;
}

document.addEventListener("DOMContentLoaded", function() {

//console.log('in ajax.js');

/* Setup the js-selector menu on top of archive page */
/* on page load: create .js-active-cat,  move current-menu-item into .js-active-cat */
/* on click of .js-active-cat: show menu */

var $ = jQuery
var widgetContainer = '.js-selector .elementor-widget-container' //parent element
var active = '.js-selector .js-active-cat' // ul holding the current menu item
var menu = '.js-selector .elementor-nav-menu'  // ul holding the nav

var $articleContainer = $('.elementor-posts--skin-js-projects-skin');

var $widgetContainer = $(widgetContainer);
var $menu = $(menu);
var id = $menu.attr('id');

// Add directional classes to articles to give it that random look.
addDirectionalClass( $articleContainer.find('article') );

// add container to hold the currently active term
$widgetContainer.prepend('<ul class="js-active-cat" role="button" tabindex="0" aria-label="Menu Toggle" aria-expanded="false" ><li class="menu-item menu-item-type-taxonomy"></li></ul>');
var $active = $(active);

// copy text of .current-menu-item to container
$menuItem = $menu.find('.current-menu-item');
menuItem = $menuItem.text();
$active.find('li').text( menuItem );


// Event on menu toggle.
// ignore clicks on current-menu-item
$active.on('click', function() {
    $this = $(this)
    if( ! $this.hasClass('current-menu-item') ){
        if($this.hasClass('js-open')) {
            $menu.removeClass('js-open')
            $this.removeClass('js-open')
            $this.attr('aria-expanded', 'false')
        } else {
            $menu.addClass('js-open')
            $this.addClass('js-open')
            $this.attr('aria-expanded', 'true')
        } 
    }
    return false;
});
    


// Place events on menu links
$menu.on('click', 'li', function(e) {
    var $this = $(this);
    var $link = $this.find('a');
    var url = $link.attr('href');
    var term = '';
    // Menu doesn't have the category term so it has to create it from the text.  If for some reason slugifying the text wouldn't work,
    // or the menu text is changed, the term can be put in the Link Relationship (XFN) field in the WordPres menu
    // (Use Screen Options and check Link Relationship if field not seen in menu item settings.)

    if ($link.attr('rel')) {
        term = $link.attr('rel');
    } else {
        term = $link.text().toSlug();
    }

    var data = {
        action: wp_local.action,
        term: term,
        url: url,
        posts_per_page: wp_local.posts_per_page
    };
    // send the ajax request
    $.get(wp_local.ajaxURL, data, function(res) {
        if(res.success) {
            updateNext( res.data.page, res.data.maxPages );
            removeList();
            appendList( res.data.html );
            wp_local.taxTerm = res.data.term;
            addDirectionalClass( $articleContainer.find('article'))
            updateMenu( $this );
            updateUrl( res.data.url );
        }
    })
    return false;
})

// Place event on Next button for pagination

var $pageInfo = getPaginationInfo();
var $next = getPaginationButton();
updateNext();
$next.on('click', nextEvent );

function nextEvent() {
    var currentPage = parseInt( $pageInfo.attr('data-page') );
    var maxPages = parseInt( $pageInfo.attr('data-max-page') );
    if (currentPage < maxPages ) {
        var data = {
            paged: currentPage + 1,
            action: wp_local.action,
            term: wp_local.taxTerm,
            posts_per_page: wp_local.posts_per_page
        };
        $.get(wp_local.ajaxURL, data, function(res) {
            if(res.success) {
                var articles = $.parseHTML( res.data.html );
                addDirectionalClass( articles );
                appendList( articles );
                updateNext(currentPage+1, maxPages);
            }
        });
    }
    return false;
}

// Return elementor element containing page and max-pages.  If does not exist, creates it and returns
function getPaginationInfo() {
    var $pageInfo = $('.e-load-more-anchor');
    if($pageInfo.length === 0) {
        $('[data-widget_type="archive-posts.js-projects-skin"]').append('<div class="e-load-more-anchor" data-page="1" data-max-page="1"></div>');
        $pageInfo = $('.e-load-more-anchor');
    }
    return $pageInfo;
}

// Return the Nav and Next button.  If does not exist, creates it and returns.
function getPaginationButton() {
    var $next = $('[data-widget_type="archive-posts.js-projects-skin"] .elementor-pagination .next');
    if($next.length === 0) {
        $('[data-widget_type="archive-posts.js-projects-skin"]').append(`<nav class="elementor-pagination" role="navigation" aria-label="Pagination">
        <a class="page-numbers next" href="#">Next »</a></nav>`);
        $next = $('[data-widget_type="archive-posts.js-projects-skin"] .elementor-pagination .next');
    }
    return $next;
}

// Updates pagination with current page and maxPages.  Hides next button if current page is >= maxpages
// Removes the previous button if found.
function updateNext( page=null, maxPages=null ){
        $pageInfo = getPaginationInfo();
        $next = getPaginationButton(); //creates if it doesn't
        $pageInfo.attr('data-page', page);
        $pageInfo.attr('data-max-page', maxPages);
        $pageinationNav = $('[data-widget_type="archive-posts.js-projects-skin"] .elementor-pagination');
        if(page >= maxPages) {
            $pageinationNav.css('display','none');
        } else {
            $pageinationNav.css('display','block');
        }
        $('[data-widget_type="archive-posts.js-projects-skin"] .elementor-pagination .previous').remove();

}
// Removes all articles
function removeList() {
  $articleContainer.empty();
}

// Appends articles
function appendList( html ) {
  $articleContainer.append(html);
}

// Update Menu with new active term.  Copies new item's text into toggle container.  Moves current-menu-item class and aria-current attribute
function updateMenu( $newActiveItem ) {
    $active.find('li').text( $newActiveItem.text() );
    $menu.find('.current-menu-item').removeClass('current-menu-item').find('a').removeAttr('aria-current');
    $newActiveItem.addClass('current-menu-item').find('a').attr('aria-current', 'page');
    
}

// Update the Address bar with the current URL
function updateUrl( url ) {
    window.history.pushState("js-projects", "Jones Studio Projects", url );
}

// Adds a random class to each article to shift them slighly
function addDirectionalClass( $articles ) {
    var c = ['js-left', 'js-right', 'js-bottom', 'js-center']

    for (const a of $articles){ 
    const r = Math.round(Math.random()*3);
    $(a).addClass(c[r])
    }
}
})