Merge pull request #5980 from agmckee/fix-publishers-subjects-graph-f…

…ilter Restore date filtering functionality to publishers and subjects pages.
internetarchive · Jan 5, 2022 · db2d35a · db2d35a
2 parents c4fe0be + 3d78a29
commit db2d35a
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/openlibrary/plugins/openlibrary/js/carousel/Carousel.js b/openlibrary/plugins/openlibrary/js/carousel/Carousel.js
@@ -175,6 +175,32 @@ const Carousel = {
                         });
                 }
             });
+
+            document.addEventListener('filter', function(ev) {
+                url.searchParams.set('published_in', `${ev.detail.yearFrom}-${ev.detail.yearTo}`);
+
+                // Reset the page count - the result set is now 'new'
+                loadMore.page = 2;
+
+                const slick = $(selector).slick('getSlick');
+                const totalSlides = slick.$slides.length;
+
+                // Remove the current slides
+                slick.removeSlide(totalSlides, true, true);
+                slick.addSlide('<div class="carousel__item carousel__loading-end">Loading...</div>');
+
+                $.ajax({ url: url, type: 'GET' })
+                    .then(function(results) {
+                        const works = results.works || results.docs;
+                        // Remove loading indicator
+                        slick.slickRemove(0);
+                        works.forEach(work => slick.addSlide(addWork(work)));
+                        if (!works.length) {
+                            loadMore.allDone = true;
+                        }
+                        loadMore.locked = false;
+                    });
+            });
         }
     }
 };

diff --git a/openlibrary/plugins/openlibrary/js/graphs/plot.js b/openlibrary/plugins/openlibrary/js/graphs/plot.js
@@ -92,10 +92,52 @@ export function loadEditionsGraph() {
             previousPoint = null;
         }
     });
+
+    placeholder.bind('plotclick', function (event, pos, item) {
+
+        if (item) {
+            plot.unhighlight();
+            const yearFrom = item.datapoint[0].toFixed(0);
+            applyDateFilter(yearFrom, yearFrom);
+
+            plot.highlight(item.series,item.datapoint);
+        }
+        else {
+            plot.unhighlight();
+        }
+    });
+
+    placeholder.bind('plotselected', function (event, ranges) {
+        plot = $.plot(placeholder, data,
+            $.extend(true, {}, options, {
+                xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
+                yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
+            })
+        );
+
+        const yearFrom = ranges.xaxis.from.toFixed(0);
+        const yearTo = ranges.xaxis.to.toFixed(0);
+        applyDateFilter(yearFrom, yearTo);
+    });
+
+    function applyDateFilter(yearFrom, yearTo, hideSelector='.chartUnzoom', showSelector='.chartZoom') {
+        document.dispatchEvent(new CustomEvent('filter', { detail: { yearFrom: yearFrom, yearTo: yearTo } }));
+        $(hideSelector).hide();
+        $(showSelector).removeClass('hidden').show();
+    }
+
     plot = $.plot(placeholder, data, options);
     dateFrom = plot.getAxes().xaxis.min.toFixed(0);
     dateTo = plot.getAxes().xaxis.max.toFixed(0);
 
+    $('.resetSelection').on('click', function() {
+        plot = $.plot(placeholder, data, options);
+
+        const yearFrom = plot.getAxes().xaxis.min.toFixed(0);
+        const yearTo = plot.getAxes().xaxis.max.toFixed(0);
+        applyDateFilter(yearFrom, yearTo, '.chartZoom', '.chartUnzoom');
+    });
+
     $('.chartYaxis').css({top: '60px', left: '-60px'});
 
     if (dateFrom === (dateTo - 1)) {