Добавление pushState() и popstate в мой проект

Question

У меня есть проект, над которым я работаю, у которого есть галерея. Как работает галерея, пользователь получает список изображений, и каждое изображение является «альбомом», который ссылается на большее количество изображений для данной галереи. В настоящее время я работаю, но когда пользователь нажимает кнопку «Назад» после перехода в выбранную галерею, они не возвращаются к списку альбомов. Например, если вы являетесь главной страницей, нажмите на страницу альбомов и откройте галерею. После нажатия кнопки «Назад» вы вернетесь на домашнюю страницу.

Итак, я решил исправить это, я могу использовать историю api и использовать pushState и popstate. Моя проблема в том, что я не смог заставить ее работать, и я не уверен, где разместить функции в моем сценарии.

Если вы хотите у меня есть живая версия сайта я работаю здесь: Live Demo

Вот мой текущий сценарий:

(function(code) { 
    code(window.jQuery, window, document); 
}(function($, window, document) { 
    $(function() { 
    initialize(); 
    }); 

    function initialize() { 
    $.getJSON('/assets/js/images.json', function(json) { 
     $.each(json.albums, function(i, item) { 
     var photos = item.photos, 
      name = item.name, 
      id  = item.id; 

     showAlbums(photos, name, id); 
     }); 
    }); 
    } 
    function showAlbums(p, n, i) { 
    var albums = $('.albums'), 
     gallery = $('.gallery'), 
     album  = $('#templates #album .thumb').clone(true), 
     thumbnail = album.find('.thumbnail'), 
     image  = album.find('.image'), 
     caption = album.find('.caption h4'); 

    thumbnail.attr('href', '#').attr('title', n).attr('data-url', i); 
    image.attr('src', p[0].href).attr('alt', n); 
    caption.html(n); 

    albums.append(album); 

    album.on('click', 'a', function(e) { 
     e.preventDefault(); 
     albums.hide(); 
     gallery.empty().show(); 
     document.title = "Schultz | " + n; 
     $.each(p, function(i, item) { 
     var photo = item.href; 
     showGallery(photo, n); 
     }); 
    }); 
    } 
    function showGallery(p, n) { 
    var gallery = $('.gallery'), 
     images = $('#templates #gallery .thumb').clone(), 
     link = images.find('.thumbnail'), 
     image = images.find('.thumbnail img'); 

    link.attr('href', p).attr('title', n).attr('data-gallery', ''); 
    image.attr('src', p).attr('alt', n); 

    gallery.append(images); 
    } 
})); 

Любая помощь приветствуется, спасибо

Answer 1

По существу, вы хотите реорганизовать обработчик кликов вашего альбома в функцию, которую можно вызвать за пределами инициализации, чтобы построить альбомный вид, а затем вызвать эту функцию, когда альбом cli cked, и на popstate (назад/вперед).

Чтобы это произошло, вы должны хранить ссылку на данные JSON, которые вы пытаетесь создать галереи (либо сами данные, либо XHR, которые вы использовали для его получения). Таким образом, мы можем написать функцию showAlbum, которая вместо этого использует индекс или идентификатор, который мы можем использовать для доступа к выбранному альбому в данных.

Так что-то вроде этого:

// As you're doing your initialization, process the JSON array of albums 
// into a hash by ID (this is one of many ways to go about this, a more 
// robust solution would be to use the XHR promise to ensure the JSON is 
// always there when you need it). 
var albumData = {}; 

function initialize() { 
    $.getJSON('/assets/js/images.json', function(json) { 
    $.each(json.albums, function(i, item) { 
     var photos = item.photos, 
      name = item.name, 
      id  = item.id; 

     // Same as you have now, but with this line: 
     albumData[id] = item; 

     showAlbums(photos, name, id); 
    }); 
    }); 
} 


// Then we create a function to show an album by ID, essentially the same as 
// your click handler now, but retrieving the data from the structure we 
// built out of the JSON. 
function showAlbumById (id) { 
    e.preventDefault(); 
    var album = albumData[id] 
    , photos = album.photos 
    , name = album.name; 
    albums.hide(); 
    gallery.empty().show(); 
    document.title = "Schultz | " + n; 
    $.each(photos, function(i, item) { 
    showGallery(item.href, name); 
    }); 
}); 

Тогда вы замените свой альбом обработчик щелчка вместо этого нажать состояние и вызвать эту функцию. Здесь я использую переменную запроса для представления состояния в URL-адресе и theAlbumId для ясности (в коде, на который ссылается i). Если вы добавите кнопку «назад к альбомам», вы сделаете аналогичный обработчик, но нажмете URL без запроса var.

album.on('click', 'a', function(e) { 
    e.preventDefault(); 
    history.pushState({}, '', '?id='+theAlbumID); 
    showAlbumById(theAlbumId); 
}); 

Это должно обрабатывать часть вещей PushState, но полезная часть вещей требует больше работы. Нам нужно иметь возможность идти как назад, так и вперед между обоими государствами: показывать один альбом или показывать индекс альбома. Для этого вам нужно добавить обработчик для события popstate.

// define `onpopstate` or add a listener for `popstate` on the window 
window.onpopstate = function (state) { 
    // pseudocode, you'd need to write or find a function to pull query vars 
    var albumId = getQueryParameter('id'); 

    // if an album ID is in the query string, show it 
    if (albumId) { 
    showAlbumById(albumId); 
    } 
    // otherwise show the index (this should probably be another function) 
    else { 
    albums.show(); 
    gallery.empty().hide(); 
    document.title = "Schultz"; 
    } 
}; 

Затем, наконец, для обработки пользователей обновить страницу или посетив альбом URL напрямую, вы хотели бы также проверить строку запроса для альбома ID на странице загрузки и показать альбом так же, как в popstate (popstate в некоторых браузерах работает на загрузке страницы, но это не должно быть)