方形空间上的无限滚动获取类别过滤器

Question

I am using this code to infinite load a page on squarespace. My problem is the reloading doesn't capture the filtering that I have set up in my url. It cannot seem to 'see' the variables or even the url or categoryFilter in my collection. I've tried to use a .var directive but the lazy loaded items cannot see the scope of things defined before it. I'm running out of ideas here please help!

edit: I've since found the answer but gained another question.

I was able to use window.location.href instead of window.location.pathname to eventually get the parameters that way. Except this doesn't work in IE11 so now I have to search for this.

 <script>

 function infiniteScroll(parent, post) {

     // Set some variables. We'll use all these later.
     var postIndex = 1,
         execute = true,
         stuffBottom = Y.one(parent).get('clientHeight') + Y.one(parent).getY(),
         urlQuery = window.location.pathname,
         postNumber = Static.SQUARESPACE_CONTEXT.collection.itemCount,
         presentNumber = Y.all(post).size();

     Y.on('scroll', function() {

         if (presentNumber >= postNumber && execute === true) {
             Y.one(parent).append('<h1>There are no more posts.</h1>')
             execute = false;
         } else {

             // A few more variables.
             var spaceHeight = document.documentElement.clientHeight + window.scrollY,
             next = false;

             /*
                 This if statement measures if the distance from
                 the top of the page to the bottom of the content
                 is less than the scrollY position. If it is,
                 it's sets next to true.
             */
             if (stuffBottom < spaceHeight && execute === true) {
                 next = true;
             }

             if (next === true) {

                 /*
                     Immediately set execute back to false.
                     This prevents the scroll listener from
                     firing too often.
                 */
                 execute = false;

                 // Increment the post index.
                 postIndex++;

                 // Make the Ajax request.
                 Y.io(urlQuery + '?page=' + postIndex, {
                     on: {
                         success: function (x, o) {
                             try {
                                 d = Y.DOM.create(o.responseText);
                             } catch (e) {
                                 console.log("JSON Parse failed!");
                                 return;
                             }

                             // Append the contents of the next page to this page.
                             Y.one(parent).append(Y.Selector.query(parent, d, true).innerHTML);

                             // Reset some variables.
                             stuffBottom = Y.one(parent).get('clientHeight') + Y.one(parent).getY();
                             presentNumber = Y.all(post).size();
                             execute = true;

                         }
                     }
                 });
             }
         }
     });
 }

 // Call the function on domready.
 Y.use('node', function() {
     Y.on('domready', function() {
         infiniteScroll('#content','.lazy-post');
     });
 });


 </script>

Answer 1

I was able to get this script working the way I wanted.

I thought I could use:

Static.SQUARESPACE_CONTEXT.collection.itemCount

to get {collection.categoryFilter} like with jsont, like this:

Static.SQUARESPACE_CONTEXT.collection.categoryFilter

or this:

Static.SQUARESPACE_CONTEXT.categoryFilter

It didn't work so I instead changed

urlQuery = window.location.pathname

to

urlQuery = window.location.href

which gave me the parameters I needed.

The IE11 problem I encountered was this script uses

window.scrollY

I changed it to the ie11 compatible

Window.pageYOffset

and we were good to go!