Item.js

// https://stackoverflow.com/questions/17612307/pushstate-what-exactly-is-the-state-object-for

function loadItem(ItemNumber) {

    $('#pageRoot').css('overflow-y', 'hidden');

    $('.LoadItem, #StonePage').show(); // Show modal and loader

    $.ajax({

        url: 'vendors/pages/Inventory/LandingPage/Item.php?number=' + ItemNumber,
        method: 'POST',
        data: {ItemNumber: ItemNumber},
        async: true,
        cache: false,
        error:

            function(jqXHR, strError) {

                if(strError == 'timeout') {
                    // Do something. Try again perhaps?
                    alert('Seems like there was an error loading this stones information.');
                }

            },

        success:

            function(data) {

                $('#StoneDetails').html(data);

            },

        timeout: 3000

    });

}

function ItemNumberHistory(ItemNumber) {

    var state = {ItemNumber: ItemNumber};

    var title = null;

    var path = '/Inventory/' + ItemNumber;

    history.pushState(state, title, path); // Add item number to URL/history

}

$(document).on('click', '.StoneLink', function(event) {

    var ItemNumber = $(this).attr('id'); // Get item number from ID;

    event.preventDefault();

    // Toggle nav on mobile
    if($(navContent).is(':visible')) {
        $(navContent).addClass('navHide'); // Hide nav on mobile
        $('#navToggleIcon').toggleClass('mdi-close mdi-menu'); // Toggle nav menu icon
    }

    loadItem(ItemNumber);

    ItemNumberHistory(ItemNumber); // Store ItemNumber as a state in history

});

function closeModal() {

    if($('#StonePage').is(':visible')) {

        $('#StonePage').hide();

        $('#pageRoot').css('overflow-y', 'auto');

        history.pushState(null, null, '/Inventory'); // Remove ItemNumber from URL path

    }

}

// Hide modal when close button
$(document).on('click', '#CloseModal', function() {
    closeModal();
});

// Hide modal on click away
$(document).on('click', '.head, #StonePage', function(event) {

    // If clicked anywhere [on #StonePage] outside of .modal
    if(!$('.modal').is(event.target) && $('.modal').has(event.target).length === 0) {
        closeModal();
    }

});

// Hide modal on esc key press
$(document).on('keydown', function(event) {

    // keyCode 27 is esc key
    if(event.keyCode == 27) {
        closeModal();
    }

});