Preserve/save state of list on browser back button, direct page links

Here is some rough code I’ve written to preserve/save the state of a list as a URL query string. e.g. mypage.html?q=jon

It can be used to bookmark a page or share a link with specific search, sort & pagination options chosen, as well as using the browser history API so the browser back button works as you’d expect.

Feel free to knock it into better shape and submit as a pull request if you want to. Note that the “plugins” parameter support was removed from list.js in v1.5.0, which is why this is just a simple function.

Gotchas:

• Overwrites any existing query string in your page URL
• Doesn’t save filter state
• Doesn’t save sort or search state if you call those functions directly - only the ‘automagical’ sort/search
• Ignores “data-order” and “data-insensitive” attributes for sort
• Requires browser History API ( https://caniuse.com/#feat=history ) to save state, but not to load it

function ListState(list) {
  var savestate = function() {
    // Preserve DOM state so can be restored on browser back button, etc
    // overwrites any existing URL query string
    var q = '';
    if (list.pagination !== undefined) {
      if (list.i > 1) q += "&i="+list.i;
      if (list.page != list.pageDefault) q += "&n="+list.page;
    };
    // TODO: read 'data-order'? and 'data-insensitive' attributes for sort
    for (var i = 0, els = list.utils.getByClass(list.listContainer, list.sortClass); i < els.length; i++) {
      var s = list.utils.classes(els[i]);
      if (s.has('desc')) q += "&sd="+i; // numeric sort field gives a shorter URL
        else if (s.has('asc')) q += "&sa="+i;
    };
    if (list.searched) {
      var el = list.utils.getByClass(list.listContainer, list.searchClass, true);
      if (el) q += "&q="+encodeURIComponent(el.value);
    };
    history.replaceState(null, null, window.location.href.split('?')[0] + q.replace('&','?'));
  };
    
  function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  };

  // Restore page/search/sort state from query string if set
  // order of operations is important: search => sort => set page
  var sa = getUrlParameter('sa'), sd = getUrlParameter('sd'), q = getUrlParameter('q');
  if (q.length) {
    var el = list.utils.getByClass(list.listContainer, list.searchClass, true);
    if (el) el.value = q;
    list.search(q);
  };
  if (sa.length || sd.length) {
    var els = list.utils.getByClass(list.listContainer, list.sortClass);
    var el = els[parseInt(sa.length ? sa : sd,10)];
    var valueName = el ? list.utils.getAttribute(el, 'data-sort') : 0;
    if (valueName) list.sort(valueName, {order:sa.length ? "asc" : "desc"});
  };
  if (list.pagination !== undefined) {
    var i = parseInt(getUrlParameter('i'),10), n = parseInt(getUrlParameter('n'),10);
    list.pageDefault = list.page;
    if (i || n) list.show(i ? i : 1, n ? n : list.page);
  };      
  if (!!(window.history && history.pushState)) list.on('updated', savestate);
};

[Julianoe]

Indeed i tested it out and it works, adding my search keyword to the url, updated live. It does not update when clicking the filters so i added this little piece of code: It can work for a list of radio buttons. I’ll try to work out a more universal solution.

if (list.filtered){
 var filter = list.listContainer.querySelector('input:checked').value;
 if (filter) q += "&q="+encodeURIComponent(filter);
};

[Julianoe]

@Prkns where are you stuck at?

I took the code that @sheffieldnick put on the first comment of this issue. I added the part i talked about, see following code:

function ListState(list) {
  var savestate = function() {
    // Preserve DOM state so can be restored on browser back button, etc
    // overwrites any existing URL query string
    var q = '';
    if (list.pagination !== undefined) {
      if (list.i > 1) q += "&i="+list.i;
      if (list.page != list.pageDefault) q += "&n="+list.page;
    };
    // TODO: read 'data-order'? and 'data-insensitive' attributes for sort
    for (var i = 0, els = list.utils.getByClass(list.listContainer, list.sortClass); i < els.length; i++) {
      var s = list.utils.classes(els[i]);
      if (s.has('desc')) q += "&sd="+i; // numeric sort field gives a shorter URL
        else if (s.has('asc')) q += "&sa="+i;
    };
    if (list.searched) {
      var el = list.utils.getByClass(list.listContainer, list.searchClass, true);
      // adding the search in the url
      if (el) q += "&s="+encodeURIComponent(el.value);
    };
    

    // THIS THE PART I ADDED
    if (list.filtered){
      var filter = list.listContainer.querySelector('input:checked').value;
      // adding the filter in the url
      if (filter) q += "&q="+encodeURIComponent(filter);
    };

    history.replaceState(null, null, window.location.href.split('?')[0] + q.replace('&','?'));
  };

  function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  };

  // Restore page/search/sort state from query string if set
  // order of operations is important: search => sort => set page
  var sa = getUrlParameter('sa'), sd = getUrlParameter('sd'), q = getUrlParameter('q');
  if (q.length) {
    var el = list.utils.getByClass(list.listContainer, list.searchClass, true);
    if (el) el.value = q;
    list.search(q);
  };
  if (sa.length || sd.length) {
    var els = list.utils.getByClass(list.listContainer, list.sortClass);
    var el = els[parseInt(sa.length ? sa : sd,10)];
    var valueName = el ? list.utils.getAttribute(el, 'data-sort') : 0;
    if (valueName) list.sort(valueName, {order:sa.length ? "asc" : "desc"});
  };
  if (list.pagination !== undefined) {
    var i = parseInt(getUrlParameter('i'),10), n = parseInt(getUrlParameter('n'),10);
    list.pageDefault = list.page;
    if (i || n) list.show(i ? i : 1, n ? n : list.page);
  };
  if (!!(window.history && history.pushState)) list.on('updated', savestate);
};

I’ve put all this in a file named listState.js and imported in the file i use List.js

<script src="./js/list.min.js"></script>
<script src="./js/listState.js"></script>

then i have my code to initialize all this

<script type="text/javascript">
            var options = {
              valueNames: [
                { data: ['color']}
              ]
            };
            var myList = new List('items', options);
            ListState(myList);
            <?php // allows the checked status to be set accordingly to the url leading you to the page
            $page = get_query_var('q');
            if( ! empty( $page ) ) : ?>
            jQuery("input[value=<?= $page ?>]").attr('checked', true);
            <?php endif; ?>

            function resetList(){
              myList.search();
              myList.filter();
              myList.update();
              jQuery(".filter-all").prop('checked', true);
              jQuery('.filter').prop('checked', false);
              jQuery('.search').val('');
            };

            function updateList(){
              var values_color = jQuery("input[name=color]:checked").val();

              myList.filter(function (item) {
                var colorFilter = false;

                if(values_color == "all")
                {
                  colorFilter = true;
                } else {
                  colorFilter = item.values().color == values_color;

                }
                return colorFilter
              });
              myList.update();
            }

            jQuery(function(){
              jQuery("input[name=color]").change(updateList);

              myList.on('updated', function (list) {
                if (list.matchingItems.length > 0) {
                  jQuery('.no-result').hide()
                } else {
                  jQuery('.no-result').show()
                }
              });
            });
             
            // adding some sort of animation when updating see issue 366
            // https://github.com/javve/list.js/issues/366
            myList.on('updated', function (list) {
              jQuery('.list--list-item').addClass('animated fadeIn');
            });
          </script>

As you can see i’m using PHP. I simply take the value of query the user is coming from and check the corresponding radio button accordingly. The little bit i added allows it to update the query in the url when i click on of the different “color” radio buttons that i use to filter my list.