Added comments to clarify some of the changes.

GoogleWebComponents · Oct 23, 2014 · 6a6fdcd · ebidel · Oct 23, 2014 · jeffposnick
1 parent d76865d
commit 6a6fdcd
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/demo_historic_videos.html b/demo_historic_videos.html
@@ -18,7 +18,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-    <title>&lt;google-youtube-video-wall&gt; Demo</title>
+    <title>Historic Videos from British Pathé</title>
     <script src="../platform/platform.js"></script>
     <link rel="import" href="google-youtube-video-wall.html">
   </head>

diff --git a/google-youtube-video-wall.html b/google-youtube-video-wall.html
@@ -532,6 +532,8 @@ <h1>{{video.snippet.title}}</h1>
 
         // We can take some shortcuts since we know that there won't be any nested objects within the two param objects.
         _paramsEqual: function(firstParams, secondParams) {
+          // First, check to make sure that for every key in firstParams, there's a key in secondParams, and both
+          // keys have values that are equal. If not, return false.
           for (var key in firstParams) {
             if (firstParams.hasOwnProperty(key)) {
               if (firstParams[key] !== secondParams[key]) {
@@ -540,12 +542,15 @@ <h1>{{video.snippet.title}}</h1>
             }
           }
 
+          // Then, check to make sure that all the keys secondParams are also present in firstParams.
+          // If secondParams has a key that's not in firstParams, return false.
           for (var key in secondParams) {
             if (secondParams.hasOwnProperty(key) && !firstParams.hasOwnProperty(key)) {
               return false;
             }
           }
 
+          // If those tests succeed, return true, since the keys/values in both sets of params match.
           return true;
         },
 
@@ -569,6 +574,16 @@ <h1>{{video.snippet.title}}</h1>
             this._nextPageToken = response.nextPageToken;
 
             this.async(function() {
+              // Additional pages of results are loaded dynamically when there's a scroll event and the user
+              // has scrolled close to the bottom of the container. (See this.handleResultsScroll)
+              // There's a bootstrapping issue, though, since if the initial request(s) don't return enough
+              // videos to trigger scroll bars, it's not possible for the user to trigger a scroll event and they're
+              // stuck with the initial results.
+              // Therefore, we check here to see whether there are no scroll bars (clientHeight == scrollHeight
+              // means there aren't any) and if there aren't, load in the next page of results.
+              // This check will be done each time there's an API response, so if the next page of results isn't
+              // enough to show scroll bars, another page will be loaded, until scroll bars are visible or until
+              // there are no more pages of results.
               if (this.$.resultspage.scroller.clientHeight == this.$.resultspage.scroller.scrollHeight) {
                 this.updateYouTubeApiParams();
               }