=Feedblock filters in the url and localStorage

Jake Vanderwerf

2026-01-07 694828458ac2103366e227986f01c259fe99849f

 src/feed/view.js

@@ -27,12 +27,20 @@
         requestIdleCallback(() => {
            this.initStore();
            this.initTaxonomies();

            this.processCachedFilters();
            this.processURLFilters();
            this.updateFilterUI();
            this.initGallery();
         }, { timeout: 2000 });
      } else {
         setTimeout(() => {
            this.initStore();
            this.initTaxonomies();

            this.processCachedFilters();
            this.processURLFilters();
            this.updateFilterUI();
            this.initGallery();
         }, 100);
      }
@@ -103,9 +111,6 @@
      if (this.config.source) defaults.source = this.config.source;

      this.filters = defaults;
      this.processCachedFilters();
      this.processURLFilters();
      this.updateFilterUI();
      this.defaults = {...defaults};
   }
   updateFilterUI() {
@@ -121,8 +126,8 @@
            if(group) {
               for (let input of group) {
                  let [filter, value] = [input.dataset.filter, input.value];
                  if (!Object.hasOwn(this.filters, filter)) break;
                  let doit = this.filters[filter] === value;
                  if (!Object.hasOwn(this.store.filters, filter)) break;
                  let doit = this.store.filters[filter] === value;
                  if (doit) {
                     input.checked = doit;
                     break;
@@ -131,13 +136,13 @@
            }
         });

         if (Object.hasOwn(this.filters, 'taxonomy')) {
            for (let [taxonomy, terms] of Object.entries(this.filters.taxonomy)) {
         if (Object.hasOwn(this.store.filters, 'taxonomy')) {
            for (let [taxonomy, terms] of Object.entries(this.store.filters.taxonomy)) {
               terms.forEach(termId => {
                  termId = parseInt(termId);
                  const term = this.selector.store.get(termId);
                  if (term) {
                     this.createTermElement(term);
                     this.createTermElement(termId);
                  }
               });
            }
@@ -204,6 +209,9 @@
         ...this.defaults,
         taxonomy: null
      });

      this.updateURL();
      this.saveToCacheFilters();
   }

   resetFilters(filters) {
@@ -213,6 +221,9 @@
         ... filters
      }
      this.store.setFilters(filters);

      this.updateURL();
      this.saveToCacheFilters();
   }

   getFieldId(taxonomy) {
@@ -338,31 +349,41 @@
   }

   processURLFilters() {
      if (this.filters.page > 1) return false;
      if (!this.isFirstPage()) return false;
      const params = new URLSearchParams(window.location.search);
      if (!params.toString()) return false;

      let shouldUpdate = false;
      this.allowedFilters.forEach(filter => {
         let value = params.get(`f_${filter}`);
         if (value) {
            shouldUpdate = true;
            this.filters[filter] = value;
         }
      });

      let hasTax = false;
      params.forEach((value, key) => {
         if (key.startsWith('f_tax_')) {
            hasTax = true;
            shouldUpdate = true;
            const taxonomy = key.replace('f_tax_','');
            this.taxFilters[taxonomy] = value.split(',').map(Number);
         }
      });
      if (shouldUpdate) {
         if (hasTax) {
            this.filters.taxonomy = this.taxFilters;
         }
         this.resetFilters(this.filters);
      }
      return true;
   }

   updateURL() {
      const params = new URLSearchParams();
      this.allowedFilters.forEach(key => {
         if (Object.hasOwn(this.filters, key) && this.filters[key] !== this.defaults[key]) {
            params.set(`f_${key}`, this.filters[key]);
         if (Object.hasOwn(this.store.filters, key) && this.store.filters[key] !== this.defaults[key]) {
            params.set(`f_${key}`, this.store.filters[key]);
         }
      });

@@ -371,29 +392,31 @@
            params.set(`f_tax_${tax}`, terms.join(','));
         }
      }

      const newURL = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
      if (newURL !== window.location.pathname) {
         window.history.pushState({filters:this.filters}, '', newURL)
      const currentURL = window.location.pathname + window.location.search;  // Change this line

      if (newURL !== currentURL) {
         window.history.pushState({filters:this.store.filters}, '', newURL);
      }
   }

   saveToCacheFilters() {
      // Save each filter that's changed from defaults
      Object.keys(this.filters).forEach(filter => {
         if (this.filters[filter] !== this.defaults[filter]) {
            this.cache.set(
               `${this.config.source}_${this.config.context}_${filter}`,
               this.filters[filter]
            );
      Object.keys(this.store.filters).forEach(filter => {
         const cacheKey = `${this.config.source}_${this.config.context}_${filter}`;

         if (this.store.filters[filter] !== this.defaults[filter]) {
            this.cache.set(cacheKey, this.store.filters[filter]);
         } else {
            this.cache.remove(cacheKey);
         }
      });

      // Also save taxonomy filters
      const taxCacheKey = `${this.config.source}_${this.config.context}_taxonomy`;
      if (Object.keys(this.taxFilters).length > 0) {
         this.cache.set(
            `${this.config.source}_${this.config.context}_taxonomy`,
            this.taxFilters
         );
         this.cache.set(taxCacheKey, this.taxFilters);
      } else {
         this.cache.remove(taxCacheKey);
      }
   }

@@ -438,10 +461,6 @@
                  this.ui.buttons.loadMore.hidden = !this.store.lastResponse?.has_more??true;
               }
               break;
            case 'filters-changed':
               this.updateURL();
               this.saveToCacheFilters();
               break;
         }
      });
   }