MediaWiki:ItemCategorySearch.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * For any questions or comments on this code contact Loramin via the forum Private Message system.
 *
 * NOTE: This code would be shorter/simpler/easier to read if it was in ES6 instead of ES5, but
 *       since I can't guarantee that every user will have ES6 support (and since I didn't want to
 *       bother with Babel for something so small) I chose to use the (old/ugly) ES5 syntax.
 */

// URL on the wiki where we can get all of the categories
var categoriesUrl =
  'http://wiki.project1999.com/index.php?title=Special:Categories&offset=&limit=500';

/**
 * Fetches all of the available categories in the wiki
 */
var getCategories = function() {
  return $.get(categoriesUrl)
    .then(function(html) {
      var categories = $(html).find('.mw-spcontent li a').map(function(i, link) {
        return $(link).text();
      });
      return $.makeArray(categories);
    })
};

/**
 * Function for retrieving all item names from a single page (which one is determined by "fromItem"
 * for a provided category
 * @param {string} category - an item category, with or without "Category:" (eg. "Fashion: Leather")
 * @param fromItem - the item to start the pagination from (eg. "Impskin Gloves" would skip all
 *                   items from before "Impskin Gloves" and start the page on "Impskin Gloves".
 * @returns {Promise} - when this promise is resolved it will return an object with two
 *          properties:
 *            - items - the item names from the page
 *            - nextItem - the "fromItem" to get the next page (if any)
 */
var getItemsInCategoryPage = function(category, fromItem) {
  // Add "Category:" (unless the provided category already starts with it)
  if (!category.startsWith('Category:')) category = 'Category:' + category;

  // Build the URL
  var url = 'http://wiki.project1999.com/index.php?title=' + encodeURI(category);

  // Add a "frompage" parameter if we're trying to get any page other than the first
  if (fromItem) url += '&pagefrom=' + encodeURI(fromItem);

  // Go get the page
  return $.get(url)
    .then(function(html) {
      // jQuery-ify the returned HTML
      var $html = $(html);

      // Extract all of the <a> tags that look like: <li><a>Some Item</a></li>
      var $links = $html.find('li:not(#f-list li):not(.pBody li) a');

      // Map (and return) the item titles from within all of the links
      var itemNames = $links.map(function(i, link) {
        // Extract title
        return $(link).attr('title');
      });

      // jQuery overwrites the native "map" function with its own, which returns a jQuery object
      // (even when there isn't a single jQuery object or HTML element in the return value)
      // This fixes that.
      itemNames = $.makeArray(itemNames);

      // Grab the href of the first "next 200" link
      var nextHref = $html.find('a:contains("next 200")').eq(0).attr('href');

      // Extract the next item (if any)
      var match = nextHref && nextHref.match(/pagefrom=(.*?)#/);

      // Figure out if there is a nextItem (and if not return null instead of causing an error)
      var nextItem = match ? match[1] : null;

      // Return results
      return { itemNames: itemNames, nextItem: nextItem };
    });
};

var showNormalCursor = function() {
  $('body').css({ cursor: 'default'});
}

var showWaitCursor = function() {
  $('body').css({ cursor: 'wait'});
};

var getItemsInCategoryPages = function(category, nextItem, itemNames) {
  // Change the cursor to let the user know they need to wait
  showWaitCursor();

  // Go get all the items (and the next item) for the next page (or first page on first iteration)
  return getItemsInCategoryPage(category, nextItem)
    .then(function(result) {
      // Combine any itemNames from previous iterations with this one
      itemNames = (itemNames || []).concat(result.itemNames);

      if (result.nextItem) {
        // If there is a next item, get the items from a page that starts with it as the "pagefrom"
        return getItemsInCategoryPages(category, result.nextItem, itemNames);
      } else {
        // otherwise return what we have (and restore the cursor to normal)
        showNormalCursor();
        return itemNames;
      }
    });
};

/**
 * Helper function for finding items in array "left" which are also present in array "right"
 */
var findIntersection = function(left, right) {
  return left.filter(function(item) { // return all of the items in left ...
    return right.includes(item);      // ... which are also items in right
  });
};

/**
 * This is the main function which powers the entire page.  It takes 2-3 categories (if 0-1 are
 * provided it throws an error), looks up all items in those categories, and then returns only the
 * items which are present in all of those categories.
 */
var findCategoryIntersections = function(category1, category2, category3) {
  return Promise.all([
    getItemsInCategoryPages(category1), // go get the items in category 1
    getItemsInCategoryPages(category2) // and the ones in category 2
  ])
    .then(function(results) {
      // Figure out which items are in both categories
      var intersectionOf1And2 = findIntersection(results[0], results[1]);

      // If there's a third category ...
      if (category3) {
        // Go get its items and then return ...
        return getItemsInCategoryPages(category3)
          .then(function(category3Results) {
            // ... the interesection between those items and the previous interesection of #1 and #2
            return findIntersection(intersectionOf1And2 , category3Results);
          });
      }
      // Otherwise just return the intersection of #1 and #2
      return intersectionOf1And2;
    });
};

// "onCLick"
var handleSearchClick = function(e) {
  // Determine which categories the user picked
  var category1 = $('#category1').val();
  var category2 = $('#category2').val();
  var category3 = $('#category3').val();

  // Yell at them if they didn't pick at least two
  if (!category1 || !category2) return alert('Please select at least two categories');

  // Let them know to wait while go do the search
  showWaitCursor();
  findCategoryIntersections(category1, category2, category3)
    .then(function(results) {
      // Convert the results (['itemA', 'itemB', ...]) into <li><a>item</a></li> HTML
      var resultsHtml = results.map(function(item) {
        return '<li><a href="http://wiki.project1999.com/' + item + '">' + item + '</a>';
      });
      // Add the results HTML to the page and set the cursor back to normal
      $('#results').html(resultsHtml.join(''));
      showNormalCursor();
    });
};

// "onLoad"
showWaitCursor();  // Start the page off with the loading cursor, since we need to fetch categories
getCategories()
  .then(function(categories) {
    // Convert the categories (['categoryA', 'categoryB', ...]) into <option>category</option> HTML
    var categoryOptions = '<option></option>' + categories.map(function(category) {
      return '<option value="' + category + '">' + category + '</option>';
    });

    // Fill all three category selectors with the category options
    $('#category1Cell').html('<select id="category1">' + categoryOptions + '</select>');
    $('#category2Cell').html('<select id="category2">' + categoryOptions + '</select>');
    $('#category3Cell').html('<select id="category3">' + categoryOptions + '</select>');

    // Add the search button and results UL to the page (the wiki won't let us do it without JS)
    $('#controlsPlaceholder')
      .html('<button id="searchCategories">Search</button>')
      .after('<h2>Search Results</h2><ul id="results"></ul>')

    // Bind the search button to its handler and set the cursor back to normal (the page is ready)
    $('#searchCategories').click(handleSearchClick);
    showNormalCursor();
  });