☰

IMDb Search - Filter by Date (IA)

Filter movies by year on IMDB search results

  1. // ==UserScript==
  2. // @name         IMDb Search - Filter by Date (IA)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.0
  5. // @description  Filter movies by year on IMDB search results
  6. // @author       You
  7. // @match        https://*.imdb.com/find/?q=*
  8. // @icon         https://icons.duckduckgo.com/ip2/imdb.com.ico
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.   'use strict';
  14.  
  15.   // Create the filter button
  16.   const filterButton = document.createElement('button');
  17.   filterButton.textContent = 'Filter by date';
  18.  
  19.   // Add up and down arrows to the button
  20.   const upArrow = document.createElement('span');
  21.   upArrow.textContent = '▲';
  22.   upArrow.style.borderRadius = '100%';
  23.   upArrow.style.border = '1px solid #ccc';
  24.   upArrow.style.padding = '2px';
  25.   upArrow.style.margin = '0 10px 0 10px';
  26.   upArrow.style.cursor = 'pointer';
  27.  
  28.   const downArrow = document.createElement('span');
  29.   downArrow.textContent = '▼';
  30.   downArrow.style.borderRadius = '100%';
  31.   downArrow.style.border = '1px solid #ccc';
  32.   downArrow.style.padding = '2px';
  33.   downArrow.style.margin = '0 10px 0 10px';
  34.   downArrow.style.cursor = 'pointer';
  35.  
  36.   filterButton.appendChild(upArrow);
  37.   filterButton.appendChild(downArrow);
  38.  
  39.   // Add the filter button to the page
  40.   const listContainer = document.querySelector('section[data-testid="find-results-section-title"] ul.ipc-metadata-list.ipc-metadata-list--dividers-after');
  41.   listContainer.parentNode.insertBefore(filterButton, listContainer);
  42.  
  43.   // Function to extract the year from a movie item
  44.   function extractYear(movieItem) {
  45.     const yearSpan = movieItem.querySelector('.ipc-metadata-list-summary-item__tc a + ul > li:first-of-type > span');
  46.     if (yearSpan) {
  47.       const yearText = yearSpan.textContent;
  48.       if (yearText.includes('–')) {
  49.         const years = yearText.split('–').map(year => parseInt(year));
  50.         return { start: years[0], end: years[1] };
  51.       } else {
  52.         return parseInt(yearText);
  53.       }
  54.     } else {
  55.       return null;
  56.     }
  57.   }
  58.  
  59.   // Function to reorder movies by year
  60.   function reorderMovies(ascending) {
  61.     const movieItems = document.querySelectorAll('section[data-testid="find-results-section-title"] ul.ipc-metadata-list.ipc-metadata-list--dividers-after li.ipc-metadata-list-summary-item.find-result-item.find-title-result');
  62.     const sortedMovieItems = Array.from(movieItems).sort((a, b) => {
  63.       const yearA = extractYear(a);
  64.       const yearB = extractYear(b);
  65.       if (yearA && yearB) {
  66.         if (typeof yearA === 'object' && typeof yearB === 'object') {
  67.           return (yearA.start - yearB.start) * (ascending ? 1 : -1);
  68.         } else if (typeof yearA === 'object') {
  69.           return (yearA.start - yearB) * (ascending ? 1 : -1);
  70.         } else if (typeof yearB === 'object') {
  71.           return (yearA - yearB.start) * (ascending ? 1 : -1);
  72.         } else {
  73.           return (yearA - yearB) * (ascending ? 1 : -1);
  74.         }
  75.       } else if (yearA) {
  76.         return -1;
  77.       } else if (yearB) {
  78.         return 1;
  79.       } else {
  80.         return 0;
  81.       }
  82.     });
  83.     sortedMovieItems.forEach(movieItem => {
  84.       listContainer.appendChild(movieItem);
  85.     });
  86.   }
  87.  
  88.   // Add event listeners to the filter button and arrows
  89.   let ascending = true;
  90.   filterButton.addEventListener('click', () => {
  91.     reorderMovies(ascending);
  92.   });
  93.   upArrow.addEventListener('click', () => {
  94.     ascending = true;
  95.     upArrow.style.background = 'green';
  96.     upArrow.style.color = 'white';
  97.     downArrow.style.background = '';
  98.     downArrow.style.color = '';
  99.     reorderMovies(ascending);
  100.   });
  101.   downArrow.addEventListener('click', () => {
  102.     ascending = false;
  103.     downArrow.style.background = 'green';
  104.     downArrow.style.color = 'white';
  105.     upArrow.style.background = '';
  106.     upArrow.style.color = '';
  107.     reorderMovies(ascending);
  108.   });
  109. })();